Some UI adjustment

src/dashboard.py

@@ -799,7 +799,7 @@ class WireguardConfiguration:
                             sqldb.cursor().execute(
                                 "UPDATE %s SET cumu_receive = ?, cumu_sent = ?, cumu_data = ? WHERE id = ?" %
                                 self.Name, (cumulative_receive, cumulative_sent,
-                                            rcumulative_sent + cumulative_receive,
+                                            cumulative_sent + cumulative_receive,
                                             data_usage[i][0],))
                             total_sent = 0
                             total_receive = 0

src/static/app/src/App.vue

@@ -12,7 +12,7 @@ const store = DashboardConfigurationStore();
 	</nav>
 	<Suspense>
 		<RouterView v-slot="{ Component }">
-			<Transition name="fade2" mode="out-in">
+			<Transition name="app" mode="out-in">
 				<Component :is="Component"></Component>
 			</Transition>
 		</RouterView>
@@ -22,14 +22,16 @@ const store = DashboardConfigurationStore();
 <style scoped>
 .app-enter-active,
 .app-leave-active {
-	transition: all 0.3s ease-in-out;
+	transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 0.9);
-	/*position: absolute;*/
+}
-	/*padding-top: 50px*/
+
+.app-enter-from{
+	transform: translateY(20px);
+	opacity: 0;
 }
 
-.app-enter-from,
 .app-leave-to {
-	transform: translateX(-30px);
+	transform: translateY(-20px);
 	opacity: 0;
 }
 </style>

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -93,9 +93,8 @@ export default {
 			        @click="this.downloadAllPeer()">
 				<i class="bi bi-download me-2"></i> Download All
 			</button>
-			<div class="d-flex align-items-center  ms-auto">
+			<div class="flex-grow-1">
-				<!--			<label class="d-flex me-2 text-muted" for="searchPeers"><i class="bi bi-search me-1"></i></label>-->
+				<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
-				<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm"
 				       placeholder="Search..."
 				       id="searchPeers"
 				       @keyup="this.debounce()"
@@ -131,14 +130,6 @@ export default {
 					</li>
 				</ul>
 			</div>
-<!--			<div class="dropdown">-->
-<!--				<button class="btn dropdown-toggle text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"-->
-<!--				        type="button" data-bs-toggle="dropdown" aria-expanded="false">-->
-<!--					<i class="bi bi-arrow-repeat me-2"></i>Refresh Interval-->
-<!--				</button>-->
-<!--				-->
-<!--			</div>-->
-
 			<div class="dropdown dropup">
 				<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
 				        type="button" data-bs-toggle="dropdown" aria-expanded="false">

src/static/app/src/components/navbar.vue

@@ -57,8 +57,8 @@ export default {
 					</li>
 				</ul>
 				<hr class="text-body">
-				<ul class="nav flex-column">
+				<ul class="nav flex-column px-2">
-					<li class="nav-item"><a class="nav-link text-danger" 
+					<li class="nav-item"><a class="nav-link text-danger rounded-3" 
 					                        @click="this.dashboardConfigurationStore.signOut()" 
 					                        role="button" style="font-weight: bold">
 						<i class="bi bi-box-arrow-left me-2"></i>

src/static/app/src/views/signin.vue

@@ -84,12 +84,11 @@ export default {
 <template>
 	<div class="container-fluid login-container-fluid d-flex main flex-column" :data-bs-theme="this.theme">
 		<div class="login-box m-auto" style="width: 600px;">
-			
 			<div class="m-auto">
 				<div class="card px-4 py-5 rounded-4 shadow-lg">
 					<div class="card-body">
 						<h4 class="mb-0 text-body">Welcome to</h4>
-						<span class="dashboardLogo display-3">WGDashboard</span>
+						<span class="dashboardLogo display-3"><strong>WGDashboard</strong></span>
 						<div class="alert alert-danger mt-2 mb-0" role="alert" v-if="loginError">
 							{{this.loginErrorMessage}}
 						</div>
@@ -117,16 +116,16 @@ export default {
 								       v-model="this.totp"
 								>
 							</div>
-							<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand shadow signInBtn" ref="signInBtn">
+							<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn">
-						<span v-if="!this.loading" class="d-flex w-100">
+								<span v-if="!this.loading" class="d-flex w-100">
-							Sign In<i class="ms-auto bi bi-chevron-right"></i>
+									Sign In<i class="ms-auto bi bi-chevron-right"></i>
-						</span>
+								</span>
 								<span v-else class="d-flex w-100 align-items-center">
-							Signing In...
+									Signing In...
-							<span class="spinner-border ms-auto spinner-border-sm" role="status">
+									<span class="spinner-border ms-auto spinner-border-sm" role="status">
-							  <span class="visually-hidden">Loading...</span>
+								        <span class="visually-hidden">Loading...</span>
-							</span>
+									</span>
-						</span>
+								</span>
 							</button>
 						</form>
 					</div>
@@ -137,7 +136,7 @@ export default {
 			WGDashboard v4.0 | Developed with ❤️ by 
 			<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
 		</small>
-		<div class="messageCentre text-body position-absolute end-0 margin-3">
+		<div class="messageCentre text-body position-absolute end-0 m-3">
 			<TransitionGroup name="message" tag="div" class="position-relative">
 				<Message v-for="m in getMessages.slice().reverse()"
 				         :message="m" :key="m.id"></Message>