feat: adopt to new design

Author: hannoeru

.vscode/settings.json

@@ -20,7 +20,7 @@
     "strings": true
   },
   "windicss.enableCodeFolding": false,
-  "windicss.sortOnSave": true,
+  "windicss.sortOnSave": false,
   "[vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   }

components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     ConfirmModel: typeof import('./src/components/organisms/ConfirmModel.vue')['default']
     DonateSchedule: typeof import('./src/components/organisms/DonateSchedule.vue')['default']
     DonatorRegisterForm: typeof import('./src/components/organisms/DonatorRegisterForm.vue')['default']
+    'FaSolid:bars': typeof import('virtual:vite-icons/fa-solid/bars')['default']
     FlashMessage: typeof import('./src/components/global/FlashMessage.vue')['default']
     'Fluent:checkboxChecked20Filled': typeof import('virtual:vite-icons/fluent/checkbox-checked20-filled')['default']
     'Fluent:checkboxUnchecked20Regular': typeof import('virtual:vite-icons/fluent/checkbox-unchecked20-regular')['default']

public/img/logo.png

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
 
-defineProps({
-  outline: {
-    type: Boolean,
-    default: false,
-  },
-})
+defineProps<{
+  outline: boolean
+  size: 'big'
+}>()
 
 </script>
 
 <template>
   <button
-    class="btn"
+    class="text-white rounded-full bg-primary"
     :class="{'btn-outline': outline}"
   >
     <div v-if="$slots.icon" class="inline-block mr-1">

public/img/logo.svg

@@ -28,8 +28,8 @@ withDefaults(defineProps<Props>(), {
 })
 
 defineEmits<{
-  (e: 'input', value: Event): void
-  (e: 'blue', value: FocusEvent): void
+  (e: 'change', value: Event): void
+  (e: 'blur', value: FocusEvent): void
   (e: 'click', value: MouseEvent): void
 }>()
 

src/components/atoms/AppButton.vue

@@ -1,10 +1,8 @@
 <template>
