From 5c327ebefe870d104dbbcb415498a14f22af3cf4 Mon Sep 17 00:00:00 2001
From: "smalruby3-editor-bot[bot]"
 <297607354+smalruby3-editor-bot[bot]@users.noreply.github.com>
Date: Sun, 26 Jul 2026 13:45:33 +0000
Subject: [PATCH 1/2] =?UTF-8?q?refactor(classroom):=20=E3=82=AF=E3=83=A9?=
 =?UTF-8?q?=E3=82=B9=E7=AE=A1=E7=90=86=E3=82=B5=E3=83=96=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E8=A9=95=E4=BE=A1=E7=94=BB=E9=9D=A2=E3=81=AB=E7=B5=B1=E4=B8=80?=
 =?UTF-8?q?=20(#1122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

みんなの課題カタログ・合言葉で取り込み・課題作成/再利用・クラス設定の各サブ画面を

評価画面（teacher-evaluation）のレイアウトにそろえた。

- カタログの紫枠を撤去して課題ボードの本文幅にそろえ、パンくず左端にマージンを統一

- 合言葉で取り込みの二重パディングを解消（.passcode-import-view）

- 見出しの紫（.shared-form-title）をやめ、評価画面と同じ濃い太字に統一

- プライマリを青塗り・セカンダリを白地+中立枠線に統一（紫のボタン群を置換）

- クラス設定の紫枠・ポップオーバーのカード枠/影を撤去して枠なしに統一

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../classroom-modal/classroom-modal.css       | 111 +++++++++++++-----
 .../teacher-passcode-import.jsx               |   2 +-
 2 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css b/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
index 44075ba0a0d..5cc3912919c 100644
--- a/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
+++ b/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
@@ -2383,8 +2383,9 @@
     font-size: 0.85rem;
 }
 
+/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
 .class-list-create-button {
-    background: #855cd6;
+    background: #4c97ff;
     color: white;
     border: none;
     border-radius: 0.5rem;
@@ -2393,6 +2394,10 @@
     cursor: pointer;
 }
 
+.class-list-create-button:hover {
+    background: #3d89f0;
+}
+
 .class-list-create-button:disabled {
     opacity: 0.5;
     cursor: default;
@@ -2628,10 +2633,12 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     font-size: 0.875rem;
 }
 
+/* 評価画面の見出し（.teacher-view-title）に統一: 濃い太字・紫を使わない（#1122）。 */
 .shared-form-title {
-    margin: 0;
-    font-size: 1rem;
-    color: #855cd6;
+    margin: 0.25rem 0 1rem;
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #575e75;
 }
 
 .shared-form-hint {
@@ -2724,12 +2731,17 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     cursor: pointer;
 }
 
+/* プライマリは評価画面と同じ青塗りに統一（#1122）。 */
 .shared-form-submit {
-    border-color: #855cd6 !important;
-    background: #855cd6 !important;
+    border-color: #4c97ff !important;
+    background: #4c97ff !important;
     color: white;
 }
 
