refactor(ui): better font weight, icon hover states, etc

components/smart/AccentModePicker.vue

@@ -15,6 +15,7 @@
       v-tippy="{ theme: 'tooltip' }"
       :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
       :class="[{ 'bg-primaryLight': color === active }]"
+      class="rounded"
       icon="lens"
       :color="color"
       @click.native="setActiveColor(color)"

components/smart/AceEditor.vue

@@ -6,9 +6,7 @@
       class="
         bg-primaryLight
         border-t border-divider
-        flex flex-nowrap
-        font-mono
-        flex-1
+        flex flex-nowrap flex-1
         py-1
         px-4
         bottom-0
@@ -23,7 +21,6 @@
         :key="`p-${index}`"
         class="
           cursor-pointer
-          font-semibold
           flex-grow-0 flex-shrink-0
           text-secondaryLight
           inline-flex
@@ -48,7 +45,6 @@
           <SmartItem
             v-for="(sibling, siblingIndex) in currentSibling"
             :key="`p-${index}-sibling-${siblingIndex}`"
-            class="font-mono"
             :label="sibling.key ? sibling.key.value : i"
             @click.native="goToSibling(sibling)"
           />

components/smart/AutoComplete.vue

@@ -186,9 +186,7 @@ export default {
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
-  @apply relative;
-  @apply flex;
-  @apply w-full;
+  @apply contents;
 
   input:focus + ul.suggestions,
   ul.suggestions:hover {
@@ -211,8 +209,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
-      @apply text-secondaryLight;
-      @apply font-semibold font-mono;
+      @apply text-secondary;
 
       &:last-child {
         border-radius: 0 0 8px 8px;

components/smart/ColorModePicker.vue

@@ -8,6 +8,7 @@
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
+      class="rounded"
       :icon="getIcon(color)"
       @click.native="setBGMode(color)"
     />

components/smart/ConfirmModal.vue

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <label class="font-semibold">
+        <label>
           {{ title }}
         </label>
       </div>

components/smart/DeletableChip.vue

@@ -2,7 +2,7 @@
   <span class="chip">
     <span><slot></slot></span>
     <ButtonSecondary
-      class="p-2 close-button icon"
+      class="rounded p-2 close-button icon"
       icon="close"
       @click.native="$emit('chip-delete')"
     />
@@ -19,7 +19,7 @@
   @apply pl-4;
   @apply bg-primaryDark;
   @apply text-secondary;
-  @apply font-mono font-semibold;
+
   @apply border border-divider;
 }
 

components/smart/EnvInput.vue

@@ -464,12 +464,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 [contenteditable="true"] {
+  @apply text-secondaryDark;
+  @apply font-medium;
+
   &:empty {
     line-height: 1.9;
 
     &::before {
-      @apply text-secondary;
-      @apply opacity-75;
+      @apply text-secondaryDark;
+      @apply opacity-25;
       @apply pointer-events-none;
 
       content: attr(placeholder);
@@ -479,7 +482,7 @@ export default defineComponent({
 
 .env-input-container {
   @apply inline-grid;
-  @apply w-full;
+  @apply flex-1;
 }
 
 .env-input {

components/smart/Item.vue

@@ -5,7 +5,7 @@
     :blank="blank"
     class="
       rounded
-      font-semibold
+      font-medium
       py-2
       px-4
       transition
@@ -60,7 +60,7 @@
       class="flex-1 inline-flex items-start"
       :class="{ 'flex-col': description }"
     >
-      <div class="font-semibold">
+      <div>
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">

components/smart/Modal.vue

@@ -57,6 +57,7 @@
                 <slot name="actions"></slot>
                 <ButtonSecondary
                   v-if="dimissible"
+                  class="rounded"
                   icon="close"
                   @click.native="close"
                 />

components/smart/Tabs.vue

@@ -97,7 +97,7 @@ export default {
       @apply ml-2;
       @apply text-8px;
       @apply border border-divider;
-      @apply font-mono;
+
       @apply rounded;
       @apply text-secondaryLight;
     }

components/smart/Toggle.vue

@@ -6,7 +6,7 @@
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="cursor-pointer font-semibold pl-0 align-middle truncate">
+    <label class="cursor-pointer pl-0 align-middle truncate">
       <slot></slot>
     </label>
   </div>