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

components/app/Announcement.vue

@@ -1,54 +1,26 @@
 <template>
-  <div class="bg-dividerLight border-b border-divider flex justify-between">
-    <span class="flex">
-      <SmartLink
-        to="https://forms.gle/8yFiEynXB7h477Ns6"
-        blank
-        class="
-          flex
-          py-2
-          px-4
-          transition
-          relative
-          items-center
-          justify-center
-          group
-        "
-      >
-        <i class="mr-4 material-icons">science</i>
-        <span class="text-secondaryDark">
-          <span class="md:hidden"> Beta Layout </span>
-          <span class="hidden md:inline">
-            You're currently viewing an experimental beta layout
-          </span>
+  <div class="bg-error flex justify-between">
+    <span
+      class="
+        flex
+        py-2
+        px-4
+        transition
+        relative
+        items-center
+        justify-center
+        group
+      "
+    >
+      <i class="mr-2 material-icons">info_outline</i>
+      <span class="text-secondaryDark">
+        <span class="md:hidden">
+          {{ $t("helpers.offline_short") }}
         </span>
-        <span
-          class="
-            border-l border-divider
-            flex
-            font-semibold
-            text-accent
-            ml-4
-            pl-4
-            transition
-            items-center
-            justify-center
-            group-hover:text-accentDark
-          "
-        >
-          <span class="md:hidden"> Give Feedback </span>
-          <span class="hidden md:inline"> Report a problem </span>
+        <span class="hidden md:inline">
+          {{ $t("helpers.offline") }}
         </span>
-      </SmartLink>
-      <SmartLink
-        to="https://hoppscotch.io"
-        class="flex transition items-center justify-center group"
-      >
-        <span class="text-secondaryDark">
-          Switch back to the Hoppscotch website
-        </span>
-      </SmartLink>
+      </span>
     </span>
-    <ButtonSecondary icon="close" />
   </div>
 </template>

components/app/Header.vue

@@ -1,53 +1,56 @@
 <template>
-  <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div class="font-bold flex-shrink-0 inline-flex items-center">
-      <AppLogo />
-    </div>
-    <div class="space-x-2 flex-shrink-0 inline-flex items-center">
-      <AppGitHubStarButton class="flex mx-2 mt-1" />
-      <ButtonSecondary
-        id="installPWA"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('header.install_pwa')"
-        icon="offline_bolt"
-        @click.native="showInstallPrompt()"
-      />
-      <ButtonPrimary
-        v-if="currentUser === null"
-        label="Login"
-        @click.native="showLogin = true"
-      />
-      <span v-else>
-        <tippy ref="user" interactive trigger="click" theme="popover" arrow>
-          <template #trigger>
-            <ProfilePicture
-              v-if="currentUser.photoURL"
-              v-tippy="{ theme: 'tooltip' }"
-              :url="currentUser.photoURL"
-              :alt="currentUser.displayName"
-              :title="currentUser.displayName"
-              indicator
-              :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+  <div>
+    <header class="flex flex-1 py-2 px-4 items-center justify-between">
+      <div class="font-bold flex-shrink-0 inline-flex items-center">
+        Hoppscotch
+      </div>
+      <div class="space-x-2 flex-shrink-0 inline-flex items-center">
+        <AppGitHubStarButton class="flex mx-2 mt-1" />
+        <ButtonSecondary
+          id="installPWA"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('header.install_pwa')"
+          icon="offline_bolt"
+          @click.native="showInstallPrompt()"
+        />
+        <ButtonPrimary
+          v-if="currentUser === null"
+          label="Login"
+          @click.native="showLogin = true"
+        />
+        <span v-else>
+          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+            <template #trigger>
+              <ProfilePicture
+                v-if="currentUser.photoURL"
+                v-tippy="{ theme: 'tooltip' }"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                :title="currentUser.displayName"
+                indicator
+                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+              />
+              <ButtonSecondary
+                v-else
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('account')"
+                icon="account_circle"
+              />
+            </template>
+            <SmartItem
+              to="/settings"
+              icon="settings"
+              :label="$t('navigation.settings')"
+              @click.native="$refs.user.tippy().hide()"
             />
-            <ButtonSecondary
-              v-else
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('account')"
-              icon="account_circle"
-            />
-          </template>
-          <SmartItem
-            to="/settings"
-            icon="settings"
-            :label="$t('navigation.settings')"
-            @click.native="$refs.user.tippy().hide()"
-          />
-          <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
-        </tippy>
-      </span>
-    </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-  </header>
+            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+          </tippy>
+        </span>
+      </div>
+      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    </header>
+    <AppAnnouncement v-if="!isOnLine" />
+  </div>
 </template>
 
 <script>

components/app/Search.vue

@@ -34,7 +34,7 @@
           v-for="(map, mapIndex) in filteredMappings"
           :key="`map-${mapIndex}`"
         >
-          <h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
+          <h5 class="my-2 text-secondaryLight py-2 px-4">
             {{ map.section }}
           </h5>
           <div

components/app/Section.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1">
+  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
     <slot></slot>
   </section>
 </template>

components/app/Share.vue

@@ -24,7 +24,7 @@
           </a>
           <button class="share-link" @click="copyAppLink">
             <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
-            <span class="font-medium mt-3">
+            <span class="mt-3">
               {{ $t("app.copy") }}
             </span>
           </button>

components/app/Shortcuts.vue

@@ -15,7 +15,11 @@
       >
         <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
         <div class="flex">
-          <ButtonSecondary icon="close" @click.native="close()" />
+          <ButtonSecondary
+            icon="close"
+            class="rounded"
+            @click.native="close()"
+          />
         </div>
       </div>
       <div class="border-b border-dividerLight">
@@ -28,7 +32,6 @@
               border border-dividerLight
               rounded
               flex
-              font-semibold font-mono
               w-full
               py-2
               pr-2
@@ -54,7 +57,7 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-bold text-secondaryDark">
+          <h5 class="font-semibold text-secondaryDark">
             {{ map.section }}
           </h5>
           <div

components/app/Sidenav.vue

@@ -130,7 +130,7 @@ export default defineComponent({
 
   span {
     @apply mt-2;
-    @apply font-semibold;
+    @apply font-font-medium;
   }
 
   &.exact-active-link {