Nice things

Font fixed for mobile, dark theme added, and button loading when logging in and signing up added.

BACKLOG.md

@@ -1,9 +1,5 @@
 # Backlog
 
-* 
-
-* My little brothers phone has weird text font issues (showed up as a cursive font)
-
 * Little brother also made it into a chatroom after leaving ours... I don't think anyone else was online. He clicked "ok" to leave our chatroom after I left, but then got put back into a chatroom.
 
 * Put topic and side at the top of chat room.
@@ -18,8 +14,6 @@
 
 * Make existing theme more colorful
 
-* a dark theme
-
 * Make chatroom scroll down as far as the height of the new message
 
 * Maybe display a small player card below the most recent text (or some other way of displaying the other card)

Politick.Api/Politick.Api/Program.cs

@@ -26,7 +26,6 @@
                                              "https://victorious-flower-0ddb7221e.3.azurestaticapps.net",
                                              "http://localhost:5173")
                                 .AllowAnyHeader()
-                                .AllowAnyHeader()
                                 .AllowCredentials();
                       });
 });

Politick/src/App.vue

@@ -3,6 +3,9 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
+  <div id="background">
+
+  </div>
   <center>
     <Transition name="fade">
       <RouterView />
@@ -16,6 +19,12 @@ header {
   max-height: 100vh;
 }
 
+#background {
+  position: fixed;
+  height: 1000px;
+  background: linear-gradient(white, skyblue);
+}
+
 .logo {
   display: block;
   margin: 0 auto 2rem;

Politick/src/assets/css/base.css

@@ -50,6 +50,18 @@
   }
 }
 
+.dark {
+  --color-background: var(--vt-c-black);
+  --color-background-soft: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
+
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
+
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-2);
+}
+
 *,
 *::before,
 *::after {
@@ -65,7 +77,7 @@ body {
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: 'Patrick Hand', cursive;
+  font-family: 'Comic Sans MS', Arial, sans-serif;
   font-size: 25px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

Politick/src/assets/css/main.css

@@ -17,7 +17,7 @@ a,
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(200, 100%, 60%, 0.2);
+    background-color: hsl(200, 100%, 93%);
   }
 }
 

Politick/src/components/HeaderBar.vue

@@ -16,11 +16,11 @@
             </div>
           </template>
 
-          <!-- <template v-slot:append>
+          <template v-slot:append>
             <v-app-bar-nav-icon @click.stop="settings = !settings" class="settings">
               <v-icon size="x-large">mdi-cog-outline</v-icon>
             </v-app-bar-nav-icon>
-          </template> -->
+          </template>
         </v-app-bar>
 
         <v-navigation-drawer style="padding-top: 0.5rem" v-model="navigation" elevation="1">
@@ -62,7 +62,7 @@
           </v-list-item-group>
         </v-navigation-drawer>
 
-        <!-- <v-navigation-drawer
+        <v-navigation-drawer
           location="right"
           style="padding-top: 0.5rem"
           v-model="settings"
@@ -72,12 +72,12 @@
             <v-list-item>
               <v-list-item-title>Theme</v-list-item-title>
               <div class="two-choices">
-                <v-btn color="white" @click="setLight">Light</v-btn>
-                <v-btn color="black" @click="setDark">Dark</v-btn>
+                <v-btn color="white" @click="setLight()">Light</v-btn>
+                <v-btn color="black" @click="setDark()">Dark</v-btn>
               </div>
             </v-list-item>
           </v-list-item-group>
-        </v-navigation-drawer> -->
+        </v-navigation-drawer>
       </v-layout>
     </v-card>
   </div>
@@ -91,19 +91,25 @@ import router from '@/router'
 import Axios from 'axios'
 
 const navigation = ref(false)
-// const settings = ref(false)
+const settings = ref(false)
 
 function logOut() {
   SignInService.instance.signOut()
   router.push('/login')
 }
 
-// function setLight() {
-//   if (player.value?.theme != 'light') changeTheme('light')
-// }
-// function setDark() {
-//   if (player.value?.theme != 'dark') changeTheme('dark')
-// }
+function setLight() {
+  if (player.value?.theme != 'light') { 
+    changeTheme('light')
+    document.body.classList.remove('dark')
+  }
+}
+function setDark() {
+  if (player.value?.theme != 'dark') {
+    changeTheme('dark')
+    document.body.classList.add('dark')
+  }
+}
 </script>
 
 <style scoped>

Politick/src/views/LoginView.vue

@@ -33,8 +33,22 @@ const loading = ref(false)
 
 async function login() {
   loading.value = true
-  await SignInService.instance.signIn(email.value, password.value)
-  loading.value = false
+
+  let response = null
+  let error_div = document.getElementById('error-message') as HTMLElement
+  if (email.value.trim().length === 0) {
+    error_div.innerHTML = '<p>Please enter your email</p>'
+  }
+  else if (password.value.trim().length === 0) {
+    error_div.innerHTML = '<p>Please enter your password</p>'
+  }
+  else {
+    response = SignInService.instance.signIn(email.value, password.value)
+  }
+  if (response != null || 
+      (response == null && error_div.innerHTML != '')) {
+    loading.value = false
+  }
 }
 </script>
 

Politick/src/views/SignUpView.vue

@@ -75,6 +75,7 @@ const loading = ref(false)
 async function signUp() {
   loading.value = true
 
+  let response = null
   let error_div = document.getElementById('error-message') as HTMLElement
   if (email.value.trim().length === 0) error_div.innerHTML = '<p>Please enter your email</p>'
   else if (password.value.trim().length === 0)
@@ -89,14 +90,17 @@ async function signUp() {
   else if (!agreed.value)
     error_div.innerHTML = '<p>Please accept the terms of service and privacy policy</p>'
   else if (password.value === password2.value && agreed.value)
-    await SignInService.instance.createAccount(
+    response = SignInService.instance.createAccount(
       email.value,
       password.value,
       question.value,
       answer.value
     )
 
-  loading.value = false
+  if (response != null || 
+      (response == null && error_div.innerHTML != '')) {
+    loading.value = false
+  }
 }
 </script>