chore: visual rework

apps/web-app/app/components/Cart/Button.vue

@@ -1,15 +1,17 @@
 <template>
   <ClientOnly>
     <div v-if="!isEmpty" class="block xl:hidden">
-      <UiButton
-        class="px-4 flex flex-row gap-2 items-center"
+      <UButton
+        variant="gradient"
+        size="lg"
+        class="items-center"
         @click="isCartDrawerOpened = !isCartDrawerOpened"
       >
         <p>{{ $t('app.cart.title') }}</p>
-        <div class="rounded-full bg-white w-6 h-6 text-center">
+        <div class="rounded-full bg-white size-6 text-center">
           {{ checkout?.lines?.length }}
         </div>
-      </UiButton>
+      </UButton>
     </div>
   </ClientOnly>
 </template>

apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue

@@ -1,22 +1,22 @@
 <template>
   <ClientOnly>
-    <div class="px-0 py-0 flex flex-row gap-0 justify-center bg-neutral-50 dark:bg-neutral-500 rounded-2xl">
-      <UiButton
+    <div class="px-0 py-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
+      <UButton
         v-if="channel?.isDeliveryAvailable"
-        class="w-full px-2 py-2"
-        :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'default' : 'ghost'"
+        class="w-full justify-center"
+        :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'"
         @click="update({ deliveryMethod: 'DELIVERY' })"
       >
         {{ $t('app.cart.delivery') }}
-      </UiButton>
-      <UiButton
+      </UButton>
+      <UButton
         v-if="channel?.isPickupAvailable"
-        class="w-full px-2 py-2"
-        :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'default' : 'ghost'"
+        class="w-full justify-center"
+        :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'"
         @click="update({ deliveryMethod: 'WAREHOUSE' })"
       >
         {{ $t('app.cart.pickup') }}
-      </UiButton>
+      </UButton>
     </div>
   </ClientOnly>
 </template>

apps/web-app/app/components/Cart/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div v-if="checkout" class="relative bg-white dark:bg-neutral-600 rounded-2xl px-4 py-4 h-full flex flex-col justify-between">
+    <div v-if="checkout" class="relative rounded-2xl border border-(--ui-border) px-4 py-4 h-full flex flex-col justify-between">
       <div class="h-screen overflow-y-auto">
         <div class="mb-48">
           <div class="mb-4 flex flex-row justify-between items-center">
@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-neutral-50 dark:bg-neutral-700">
+      <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"
@@ -47,14 +47,17 @@
         </button>
 
         <div v-if="!isEmpty" class="my-4 mx-4">
