improve alignment and font size

src/assets/app.scss

@@ -5,6 +5,15 @@
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
 }
 
+h1 {
+    font-size: 31px;
+    height: 38px;
+}
+
+h2 {
+    font-size: 26px;
+}
+
 ::-webkit-scrollbar {
     width: 10px;
 }

src/pages/Dashboard.vue

@@ -3,7 +3,7 @@
         <div class="row">
             <div class="col-12 col-md-5 col-xl-4">
                 <div v-if="! $root.isMobile">
-                    <router-link to="/add" class="btn btn-primary"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
+                    <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
                 </div>
 
                 <div v-if="showList" class="shadow-box list mb-4">
@@ -97,7 +97,6 @@ export default {
 }
 
 .list {
-    margin-top: 25px;
     height: auto;
     min-height: calc(100vh - 240px);
 

src/pages/EditMonitor.vue

@@ -1,12 +1,10 @@
 <template>
-    <h1 class="my-3">
+    <h1 class="mb-3">{{ pageName }}</h1>
-        {{ pageName }}
-    </h1>
     <form @submit.prevent="submit">
         <div class="shadow-box">
             <div class="row">
                 <div class="col-md-6">
-                    <h2>General</h2>
+                    <h2 class="mb-2">General</h2>
 
                     <div class="my-3">
                         <label for="type" class="form-label">Monitor Type</label>
@@ -67,7 +65,7 @@
                         </div>
                     </div>
 
-                    <h2 class="my-3">Advanced</h2>
+                    <h2 class="mt-5 mb-2">Advanced</h2>
 
                     <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
                         <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
@@ -116,17 +114,15 @@
                         </div>
                     </div>
 
-                    <div>
+                    <div class="mt-5 mb-1">
-                        <button class="btn btn-primary" type="submit" :disabled="processing">
+                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
-                            Save
-                        </button>
                     </div>
                 </div>
 
                 <div class="col-md-6">
                     <div v-if="$root.isMobile" class="mt-3" />
 
-                    <h2>Notifications</h2>
+                    <h2 class="mb-2">Notifications</h2>
                     <p v-if="$root.notificationList.length === 0">
                         Not available, please setup.
                     </p>

src/pages/Settings.vue

@@ -6,7 +6,7 @@
     <div class="shadow-box">
         <div class="row">
             <div class="col-md-6">
-                <h2>General</h2>
+                <h2 class="mb-2">General</h2>
                 <form class="mb-3" @submit.prevent="saveGeneral">
                     <div class="mb-3">
                         <label for="timezone" class="form-label">Timezone</label>
@@ -42,7 +42,7 @@
 
                 <template v-if="loaded">
                     <template v-if="! settings.disableAuth">
-                        <h2>Change Password</h2>
+                        <h2 class="mt-5 mb-2">Change Password</h2>
                         <form class="mb-3" @submit.prevent="savePassword">
                             <div class="mb-3">
                                 <label for="current-password" class="form-label">Current Password</label>
@@ -70,7 +70,7 @@
                         </form>
                     </template>
 
-                    <h2>Advanced</h2>
+                    <h2 class="mt-5 mb-2">Advanced</h2>
 
                     <div class="mb-3">
                         <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>