feat: move images to assets directory

client-app/config/settings_data.json

@@ -34,10 +34,10 @@
 
     "default_return_url": "/",
 
-    "logo_image": "/static/images/common/logo.svg",
-    "logo_inverted_image": "/static/images/common/logo-white.svg",
+    "logo_image": "logo.svg",
+    "logo_inverted_image": "logo-white.svg",
     "favicon_image": "/static/icons/favicon-32x32.png",
-    "homepage_background_image": "/static/images/home/main-banner.webp",
+    "homepage_background_image": "main-banner.webp",
 
     "image_thumbnails_enabled": true,
     "image_thumbnails_original_fallback_enabled": true,
@@ -123,22 +123,22 @@
     "social_sharing_services": [
       {
         "name": "Facebook",
-        "icon": "/static/icons/social/facebook-icon.svg",
+        "icon": "social-facebook-icon.svg",
         "url_template": "https://www.facebook.com/sharer.php?u={0}"
       },
       {
         "name": "Twitter",
-        "icon": "/static/icons/social/twitter-icon.svg",
+        "icon": "social-twitter-icon.svg",
         "url_template": "https://twitter.com/share?url={0}"
       },
       {
         "name": "Pinterest",
-        "icon": "/static/icons/social/pinterest-icon.svg",
+        "icon": "social-pinterest-icon.svg",
         "url_template": "https://pinterest.com/pin/create/bookmarklet/?url={0}"
       },
       {
         "name": "Telegram",
-        "icon": "/static/icons/social/telegram-icon.svg",
+        "icon": "social-telegram-icon.svg",
         "url_template": "https://t.me/share/url?url={0}"
       }
     ],

client-app/core/constants/images.ts

@@ -1 +1 @@
-export const NO_IMAGE_URL = "/static/images/common/no-image.svg";
+export const NO_IMAGE_URL = "no-image.svg";

client-app/modules/purchase-requests/components/from-file.vue

@@ -5,33 +5,39 @@
         <p class="mb-3 text-sm">
           {{ $t("purchase_request.from_file.processing.message") }}
         </p>
+
         <VcLoaderWithText
           centered
           :text="$t('purchase_request.from_file.processing.loading_message')"
           class="mb-6 min-h-[230px] w-full border border-neutral-200 bg-neutral-50"
         />
+
         <nav class="flex justify-end border-t py-3">
           <VcButton min-width="9rem">{{ $t("purchase_request.from_file.processing.cancel") }}</VcButton>
         </nav>
       </section>
+
       <template v-else>
         <header class="text-sm max-md:text-center">
           {{ $t("purchase_request.from_file.upload.message") }}
         </header>
+
         <aside class="row-span-2">
           <figure>
             <figcaption class="mb-3 hidden text-sm md:block">
               {{ $t("purchase_request.from_file.upload.examples.title") }}
             </figcaption>
+
             <VcImage
               id="example"
-              src="/static/images/bulk-order/documents-example.webp"
+              src="documents-example.webp"
               :alt="$t('purchase_request.from_file.upload.examples.alt')"
               class="h-[230px] md:object-cover md:object-left"
               lazy
             />
           </figure>
         </aside>
+
         <section class="items-stretch">
           <VcFileUploader class="h-full" v-bind="fileOptions" :files="files" @add-files="onAddFiles" />
         </section>

client-app/pages/403.vue

@@ -19,7 +19,7 @@
       </div>
     </template>
     <template #right>
-      <VcImage src="/static/images/errors/403.webp" :alt="$t('pages.403.img_alt')" class="w-full max-w-md" lazy />
+      <VcImage src="403.webp" :alt="$t('pages.403.img_alt')" class="w-full max-w-md" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/404.vue

@@ -19,7 +19,7 @@
       </div>
     </template>
     <template #right>
-      <VcImage src="/static/images/errors/404.webp" :alt="$t('pages.404.img_alt')" class="w-full max-w-md" lazy />
+      <VcImage src="404.webp" :alt="$t('pages.404.img_alt')" class="w-full max-w-md" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/500.vue

@@ -19,7 +19,7 @@
       </div>
     </template>
     <template #right>
