Merge branch 'main' of https://github.com/thomaspwang/WakeTheF-ckUp

thomaspwang · Oct 16, 2022 · db26f11 · db26f11
2 parents 348e40b + a53dab8
commit db26f11
Show file tree

Hide file tree

Showing 10 changed files with 440 additions and 141 deletions.
diff --git a/frontend/src/assets/sleepingbee.png b/frontend/src/assets/sleepingbee.png
diff --git a/frontend/src/components/CountdownTimer/datetime.css b/frontend/src/components/CountdownTimer/datetime.css
@@ -58,4 +58,5 @@
     text-transform: uppercase;
     font-size: 0.75rem;
     line-height: 1rem;
-  }
+  }
+
diff --git a/frontend/src/components/FormAndTimer/FormAndTimer.css b/frontend/src/components/FormAndTimer/FormAndTimer.css
@@ -24,24 +24,28 @@ form {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    padding-bottom: 5vh;
 }
 
 label {
     font-family: "DM Sans";
 }
 
 #countdown-date-time {
-    border-radius: 6vh;
+    border-radius: 1vh;
+    font-family: "DM Sans";
+    width: 10vw;
+    border-style: none;
 }
 
 #sleebee {
-    max-width: 20vw;
+    max-width: 19vw;
     height: auto;
 }
 
 #description-box {
     width: 43vw;
-    margin-bottom: 10vh;
+    margin-bottom: 5vh;
 }
 
 #description {

diff --git a/frontend/src/components/FormAndTimer/FormAndTimer.js b/frontend/src/components/FormAndTimer/FormAndTimer.js
@@ -35,7 +35,7 @@ const FormAndTimer = (props) => {
           </div>
 
           <div id="picture-box">
-            <img id="sleebee" src={require("../../assets/sleebee.png")}></img>
+            <img id="sleebee" src={require("../../assets/sleepingbee.png")}></img>
           </div>
 
           <CountdownTimer targetDate={targetDate} />

diff --git a/frontend/src/components/FriendsDropdown/FriendDropdown.css b/frontend/src/components/FriendsDropdown/FriendDropdown.css
@@ -21,10 +21,12 @@
     align-items: center;
 }
 
-#oncall-button{
+#add-button{
     font-family: 'DM Sans';
     text-transform: unset !important;
     background-color: rgba(186, 209, 250, .4);
+    width: 300px;
+    height: 40px;
 }
 
 #beepbeep {
@@ -46,6 +48,7 @@
 
 #demo-multiple-name {
     text-align-last: center;
+    width: 5vw;
 }
 
 #demo-multiple-name-label {

