chore: visual rework (#308)

next-orders · Feb 19, 2025 · e19cff5 · e19cff5
1 parent 11da492
commit e19cff5
Show file tree

Hide file tree

Showing 68 changed files with 370 additions and 1,215 deletions.
diff --git a/apps/web-app/app/components/Cart/Line.vue b/apps/web-app/app/components/Cart/Line.vue
@@ -16,7 +16,7 @@
           </p>
           <div class="mt-1 flex flex-row gap-2 flex-nowrap">
             <div class="text-sm font-medium tracking-tight">
-              {{ getLocalizedPrice(line?.productVariant.gross) }} <span class="text-xs">{{ getCurrencySign(channel?.currencyCode) }}</span>
+              {{ formatNumberToLocal(line?.productVariant.gross) }} <span class="text-xs">{{ getCurrencySign(channel?.currencyCode) }}</span>
             </div>
             <div class="text-sm text-neutral-500 dark:text-white font-light">
               {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}

diff --git a/apps/web-app/app/components/Cart/LineCounter.vue b/apps/web-app/app/components/Cart/LineCounter.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-row justify-between items-center bg-neutral-100 dark:bg-neutral-700 w-20 min-w-[5.5rem] min-h-12 rounded-2xl px-1 py-2">
+  <div class="flex flex-row justify-between items-center bg-(--ui-bg-elevated) w-20 min-w-[5.5rem] min-h-12 rounded-2xl px-1 py-2">
     <button
       aria-label="Minus"
-      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-neutral-200 dark:lg:hover:bg-neutral-800 duration-200"
+      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-elevated) duration-200"
       @click="changeLineQuantity(lineId, 'decrement')"
     >
       <Icon :name="icons.minus" class="w-5 h-5" />
@@ -14,7 +14,7 @@
 
     <button
       aria-label="Plus"
-      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-neutral-200 dark:lg:hover:bg-neutral-800 duration-200"
+      class="flex flex-row items-center px-1 py-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-elevated) duration-200"
       @click="changeLineQuantity(lineId, 'increment')"
     >
       <Icon :name="icons.plus" class="w-5 h-5" />

diff --git a/apps/web-app/app/components/Cart/index.vue b/apps/web-app/app/components/Cart/index.vue
@@ -34,15 +34,12 @@
 
       <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)">
         <button
-          class="relative my-4 mx-4 flex flex-row gap-3 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
-          @click="isDeliveryInfoModalOpened = !isDeliveryInfoModalOpened"
+          class="relative m-4 flex flex-row gap-2 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
+          @click="modal.open(ModalDeliveryInfo)"
         >
-          <Icon :name="icons.info" class="w-6 h-6 text-neutral-300" />
-
-          <div class="text-left">
-            <div class="text-sm text-neutral-500 dark:text-neutral-400">
-              {{ $t('app.cart.conditions') }}
-            </div>
+          <Icon :name="icons.info" class="size-6 text-(--ui-text-dimmed)" />
+          <div class="text-left text-sm text-(--ui-text-muted)">
+            {{ $t('app.cart.conditions') }}
           </div>
         </button>
 
@@ -55,7 +52,7 @@
           >
             <p>{{ $t('app.cart.next-label') }}</p>
             <div class="text-lg tracking-tight">