-      <VcImage src="/static/images/errors/500.webp" :alt="$t('pages.500.img_alt')" class="w-full max-w-md" lazy />
+      <VcImage src="500.webp" :alt="$t('pages.500.img_alt')" class="w-full max-w-md" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/account/checkout-defaults.vue

@@ -39,7 +39,7 @@
               <VcImage
                 :alt="$t('common.placeholders.select_payment_method')"
                 class="size-12 rounded-sm bg-neutral-100"
-                src="/static/icons/placeholders/select-payment.svg"
+                src="select-payment.svg"
               />
 
               {{ $t("common.placeholders.select_payment_method") }}
@@ -82,7 +82,7 @@
               <VcImage
                 :alt="$t('common.placeholders.select_delivery_method')"
                 class="size-12 rounded-sm bg-neutral-100"
-                src="/static/icons/placeholders/select-shipping.svg"
+                src="select-shipping.svg"
               />
 
               {{ $t("common.placeholders.select_delivery_method") }}

client-app/pages/account/dashboard.vue

@@ -29,7 +29,7 @@
       <VcWidget :title="$t('pages.account.dashboard.monthly_report_card.title')" class="lg:w-0 lg:grow">
         <div class="flex content-center space-x-9 lg:space-x-4">
           <VcImage
-            src="/static/images/dashboard/spend-chart.svg"
+            src="spend-chart.svg"
             class="size-24"
             :alt="$t('pages.account.dashboard.monthly_report_card.spend_chart_alt')"
             lazy

client-app/pages/account/order-payment.vue

@@ -40,8 +40,8 @@
           <!-- Successful payment -->
           <VcEmptyPage
             v-if="success"
-            image="/static/images/payment/payment-successful.webp"
-            mobile-image="/static/images/payment/payment-successful.webp"
+            image="order-payment-successful.webp"
+            mobile-image="order-payment-successful.webp"
             class="-mx-6 -mb-6 -mt-16 md:-mt-6 lg:-mx-9 lg:pl-14"
           >
             <template #description>
@@ -78,8 +78,8 @@
           <!-- Payment failure -->
           <VcEmptyPage
             v-else-if="failure"
-            image="/static/images/payment/payment-failed.webp"
-            mobile-image="/static/images/payment/payment-failed.webp"
+            image="order-payment-failed.webp"
+            mobile-image="order-payment-failed.webp"
             class="-mx-9 -mb-6 -mt-16 md:-mt-6 lg:pl-14"
           >
             <template #description>
@@ -183,7 +183,7 @@
                   </template>
                   <template v-else>
                     <VcImage
-                      src="/static/icons/placeholders/select-payment.svg"
+                      src="select-payment.svg"
                       class="mr-3.5 inline-block size-10 object-center md:size-12"
                       lazy
                     />

client-app/pages/blocked.vue

@@ -1,5 +1,5 @@
 <template>
-  <VcEmptyPage image="/static/images/blocked/image.webp" mobile-image="/static/images/blocked/image.webp">
+  <VcEmptyPage image="blocked.webp" mobile-image="blocked.webp">
     <template #description>
       <VcTypography tag="h1" class="mb-6">
         {{ $t("pages.blocked.title") }}

client-app/pages/cart.vue

@@ -5,8 +5,8 @@
     v-else-if="!cart?.items?.length"
     :title="$t('pages.cart.title')"
     :description="$t('pages.cart.empty_cart_description')"
-    image="/static/images/errors/emptyCart.webp"
-    mobile-image="/static/images/errors/emptyCartMobile.webp"
+    image="emptyCart.webp"
+    mobile-image="emptyCartMobile.webp"
     :breadcrumbs="breadcrumbs"
   >
     <template #actions>

client-app/pages/change-password.vue

@@ -17,7 +17,7 @@
     </template>
 
     <template #right>
-      <VcImage class="max-w-md" src="/static/images/sign-in/sign-in-page-image.webp" lazy />
+      <VcImage class="max-w-md" src="sign-in-page-image.webp" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/checkout/completed.vue

@@ -1,9 +1,5 @@
 <template>
