feat: svg icons

components/smart/ChangeLanguage.vue

@@ -8,7 +8,7 @@
             :title="$t('settings.choose_language')"
             class="pr-8"
             outline
-            icon="language"
+            svg="globe"
             :label="`${
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"

components/smart/ColorModePicker.vue

@@ -9,7 +9,7 @@
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
       class="rounded"
-      :icon="getIcon(color)"
+      :svg="getIcon(color)"
       @click.native="setBGMode(color)"
     />
   </div>
@@ -38,15 +38,15 @@ export default defineComponent({
     getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
-          return "devices"
+          return "monitor"
         case "light":
-          return "light_mode"
+          return "sun"
         case "dark":
-          return "nights_stay"
+          return "cloud"
         case "black":
-          return "dark_mode"
+          return "moon"
         default:
-          return "devices"
+          return "monitor"
       }
     },
     getColorModeName(colorMode: string) {

components/smart/DeletableChip.vue

@@ -4,7 +4,7 @@
     <span class="max-w-64 px-2 truncate"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
-      icon="close"
+      svg="x"
       @click.native="$emit('chip-delete')"
     />
   </span>

components/smart/FontSizePicker.vue

@@ -7,7 +7,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
             class="pr-8"
-            icon="format_size"
+            svg="type"
             outline
             :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />

components/smart/Modal.vue

@@ -58,7 +58,7 @@
                 <ButtonSecondary
                   v-if="dimissible"
                   class="rounded"
-                  icon="close"
+                  svg="x"
                   @click.native="close"
                 />
               </span>

components/smart/Toggle.vue

@@ -26,20 +26,22 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-$useBorder: false;
+$useBorder: true;
 $borderColor: var(--divider-color);
-$activeColor: var(--accent-color);
+$activeColor: var(--divider-color);
 $inactiveColor: var(--divider-color);
-$inactiveHandleColor: var(--primary-color);
-$activeHandleColor: var(--primary-color);
+$inactiveHandleColor: var(--secondary-light-color);
+$activeHandleColor: var(--accent-color);
 $width: 1.6rem;
-$height: 0.78rem;
-$handleSpacing: 0.2rem;
+$height: 0.6rem;
+$indicatorHeight: 0.4rem;
+$indicatorWidth: 0.4rem;
+$handleSpacing: 0.1rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {
   @apply relative;
-  @apply inline-flex;
+  @apply flex;
   @apply items-center;
   @apply justify-center;
   @apply rounded-full;
@@ -57,7 +59,8 @@ $transition: all 0.2s ease-in-out;
 
   .handle {
     @apply absolute;
-    @apply inline-block;
+    @apply flex;
+    @apply flex-shrink-0;
     @apply inset-0;
     @apply rounded-full;
     @apply pointer-events-none;
@@ -65,12 +68,12 @@ $transition: all 0.2s ease-in-out;
     transition: $transition;
     margin: $handleSpacing;
     background-color: $inactiveHandleColor;
-    width: #{$height - ($handleSpacing * 2)};
-    height: #{$height - ($handleSpacing * 2)};
+    width: $indicatorWidth;
+    height: $indicatorHeight;
   }
 
   &.on {
-    background-color: $activeColor;
+    // background-color: $activeColor;
     border-color: $activeColor;
 
     .handle {