style changes and no longer calls APIs to update OTP

frontend/src/App.vue

@@ -13,20 +13,9 @@ import ListSecrets from "./components/ListSecrets.vue";
           Create
         </el-button>
         <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
-        <el-button type="error" @click="refresh">Refresh</el-button>
+        <el-button type="info" @click="refresh">Refresh</el-button>
       </div>
     </div>
-    <!-- prettier-ignore-start -->
-    <div
-      class="timer"
-      v-if="loggedin"
-      style="
-         {
-          width: timerWidth + '%';
-        }
-      "
-    ></div>
-    <!-- prettier-ignore-end -->
 
     <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
       <CreateSecret @close="creationDialog = false" />
@@ -37,6 +26,7 @@ import ListSecrets from "./components/ListSecrets.vue";
     </el-dialog>
 
     <div class="container">
+      <div class="timer" v-if="loggedin" :style="{ width: timerWidth + '%' }"></div>
       <HomePage
         msg="You did it!"
         @loggedin="
@@ -122,15 +112,12 @@ export default {
     },
 
     startTimer() {
+      console.log("start timer called");
       this.interval = setInterval(() => {
         const now = new Date();
         const seconds = now.getSeconds();
         const remainingTime = (seconds > 30 ? 60 : 30) - seconds;
-        // console.log(remainingTime);
         this.timerWidth = (remainingTime / 30) * 100;
-        if (remainingTime === 30) {
-          this.refresh();
-        }
       }, 1000);
     },
   },
@@ -161,7 +148,7 @@ export default {
 }
 
 .container {
-  margin-top: 0;
+  margin-top: 6vh;
 }
 
 .logoutBtn {
@@ -189,6 +176,7 @@ export default {
 .logo {
   font-size: 1.3rem;
   font-weight: 700;
+  margin-left: 2vw;
 }
 
 .timer {