-  <VcEmptyPage
-    image="/static/images/order-completed.webp"
-    mobile-image="/static/images/order-completed.webp"
-    class="flex grow flex-col"
-  >
+  <VcEmptyPage image="order-completed.webp" mobile-image="order-completed.webp" class="flex grow flex-col">
     <template #title>
       <h1 class="mb-3 text-center text-2xl font-bold uppercase lg:hidden lg:text-left">
         {{ $t("pages.checkout_complete.title") }}

client-app/pages/checkout/payment-result.vue

@@ -1,11 +1,7 @@
 <template>
   <VcEmptyPage
-    :image="
-      isPaymentSuccess ? '/static/images/order-payment-successful.webp' : '/static/images/order-payment-failed.webp'
-    "
-    :mobile-image="
-      isPaymentSuccess ? '/static/images/order-payment-successful.webp' : '/static/images/order-payment-failed.webp'
-    "
+    :image="isPaymentSuccess ? 'order-payment-successful.webp' : 'order-payment-failed.webp'"
+    :mobile-image="isPaymentSuccess ? 'order-payment-successful.webp' : 'order-payment-failed.webp'"
     class="flex grow flex-col"
   >
     <template #title>

client-app/pages/compare-products.vue

@@ -4,8 +4,8 @@
     :breadcrumbs="breadcrumbs"
     :title="$t('pages.compare.empty_list.title')"
     :description="$t('pages.compare.empty_list.message')"
-    image="/static/images/errors/emptyCompareList.webp"
-    mobile-image="/static/images/errors/emptyCompareListMobile.webp"
+    image="emptyCompareList.webp"
+    mobile-image="emptyCompareListMobile.webp"
   >
     <template #actions>
       <VcButton :to="{ name: 'Catalog' }">

client-app/pages/confirm-email.vue

@@ -1,10 +1,6 @@
 <template>
   <!-- Success -->
-  <VcEmptyPage
-    v-if="emailConfirmed || linkSentSuccessfully"
-    image="/static/images/email.webp"
-    class="flex grow flex-col"
-  >
+  <VcEmptyPage v-if="emailConfirmed || linkSentSuccessfully" image="email.webp" class="flex grow flex-col">
     <template #description>
       <VcTypography tag="h1" class="mb-6 text-center lg:text-left">
         {{ $t("pages.confirm_email.header") }}
@@ -43,7 +39,7 @@
   <!-- Error -->
   <VcEmptyPage
     v-else-if="loaded && (!emailConfirmed || !linkSentSuccessfully)"
-    image="/static/images/email.webp"
+    image="email.webp"
     class="flex grow flex-col"
   >
     <template #description>

client-app/pages/confirm-invitation.vue

@@ -99,7 +99,7 @@
     </template>
 
     <template #right>
-      <VcImage class="max-w-md" src="/static/images/sign-up/image.webp" lazy />
+      <VcImage class="max-w-md" src="sign-up-page-image.webp" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/demo-landing.vue

@@ -27,10 +27,7 @@
             </div>
           </div>
           <div class="order-1 aspect-video rounded bg-neutral-200 lg:order-2">
-            <VcImage
-              src="/static/images/demo-landing/note.webp"
-              :alt="$t('pages.demo_landing.primary_block.image_alt')"
-            />
+            <VcImage src="note.webp" :alt="$t('pages.demo_landing.primary_block.image_alt')" />
           </div>
         </div>
       </div>
@@ -57,7 +54,7 @@
         </div>
         <div class="mt-16 grid grid-cols-1 items-center gap-x-20 gap-y-10 px-8 lg:grid-cols-3 lg:px-0">
           <div class="text-center">
-            <VcImage src="/static/images/demo-landing/feat-1.svg" class="mx-auto mb-9 h-24" lazy />
+            <VcImage src="feat-1.svg" class="mx-auto mb-9 h-24" lazy />
             <div class="mb-3 text-2xl font-bold uppercase">
               {{ $t("pages.demo_landing.features_block.feature_1.title") }}
             </div>
@@ -66,7 +63,7 @@
             </div>
           </div>
           <div class="text-center">
-            <VcImage src="/static/images/demo-landing/feat-2.svg" class="mx-auto mb-9 h-24" lazy />
+            <VcImage src="feat-2.svg" class="mx-auto mb-9 h-24" lazy />
             <div class="mb-3 text-2xl font-bold uppercase">
               {{ $t("pages.demo_landing.features_block.feature_2.title") }}
             </div>