diff --git a/frontend/src/components/FriendsDropdown/FriendsDropdown.js b/frontend/src/components/FriendsDropdown/FriendsDropdown.js
@@ -110,7 +110,7 @@ export default function FriendsDropdown() {
         </FormControl>
       </div>
       <div id="second-box">
-        <Button id="oncall-button" onClick={handleSubmit}>add</Button>
+        <Button id="add-button" onClick={handleSubmit}>add</Button>
         <p class="title" id="curr-oncall">current oncall friends</p>
         <List>
           <>

diff --git a/frontend/src/pages/Login/Login.css b/frontend/src/pages/Login/Login.css
@@ -43,91 +43,91 @@
 }
 
 .text-large {
-    /* wake the f*ck up */
-    width: 324px;
-    height: 52px;
-    margin-bottom: 10px;
-    /* left: 255px;
-    top: 420px; */
-
-    font-family: 'DM Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 40px;
-    line-height: 52px;
-    /* identical to box height */
-
-    display: flex;
-    align-items: center;
-
-    color: #000000;
-  }
-
-  .text-subtitle {
-    /* never sleep through an alarm ever again. */
-
-    /* position: absolute; */
-    width: 371px;
-    height: 26px;
-    margin-bottom: 30px;
-    /* left: 255px;
-    top: 488px; */
-
-    font-family: 'DM Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 20px;
-    line-height: 26px;
-    /* identical to box height */
-
-    display: flex;
-    align-items: center;
-
-    color: #000000;
-  }
-
-  .form-title {
-    /* username */
-
-    /* position: absolute; */
-    width: 97px;
-    height: 26px;
-    margin-bottom: 10px;
-    /* left: 255px;
-    top: 550px; */
-
-    font-family: 'DM Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 26px;
-    /* identical to box height */
-
-    display: flex;
-    align-items: center;
-
-    color: #000000;
-  }
-
-  .form-extra {
-    /* don’t have an account? sign up. */
-
-    /* position: absolute; */
-    /* width: 292px; */
-    margin-top: 20px;
-    height: 26px;
-    /* left: 330px;
-    top: 852px; */
-
-    font-family: 'DM Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 26px;
-    /* identical to box height */
-
-    align-items: center;
-    text-align: center;
-
-    color: #000000;
-  }
+  /* wake the f*ck up */
+  width: 324px;
+  height: 52px;
+  margin-bottom: 10px;
+  /* left: 255px;
+  top: 420px; */
+
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 52px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+
+  color: #000000;
+}
+
+.text-subtitle {
+  /* never sleep through an alarm ever again. */
+
+  /* position: absolute; */
+  width: 371px;
+  height: 26px;
+  margin-bottom: 30px;
+  /* left: 255px;
+  top: 488px; */
+
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 26px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+
+  color: #000000;
+}
+
+.form-title {
+  /* username */
+
+  /* position: absolute; */
+  width: 100%;
+  height: 26px;
+  margin-bottom: 10px;
+  /* left: 255px;
+  top: 550px; */
+
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 26px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+
+  color: #000000;
+}
+
+.form-extra {
+  /* don’t have an account? sign up. */
+
+  /* position: absolute; */
+  /* width: 292px; */
+  margin-top: 20px;
+  height: 26px;
+  /* left: 330px;
+  top: 852px; */
+
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 26px;
+  /* identical to box height */
+
+  align-items: center;
+  text-align: center;
+
+  color: #000000;
+}
diff --git a/frontend/src/pages/Login/Login.js b/frontend/src/pages/Login/Login.js
@@ -67,35 +67,37 @@ function Login() {
   }
 
   return (
-    <div class="login">
-      <div class="left-half">
-        <div class="login-stuff">
-          <div class="text-large">
+    <div className="login">
+      <div className="left-half">
+        <div className="login-stuff">
+          <div className="text-large">
             wake the f*ck up
           </div>
 
-          <div class="text-subtitle">
+          <div className="text-subtitle">
             using the power of friendship.
           </div>
 
           <div>
-            <div class="form-title">username</div>
+            <div className="form-title">username</div>
 
             <TextField
               style={{ width: "100%" }}
               variant="outlined"
+              size="small"
               onChange={handleUsernameChange}
             />
 
             {/* <input class='inputLogin' type="text" {...username} autoComplete="new-password" /> */}
           </div>
 
           <div style={{ marginTop: 10 }}>
-            <div class="form-title">password</div>
+            <div className="form-title">password</div>
 
             <TextField
               style={{ width: "100%" }}
               variant="outlined"
+              size="small"
               onChange={handlePasswordChange}
             />
 
@@ -119,16 +121,16 @@ function Login() {
 
           {/* <input class='btnLogin' type="button" value={loading ? 'Loading...' : 'Login'} disabled={loading} /> */}
 
-          <div class="form-extra">
+          <div className="form-extra">
             <a href="http://localhost:3000/signup">
                 don't have an account? sign up here.
             </a>
           </div>
         </div>
       </div>
-      <div class="right-half">
-        <div class="rectangle">
-          <img class="tire" src={require("../../assets/tirealarmbee.png")}></img>
+      <div className="right-half">
+        <div className="rectangle">
+          <img className="tire" src={require("../../assets/tirealarmbee.png")}></img>
         </div>
       </div>
     </div>