Update App.tsx to match Home.tsx

cornell-dti · Sep 11, 2023 · 7d8059d · 7d8059d
1 parent 4198ba9
commit 7d8059d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 69 deletions.
diff --git a/client/src/ui/App.tsx b/client/src/ui/App.tsx
@@ -1,8 +1,11 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import SearchBar from "./SearchBar.jsx";
 import ProfileDropdown from "./ProfileDropdown.jsx";
 import "./css/App.css";
-import { useAuthOptionalLogin } from "../auth/auth_utils";
+import {useAuthOptionalLogin} from "../auth/auth_utils";
+
+import DTITextLogo from "../assets/img/dti-text-logo.png";
+import DTIWhiteLogo from "../assets/img/dti-text-white-logo.png";
 
 /*
   App Component. Uppermost View component in the component tree,
@@ -13,74 +16,82 @@ import { useAuthOptionalLogin } from "../auth/auth_utils";
 */
 export default function App(imgSrc: any): JSX.Element {
   const [isLoggedIn, token, netId, signIn, signOut] = useAuthOptionalLogin();
+  const [DTILogo, setDTILogo] = useState(DTITextLogo);
+  const [season, setSeason] = useState("winter");
+  const [time, setTime] = useState("afternoon");
 
-  const sunset_start_times = [
-    17.0, 17.5, 18, 19.5, 20, 20.5, 20.5, 19.5, 18.5, 18, 16.5, 16.5,
-  ];
-  const sunset_end_times = [
-    18.5, 19, 20.5, 21, 22, 22, 22, 21.5, 20.5, 20, 19, 18,
-  ];
-  const date = new Date();
-  const month = date.getMonth();
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  let time_of_day = hours;
-  if (minutes > 30) {
-    time_of_day += 0.51;
-  }
+  /** Logic for deciding the background image */
+  const setBackground = () => {
+    const sunset_start_times = [
+      17.0, 17.5, 18, 19.5, 20, 20.5, 20.5, 19.5, 18.5, 18, 16.5, 16.5,
+    ];
+    const sunset_end_times = [
+      18.5, 19, 20.5, 21, 22, 22, 22, 21.5, 20.5, 20, 19, 18,
+    ];
+    const date = new Date();
+    const month = date.getMonth();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
 
-  let monthclass = "";
-  let dayclass = "afternoon";
+    let time_of_day = hours;
+    if (minutes > 30) {
+      time_of_day += 0.51;
+    }
+    if (month === 11 || month === 0 || month === 1) {
+      setSeason("winter");
+    } else if (month >= 2 && month <= 4) {
+      setSeason("spring");
+    } else if (month >= 5 && month <= 7) {
+      setSeason("summer");
+    } else {
+      setSeason("fall");
+    }
 
-  if (month < 2 || month > 10) {
-    monthclass = "winter";
-  } else if (month > 7) {
-    monthclass = "fall";
-  } else if (month > 4) {
-    monthclass = "summer";
-  } else {
-    monthclass = "spring";
-  }
+    if (time_of_day < 6 || time_of_day >= sunset_end_times[month]) {
+      setTime("night");
+    } else if (time_of_day >= sunset_start_times[month]) {
+      setTime("sunset");
+    }
+  };
 
-  if (time_of_day < 6 || time_of_day >= sunset_end_times[month]) {
-    dayclass = "night";
-  } else if (time_of_day >= sunset_start_times[month]) {
-    dayclass = "sunset";
-  }
+  useEffect(() => {
+    setBackground();
+    if (time === "night") {
+      setDTILogo(DTIWhiteLogo);
+    }
+  }, [time]);
 
-  function displayButton() {
+  /** Displays "sign in" or profile bear picture */
+  const NavButton = () => {
     if (netId) {
       return <ProfileDropdown netId={netId} signOut={signOut} />;
-    } else {
-      return (
-        <button
-          type="button"
-          className="btn btn-light sign-in-button"
-          onClick={() => {
-            signIn("home");
-          }}
-        >
-          Sign In
-        </button>
-      );
     }
-  }
+    return (
+      <button
+        type="button"
+        className="btn btn-light sign-in-button"
+        onClick={() => {
+          signIn("home");
+        }}
+      >
+        Sign In
+      </button>
+    );
+  };
 
   return (
     <div className="row">
       <div
         className={
-          "col full-height background-common background-gradient_" +
-          dayclass +
-          monthclass
+          "full-height background-common background-gradient_" + time + season
         }
       >
-        {displayButton()}
+        <NavButton />
 
         <div className="row">
           <img
             src="/logo.svg"
-            className="img-fluid scale-logo-homepage"
+            className="scale-logo-homepage"
             alt="CU Reviews Logo"
           />
         </div>
@@ -100,7 +111,7 @@ export default function App(imgSrc: any): JSX.Element {
           </div>
         </div>
         <div className="">
-          <img src="/dti_logo.png" className="dti-logo" alt="DTI Logo" />
+          <img src={DTILogo} className="dti-logo" alt="DTI Logo" />
         </div>
       </div>
     </div>

diff --git a/client/src/ui/css/App.css b/client/src/ui/css/App.css
@@ -1,13 +1,5 @@
 .homepage-text {
-  /* height: 14px; */
-  /* padding-top: 6%; */
-  font-family: "Source Sans Pro", sans-serif;
-  font-weight: var(--regular-weight);
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
   color: #0076ff;
-  margin-bottom: 25px;
 }
 
 @media (min-width: 992px) {
@@ -160,8 +152,10 @@
 
 .dti-logo {
   position: absolute;
-  bottom: 10px;
-  right: 30px;
+  bottom: 20px;
+  right: 20px;
+  height: auto;
+  width: 200px;
 }
 
 /* Needed so that background is flush against bottom */
@@ -170,15 +164,10 @@
   background-color: #f4f9fe;
 }
 
-/* I believe this is only used in recentreview.jsx so will remove soon TODO */
-.container {
-  background-color: rgba(255, 255, 255, 0);
-}
-
 .sign-in-button {
   position: absolute;
-  right: 80px;
-  top: 50px;
+  right: 30px;
+  top: 40px;
 
   width: 137px;
   height: 39px;