@@ -75,7 +72,7 @@
             </div>
           </div>
           <div class="text-center">
-            <VcImage src="/static/images/demo-landing/feat-3.svg" class="mx-auto mb-9 h-24" lazy />
+            <VcImage src="feat-3.svg" class="mx-auto mb-9 h-24" lazy />
             <div class="mb-3 text-2xl font-bold uppercase">
               {{ $t("pages.demo_landing.features_block.feature_3.title") }}
             </div>

client-app/pages/forgot-password.vue

@@ -25,7 +25,7 @@
     </template>
 
     <template #right>
-      <VcImage class="max-w-md" src="/static/images/sign-in/sign-in-page-image.webp" lazy />
+      <VcImage class="max-w-md" src="sign-in-page-image.webp" lazy />
     </template>
   </TwoColumn>
 </template>

client-app/pages/home.vue

@@ -2,15 +2,15 @@
   <div ref="homePageAnchor">
     <LoginFormSection />
     <!-- Main content -->
-    <div class="main">
+    <div>
       <div class="container mx-auto px-6 pb-40 pt-32 md:px-12">
         <div class="px-6 text-center text-3xl font-bold">
           {{ $t("pages.home.feature_descriptions_block.title") }}
         </div>
         <div class="mx-auto mt-24 flex flex-wrap justify-between">
           <div class="mb-24 w-full md:mb-0 md:mt-44 md:w-1/2 lg:w-1/4">
             <VcImage
-              src="/static/images/home/hexa-1.webp"
+              src="hexa-1.webp"
               :alt="$t('pages.home.feature_descriptions_block.feature_1')"
               class="mx-auto w-full"
               lazy
@@ -21,7 +21,7 @@
           </div>
           <div class="mb-24 w-full md:mb-0 md:w-1/2 lg:w-1/4">
             <VcImage
-              src="/static/images/home/hexa-2.webp"
+              src="hexa-2.webp"
               :alt="$t('pages.home.feature_descriptions_block.feature_2')"
               class="mx-auto w-full"
               lazy
@@ -32,7 +32,7 @@
           </div>
           <div class="mb-24 w-full md:mb-0 md:mt-44 md:w-1/2 lg:w-1/4">
             <VcImage
-              src="/static/images/home/hexa-3.webp"
+              src="hexa-3.webp"
               :alt="$t('pages.home.feature_descriptions_block.feature_3')"
               class="mx-auto w-full"
               lazy
@@ -43,7 +43,7 @@
           </div>
           <div class="mb-24 w-full md:mb-0 md:w-1/2 lg:w-1/4">
             <VcImage
-              src="/static/images/home/hexa-4.webp"
+              src="hexa-4.webp"
               :alt="$t('pages.home.feature_descriptions_block.feature_4')"
               class="mx-auto w-full"
               lazy
@@ -101,27 +101,3 @@ watch(homePageAnchorIsVisible, (value) => {
   }
 });
 </script>
-
-<style scoped>
-.main {
-  background-image: url(/images/home/bevel-top.webp), url(/images/home/bevel-bottom.webp),
-    url(/images/home/hexa-left.webp), url(/images/home/hexa-right.webp);
-  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-  background-size: 100%, 100%, auto, auto;
-  background-position:
-    top,
-    bottom,
-    left top 40%,
-    right bottom;
-}
-
-@media (max-width: 768px) {
-  .main {
-    background-position:
-      top,
-      bottom,
-      left -140px top 40%,
-      right -140px bottom;
-  }
-}
-</style>

client-app/pages/reset-password.vue

@@ -48,11 +48,7 @@
     </template>
 
     <template #right>
-      <VcImage
-        class="max-w-md"
-        :src="isResetMode ? '/static/images/sign-in/sign-in-page-image.webp' : '/static/images/sign-up/image.webp'"
-        lazy
-      />
+      <VcImage class="max-w-md" :src="isResetMode ? 'sign-in-page-image.webp' : 'sign-up-page-image.webp'" lazy />
     </template>
   </TwoColumn>
 </template>