Contact and Login styles

hacksu · Oct 16, 2024 · a978da7 · a978da7
1 parent 2e72a7d
commit a978da7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 75 deletions.
diff --git a/public-frontend/src/App.vue b/public-frontend/src/App.vue
@@ -43,7 +43,6 @@
       </div>
     </div>
   </div>
-  <link rel="stylesheet" href="https://unpkg.com/xp.css">
 </template>
 
 <script>

diff --git a/public-frontend/src/components/faq.vue b/public-frontend/src/components/faq.vue
@@ -13,7 +13,6 @@
       </div>
     </div>
   </div>
-  <link rel="stylesheet" href="https://unpkg.com/xp.css">
 </template>
 
 <script>

diff --git a/public-frontend/src/components/localLogin.vue b/public-frontend/src/components/localLogin.vue
@@ -2,26 +2,26 @@
     <Card>
         <template #content>
             <div class="loginForm">
-            <SelectButton v-model="localAccountSwitch" :options="localAccountOptions" />
-            <label v-if="validLoginWarning" style="color: red; text-align: center">{{ loginWarningMessage }}</label>
-            <span class="p-float-label">
-                <IconField iconPosition="right">
-                    <InputText id="email" v-model="modal.email" />
-                    <InputIcon class="pi pi-envelope"></InputIcon>
-                </IconField>
-                <label for="email">Email</label>
-            </span>
-            <span class="p-float-label">
-                <Password id="password" v-model="modal.password" inputId="password" toggleMask :feedback="makingAccount" />
-                <label for="password">Password</label>
-            </span>
-            <span v-if="makingAccount" class="p-float-label">
-                <Password v-model="modal.confirmPassword" inputId="confirmPassword" toggleMask />
-                <label for="confirmPassword">Confirm Password</label>
-            </span>
-            <Button @click="submit(makingAccount)" :disabled="!formValid" :label="makingAccount ? 'Make Account' : 'Log In'"/>
-        </div>
-    </template>
+                <SelectButton v-model="localAccountSwitch" :options="localAccountOptions" />
+                <label v-if="validLoginWarning" style="color: red; text-align: center">{{ loginWarningMessage }}</label>
+                <span class="p-float-label">
+                    <IconField iconPosition="right">
+                        <InputText id="email" v-model="modal.email" />
+                        <InputIcon class="pi pi-envelope"></InputIcon>
+                    </IconField>
+                    <label for="email">Email</label>
+                </span>
+                <span class="p-float-label">
+                    <Password id="password" v-model="modal.password" inputId="password" toggleMask :feedback="makingAccount" />
+                    <label for="password">Password</label>
+                </span>
+                <span v-if="makingAccount" class="p-float-label">
+                    <Password v-model="modal.confirmPassword" inputId="confirmPassword" toggleMask />
+                    <label for="confirmPassword">Confirm Password</label>
+                </span>
+                <Button @click="submit(makingAccount)" :disabled="!formValid" :label="makingAccount ? 'Make Account' : 'Log In'"/>
+            </div>
+        </template>
     </Card>
 </template>
 

diff --git a/public-frontend/src/views/Contact.vue b/public-frontend/src/views/Contact.vue
@@ -8,31 +8,29 @@
         humanly possible.
       </p>
 
-      <div class="formField">
-        <span id="subjectTitle">Subject:</span>
-        <input type="text" placeholder="What do you need to talk about?" name="subject" class="contactTextField"
-          v-model="subject" />
+      <div class="field-row-stacked">
+        <label id="subjectTitle" for="subject">Subject:</label>
+        <input id="subject" type="text" placeholder="What do you need to talk about?" name="subject" class="contactTextField" v-model="subject" />
       </div>
 
-      <div class="formField">
+      <div class="field-row-stacked">
         <span id="subjectTitle">Name:</span>
         <input type="text" placeholder="What is your name?" name="name" class="contactTextField" v-model="name" />
       </div>
 
-      <div class="formField">
+      <div class="field-row-stacked">
         <span id="subjectTitle">Email:</span>
         <input type="text" placeholder="Where can we contact you?" name="email" class="contactTextField"
           v-model="email" />
       </div>
 
-      <div class="formField">
+      <div class="field-row-stacked">
         <span id="subjectTitle">Body:</span>
         <textarea placeholder="Tell us more!" name="body" class="contactTextField" v-model="content" />
       </div>
 
-      <div style="text-align: center;">
-        <button id="contactButton" class="apply-link" :class="{ disabled: !formFilledOut }"
-          @click="formFilledOut && submitTicket()">
+      <div style="text-align: center; margin-top: 10px;">
+        <button :disabled="!formFilledOut" @click="formFilledOut && submitTicket()">
           Send!
         </button>
       </div>