+.shared-form-submit:hover {
+    background: #3d89f0 !important;
+}
+
 .shared-form-submit:disabled {
     opacity: 0.5;
     cursor: default;
@@ -2746,15 +2758,19 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
 
 /* --- みんなの課題: catalog (EPIC #1066 S3) --- */
 
+/* 枠なし（#1122）: 課題ボードの本文幅にそのまま乗せ、パンくず左端にそろえる。 */
 .shared-catalog {
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
     margin: 0.75rem 0;
-    padding: 1rem;
-    border: 1px solid hsla(260, 60%, 60%, 0.35);
-    border-radius: 0.5rem;
-    background: white;
+}
+
+/* 合言葉で取り込み（#1122）: 課題ボード内に描画されるため、ボード側が持つ
+   左右パディング（.assignment-board = 2rem）に二重で足さない。左端をパンくずに
+   そろえるため水平パディングは 0。 */
+.passcode-import-view {
+    padding: 0 0 1.25rem;
 }
 
 .shared-catalog-filters {
@@ -2948,8 +2964,9 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     color: hsla(225, 15%, 40%, 1);
 }
 
+/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
 .board-create-button {
-    background: #855cd6;
+    background: #4c97ff;
     color: white;
     border: none;
     border-radius: 0.5rem;
@@ -2958,6 +2975,10 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     white-space: nowrap;
 }
 
+.board-create-button:hover {
+    background: #3d89f0;
+}
+
 .board-create-button:disabled {
     opacity: 0.5;
     cursor: default;
@@ -3128,17 +3149,22 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     cursor: default;
 }
 
+/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
 .class-list-import-button {
     margin-left: 0.5rem;
-    border: 1px solid #855cd6;
+    border: 1px solid #d9d9d9;
     background: white;
-    color: #855cd6;
+    color: #575e75;
     border-radius: 0.5rem;
     padding: 0.5rem 1.25rem;
     font-size: 0.9rem;
     cursor: pointer;
 }
 
+.class-list-import-button:hover {
+    background: #f2f2f2;
+}
+
 .class-list-import-button:disabled {
     opacity: 0.5;
     cursor: default;
@@ -3157,13 +3183,14 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
 
 /* --- Class settings (inline card editor) --- */
 
+/* 紫枠をやめ、他の評価画面系レイアウトと同じ控えめな枠に統一（#1122）。 */
 .class-settings-form {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.9rem 1rem;
-    border: 1px solid #855cd6;
+    border: 1px solid #d9d9d9;
     border-radius: 0.5rem;
     background: white;
 }
@@ -3221,10 +3248,15 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     flex: 1;
 }
 
+/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
 .class-settings-save {
-    background: #855cd6 !important;
+    background: #4c97ff !important;
     color: white;
-    border-color: #855cd6 !important;
+    border-color: #4c97ff !important;
+}
+
+.class-settings-save:hover {
+    background: #3d89f0 !important;
 }
 
 .class-settings-save:disabled {
@@ -3274,8 +3306,10 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     font-size: 0.9rem;
 }
 
-.board-inline-create button {
-    background: #855cd6;
+/* プライマリ = 青塗り（評価画面に統一・#1122）。キャンセル（.popover-cancel）は
+   セカンダリのままにするため除外する。 */
+.board-inline-create button:not(.popover-cancel) {
+    background: #4c97ff;
     color: white;
     border: none;
     border-radius: 0.4rem;
@@ -3283,21 +3317,30 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     cursor: pointer;
 }
 
-.board-inline-create button:disabled {
+.board-inline-create button:not(.popover-cancel):hover {
+    background: #3d89f0;
+}
+
+.board-inline-create button:not(.popover-cancel):disabled {
     opacity: 0.5;
     cursor: default;
 }
 
+/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
 .board-reuse-button {
-    border: 1px solid #855cd6;
+    border: 1px solid #d9d9d9;
     background: white;
-    color: #855cd6;
+    color: #575e75;
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
     cursor: pointer;
     white-space: nowrap;
 }
 
+.board-reuse-button:hover {
+    background: #f2f2f2;
+}
+
 .board-reuse-button:disabled {
     opacity: 0.5;
     cursor: default;
@@ -3317,16 +3360,21 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     background: white;
 }
 
+/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
 .reuse-row-copy {
-    border: 1px solid #855cd6;
+    border: 1px solid #d9d9d9;
     background: white;
-    color: #855cd6;
+    color: #575e75;
     border-radius: 0.4rem;
     padding: 0.35rem 0.8rem;
     cursor: pointer;
     white-space: nowrap;
 }
 
+.reuse-row-copy:hover {
+    background: #f2f2f2;
+}
+
 .reuse-row-copy:disabled {
     opacity: 0.5;
     cursor: default;
@@ -3410,25 +3458,26 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     white-space: nowrap;
 }
 
-/* Floating (modal-like) inline forms: border + shadow lift them above the
-   list so their extent is obvious. */
+/* 枠なし（#1122）: 評価画面に合わせてカードフレーム（枠・影）を外し、
+   本文はボードの左端にそろえる。 */
 .board-popover {
-    border: 1px solid hsla(0, 0%, 0%, 0.15);
-    border-radius: 0.6rem;
-    background: white;
-    box-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.18);
-    padding: 1rem;
     margin: 0.75rem 0;
 }
 
+/* セカンダリ = 白地 + 中立の枠線（評価画面の .secondary-button に統一・#1122）。 */
 .popover-cancel {
-    border: 1px solid hsla(0, 0%, 0%, 0.2);
+    border: 1px solid #d9d9d9;
     background: white;
+    color: #575e75;
     border-radius: 0.4rem;
     padding: 0.5rem 1rem;
     cursor: pointer;
 }
 
+.popover-cancel:hover {
+    background: #f2f2f2;
+}
+
 .assignment-preview-header {
     display: flex;
     align-items: center;
diff --git a/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx b/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
index 7fcc1d05129..35c8fa846f2 100644
--- a/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
+++ b/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
@@ -24,7 +24,7 @@ const TeacherPasscodeImport = ({ group, isLoading, lookup, error, onLookup, onIm
     }, [onImport, passcode, group]);
 
     return (
-        <div className={styles.postAssignmentContainer} data-testid="classroom-phase-passcode-import">
+        <div className={styles.passcodeImportView} data-testid="classroom-phase-passcode-import">
             <div className={styles.phaseTitle}>
                 <FormattedMessage
                     defaultMessage="Import by passcode"

From 4b12a01cb817baa5e3cef5c5940a895b1e3f2b34 Mon Sep 17 00:00:00 2001
From: "smalruby3-editor-bot[bot]"
 <297607354+smalruby3-editor-bot[bot]@users.noreply.github.com>
Date: Mon, 27 Jul 2026 07:16:41 +0000
Subject: [PATCH 2/2] =?UTF-8?q?refactor(classroom):=20=E5=85=B1=E6=9C=89?=
 =?UTF-8?q?=E3=82=B9=E3=83=86=E3=83=83=E3=83=97=E3=81=AE=E5=B7=A6=E7=AB=AF?=
 =?UTF-8?q?=E3=82=92=E8=AA=B2=E9=A1=8C=E3=83=9C=E3=83=BC=E3=83=89=E5=86=85?=
 =?UTF-8?q?=E5=85=B1=E9=80=9A=E3=82=B3=E3=83=B3=E3=83=86=E3=83=8A=E3=81=AB?=
 =?UTF-8?q?=E3=81=9D=E3=82=8D=E3=81=88=E3=82=8B=20(#1122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

共有ステップ (teacher-share-step) が .post-assignment-container を使い、課題ボードの
2rem と二重に効いて左端が余分にインデントされていた。合言葉で取り込みと同じく
ボード内専用のパディング 0 コンテナに差し替えて左端をそろえた。

今後のコピペで自然にスタイルが合うよう、合言葉画面専用だった .passcode-import-view を
課題ボード内サブビュー共通の .board-inner-view にリネームし、共有ステップと共有した。
配信画面 (teacher-post-assignment) はボード外に描画され 2rem が正しいため
.post-assignment-container のまま据え置き。data-testid は不変。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/classroom-modal/classroom-modal.css   | 9 +++++----
 .../classroom-modal/teacher-passcode-import.jsx          | 2 +-
 .../components/classroom-modal/teacher-share-step.jsx    | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css b/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
index 9dff31e72b5..16b8599c614 100644
--- a/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
+++ b/packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
@@ -2779,10 +2779,11 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
     margin: 0.75rem 0;
 }
 
-/* 合言葉で取り込み（#1122）: 課題ボード内に描画されるため、ボード側が持つ
-   左右パディング（.assignment-board = 2rem）に二重で足さない。左端をパンくずに
-   そろえるため水平パディングは 0。 */
-.passcode-import-view {
+/* 課題ボード内サブビュー共通コンテナ（#1122）: 合言葉で取り込み・共有ステップなど、
+   課題ボード（.assignment-board）内に描画されるビューが共有する。ボード側が持つ
+   左右パディング（2rem）に二重で足さないよう水平パディングは 0 にし、左端を
+   パンくずにそろえる。ボード内に新しいサブビューを足すときもこのクラスを使う。 */
+.board-inner-view {
     padding: 0 0 1.25rem;
 }
 
diff --git a/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx b/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
index 35c8fa846f2..64962a64dcf 100644
--- a/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
+++ b/packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
@@ -24,7 +24,7 @@ const TeacherPasscodeImport = ({ group, isLoading, lookup, error, onLookup, onIm
     }, [onImport, passcode, group]);
 
     return (
-        <div className={styles.passcodeImportView} data-testid="classroom-phase-passcode-import">
+        <div className={styles.boardInnerView} data-testid="classroom-phase-passcode-import">
             <div className={styles.phaseTitle}>
                 <FormattedMessage
                     defaultMessage="Import by passcode"
diff --git a/packages/scratch-gui/src/components/classroom-modal/teacher-share-step.jsx b/packages/scratch-gui/src/components/classroom-modal/teacher-share-step.jsx
index f46fe709288..f508d22e046 100644
--- a/packages/scratch-gui/src/components/classroom-modal/teacher-share-step.jsx
+++ b/packages/scratch-gui/src/components/classroom-modal/teacher-share-step.jsx
@@ -36,7 +36,7 @@ const TeacherShareStep = ({ classroom, isLoading, lastShared, onShare, onCancel
     // 発行後の確認。限定公開なら合言葉を大きく表示し、配布を促す。
     if (lastShared) {
         return (
-            <div className={styles.postAssignmentContainer} data-testid="classroom-phase-share-step">
+            <div className={styles.boardInnerView} data-testid="classroom-phase-share-step">
                 <div className={styles.phaseTitle}>
                     <FormattedMessage
                         defaultMessage="Shared"
@@ -123,7 +123,7 @@ const TeacherShareStep = ({ classroom, isLoading, lastShared, onShare, onCancel
     }
 
     return (
-        <div className={styles.postAssignmentContainer} data-testid="classroom-phase-share-step">
+        <div className={styles.boardInnerView} data-testid="classroom-phase-share-step">
             <div className={styles.phaseTitle}>
                 <FormattedMessage
                     defaultMessage="Share this assignment"