Crash report icon text (#169)

* add Crash Report/Settings icon link text * lint
bitsy-ai · Jul 14, 2023 · 99771f9 · 99771f9
1 parent b2842ef
commit 99771f9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/components/nav/TopNav.vue b/src/components/nav/TopNav.vue
@@ -58,7 +58,7 @@
           </DisclosureButton>
         </div>
         <!-- nats connection status indicator -->
-        <div class="hidden sm:ml-6 sm:flex sm:items-center">
+        <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
           <!-- 
             <button type="button" class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
               <span class="sr-only">View notifications</span>
@@ -71,21 +71,21 @@
               router.currentRoute.value.name == 'Settings'
                 ? 'border-indigo-500 text-gray-900'
                 : 'border-transparent text-gray-500 hover:text-gray-700',
-              'inline-flex items-center px-1 pt-1 text-sm font-medium mr-4',
+              'cursor-pointer border-transparent border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
             ]"
           >
-            <Cog6ToothIcon class="h-6 w-6" />
+            <Cog6ToothIcon class="h-6 w-6 mr-2" />Settings
           </router-link>
           <a
             @click="alerts.openCrashReport"
             :class="[
-              'border-transparent text-gray-500 hover:text-gray-700',
+              'cursor-pointer border-transparent border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               'inline-flex items-center px-1 pt-1 text-sm font-medium mr-4',
             ]"
           >
-            <FireIcon class="h-6 w-6" />
+            <FireIcon class="h-6 w-6 mr-2" />Crash Report
           </a>
-          <CloudSyncStatus />
+          <CloudSyncStatus class="justify-self-end" />
         </div>
       </div>
     </div>

diff --git a/src/components/status/CloudSyncStatus.vue b/src/components/status/CloudSyncStatus.vue
@@ -7,14 +7,15 @@
       :duration="{ enter: 800, leave: 500 }"
     >
       <TextSpinner
-        text="Syncing..."
+        text="Syncing"
+        class="text-sm font-medium"
         v-if="
           nats.status == ConnectionStatus.ConnectionNotStarted ||
           nats.status == ConnectionStatus.ConnectionLoading
         "
       />
       <div
-        class="flex items-center space-x-3 font-medium text-gray-600"
+        class="flex items-center space-x-3 text-sm font-medium text-gray-600"
         v-else-if="nats.status == ConnectionStatus.ConnectionReady"
       >
         <div
@@ -24,11 +25,11 @@
         <span class="text-grey-600">Synced</span>
       </div>
       <div
-        class="flex items-center space-x-3 font-medium text-gray-600"
+        class="flex items-center space-x-3 text-sm font-medium text-gray-600"
         v-else-if="nats.status == ConnectionStatus.ConnectionError"
       >
         <div
-          class="bg-red-500 flex-shrink-0 w-2.5 h-2.5 rounded-full"
+          class="bg-red-500 flex-shrink-0 w-2.5 h-2.5 text-sm font-medium rounded-full"
           aria-hidden="true"
         ></div>
         <span class="text-grey-600">Error</span>