@@ -90,8 +88,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/global.scss";
-@import '@/styles/space.scss';
 
 ::placeholder {
   color: black;
@@ -125,7 +121,7 @@ p{
 }
 
 #subjectTitle {
-  font-size: 24px;
+  font-size: 18px;
 }
 
 .formField {
@@ -140,13 +136,9 @@ p{
 
 .contactTextField {
   display: block;
-  // color: white;
-  background: none;
+  color: black;
   // border: none;
   // outline: none;
-  font-size: 20px;
-  width: 100%;
-  box-sizing: border-box;
   // border-bottom: 2px solid white;
 }
 
@@ -161,4 +153,13 @@ textarea.contactTextField {
 .error {
   color: color('error');
 }
+
+button{
+  color: black;
+}
+
+button:disabled{
+  color: gray;
+}
+
 </style>
diff --git a/public-frontend/src/views/Home.vue b/public-frontend/src/views/Home.vue
@@ -1,4 +1,5 @@
 <template>
+  <link rel="stylesheet" href="https://unpkg.com/xp.css">
   <div class="home">
     <div :hidden="!sponsors" id="sponsorWindow" class="window" style="width: 600px;">
       <div id="sponsorWindowHeader" class="title-bar" @mousedown="startDrag('sponsorWindow', $event)">
@@ -48,11 +49,11 @@
           <button aria-label="Close" @click="$emit('closeContact')"></button>
         </div>
       </div>
-      <div class="window-body" style="height: 610px; overflow-y: scroll;">
+      <div class="window-body" style="height: 560px; overflow-y: scroll;">
         <Contact/>
       </div>
     </div>
-    <div :hidden="!login" id="loginWindow" class="window" style="width: 600px;">
+    <div :hidden="!login" id="loginWindow" class="window" style="width: 600px; background-color: white;">
       <div id="loginWindowHeader" class="title-bar" @mousedown="startDrag('loginWindow', $event)">
         <div class="title-bar-text">Login</div>
         <div class="title-bar-controls">
@@ -61,12 +62,11 @@
           <button aria-label="Close" @click="$emit('closeLogin')"></button>
         </div>
       </div>
-      <div class="window-body" style="height: 600px; overflow-y: scroll;">
+      <div class="window-body" style="height: 450px; overflow-y: scroll;">
         <Login></Login>
       </div>
     </div>
   </div>
-  <link rel="stylesheet" href="https://unpkg.com/xp.css">
 </template>
 
 <script setup>

diff --git a/public-frontend/src/views/Login.vue b/public-frontend/src/views/Login.vue
@@ -1,18 +1,16 @@
 <template>
-    <div id="options-container" style="padding: 0 10px">
-        <a class="loginBar loginBox" href="/login/github">
-            <img src="@/assets/auth_assets/github-mark-white.svg" />
-            <span>Login with GitHub</span>
-        </a>
-        <a class="loginBar loginBox" href="/login/discord">
-            <img id="discord-mark" src="@/assets/auth_assets/discord-mark-white.svg" />
-            <span>Login with Discord</span>
-        </a>
-        <a class="loginBar loginBox noHover">
-            <img id="khe-mark" src="/favicon.ico" />
-            <span>Login with KHE account:</span>
-        </a>
-        <LocalLogin/>
+    <div id="options-container" style="padding: 0 10px;">
+        <LocalLogin style="width: 75%; height: 100%;"/>
+        <div id="alt-login-container">
+            <a class="loginBar loginBox" href="/login/github">
+                <img src="@/assets/auth_assets/github-mark-white.svg" />
+                <span>Login with GitHub</span>
+            </a>
+            <a class="loginBar loginBox" href="/login/discord">
+                <img id="discord-mark" src="@/assets/auth_assets/discord-mark-white.svg" />
+                <span>Login with Discord</span>
+            </a>
+        </div>
     </div>
 </template>
 
@@ -37,48 +35,54 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/global.scss";
-@import '@/styles/space.scss';
 
 #options-container {
-    margin: 150px auto;
+    margin: auto;
     display: flex;
-    flex-direction: column;
-    align-items: center ;
+    flex-direction: row;
+    align-items: center;
     gap: 10px;
-    max-width: 500px;
+    height: 100%;
+}
 
+#alt-login-container {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    height: 100%;
 }
 
 .loginBox {
     padding: 6px 10px;
-    border-radius: 5px;
-    border: 3px solid rgb(169, 169, 169);
-    background-color: rgb(22, 36, 36);
+    background: linear-gradient(to bottom, rgb(46, 75, 75), rgb(30, 50, 50));
+    height: 100%;
+    width: 100%;
+}
+
+.loginBox:active{
+    background: linear-gradient(to bottom, rgb(30, 50, 50), rgb(46, 75, 75));
 }
 
 .loginBar {
     display: flex;
-
     gap: 10px;
-    width: 250px;
-    height: 40px;
+    width: 100%;
+    height: 50%;
     &:not(.noHover) {
         cursor: pointer;
     }
     // margin: 15px auto;
     text-align: center;
-    font-size: 0.9em;
+    font-size: 24pt;
     transition: background-color 0.2s;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     color: white;
     text-decoration: none;
 
-    &:hover:not(.noHover) {
-        background-color: rgb(46, 75, 75);
-    }
-
     img {
         height: 1.4em;
         width: auto;