feat: polished UI

BlueScript-NPO · Oct 23, 2024 · 3d66b80 · 3d66b80
1 parent 2886c27
commit 3d66b80
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 133 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -21,67 +21,54 @@ export default defineAppConfig({
     },
 
     button: {
-      base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0",
-      font: "font-medium",
-      rounded: "rounded-md",
-      truncate: "text-left break-all line-clamp-1",
-      block: "w-full flex justify-center items-center",
-      inline: "inline-flex items-center",
+      base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm inline-flex items-center justify-center transition-colors",
       size: {
-        "2xs": "text-xs",
-        xs: "text-xs",
-        sm: "h-9 rounded-md px-3 text-sm",
-        md: "text-sm",
-        lg: "h-11 rounded-md px-8 text-sm",
-        xl: "text-base",
-      },
-      gap: {
-        "2xs": "gap-x-1",
-        xs: "gap-x-1.5",
-        sm: "gap-x-1.5",
-        md: "gap-x-2",
-        lg: "gap-x-2.5",
-        xl: "gap-x-2.5",
-      },
-      padding: {
-        "2xs": "px-2 py-1",
-        xs: "px-2.5 py-1.5",
-        sm: "px-2.5 py-1.5",
-        md: "px-3 py-2",
-        lg: "px-3.5 py-2.5",
-        xl: "px-3.5 py-2.5",
-      },
-      square: {
-        "2xs": "p-1.5",
-        xs: "p-2",
-        sm: "p-2",
-        md: "p-2.5",
-        lg: "p-3",
-        xl: "p-3",
-      },
-      color: {
-        gray: {
-          solid:
-            "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 aria-disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-          ghost:
-            "text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-          link: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
+        "2xs": "text-xs px-2 py-1",
+        xs: "text-xs px-2.5 py-1.5",
+        sm: "text-sm px-3 py-2",
+        md: "text-sm px-3.5 py-2.5",
+        lg: "text-base px-4 py-3",
+        xl: "text-base px-4.5 py-3.5",
+      },
+      variants: {
+        solid: {
+          primary:
+            "bg-primary-500 text-white hover:bg-primary-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          white:
+            "bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          gray: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500",
+          black:
+            "bg-gray-900 text-white hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
         },
-        black: {
-          solid:
-            "shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-          link: "text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
+        outline: {
+          primary:
+            "border border-primary-500 text-primary-500 hover:bg-primary-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          white:
+            "border border-gray-300 text-gray-900 hover:bg-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          gray: "border border-gray-500 text-gray-700 hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500",
+          black:
+            "border border-gray-900 text-gray-900 hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+        },
+        ghost: {
+          primary:
+            "text-primary-500 hover:bg-primary-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          white:
+            "text-gray-900 hover:bg-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          gray: "text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500",
+          black:
+            "text-gray-900 hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+        },
+        link: {
+          primary:
+            "text-primary-500 hover:text-primary-600 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          secondary:
+            "text-gray-700 hover:text-gray-800 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500",
+          white:
+            "text-gray-900 hover:text-gray-700 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          gray: "text-gray-700 hover:text-gray-900 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+          black:
+            "text-gray-900 hover:text-gray-700 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
         },
-      },
-      variant: {
-        solid:
-          "shadow-sm text-white dark:text-white-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-500 dark:hover:bg-{color}-600 dark:disabled:bg-{color}-400 dark:aria-disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400",
-        outline:
-          "ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
-        soft: "text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
-        ghost:
-          "text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
-        link: "text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400",
       },
       icon: {
         base: "flex-shrink-0",
@@ -91,27 +78,17 @@ export default defineAppConfig({
           xs: "h-4 w-4",
           sm: "h-5 w-5",
           md: "h-5 w-5",
-          lg: "h-5 w-5",
+          lg: "h-6 w-6",
           xl: "h-6 w-6",
         },
       },
       default: {
         size: "sm",
         variant: "solid",
-        color: "black",
-        loadingIcon: "i-heroicons-arrow-path-20-solid",
-      },
-    },
-
-    color: {
-      white: {
-        solid:
-          "shadow ring-1 ring-inset ring-gray-400 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-        ghost:
-          "text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
+        color: "primary",
+        loadingIcon: "i-ph-caret-down",
       },
     },
-
     kbd: {
       background: "bg-slate-100 dark:bg-slate-800",
       ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset",
@@ -250,7 +227,7 @@ export default defineAppConfig({
         size: "sm",
         color: "white",
         variant: "outline",
-        loadingIcon: "i-heroicons-arrow-path-20-solid",
+        loadingIcon: "i-ph-check",
       },
     },
 
@@ -265,7 +242,7 @@ export default defineAppConfig({
       height: "max-h-60",
       base: "relative focus:outline-none overflow-y-auto scroll-py-1",
       background: "bg-white dark:bg-gray-800",
-      shadow: "shadow-lg",
+      shadow: "shadow-sm",
       rounded: "rounded-md",
       padding: "p-1",
       ring: "ring-1 ring-gray-200 dark:ring-gray-700",
@@ -338,15 +315,21 @@ export default defineAppConfig({
       },
     },
 
+    breadcrumb: {
+      default: {
+        divider: "i-ph-caret-right",
+      },
+    },
+
     header: {
       wrapper: "backdrop-blur-lg border-b dark:border-gray-800",
       container: "h-14",
       links: {
         wrapper: "px-3 gap-x-0",
-        base: "font-medium py-2 px-4 transition-colors relative after:absolute",
-        active: "text-primary-500 dark:text-primary-400 after:opacity-100",
+        base: "py-2 px-4 transition-colors font-normal relative after:absolute",
+        active: "font-semibold after:opacity-100 text-gray-950 dark:text-white",
         inactive:
-          "text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100",
+          "font-normal text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100",
       },
 
       left: "sm:flex-1",
@@ -379,11 +362,7 @@ export default defineAppConfig({
         openIcon: "i-ph-caret-down",
       },
     },
-    breadcrumb: {
-      default: {
-        divider: "i-ph-caret-right",
-      },
-    },
+
     icons: {
       dark: "i-ph-moon",
       light: "i-ph-sun",

diff --git a/components/TitleHud.vue b/components/TitleHud.vue
@@ -15,7 +15,7 @@ const props = defineProps({
   <div class="text-6xl text-center training-text">
     {{ props.title }}
   </div>
-  <div class="text-xl font-light text-center training-text">
+  <div class="text-xl font-normal text-center training-text">
     {{ props.subtitle }}
   </div>
 </template>
diff --git a/components/TrainingBase.vue b/components/TrainingBase.vue
@@ -11,7 +11,7 @@
     >
       <div
         :style="{ whiteSpace: 'pre-line' }"
-        class="text-center font-light tracking-wide leading-relaxed"
+        class="text-center font-normal tracking-wide leading-relaxed"
       >
         {{ instructionText }}
       </div>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -37,22 +37,27 @@ provide("files", files);
 
 <template>
   <UHeader>
-    <template #logo>
-      <Logo class="h-7 hover:opacity-90" />
-    </template>
-
-    <template #center>
+    <template #left>
+      <NuxtLink to="/">
+        <Logo class="h-6 hover:opacity-90" />
+      </NuxtLink>
       <UHeaderLinks :links="links" class="hidden sm:flex" />
     </template>
 
     <template #right>
       <UButton
+        class="block md:hidden"
         variant="ghost"
         color="gray"
         square
         icon="i-ph-magnifying-glass"
         @click="toggleContentSearch"
       ></UButton>
+      <UContentSearchButton
+        class="hidden w-full md:flex md:max-w-48 lg:max-w-56"
+        size="sm"
+        :label="t('search.placeholder')"
+      />
     </template>
 
     <template #panel>

diff --git a/locales/en/main.json b/locales/en/main.json
@@ -165,7 +165,7 @@
     "title": "Training Result",
     "noData": "No Data Loaded",
     "noDataDesc": "Please load a training result or start a new training.",
-    "download": "Download Result",
+    "download": "Save Result",
     "goTrain": "Go Training",
     "averageRevealed": "Average Revealed",
     "averageRevealedDesc": "Average percentage of revealed chunks of a character",
@@ -182,6 +182,7 @@
     "trialCount": "Trial Count",
     "trialCountDesc": "Number of trials performed",
     "correctCount": "Correct Count",
-    "correctCountDesc": "Number of correct responses"
+    "correctCountDesc": "Number of correct responses",
+    "upload": "Load Result"
   }
 }
diff --git a/locales/ko/main.json b/locales/ko/main.json
@@ -188,6 +188,7 @@
     "trialCount": "시도 횟수",
     "trialCountDesc": "실행된 시도의 수",
     "correctCount": "정답 수",
-    "correctCountDesc": "정답 응답의 수"
+    "correctCountDesc": "정답 응답의 수",
+    "upload": "결과 불러오기"
   }
 }
diff --git a/pages/docs.vue b/pages/docs.vue
@@ -13,9 +13,7 @@ const links = computed(
     <UPage>
       <template #left>
         <UAside>
-          <template #top>
-            <UContentSearchButton size="sm" :label="t('search.placeholder')" />
-          </template>
+          <template #top> </template>
           <UNavigationTree :links="mapContentNavigation(links)" />
         </UAside>
       </template>

diff --git a/pages/index.vue b/pages/index.vue
@@ -58,18 +58,20 @@
 const { t } = useI18n();
 
 const actionLinks = computed(() => [
+  {
+    label: t("landing.docs"),
+    icon: "i-ph-book",
+    to: "/docs",
+    size: "md",
+    color: "white",
+  },
   {
     label: t("landing.cta"),
     icon: "i-ph-arrow-right",
     trailing: true,
     to: "/train",
     size: "md",
-  },
-  {
-    label: t("landing.docs"),
-    icon: "i-ph-book",
-    to: "/docs",
-    size: "md",
+    color: "black",
   },
 ]);
 

diff --git a/pages/result.vue b/pages/result.vue
@@ -100,26 +100,13 @@ onMounted(() => {
   <div class="space-y-4 p-4">
     <UCard v-if="trainingData" class="mx-auto mt-8 max-w-md">
       <template #header>
-        <div class="flex justify-between">
-          <div>
-            <h2
-              class="text-xl h-8 flex items-center align-middle font-semibold"
-            >
-              {{ $t("result.title") }}
-              <UBadge color="primary" variant="outline" class="ml-2">
-                {{ $t("procedure." + (trainingData?.procedure.name ?? "")) }}
-              </UBadge>
-            </h2>
-          </div>
-          <div>
-            <UButton
-              icon="i-ph-upload"
-              size="sm"
-              square
-              variant="ghost"
-              @click="loadResultPrompt"
-            />
-          </div>
+        <div>
+          <h2 class="text-xl h-8 flex items-center align-middle font-semibold">
+            {{ $t("result.title") }}
+            <UBadge color="primary" variant="outline" class="ml-2">
+              {{ $t("procedure." + (trainingData?.procedure.name ?? "")) }}
+            </UBadge>
+          </h2>
         </div>
 
         <div class="py-2">
@@ -225,7 +212,7 @@ onMounted(() => {
       </div>
 
       <UAccordion
-        variant="ghost"
+        color="black"
         class="mt-4 pt-1.5 rounded-lg ring-1 ring-gray-200 dark:ring-gray-800"
         :items="[
           {
@@ -265,11 +252,22 @@ onMounted(() => {
       />
 
       <template #footer>
-        <div class="flex justify-center space-x-4">
-          <UButton color="gray" @click="saveResult">
-            {{ $t("result.download") }}
-          </UButton>
-          <UButton color="primary" @click="router.push('/train')">
+        <div class="flex justify-between flex-wrap">
+          <div class="space-x-2">
+            <UButton
+              icon="i-ph-upload"
+              size="sm"
+              color="white"
+              square
+              @click="loadResultPrompt"
+            >
+            </UButton>
+            <UButton color="white" icon="i-ph-download" @click="saveResult">
+              {{ $t("result.download") }}
+            </UButton>
+          </div>
+
+          <UButton color="black" @click="router.push('/train')">
             {{ $t("result.goTrain") }}
           </UButton>
         </div>
@@ -297,8 +295,8 @@ onMounted(() => {
       />
 
       <template #footer>
-        <div class="flex justify-center">
-          <UButton color="primary" @click="router.push('/train')">
+        <div class="flex justify-end">
+          <UButton color="black" @click="router.push('/train')">
             {{ $t("result.goTrain") }}
           </UButton>
         </div>