-              {{ getLocalizedPrice(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
+              {{ formatNumberToLocal(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
             </div>
           </UButton>
         </div>
@@ -71,8 +68,11 @@
 </template>
 
 <script setup lang="ts">
-const { isCartDrawerOpened, isDeliveryInfoModalOpened } = useApp()
+import { ModalDeliveryInfo } from '#components'
+
+const { isCartDrawerOpened } = useApp()
 const { icons } = useAppConfig()
 const { channel } = await useChannel()
 const { checkout, isEmpty } = useCheckout()
+const modal = useModal()
 </script>
diff --git a/apps/web-app/app/components/Checkout/InfoMessage.vue b/apps/web-app/app/components/Checkout/InfoMessage.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="text-(--ui-neutral) text-sm leading-tight flex flex-row flex-nowrap gap-2 items-center">
+    <Icon :name="getIconName()" class="size-8 flex-shrink-0 text-(--ui-text-dimmed)" />
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { icon } = defineProps<{
+  message: string
+  icon: 'info' | 'alert'
+}>()
+
+function getIconName() {
+  switch (icon) {
+    case 'info':
+      return 'food:info'
+    case 'alert':
+      return 'food:alert'
+  }
+}
+</script>
diff --git a/apps/web-app/app/components/Checkout/Line.vue b/apps/web-app/app/components/Checkout/Line.vue
@@ -1,23 +1,21 @@
 <template>
-  <div class="mb-4 flex flex-row gap-2 items-center justify-between">
-    <NuxtLink :to="productUrl">
-      <div class="max-w-[16rem] flex flex-row gap-2 flex-nowrap items-center cursor-pointer active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200 group">
-        <div class="relative w-12 h-12 md:w-14 md:h-14 aspect-square">
-          <ProductImage :id="variant?.product?.mediaId" size="xs" />
-        </div>
+  <div class="flex flex-row gap-2 items-center justify-between">
+    <NuxtLink :to="productUrl" class="max-w-[16rem] flex flex-row gap-2 flex-nowrap items-center cursor-pointer active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200 group">
+      <div class="relative size-12 md:size-14 aspect-square">
+        <ProductImage :id="variant?.product?.mediaId" size="xs" />
+      </div>
 
-        <div>
-          <div class="font-medium leading-tight line-clamp-2">
-            {{ variant?.product.name }}
-          </div>
-          <div class="mt-1 flex flex-row gap-2 flex-nowrap items-center">
-            <p class="text-sm text-neutral-500 dark:text-neutral-400 leading-tight">
-              {{ variant?.name }}
-            </p>
-            <p class="text-sm text-neutral-500 dark:text-neutral-400">
-              {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
-            </p>
-          </div>
+      <div class="space-y-1">
+        <div class="font-medium text-(--ui-text) leading-tight line-clamp-2">
+          {{ variant?.product.name }}
+        </div>
+        <div class="flex flex-row gap-2 flex-nowrap items-center">
+          <p class="text-sm text-(--ui-text-muted) leading-tight">
+            {{ variant?.name }}
+          </p>
+          <p class="text-sm text-(--ui-text-muted)">
+            {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
+          </p>
         </div>
       </div>
     </NuxtLink>
@@ -52,7 +50,7 @@ const { line, canBeChanged = true } = defineProps<{
 }>()
 
 const { channel } = await useChannel()
-const totalAmount = computed(() => line ? getLocalizedPrice(line.productVariant?.gross * line.quantity) : 0)
+const totalAmount = computed(() => line ? formatNumberToLocal(line.productVariant?.gross * line.quantity) : 0)
 const variant = computed(() => line?.productVariant)
 const product = computed(() => line?.productVariant?.product)
 const productUrl = computed(() => `/catalog/${product.value?.category?.slug}/${product.value?.slug}`)

diff --git a/apps/web-app/app/components/CommandCenter/CheckoutCard.vue b/apps/web-app/app/components/CommandCenter/CheckoutCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiActiveCard class="px-4 md:px-6 py-5 space-y-6">
+  <div class="bg-(--ui-bg-muted) px-4 md:px-6 py-5 space-y-6">
     <div>
       <div class="mb-2 flex flex-row gap-3 items-center">
         <img
@@ -73,7 +73,7 @@
         {{ checkout?.totalPrice }} <span class="text-sm">{{ getCurrencySign(channel?.currencyCode) }}</span>
       </div>
     </div>
-  </UiActiveCard>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/web-app/app/components/CommandCenter/CheckoutLine.vue b/apps/web-app/app/components/CommandCenter/CheckoutLine.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4 flex flex-row gap-2 items-center justify-between">
+  <div class="flex flex-row gap-2 items-center justify-between">
     <div class="max-w-[16rem] flex flex-row gap-2 flex-nowrap items-center">
       <div>
         <div class="font-medium leading-tight line-clamp-2">
@@ -38,6 +38,6 @@ const { checkouts } = await useCheckoutList()
 
 const checkout = computed(() => checkouts.value?.find((c) => c.lines?.find((l) => l.id === lineId)))
 const line = computed(() => checkout.value?.lines?.find((l) => l.id === lineId))
-const totalAmount = computed(() => line.value ? getLocalizedPrice(line.value.productVariant?.gross * line.value.quantity) : 0)
+const totalAmount = computed(() => line.value ? formatNumberToLocal(line.value.productVariant?.gross * line.value.quantity) : 0)
 const variant = computed(() => line.value?.productVariant)
 </script>
diff --git a/apps/web-app/app/components/CommandCenter/ClientCard.vue b/apps/web-app/app/components/CommandCenter/ClientCard.vue
@@ -1,20 +1,18 @@
 <template>
   <NuxtLink :to="`/command-center/client/${id}`">
-    <UiActiveCard>
-      <div class="relative">
-        <img
-          :src="clientAvatarURL"
-          alt="Client"
-          width="300"
-          height="300"
-          class="w-full aspect-square rounded-xl"
-        >
-      </div>
+    <div class="bg-(--ui-bg-muted) relative">
+      <img
+        :src="clientAvatarURL"
+        alt="Client"
+        width="300"
+        height="300"
+        class="w-full aspect-square rounded-xl"
+      >
+    </div>
 
-      <div class="mt-2 text-base font-medium leading-tight text-center">
-        {{ firstName }}
-      </div>
-    </UiActiveCard>
+    <div class="mt-2 text-base font-medium leading-tight text-center">
+      {{ firstName }}
+    </div>
   </NuxtLink>
 </template>
 

diff --git a/apps/web-app/app/components/CommandCenter/MenuCard.vue b/apps/web-app/app/components/CommandCenter/MenuCard.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink :to="`/command-center/menu/${menuId}`">
-    <UiActiveCard class="py-6 relative min-h-60 text-center flex flex-col items-center justify-center">
+    <div class="bg-(--ui-bg-muted) py-6 relative min-h-60 text-center flex flex-col items-center justify-center">
       <div v-if="menu?.isActive" class="absolute top-2 right-2 w-12 h-12 p-2 bg-neutral-50 dark:bg-neutral-600 rounded-full">
         <Icon :name="icons.monitorCheck" class="w-8 h-8 text-emerald-500 opacity-100" />
       </div>
@@ -16,7 +16,7 @@
           {{ category.name }} ({{ category.products?.length }})
         </li>
       </ul>
-    </UiActiveCard>
+    </div>
   </NuxtLink>
 </template>
 

diff --git a/apps/web-app/app/components/CommandCenter/MenuCreateCard.vue b/apps/web-app/app/components/CommandCenter/MenuCreateCard.vue
@@ -1,14 +1,12 @@
 <template>
-  <UiActiveCard>
-    <div class="flex flex-col justify-center items-center h-full min-h-36 text-center">
-      <NuxtImg
-        src="/img/green-notebook.png"
-        alt=""
-        class="mx-auto mb-4 size-14"
-      />
-      <h2 class="text-lg leading-tight">
-        {{ $t('center.create.menu') }}
-      </h2>
-    </div>
-  </UiActiveCard>
+  <div class="bg-(--ui-bg-muted) flex flex-col justify-center items-center h-full min-h-36 text-center">
+    <NuxtImg
+      src="/img/green-notebook.png"
+      alt=""
+      class="mx-auto mb-4 size-14"
+    />
+    <h2 class="text-lg leading-tight">
+      {{ $t('center.create.menu') }}
+    </h2>
+  </div>
 </template>
diff --git a/apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue b/apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue
@@ -1,15 +1,15 @@
 <template>
-  <UiActiveCard class="relative min-h-28 text-center flex flex-col items-center justify-center">
-    <Icon :name="icons.moneyCard" class="w-8 h-8 text-neutral-300 dark:text-neutral-500" />
+  <div class="bg-(--ui-bg-muted) relative min-h-28 text-center flex flex-col items-center justify-center">
+    <Icon :name="icons.moneyCard" class="size-8 text-(--ui-text-dimmed)" />
 
     <h3 class="text-lg font-semibold leading-tight">
       {{ paymentMethod?.name }}
     </h3>
 
-    <p class="text-sm text-neutral-500 dark:text-neutral-400">
+    <p class="text-sm text-(--ui-text-muted)">
       {{ paymentMethod?.type }}
     </p>
-  </UiActiveCard>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/web-app/app/components/CommandCenter/PaymentMethodCreateCard.vue b/apps/web-app/app/components/CommandCenter/PaymentMethodCreateCard.vue
@@ -1,14 +1,12 @@
 <template>
-  <UiActiveCard>
-    <div class="flex flex-col justify-center items-center h-full min-h-28 text-center">
-      <NuxtImg
-        src="/img/green-notebook.png"
-        alt=""
-        class="mx-auto mb-2 size-12"
-      />
-      <h2 class="leading-tight">
-        {{ $t('center.create.payment-method') }}
-      </h2>
-    </div>
-  </UiActiveCard>
+  <div class="bg-(--ui-bg-muted) flex flex-col justify-center items-center h-full min-h-28 text-center">
+    <NuxtImg
+      src="/img/green-notebook.png"
+      alt=""
+      class="mx-auto mb-2 size-12"
+    />
+    <h2 class="leading-tight">
+      {{ $t('center.create.payment-method') }}
+    </h2>
+  </div>
 </template>
diff --git a/apps/web-app/app/components/CommandCenter/ProductCard.vue b/apps/web-app/app/components/CommandCenter/ProductCard.vue
@@ -1,39 +1,37 @@
 <template>
   <NuxtLink :to="`/command-center/product/${productId}`">
-    <UiActiveCard :class="{ 'opacity-75': isWarning }">
-      <div class="flex flex-col justify-between h-full">
-        <div class="relative w-full aspect-square">
-          <div class="z-10 absolute top-1 left-1">
-            <div v-if="isWarning" class="px-2 py-1 bg-white rounded-xl">
-              <Icon :name="icons.alert" class="w-8 h-8 text-amber-500" />
-            </div>
+    <div class="bg-(--ui-bg-muted) flex flex-col justify-between h-full">
+      <div class="relative w-full aspect-square">
+        <div class="z-10 absolute top-1 left-1">
+          <div v-if="isWarning" class="px-2 py-1 bg-white rounded-xl">
+            <Icon :name="icons.alert" class="size-8 text-(--ui-warning)" />
           </div>
-
-          <ProductImage :id="product?.mediaId" size="sm" />
         </div>
 
-        <div class="h-full flex flex-col justify-between">
-          <p class="mt-2 text-lg leading-tight line-clamp-2">
-            {{ product?.name }}
-          </p>
+        <ProductImage :id="product?.mediaId" size="sm" />
+      </div>
+
+      <div class="h-full flex flex-col justify-between">
+        <p class="mt-2 text-lg leading-tight line-clamp-2">
+          {{ product?.name }}
+        </p>
 
-          <div class="mt-4">
-            <div
-              v-for="variant in product?.variants"
-              :key="variant.id"
-              class="flex justify-between"
-            >
-              <p class="text-neutral-500 dark:text-white">
-                {{ variant.weightValue }}{{ getWeightLocalizedUnit(variant.weightUnit) }}
-              </p>
-              <p class="font-medium">
-                {{ getLocalizedPrice(variant.gross) }}<span class="pl-1 text-xs">{{ getCurrencySign(channel?.currencyCode) }}</span>
-              </p>
-            </div>
+        <div class="mt-4">
+          <div
+            v-for="variant in product?.variants"
+            :key="variant.id"
+            class="flex justify-between"
+          >
+            <p class="text-(--ui-text-muted)">
+              {{ variant.weightValue }}{{ getWeightLocalizedUnit(variant.weightUnit) }}
+            </p>
+            <p class="font-medium">
+              {{ formatNumberToLocal(variant.gross) }}<span class="pl-1 text-xs">{{ getCurrencySign(channel?.currencyCode) }}</span>
+            </p>
           </div>
         </div>
       </div>
-    </UiActiveCard>
+    </div>
   </NuxtLink>
 </template>
 

diff --git a/apps/web-app/app/components/CommandCenter/ProductCreateCard.vue b/apps/web-app/app/components/CommandCenter/ProductCreateCard.vue
@@ -1,14 +1,12 @@
 <template>
-  <UiActiveCard>
-    <div class="flex flex-col justify-center items-center h-full min-h-48 text-center">
-      <NuxtImg
-        src="/img/green-notebook.png"
-        alt=""
-        class="mx-auto mb-4 size-14"
-      />
-      <h2 class="text-lg leading-tight">
-        {{ $t('center.create.product') }}
-      </h2>
-    </div>
-  </UiActiveCard>
+  <div class="bg-(--ui-bg-muted) flex flex-col justify-center items-center h-full min-h-48 text-center">
+    <NuxtImg
+      src="/img/green-notebook.png"
+      alt=""
+      class="mx-auto mb-4 size-14"
+    />
+    <h2 class="text-lg leading-tight">
+      {{ $t('center.create.product') }}
+    </h2>
+  </div>
 </template>