better cache all note button

src/components/FluxNote.vue

@@ -99,15 +99,17 @@ const focusREADME = () => scrollToTop()
         <a @click.prevent="focusREADME">{{ repo }}</a>
       </div>
       <div class="repo-title">
-        <h1 class="title is-1">
+        <div class="repo-header">
-          <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
+          <h1 class="title is-1">
-            {{ repo }}
+            <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
-          </router-link>
+              {{ repo }}
-        </h1>
+            </router-link>
-        <h4 class="subtitle is-5">
+          </h1>
+          <cache-all-notes />
+        </div>
+        <h2 class="subtitle is-5">
           <em>{{ user }}</em>
-        </h4>
+        </h2>
-        <cache-all-notes />
       </div>
       <slot />
       <lite-loading v-if="isLoading" />
@@ -179,6 +181,17 @@ $header-height: 40px;
     .repo-title {
       margin-top: 1rem;
 
+      .repo-header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      .title {
+        margin-bottom: 0;
+      }
+
       .title,
       .subtitle {
         text-align: center;

src/modules/note/components/CacheAllNote.vue

@@ -20,7 +20,7 @@ const confirmBeforeCachingAllNotes = () => {
     ></progress>
   </div>
   <button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
-    cache all notes
+    <img src="/assets/offline.svg" alt="offline cloud" />
   </button>
 </template>