refactor(ui): minor inconsistency fixes

components/app/Announcement.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="bg-primary border-b border-dividerLight flex justify-between">
+  <div
+    class="
+      bg-primary bg-dividerLight
+      border-b border-divider
+      flex
+      justify-between
+    "
+  >
     <span class="flex">
       <SmartLink
         to="https://forms.gle/8yFiEynXB7h477Ns6"

components/button/Primary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
@@ -27,7 +27,7 @@
           gradient,
       },
       {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-accent hover:border-accentDark focus:border-accentDark':
           outline,
       },
     ]"

components/http/Request.vue

@@ -68,14 +68,15 @@
         :placeholder="$t('url')"
         @keyup.enter="newSendRequest()"
       />
-      <!-- <SmartUrlField v-else v-model="uri" /> -->
     </div>
+    <!-- <SmartUrlField v-else v-model="uri" /> -->
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none font-bold"
+        class="rounded-none"
         :label="!loading ? $t('send') : $('cancel')"
         :shortcuts="[getSpecialKey(), 'G']"
+        outline
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="inline-flex">
@@ -88,7 +89,11 @@
           arrow
         >
           <template #trigger>
-            <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
+            <ButtonPrimary
+              class="rounded-l-none"
+              icon="keyboard_arrow_down"
+              outline
+            />
           </template>
           <SmartItem
             :label="$t('import_curl')"

components/smart/AccentModePicker.vue

@@ -14,8 +14,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
+      :class="[{ 'bg-primaryLight': color === active }]"
       icon="lens"
+      :color="color"
       @click.native="setActiveColor(color)"
     />
   </div>

components/smart/ColorModePicker.vue

@@ -5,10 +5,9 @@
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-      :class="[
-        { 'bg-primary': color === activeColor },
-        { 'text-accent hover:text-accent': color === activeColor },
-      ]"
+      :class="{
+        'bg-primaryLight !text-accent hover:text-accent': color === activeColor,
+      }"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
     />

components/smart/Toggle.vue

@@ -24,9 +24,9 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--secondary-light-color);
+$borderColor: var(--divider-dark-color);
 $activeColor: var(--accent-color);
-$inactiveColor: var(--secondary-light-color);
+$inactiveColor: var(--divider-dark-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
 $width: 32px;