feat: tweaks, icons

shopware · Oct 20, 2023 · 373046d · 373046d
1 parent 86875d9
commit 373046d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -7,7 +7,7 @@ import {resolve} from "path";
 import { CssCleanup, baseCleanup } from "../node_modules/@shopware-docs/vitepress/src/plugins/cssCleanup";
 import Inspect from "vite-plugin-inspect";
 
-import {createSitemap, storeRedirects} from "../node_modules/@shopware-docs/vitepress/src/helpers";
+import {copyAdditionalAssets, createSitemap, storeRedirects} from "../node_modules/@shopware-docs/vitepress/src/helpers";
 import navigation from "./navigation";
 
 import {
@@ -104,6 +104,20 @@ export default defineConfigWithTheme<ThemeConfig>({
   },
 
   async buildEnd() {
+    /**
+     * Copy additional assets not present in the assets or public dir.
+     */
+    await copyAdditionalAssets([
+      {
+        src: './resources/meteor-icon-kit/public/icons/regular',
+        dst: 'icons/regular',
+      },
+      {
+        src: './resources/meteor-icon-kit/public/icons/solid',
+        dst: 'icons/solid',
+      },
+    ]);
+
     /**
      * Copy redirects.
      */

diff --git a/src/components/home/SwagExposed.vue b/src/components/home/SwagExposed.vue
@@ -13,7 +13,7 @@
     </div>
     <div>
       <div class="h-label">Product Experience</div>
-      <h2 class="h-homepage md:max-w-1/2">We empower you to build the exceptional - Our Design System makes UX and UI
+      <h2 class="h-homepage md:max-w-7/12">We empower you to build the exceptional - Our Design System makes UX and UI
         easily accessible</h2>
       <ul class="SwagExposed_links">
         <li><a href="#">Shopware Design Principles</a></li>
@@ -43,7 +43,7 @@
   @apply grid gap-24;
   grid-template-columns: 100%;
   ul.SwagExposed_links {
-    @apply flex p-0 m-0 mt-6 gap-12 gap-y-4 flex-wrap;
+    @apply flex p-0 m-0 mt-5 gap-12 gap-y-4 flex-wrap;
     list-style-type: none;
 
     li {

diff --git a/src/components/home/SwagLine.vue b/src/components/home/SwagLine.vue
@@ -19,11 +19,11 @@
   border-width: 1px 0;
 
   ul {
-    @apply flex flex-wrap gap-5 gap-y-4 m-0 p-0 py-4 items-center;
+    @apply flex flex-wrap gap-3 gap-y-4 m-0 p-0 py-4 items-center;
     list-style-type: none;
   }
   li {
-    @apply m-0 p-0 flex gap-5 items-center flex-row;
+    @apply m-0 p-0 flex gap-3 items-center flex-row;
     font-family: Inter;
     font-size: 0.75rem;
     font-style: normal;

diff --git a/src/components/home/SwagResources.vue b/src/components/home/SwagResources.vue
@@ -5,8 +5,8 @@
     <div class="SwagResources_grid">
 
       <a href="/themes.html" class="HomepageCard_item">
-        <span class="HomepageCard_icon">
-          <SwagIcon icon="image" type="solid" />
+        <span class="HomepageCard_icon --is-orange">
+          <SwagIcon icon="figma" type="solid" />
         </span>
         <span class="HomepageCard_heading">
           Figma libraries
@@ -17,7 +17,7 @@
 
       <a href="/themes.html" class="HomepageCard_item --has-double-height">
         <span class="HomepageCard_icon">
-          <SwagIcon icon="image" type="solid" />
+          <SwagIcon icon="bold" type="solid" />
         </span>
         <span class="HomepageCard_heading">
           Fonts
@@ -28,7 +28,7 @@
 
       <a href="/themes.html" class="HomepageCard_item --has-double-height">
         <span class="HomepageCard_icon">
-          <SwagIcon icon="image" type="solid" />
+          <SwagIcon icon="comments" type="solid" />
         </span>
         <span class="HomepageCard_heading">
           Language and grammar
@@ -38,8 +38,8 @@
       </a>
 
       <a href="/themes.html" class="HomepageCard_item">
-        <span class="HomepageCard_icon">
-          <SwagIcon icon="image" type="solid" />
+        <span class="HomepageCard_icon --is-blue">
+          <SwagIcon icon="shopware" type="solid" />
         </span>
         <span class="HomepageCard_heading">
           Logo library
@@ -66,6 +66,14 @@
     }
   }
 }
+.HomepageCard_icon {
+  &.--is-orange {
+    background: #E89069;
+  }
+  &.--is-blue {
+    background: #189EFF;
+  }
+}
 </style>
 <script setup lang="ts">
 </script>