-          <NuxtLink to="/checkout">
-            <UiButton class="py-4 flex flex-row gap-2 flex-wrap justify-between items-center">
-              <p>{{ $t('app.cart.next-label') }}</p>
-              <div class="text-lg tracking-tight">
-                {{ getLocalizedPrice(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
-              </div>
-            </UiButton>
-          </NuxtLink>
+          <UButton
+            to="/checkout"
+            variant="gradient"
+            size="xl"
+            class="w-full justify-between items-center"
+          >
+            <p>{{ $t('app.cart.next-label') }}</p>
+            <div class="text-lg tracking-tight">
+              {{ getLocalizedPrice(checkout?.totalPrice) }} <span class="text-base">{{ getCurrencySign(channel?.currencyCode) }}</span>
+            </div>
+          </UButton>
         </div>
       </div>
     </div>

apps/web-app/app/components/CatalogBreadcrumb.vue

@@ -8,8 +8,8 @@
 
     <UButton
       variant="soft"
-      color="primary"
-      size="md"
+      color="neutral"
+      size="lg"
       icon="food:undo"
       class="w-full md:w-auto mx-auto md:mx-0 justify-center"
       @click="back()"

apps/web-app/app/components/CategoryBlock.vue

@@ -4,17 +4,19 @@
       {{ category?.name }}
     </h2>
 
-    <NuxtLink :to="`/catalog/${category?.slug}`">
-      <UiButton variant="secondary" class="bg-neutral-200">
-        <div class="flex flex-row gap-2 items-center">
-          {{ $t('app.open-category') }} <Icon :name="icons.arrowRight" />
-        </div>
-      </UiButton>
-    </NuxtLink>
+    <UButton
+      :to="`/catalog/${category?.slug}`"
+      size="lg"
+      variant="soft"
+      color="neutral"
+      trailing-icon="food:arrow-right"
+    >
+      {{ $t('app.open-category') }}
+    </UButton>
   </div>
 
   <div
-    class="mb-12 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-2"
+    class="mb-12 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6"
   >
     <ProductCard
       v-for="product in categoryProducts"
@@ -31,7 +33,6 @@ const { categoryId } = defineProps<{
   isFirst?: boolean
 }>()
 
-const { icons } = useAppConfig()
 const { categories } = await useChannel()
 const category = computed(() => categories.value.find(({ id }) => id === categoryId))
 const categoryProducts = computed(() => category.value?.products.filter((p) => p.variants.length > 0).splice(0, 8))

apps/web-app/app/components/Checkout/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="z-10 w-full h-full px-4 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-neutral-100 dark:border-neutral-500">
+  <div class="z-10 w-full h-full px-4 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-(--ui-border)">
     <NuxtLink
       to="/"
       class="mr-2 md:mr-0 flex flex-row gap-2 items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"

apps/web-app/app/components/CommandCenter/StaffBar.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="relative max-w-7xl">
-    <div class="bg-white dark:bg-neutral-600 p-4 flex justify-between items-center rounded-2xl">
+    <div class="flex justify-between items-center">
       <p class="grow text-lg">
         {{ $t('common.hello') }}, {{ user?.name ?? $t('common.colleague') }}!
       </p>
 
-      <NuxtLink to="/command-center">
-        <UiButton>
-          {{ $t('common.continue-working') }}
-        </UiButton>
-      </NuxtLink>
+      <UButton
+        to="/command-center"
+        size="lg"
+        variant="gradient"
+      >
+        {{ $t('common.continue-working') }}
+      </UButton>
     </div>
   </div>
 </template>

apps/web-app/app/components/DeliveryInfoModal.vue

@@ -21,13 +21,13 @@
       </div>
     </div>
 
-    <UiButton
-      variant="secondary"
+    <UButton
+      variant="soft"
       class="mt-4"
       @click="isDeliveryInfoModalOpened = false"
     >
       {{ $t('common.ok') }}
-    </UiButton>
+    </UButton>
   </UiModal>
 </template>
 

apps/web-app/app/components/Footer.vue

@@ -2,17 +2,17 @@
   <div class="px-4 lg:px-12 mt-20 mb-4 text-center">
     <div class="flex flex-row gap-1 justify-center items-center">
       {{ $t('common.footer.copyright-part-one') }}
-      <NuxtLink
+      <ULink
         :to="projectUrl"
         target="_blank"
         class="font-semibold hover:opacity-80 duration-200"
       >
         {{ $t('common.footer.copyright-part-two') }}
-      </NuxtLink>
+      </ULink>
     </div>
   </div>
 
-  <div class="w-fit mx-auto">
+  <div class="mb-20 w-fit mx-auto">
     <LanguageSelect />
   </div>
 </template>

apps/web-app/app/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
-  <header class="z-20 h-16 bg-white dark:bg-neutral-600 fixed top-0 left-0 right-0">
-    <div class="z-10 w-full h-full px-2 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center border-b border-neutral-100 dark:border-neutral-500">
+  <header class="bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-border) sticky top-0 h-16 z-50">
+    <div class="z-10 w-full h-full px-2 md:px-4 flex flex-row flex-nowrap justify-between content-center items-center">
       <div class="mr-2 md:mr-0 flex justify-center items-center justify-items-center lg:hidden h-full lg:hover:scale-110 transition duration-200">
         <button
           aria-label="Close Navigation"

apps/web-app/app/components/Navigation/index.vue

@@ -3,7 +3,7 @@
     :data-active="isNavbarOpened"
     class="z-10 w-0 h-[calc(100dvh-64px)] invisible lg:visible lg:w-72 fixed top-16 data-[active=true]:w-full data-[active=true]:visible lg:data-[active=true]:w-72"
   >
-    <div class="w-full h-full bg-(--ui-bg-muted) px-2 md:px-4 pt-4 border-r border-neutral-100 dark:border-neutral-500">
+    <div class="w-full h-full bg-(--ui-bg-muted) px-2 md:px-4 pt-4 border-r border-(--ui-border)">
       <div class="h-full overflow-y-auto flex flex-col justify-between">
         <slot />
       </div>

apps/web-app/app/components/ProductCard.vue

@@ -1,19 +1,20 @@
 <template>
-  <NuxtLink
+  <ULink
     :to="productUrl"
-    class="bg-white dark:bg-neutral-600 rounded-2xl h-auto w-auto p-3 cursor-pointer active:scale-95 lg:active:scale-90 lg:hover:scale-95 duration-200"
+    :active="true"
+    class="h-auto w-auto cursor-pointer active:scale-95 lg:active:scale-90 lg:hover:scale-95 duration-200"
   >
-    <div class="flex flex-col justify-between h-full">
-      <div>
-        <div class="relative w-full aspect-square">
-          <ProductImage
-            :id="product?.mediaId"
-            :lazy="lazy"
-            size="sm"
-          />
-        </div>
+    <div class="flex flex-col justify-between gap-2 h-full">
+      <div class="relative w-full aspect-square">
+        <ProductImage
+          :id="product?.mediaId"
+          :lazy="lazy"
+          size="md"
+        />
+      </div>
 
-        <div class="mt-2 text-xl font-medium">
+      <div>
+        <div class="text-xl font-medium">
           <span v-if="!withSingleVariant" class="pr-1">{{ $t('app.cart.from') }}</span>
           <span>{{ price }}</span>
           <span class="pl-1 text-lg">{{ getCurrencySign(channel?.currencyCode) }}</span>
@@ -27,14 +28,17 @@
         </div>
       </div>
 
-      <div class="flex flex-row gap-2 items-center justify-center mt-2 w-full h-12 bg-neutral-100 dark:bg-neutral-700 rounded-xl">
-        <Icon :name="icons.plus" class="w-5 h-5" />
-        <div class="text-center text-base font-normal">
-          {{ $t('app.cart.add') }}
-        </div>
-      </div>
+      <UButton
+        variant="soft"
+        color="neutral"
+        size="xl"
+        icon="food:plus"
+        class="justify-center items-center font-normal"
+      >
+        {{ $t('app.cart.add') }}
+      </UButton>
     </div>
-  </NuxtLink>
+  </ULink>
 </template>
 
 <script setup lang="ts">
@@ -43,7 +47,6 @@ const { productId } = defineProps<{
   lazy?: boolean
 }>()
 
-const { icons } = useAppConfig()
 const { channel, categories, products } = await useChannel()
 const product = computed(() => products.value?.find(({ id }) => id === productId))
 

apps/web-app/app/components/form/DeleteProductVariant.vue

@@ -1,8 +1,14 @@
 <template>
   <form class="mt-3" @submit="onSubmit">
-    <UiButton type="submit" variant="destructive">
+    <UButton
+      type="submit"
+      size="xl"
+      variant="soft"
+      color="error"
+      class="w-full justify-center"
+    >
       {{ $t('center.delete.title') }}
-    </UiButton>
+    </UButton>
   </form>
 </template>