feat: redesign

bojanrajh · Dec 13, 2023 · 635ee55 · 635ee55
1 parent ff2f6b0
commit 635ee55
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 53 deletions.
diff --git a/docs/components/IconDisplay.vue b/docs/components/IconDisplay.vue
@@ -1,15 +1,19 @@
 <template>
-  <a href="#" class="IconDisplay c-any-card" @click.prevent="$emit('select')">
-    <SwagIcon class="IconDisplay_icon" :icon="icon.name" :type="icon.mode" />
-    <span class="IconDisplay_name">{{ icon.name }}</span>
+  <a href="#" class="IconDisplay" :class="mode ? `--mode-${mode}` : null" @click.prevent.stop="$emit('select')">
+    <div class="IconDisplay_wrap">
+      <SwagIcon class="IconDisplay_icon" :icon="icon.name" :type="icon.mode" />
+      <span v-if="mode === 'inline'" class="IconDisplay_name">{{ icon.name }}</span>
+    </div>
+    <span v-if="mode !== 'inline'" class="IconDisplay_name">{{ icon.name }}</span>
   </a>
 </template>
 
 <script setup>
-import {defineProps, computed} from 'vue';
+import {computed} from 'vue';
 
 const props = defineProps({
   icon: Object,
+  mode: Object
 })
 
 const id = computed(() => {
@@ -24,16 +28,35 @@ const id = computed(() => {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  gap: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  color: var(--vp-c-text-2);
+  gap: .5rem;
+  color: var(--vp-c-text);
   &_name,
   &_icon {
-    color: var(--vp-c-text-2);
+    color: var(--vp-c-text);
   }
   &_name {
-    @apply text-xs;
+    @apply text-xs font-medium;
+  }
+  &_wrap {
+    @apply bg-[var(--sw-c-gray-50)] flex items-center justify-center;
+    width: 100%;
+    .dark & {
+      @apply bg-[var(--sw-c-gray-dark-700)];
+    }
+  }
+  &.--mode-inline {
+    flex-direction: row;
+    .IconDisplay_wrap {
+      @apply p-4 items-center gap-2;
+      justify-content: flex-start;
+      --icon-size: 1.725rem;
+    }
+  }
+  &:not(.--mode-inline) {
+    .IconDisplay_wrap {
+      aspect-ratio: 1;
+      --icon-size: 1.5rem;
+    }
   }
 }
 </style>
diff --git a/docs/components/IconSelection.vue b/docs/components/IconSelection.vue
@@ -1,21 +1,29 @@
 <template>
   <div class="IconSelection_bg" @click.prevent="$emit('switch', null)"/>
-  <div class="IconSelection c-flat-card p-8 relative" v-bind="$attrs">
-    <div>
-      <h3 @click.prevent="copyIconName">{{ icon.name }}</h3>
-      <a class="IconSelection_close" href="#"
-         @click.prevent="$emit('switch', null)">Close</a>
-
-      <div class="IconSelection_tags" v-if="icon.tags.length">
-        <span class="IconSelection_tag" v-for="tag in icon.tags">{{ tag }}</span>
+  <div class="IconSelection relative" v-bind="$attrs">
+    <div class="IconSelection_sidebar-bg">
+      <!--<a class="IconSelection_close" href="#"
+         @click.prevent="$emit('switch', null)">Close</a>-->
+
+      <!--<a :href="`${embedPoint}${icon.mode}/${icon.name}.svg`" class="btn --secondary" download>Download .svg</a>-->
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-4 items-center">
+          <SwagIcon class="--medium" :icon="icon.name" :type="icon.mode" />
+          <SwagIcon class="--small" :icon="icon.name" :type="icon.mode" />
+        </div>
+
+        <div class="flex gap-4 justify-center">
+          <SwagIcon class="--large" :icon="icon.name" :type="icon.mode" />
+        </div>
       </div>
-
-      <a :href="`${embedPoint}${icon.mode}/${icon.name}.svg`" class="btn --secondary" download>Download .svg</a>
     </div>
 
-    <SwagIcon :icon="icon.name" :type="icon.mode" />
+    <h1 @click.prevent="copyIconName">{{ icon.name }}</h1>
+    <div class="IconSelection_tags" v-if="icon.tags.length">
+      <span class="IconSelection_tag btn --subtle --xs --with-border" v-for="tag in icon.tags">{{ tag }}</span>
+    </div>
 
-    <div>
+    <!--<div>
       <h4>Sizes</h4>
       <p v-if="false && icon.sizes.length === 1">The icon is available in one size.</p>
       <div v-else class="flex gap-2">
@@ -39,33 +47,21 @@
                 class="btn --secondary --xs">{{ mode }}
         </button>
       </div>
-    </div>
+    </div>-->
 
     <div>
-      <h4>Examples</h4>
-      <Tabs>
-        <Tab title="HTML">
-          <code v-text="exampleHTML"></code>
-        </Tab>
-        <Tab title="Vue2">
-          <code v-text="exampleVue2"></code>
-        </Tab>
-        <Tab title="Vue3">
-          <code v-text="exampleVue3"></code>
-        </Tab>
-        <Tab title="React">
-          <code v-text="exampleReact"></code>
-        </Tab>
-      </Tabs>
+      <!--<h4>Examples</h4>-->
+      <textarea class="form-control" v-model="exampleHTML"></textarea>
     </div>
 
     <div>
-      <h4>Related icons</h4>
+      <h2>Related icons</h2>
       <div class="IconSelection_list">
         <IconDisplay
             v-for="icon in icons.slice(0, 4)"
             :key="icon"
             :icon="icon"
+            mode="inline"
             @select="$emit('switch', icon)"/>
       </div>
     </div>
@@ -93,6 +89,22 @@
     grid-template-columns: repeat(2, 1fr);
   }
 
+  &_sidebar-bg {
+    @apply p-6 bg-[var(--sw-c-gray-50)];
+  }
+
+  .SwagIcon {
+    &.--small {
+      --icon-size: 1rem;
+    }
+    &.--medium {
+      --icon-size: 1.725rem;
+    }
+    &.--large {
+      --icon-size: 8rem;
+    }
+  }
+
   @media (max-width: 960.5px) {
     position: fixed;
     left: 50%;
@@ -114,6 +126,8 @@
   }
 
   @media (min-width: 960.5px) {
+    position: sticky;
+    top: calc(var(--vp-nav-height) + 1rem);
     &_bg {
       display: none;
     }

diff --git a/docs/components/Search.vue b/docs/components/Search.vue
@@ -10,12 +10,18 @@
     <div class="search-bar">
       <input class="form-control" name="searchbar" type="text" @input="debounceInput" placeholder="Search icons..."/>
 
-      <button id="regular" class="btn" :class="[ mode === 'regular' ? '--primary' : '--secondary' ]" aria-label="Regular"
-              @click="mode = 'regular'">Regular
-      </button>
-      <button id="solid" class="btn" :class="[ mode === 'solid' ? '--primary' : '--secondary' ]" aria-label="Solid"
-              @click="mode = 'solid'">Solid
-      </button>
+      <div class="flex gap-4">
+        <button id="regular" class="btn --with-border" :class="[ mode === 'regular' ? '--subtle-2' : '--subtle' ]" aria-label="Regular"
+                @click="mode = 'regular'">
+          <SwagIcon icon="bell" />
+          Regular
+        </button>
+        <button id="solid" class="btn --with-border" :class="[ mode === 'solid' ? '--subtle-2' : '--subtle' ]" aria-label="Solid"
+                @click="mode = 'solid'">
+          <SwagIcon icon="bell" type="solid" />
+          Solid
+        </button>
+      </div>
     </div>
 
     <SearchResult :phrase="phrase" :mode="mode"/>
@@ -54,18 +60,25 @@ const debounceInput = (event) => {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  margin: 20px auto;
-  padding: 10px 0 10px 45px;
-  background: transparent url("/resources/meteor-icon-kit/public/icons/regular/search.svg") no-repeat 15px center;
+  margin: 48px auto;
   background-size: 15px 15px;
   font-size: 16px;
   border: none;
   border-radius: 8px;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 48px;
+
+  @media (min-width: 960.5px) {
+    .btn {
+      @apply justify-center;
+      width: 11.5rem;
+    }
+  }
 }
 
 .search-bar input {
   flex: 1;
+  background: transparent url("/resources/meteor-icon-kit/public/icons/regular/search.svg") no-repeat calc(100% - 15px) center;
+  background-size: 1rem;
 }
 </style>
diff --git a/docs/components/SearchResult.vue b/docs/components/SearchResult.vue
@@ -66,20 +66,22 @@ const switchSelectedIcon = (data) => {
 
   &_list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
     flex-direction: row;
     justify-content: space-evenly;
-    align-items: stretch;
-    gap: 32px;
+    align-items: flex-start;
+    gap: 24px;
+    row-gap: 2rem;
     flex-wrap: wrap;
     flex-grow: 1;
   }
 
   &_sidebar {
     @media (min-width: 960.5px) {
-      flex-basis: 16rem;
+      flex-basis: 24rem;
       flex-grow: 0;
       flex-shrink: 0;
+      position: relative;
     }
   }
 }