提出物チェックの期限を変更にデザインを入れた

app/javascript/products.vue

@@ -88,13 +88,6 @@
 
 //- ダッシュボード
 div(v-else-if='isDashboard')
-  select(v-on:change='onDaysSelectChange($event)')
-    option(value='', disabled, selected, hidden) 未アサインの提出物の経過日数を選択
-    option(value='1') 1日経過 2日経過 3日以上経過
-    option(value='2') 2日経過 3日経過 4日以上経過
-    option(value='3') 3日経過 4日経過 5日以上経過
-    option(value='4') 4日経過 5日経過 6日以上経過
-    option(value='5') 5日経過 6日経過 7日以上経過
   template(v-for='product_n_days_passed in productsGroupedByElapsedDays') <!-- product_n_days_passedはn日経過の提出物 -->
     .a-card.h-auto(
       v-if='!isDashboard || (isDashboard && product_n_days_passed.elapsed_days >= 0 && product_n_days_passed.elapsed_days <= selectedDays + 2)')
@@ -139,7 +132,6 @@ div(v-else-if='isDashboard')
           span.card-header__count(v-if='selectedTab === "unassigned"')
             | （{{ countProductsGroupedBy(product_n_days_passed) }}）
       //- 共通化ここまで
-
       .card-list
         .card-list__items
           product(
@@ -162,6 +154,43 @@ div(v-else-if='isDashboard')
         v-bind:href='`/products/unassigned#${selectedDays}days-elapsed`',
         v-else)
         | <strong>{{ countAlmostPassedSelectedDays() }}件</strong>の提出物が、<br>8時間以内に{{ selectedDays }}日経過に到達します。
+    p.mt-4.text-sm.text-center
+      label.a-text-link(for='modal-on-days-select')
+        | 提出物チェックの期限を変更する。
+    input.a-toggle-checkbox#modal-on-days-select(type='checkbox')
+    .modal
+      label.modal__overlay(for='modal-on-days-select')
+      .modal-content
+        .modal-header
+          h2.modal-title
+            | 提出物チェックの期限を変更する。
+          label.modal-header__close(for='modal-on-days-select')
+        .modal-body
+          .modal__description.is-md
+            .a-short-text
+              p
+                | 現在の提出物チェックの期限は{{ selectedDays + 2 }}日（
+                span.a-inline-block.is-reply-warning
+                  | {{ selectedDays }}日経過
+                | 、
+                span.a-inline-block.is-reply-alert
+                  | {{ selectedDays + 1 }}日経過
+                | 、
+                span.a-inline-block.is-reply-deadline
+                  | {{ selectedDays + 2 }}日以上経過
+                | ）に設定されています。
+                | この変更はメンター全員の画面、Discordでの通知に影響します。
+          .form.mt-6.mx-auto.max-w-xs
+            .form__items
+              .form-item
+                .a-button.is-md.is-secondary.is-select.is-block
+                  select(v-on:change='onDaysSelectChange($event)')
+                    option(value='', disabled, selected, hidden) 提出物チェックの期限日数を変更する。
+                    option(value='1') 期限3日（1日経過 2日経過 3日以上経過）
+                    option(value='2') 期限4日（2日経過 3日経過 4日以上経過）
+                    option(value='3') 期限5日（3日経過 4日経過 5日以上経過）
+                    option(value='4') 期限6日（4日経過 5日経過 6日以上経過）
+                    option(value='5') 期限7日（5日経過 6日経過 7日以上経過）
 
 //- 全て, 未完了
 .page-content.is-products(v-else)

app/javascript/stylesheets/_common-imports.sass

@@ -125,6 +125,7 @@
 @import "atoms/a-file-insert"
 @import "atoms/a-icon-label"
 @import "atoms/a-side-nav"
+@import "atoms/a-inline-block"
 
 ////////////
 // layouts

app/javascript/stylesheets/atoms/_a-inline-block.sass

@@ -0,0 +1,18 @@
+.a-inline-block
+  font-size: .875em
+  display: inline-block
+  border: solid 1px
+  padding: .0625em .25em
+  border-radius: 4px
+  margin-inline: .25em
+  &.is-reply-warning
+    background-color: var(--reply-warning-background)
+    border-color: var(--reply-warning-border)
+  &.is-reply-alert
+    color: var(--reversal-text)
+    background-color: var(--reply-alert-background)
+    border-color: var(--reply-alert-border)
+  &.is-reply-deadline
+    color: var(--reversal-text)
+    background-color: var(--reply-deadline-background)
+    border-color: var(--reply-deadline-border)