-  <AppLink inline to="/" class="inline-flex items-center">
-    <svg width="3em" height="3em" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M29 11H4V24H29V11Z" fill="#14B8A6" />
-      <path d="M56 11H31V24H56V11Z" fill="#14B8A6" />
-      <path d="M29 26H17V49H29V26Z" fill="#C4C4C4" />
-      <path d="M43 26H31V49H43V26Z" fill="#C4C4C4" />
+  <AppLink inline to="/" class="inline-flex items-center px-2">
+    <img src="/img/logo.svg" alt="Logo" class="h-full py-3.5 mr-2">
+    <svg width="111" height="13" viewBox="0 0 111 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.816 3.104C6.60267 2.79467 6.31467 2.57067 5.952 2.432C5.6 2.28267 5.22667 2.208 4.832 2.208C4.59733 2.208 4.368 2.23467 4.144 2.288C3.93067 2.34133 3.73333 2.42667 3.552 2.544C3.38133 2.66133 3.24267 2.816 3.136 3.008C3.02933 3.18933 2.976 3.408 2.976 3.664C2.976 4.048 3.10933 4.34133 3.376 4.544C3.64267 4.74667 3.97333 4.92267 4.368 5.072C4.76267 5.22133 5.19467 5.36533 5.664 5.504C6.13333 5.64267 6.56533 5.83467 6.96 6.08C7.35467 6.32533 7.68533 6.65067 7.952 7.056C8.21867 7.46133 8.352 8 8.352 8.672C8.352 9.28 8.24 9.81333 8.016 10.272C7.792 10.72 7.488 11.0933 7.104 11.392C6.73067 11.6907 6.29333 11.9147 5.792 12.064C5.29067 12.2133 4.76267 12.288 4.208 12.288C3.504 12.288 2.82667 12.1707 2.176 11.936C1.52533 11.7013 0.965333 11.3067 0.496 10.752L2.016 9.28C2.26133 9.65333 2.58133 9.94667 2.976 10.16C3.38133 10.3627 3.808 10.464 4.256 10.464C4.49067 10.464 4.72533 10.432 4.96 10.368C5.19467 10.304 5.408 10.208 5.6 10.08C5.792 9.952 5.94667 9.792 6.064 9.6C6.18133 9.39733 6.24 9.168 6.24 8.912C6.24 8.496 6.10667 8.176 5.84 7.952C5.57333 7.728 5.24267 7.54133 4.848 7.392C4.45333 7.232 4.02133 7.08267 3.552 6.944C3.08267 6.80533 2.65067 6.61867 2.256 6.384C1.86133 6.13867 1.53067 5.81867 1.264 5.424C0.997333 5.01867 0.864 4.48 0.864 3.808C0.864 3.22133 0.981333 2.71467 1.216 2.288C1.46133 1.86133 1.776 1.50933 2.16 1.232C2.55467 0.943999 3.00267 0.730666 3.504 0.591999C4.00533 0.453333 4.51733 0.384 5.04 0.384C5.63733 0.384 6.21333 0.474666 6.768 0.655999C7.33333 0.837333 7.84 1.136 8.288 1.552L6.816 3.104ZM12.4515 0.672H14.4675V5.184H19.7635V0.672H21.7795V12H19.7635V7.008H14.4675V12H12.4515V0.672ZM29.9749 0.672H31.7189L36.5989 12H34.2949L33.2389 9.408H28.3269L27.3029 12H25.0469L29.9749 0.672ZM32.5349 7.68L30.7909 3.072L29.0149 7.68H32.5349ZM39.8578 0.672H43.7938C44.3378 0.672 44.8604 0.725333 45.3618 0.832C45.8738 0.928 46.3271 1.09867 46.7218 1.344C47.1164 1.58933 47.4311 1.92 47.6658 2.336C47.9004 2.752 48.0178 3.28 48.0178 3.92C48.0178 4.74133 47.7884 5.42933 47.3298 5.984C46.8818 6.53867 46.2364 6.87467 45.3938 6.992L48.4018 12H45.9698L43.3458 7.2H41.8738V12H39.8578V0.672ZM43.4418 5.472C43.7298 5.472 44.0178 5.46133 44.3058 5.44C44.5938 5.408 44.8551 5.344 45.0898 5.248C45.3351 5.14133 45.5324 4.98667 45.6818 4.784C45.8311 4.57067 45.9058 4.27733 45.9058 3.904C45.9058 3.57333 45.8364 3.30667 45.6978 3.104C45.5591 2.90133 45.3778 2.752 45.1538 2.656C44.9298 2.54933 44.6791 2.48 44.4018 2.448C44.1351 2.416 43.8738 2.4 43.6178 2.4H41.8738V5.472H43.4418ZM51.9359 0.672H59.4399V2.496H53.9519V5.28H59.1519V7.104H53.9519V10.176H59.7279V12H51.9359V0.672ZM63.7171 0.672H68.1811C68.9278 0.672 69.6478 0.789333 70.3411 1.024C71.0345 1.248 71.6478 1.59467 72.1811 2.064C72.7145 2.53333 73.1411 3.12533 73.4611 3.84C73.7811 4.544 73.9411 5.376 73.9411 6.336C73.9411 7.30667 73.7545 8.14933 73.3811 8.864C73.0185 9.568 72.5438 10.1547 71.9571 10.624C71.3811 11.0827 70.7358 11.4293 70.0211 11.664C69.3171 11.888 68.6238 12 67.9411 12H63.7171V0.672ZM67.2371 10.176C67.8665 10.176 68.4585 10.1067 69.0131 9.968C69.5785 9.81867 70.0691 9.59467 70.4851 9.296C70.9011 8.98667 71.2265 8.592 71.4611 8.112C71.7065 7.62133 71.8291 7.02933 71.8291 6.336C71.8291 5.65333 71.7225 5.06667 71.5091 4.576C71.2958 4.08533 70.9971 3.69067 70.6131 3.392C70.2398 3.08267 69.7918 2.85867 69.2691 2.72C68.7571 2.57067 68.1918 2.496 67.5731 2.496H65.7331V10.176H67.2371ZM86.9121 2.496H83.4401V0.672H92.4001V2.496H88.9281V12H86.9121V2.496ZM94.5156 0.672H96.7236L98.8516 8.832H98.8836L101.428 0.672H103.412L105.908 8.832H105.94L108.164 0.672H110.212L106.916 12H104.996L102.372 3.376H102.34L99.7156 12H97.8596L94.5156 0.672Z" fill="black" />
     </svg>
   </AppLink>
 </template>

src/components/atoms/AppInput.vue

@@ -22,10 +22,10 @@ const menuList = [
 
 <template>
   <header
-    class="bg-$shared-bg border-b border-$shared-bc h-$header-height px-2 inset-x-0 top-0 z-50 fixed"
+    class="bg-$shared-bg h-$header-height px-2 inset-x-0 top-0 z-50 fixed shadow"
   >
     <div class="container flex h-$header-height mx-auto max-w-screen-xl text-primary items-center justify-between">
-      <AppPopover class="icon-btn">
+      <AppPopover class="icon-btn text-black">
         <ic:round-menu />
         <template #content>
           <ul class="bg-white border rounded -mt-2 text-base text-black ml-2 py-1">
@@ -35,7 +35,7 @@ const menuList = [
           </ul>
         </template>
       </AppPopover>
-      <AppLogo class="h-55px" />
+      <AppLogo class="h-55px flex-1" />
       <div :class="{'opacity-0 pointer-events-none': $route.path === '/login'}">
         <button v-if="isAuthorized" class="icon-btn">
           <ic:round-account-circle />

src/components/atoms/AppLogo.vue

@@ -10,3 +10,20 @@ html {
   background-color: var(--shared-bg);
   padding-top: var(--header-height);
 }
+
+.btn {
+  @apply
+    inline-flex px-3 py-2
+    rounded-full bg-primary
+    text-white text-sm font-medium;
+  &:hover {
+    @apply
+      bg-primary-dark;
+  }
+  &-outline {
+    @apply
+      bg-white
+      border border-primary-medium
+      text-primary-dark
+  }
+}

src/components/templates/TheHeader.vue

@@ -1,5 +1,5 @@
 :root {
-  --header-height: 60px;
+  --header-height: 58px;
   --shared-bg: theme('colors.light.100');
   --shared-text: theme('colors.cool-gray.800');
   --shared-bc: theme('colors.cool-gray.200');