Changed buttons to icons

Savign secret now refreshes the component

frontend/src/App.vue

@@ -6,23 +6,24 @@ import ListSecrets from "./components/ListSecrets.vue";
 
 <template>
   <div>
-    <div id="header">
+    <div id="header" class="header">
       <span class="logo">FastAuth</span>
       <div class="header-buttons" v-if="loggedin">
-        <el-button type="primary" class="ml-2" @click="creationDialog = true">
-          Create
-        </el-button>
-        <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
-        <el-button type="info" @click="refresh">Refresh</el-button>
+        <button class="header-button" title="Refresh secrets" @click="refresh">
+          <img src="./assets/refresh-icon.png" class="button-icon" />
+        </button>
+        <button class="header-button" title="logout" @click="logout">
+          <img src="./assets/logout-icon.png" class="button-icon" />
+        </button>
       </div>
     </div>
 
     <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
-      <CreateSecret @close="creationDialog = false" />
+      <CreateSecret @close="secretSaved" />
     </el-dialog>
 
     <el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw">
-      <CreateSecret :editSecret="editingSecret" @close="editDialog = false" />
+      <CreateSecret :editSecret="editingSecret" @close="secretSaved" />
     </el-dialog>
 
     <div class="container">
@@ -41,6 +42,7 @@ import ListSecrets from "./components/ListSecrets.vue";
       </el-button> -->
       <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" />
     </div>
+    <button class="create-floating" @click="creationDialog = true">+</button>
   </div>
 </template>
 
@@ -55,7 +57,7 @@ export default {
       apiBaseUrl: "http://localhost:8000",
       editDialog: false,
       editingSecret: {},
-      timerWidth: 100,
+      timerWidth: 0,
     };
   },
   methods: {
@@ -66,9 +68,8 @@ export default {
 
     secretSaved() {
       this.creationDialog = false;
-      console.log("before update", this.listUpdated);
+      this.editDialog = false;
       this.listUpdated += 1;
-      console.log("after update", this.listUpdated);
     },
 
     async validateToken() {
@@ -112,7 +113,7 @@ export default {
     },
 
     startTimer() {
-      console.log("start timer called");
+      // console.log("start timer called");
       this.interval = setInterval(() => {
         const now = new Date();
         const seconds = now.getSeconds();
@@ -136,17 +137,7 @@ export default {
 };
 </script>
 
-<style>
-.header {
-  position: absolute;
-  width: 100vw;
-  height: 3rem;
-  padding: 0.3rem;
-  left: 0;
-  top: 0;
-  background-color: aquamarine;
-}
-
+<style scoped>
 .container {
   margin-top: 6vh;
 }
@@ -160,10 +151,10 @@ export default {
   display: none !important;
 }
 
-#header {
+.header {
   width: 100vw;
-  height: 3rem;
-  position: absolute;
+  height: 48px;
+  position: fixed;
   left: 0;
   top: 0;
   background-color: rgb(170, 247, 247);
@@ -172,6 +163,7 @@ export default {
   padding: 0 12px 0 12px;
   justify-content: space-between;
   box-shadow: 2px 0px 8px #aaa;
+  z-index: 999;
 }
 .logo {
   font-size: 1.3rem;
@@ -180,8 +172,36 @@ export default {
 }
 
 .timer {
-  margin-top: 1.2rem;
+  position: fixed;
+  bottom: 4px;
   height: 0.3rem;
   background-color: green;
 }
+
+.create-floating {
+  position: fixed;
+  bottom: 4vh;
+  right: 4vw;
+  height: 40px;
+  width: 40px;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 4px 4px 6px #999;
+  background-color: teal;
+  color: white;
+  font-size: 1.6rem;
+  cursor: pointer;
+}
+
+.button-icon {
+  width: 24px;
+  margin-top: 8px;
+  height: 24px;
+  opacity: 0.6;
+}
+
+.header-button {
+  border: none;
+  background: none;
+}
 </style>