From 0841bbfe50c142624a1d79d050376ebb077c6461 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 20 Oct 2024 00:09:41 +0200
Subject: [PATCH] better cache all note button

---
 src/components/FluxNote.vue                  | 29 ++++++++++++++------
 src/modules/note/components/CacheAllNote.vue |  2 +-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index ff7bd86..b175311 100644
--- a/src/components/FluxNote.vue
+++ b/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">
-          <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
-            {{ repo }}
-          </router-link>
-        </h1>
-        <h4 class="subtitle is-5">
+        <div class="repo-header">
+          <h1 class="title is-1">
+            <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
+              {{ repo }}
+            </router-link>
+          </h1>
+          <cache-all-notes />
+        </div>
+        <h2 class="subtitle is-5">
           <em>{{ user }}</em>
-        </h4>
-        <cache-all-notes />
+        </h2>
       </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;
diff --git a/src/modules/note/components/CacheAllNote.vue b/src/modules/note/components/CacheAllNote.vue
index cb6da18..b3ca9d0 100644
--- a/src/modules/note/components/CacheAllNote.vue
+++ b/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>