Merge pull request #984 from traPtitech/feature/refine-ui-colors

feat: 申請のステータス関連のUIの色と表示を調整

Author: reiroop

client/src/plugins/theme.ts

@@ -8,7 +8,15 @@ export const colors = {
   info: "#00d3ee",
   success: "#5cb860",
   warning: "#ffa21a",
-  done: "#009688"
+  done: "#009688",
+  state_submitted: "#42A5F5",
+  state_fix_required: "#FFA726",
+  state_accepted: "#66BB6A",
+  state_fully_repaid: "#AB47BC",
+  state_rejected: "#EF5350",
+  diff_added: "#e6ffed",
+  diff_removed: "#ffeef0",
+  text_primary_disabled: "#888888"
 };
 
 export default colors;

client/src/styles/_variables.scss

@@ -1,27 +1 @@
-$color-primary: #011a27;
-$color-primary-hover: #00103a;
-$color-primary-disabled: #00669c;
-$color-primary-accent: #52254f;
-
-$color-secondary: #f0daee;
-$color-secondary-hover: #e0bfde;
-$color-secondary-disabled: #cccccc;
-$color-secondary-accent: #e0bfde;
-
-$color-grey: #9e9e9e;
-$color-info: #00d3ee;
-$color-success: #5cb860;
-$color-warning: #ffa21a;
-$color-error: #f55a4e;
-
-$color-text-primary: #ffffff;
-$color-text-primary-disabled: #888888;
-
-$color-text-secondary: #011a27;
-$color-text-secondary-disabled: #011a275b;
-
-$color-text-white: #eeeeee;
-
-$color-background: #eeeeee;
-
-$breakpoint: 768px;
+$breakpoint: 768px;

client/src/use/stateColor.ts

@@ -0,0 +1,46 @@
+export const getStateLabel = (state: string): string => {
+  switch (state) {
+    case "submitted":
+      return "承認待ち";
+    case "fix_required":
+      return "要修正";
+    case "accepted":
+      return "承認済み";
+    case "fully_repaid":
+      return "返済完了";
+    case "rejected":
+      return "却下";
+    default:
+      return "ERROR";
+  }
+};
+
+export const getStateColor = (state: string): string => {
+  switch (state) {
+    case "submitted":
+      return "state_submitted";
+    case "rejected":
+      return "state_rejected";
+    case "fix_required":
+      return "state_fix_required";
+    case "accepted":
+      return "state_accepted";
+    case "fully_repaid":
+      return "state_fully_repaid";
+    default:
+      return "white";
+  }
+};
+
+export const getStateTextColor = (state: string): string => {
+  switch (state) {
+    case "fix_required":
+      return "text-black";
+    case "submitted":
+    case "rejected":
+    case "accepted":
+    case "fully_repaid":
+    default:
+      return "text-white";
+  }
+};

client/src/views/ApplicationListPage.vue

@@ -129,6 +129,7 @@
 <script setup lang="ts">
 import { useApplicationListStore } from "@/stores/applicationList";
 import { useUserListStore } from "@/stores/userList";
+import { getStateLabel } from "@/use/stateColor";
 import { storeToRefs } from "pinia";
 import { onMounted, reactive, ref } from "vue";
 import { useDisplay } from "vuetify";
@@ -159,11 +160,11 @@ const type_items = [
 ];
 
 const state_items = [
-  { state: "submitted", jpn: "提出済み" },
-  { state: "rejected", jpn: "却下" },
-  { state: "fix_required", jpn: "要修正" },
-  { state: "accepted", jpn: "払い戻し待ち" },
-  { state: "fully_repaid", jpn: "払い戻し完了" }
+  { state: "submitted", jpn: getStateLabel("submitted") },
+  { state: "rejected", jpn: getStateLabel("rejected") },
+  { state: "fix_required", jpn: getStateLabel("fix_required") },
+  { state: "accepted", jpn: getStateLabel("accepted") },
+  { state: "fully_repaid", jpn: getStateLabel("fully_repaid") }
 ];
 
 const header = {

client/src/views/components/ApplicationDetail.vue

@@ -133,10 +133,10 @@ onMounted(async () => {
 }
 .section {
   margin: 16px 0;
-  border-bottom: 1px solid $color-grey;
+  border-bottom: 1px solid rgb(var(--v-theme-grey));
 }
 .section_title {
-  color: $color-text-primary-disabled;
+  color: rgb(var(--v-theme-text_primary_disabled));
 }
 .section_item {
   margin-left: 8px;

client/src/views/components/ApplicationDetailDifference.vue

@@ -87,12 +87,12 @@ onMounted(async () => {
   padding: 8px;
 }
 .before {
-  background: #ffeef0;
+  background: rgb(var(--v-theme-diff_removed));
   display: flex;
   padding: 8px;
 }
 .after {
-  background: #e6ffed;
+  background: rgb(var(--v-theme-diff_added));
   display: flex;
   padding: 8px;
 }

client/src/views/components/ChangeLog.vue

@@ -56,6 +56,6 @@ defineProps<{
   flex-wrap: wrap;
   max-width: 100%;
   margin-bottom: 8px;
-  color: $color-grey;
+  color: rgb(var(--v-theme-grey));
 }
 </style>

client/src/views/components/CommentLog.vue

@@ -156,12 +156,12 @@ const cancelChange = () => {
 <style lang="scss" module>
 .text {
   display: flex;
-  color: $color-grey;
+  color: rgb(var(--v-theme-grey));
 }
 .button {
   margin: 8px 8px 0 0;
 }
 .grey_text {
-  color: $color-grey;
+  color: rgb(var(--v-theme-grey));
 }
 </style>

client/src/views/components/FixApplicationDetail.vue

@@ -330,10 +330,10 @@ onMounted(async () => {
 }
 .section {
   margin: 16px 0;
-  border-bottom: 1px solid $color-grey;
+  border-bottom: 1px solid rgb(var(--v-theme-grey));
 }
 .section_title {
-  color: $color-text-primary-disabled;
+  color: rgb(var(--v-theme-text_primary_disabled));
 }
 .section_item {
   margin-left: 8px;

client/src/views/components/RefundLog.vue

@@ -64,6 +64,6 @@ const datePrint = (date: string) => {
 
 <style lang="scss" module>
 .text {
-  color: $color-grey;
+  color: rgb(var(--v-theme-grey));
 }
 </style>