grouping style into main.css and doing signup

HE-Arc · Apr 14, 2024 · 48b21a4 · 48b21a4
1 parent 51fd49c
commit 48b21a4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 51 deletions.
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -41,7 +41,6 @@ h4
   text-decoration: none;
 }
 
-
 .info {
   margin: 1.5rem 0 1rem 0;
 }
@@ -70,6 +69,19 @@ h4
   padding: 0 1rem;
 }
 
+.form-wrapper {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+.button-wrapper {
+    margin-top: 1.5rem;
+    display: flex;
+    justify-content: center;
+}
+
 @media (hover: hover) {
   a:hover {
     text-decoration: underline;

diff --git a/frontend/src/views/AddQuestionView.vue b/frontend/src/views/AddQuestionView.vue
@@ -81,27 +81,8 @@ const submitForm = () => {
     align-items: center;
 }
 
-.title {
+.title, .info {
     text-align: center;
-    margin-bottom: 1.3rem;
-}
-
-.info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-}
-
-.form-wrapper {
-    width: 100%;
-    max-width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
-}
-
-.button-wrapper {
-    margin-top: 1.5rem;
-    display: flex;
-    justify-content: center;
 }
 
 .success-message {

diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
@@ -64,27 +64,8 @@ const login = async () => {
     align-items: center;
 }
 
-.title {
+.title, .info {
     text-align: center;
-    margin-bottom: 1.3rem;
-}
-
-.info {
-    text-align: center;
-    margin-bottom: 1.5rem;
-}
-
-.form-wrapper {
-    width: 100%;
-    max-width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
-}
-
-.button-wrapper {
-    margin-top: 1.5rem;
-    display: flex;
-    justify-content: center;
 }
 
 .success-message {
@@ -97,11 +78,9 @@ const login = async () => {
     }
 }
 
-
 @media (min-width: 1024px) {
     .form-wrapper {
         max-width: 70%;
     }
 }
-
 </style>
diff --git a/frontend/src/views/Authentication/SignUpView.vue b/frontend/src/views/Authentication/SignUpView.vue
@@ -12,6 +12,7 @@ const clearForm = () => {
     username.value = '';
     password.value = '';
     confirmPassword.value = '';
+    validationMessage.value = '';
 };
 
 const register = async () => {
@@ -39,24 +40,50 @@ const register = async () => {
 
 <template>
     <div>
-        <section class="register-form container">
-            <h1>Register</h1>
+        <section class="signUp-form container">
+            <div>
+                <h1 class="title">Register</h1>
+                <p class="info">Create a new account</p>
+            </div>
             <p :class="{ 'success-message': validationMessage === 'Registration successful.' }">{{ validationMessage }}</p>
-            <form @submit.prevent="signUp" @keyup.enter="signUp" style="text-align: center;">
-                <CustomInput label="Username" v-model="username" required />
-                <CustomInput label="Password" v-model="password" type="password" required />
-                <CustomInput label="Confirm Password" v-model="confirmPassword" type="password" required />
-                <div style="margin-top: 20px;">
+            <form @submit.prevent="register" @keyup.enter="register" class="form-wrapper">
+                <div class="box">
+                    <CustomInput label="Username" v-model="username" required />
+                    <CustomInput label="Password" v-model="password" type="password" required />
+                    <CustomInput label="Confirm Password" v-model="confirmPassword" type="password" required />
+                </div>
+                <div class="button-wrapper">
                     <button type="submit" class="btn">Register</button>
                 </div>
             </form>
         </section>
     </div>
 </template>
 
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title, .info {
+    text-align: center;
+}
 
-<style>
 .success-message {
     color: green;
 }
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .form-wrapper {
+        max-width: 70%;
+    }
+}
 </style>