Fixed color issues and mobile dropdown

HackRU · Aug 30, 2023 · e0c5ce6 · e0c5ce6
1 parent 4f210ea
commit e0c5ce6
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 25 deletions.
diff --git a/public/index-s23.css b/public/index-s23.css
@@ -6,7 +6,7 @@
     --primary-color: #FFF5e8; /* Logo, link colors, text */
     --primary-color-alt: #4fab5f;  /* Form body bg, form headers text */
     --secondary-color: #000000; /* Barely used accent color...combine this and primary-color-alt...? */
-    --secondary-color-alt:#1f6aa0; /* Background color */
+    --secondary-color-alt: #8db67e; /* Background color */
     --accent-color:  #4bbede; /* Logout, Live button color */
     /* split card colors */
     --splitCard-color:#000000;

diff --git a/public/tailwind-output.css b/public/tailwind-output.css
@@ -826,6 +826,18 @@ video {
   top: 8rem;
 }
 
+.bottom-\[12rem\] {
+  bottom: 12rem;
+}
+
+.bottom-\[3rem\] {
+  bottom: 3rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -951,6 +963,34 @@ video {
   margin-left: 6rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mt-\[2rem\] {
+  margin-top: 2rem;
+}
+
+.mt-\[40rem\] {
+  margin-top: 40rem;
+}
+
+.mt-\[12rem\] {
+  margin-top: 12rem;
+}
+
+.mt-\[4rem\] {
+  margin-top: 4rem;
+}
+
+.mt-\[8rem\] {
+  margin-top: 8rem;
+}
+
+.mt-\[15rem\] {
+  margin-top: 15rem;
+}
+
 .block {
   display: block;
 }
@@ -1335,6 +1375,16 @@ video {
   background-color: rgb(241 225 146 / var(--tw-bg-opacity));
 }
 
+.bg-f23-lightGreen {
+  --tw-bg-opacity: 1;
+  background-color: rgb(141 182 126 / var(--tw-bg-opacity));
+}
+
+.bg-f23-mediumGreen {
+  --tw-bg-opacity: 1;
+  background-color: rgb(62 129 105 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1674,6 +1724,16 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-f23-mediumGreen:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(62 129 105 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-f23-lightGreen:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(141 182 126 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-20:hover {
   --tw-bg-opacity: 0.2;
 }
@@ -1805,6 +1865,10 @@ video {
     visibility: hidden;
   }
 
+  .md\:fixed {
+    position: fixed;
+  }
+
   .md\:absolute {
     position: absolute;
   }
@@ -1881,6 +1945,18 @@ video {
     bottom: 16rem;
   }
 
+  .md\:top-\[40rem\] {
+    top: 40rem;
+  }
+
+  .md\:top-\[25rem\] {
+    top: 25rem;
+  }
+
+  .md\:-right-16 {
+    right: -4rem;
+  }
+
   .md\:my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -1943,6 +2019,18 @@ video {
     width: 28rem;
   }
 
+  .md\:w-\[33rem\] {
+    width: 33rem;
+  }
+
+  .md\:w-\[36rem\] {
+    width: 36rem;
+  }
+
+  .md\:w-\[40rem\] {
+    width: 40rem;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }

diff --git a/src/App.jsx b/src/App.jsx
@@ -244,7 +244,8 @@ class App extends Component {
         return (
             <BrowserRouter style={{ width: "100%" }}>
                 {/* BrowserRouter wil allow us to switch between the different pages in our SPA based on the URL routing */}
-                <div className="bg-gradient-to-b from-mainBg to-endBg relative" id="starryBackground">
+                <div className="bg-gradient-to-b
+        from-f23-lightGreen via-f23-mediumGreen to-f23-darkGreen relative" id="starryBackground">
                     {/* Application alert messages go here */}
                     <Snackbar open={this.state.alertProps.open}
                         autoHideDuration={this.state.alertProps.duration}>

diff --git a/src/NavBar.jsx b/src/NavBar.jsx
@@ -189,7 +189,7 @@ class NavBar extends Component {
                     open={this.state.open}
                     onClose={this.handleClose}
                 >
-                    
+
                     <MenuItem
                         onClick={this.handleClose}
                         style={{ color: "black" }}
@@ -275,8 +275,8 @@ class NavBar extends Component {
                     style={{
                         width: "100%",
                         zIndex: "20",
-                        backgroundColor: "#1f6aa0",
-                        
+                        backgroundColor: "#3e8169",
+
                         opacity: this.state.shouldRender | !onLanding,
                         pointerEvents: this.state.shouldRender | !onLanding ? "auto" : "none",
                         transition: !onLanding ? "" : "opacity 0.5s",

diff --git a/src/components/_Landing/Landing.tsx b/src/components/_Landing/Landing.tsx
@@ -19,9 +19,7 @@ function LandingPage(props: any) {
 
     return (
         <div
-            className="w-full h-fit bg-gradient-to-b
-        from-f23-lightGreen via-f23-mediumGreen to-f23-darkGreen
-        to-f23-">
+            className="w-full h-fit">
             <Sun />
             <Hero profile={props.profile} />
             <About />

diff --git a/src/components/_Landing/sections/faq/QuestionContainer.tsx b/src/components/_Landing/sections/faq/QuestionContainer.tsx
@@ -13,7 +13,7 @@ function Question(props: { question: string, answer: string }) {
     return (
         <Disclosure>
             {({ open }) => (
-                <div className="flex flex-col border-b-white border-b-2 hover:bg-sky-900 rounded-t-lg">
+                <div className="flex flex-col border-b-white border-b-2 hover:bg-f23-mediumGreen rounded-t-lg">
                     <Disclosure.Button className="flex w-full justify-between
             p-4 text-left text-md text-textSubtitle
             focus:outline-none focus-visible:ring

diff --git a/src/components/_Landing/sections/hero/MainHeroContent.tsx b/src/components/_Landing/sections/hero/MainHeroContent.tsx
@@ -43,7 +43,7 @@ function HeroTitle() {
 function CenterContent({ isLoggedIn }: { isLoggedIn: boolean }) {
     return (
         <div className="w-full flex flex-col justify-start items-center
-                    z-30
+                    z-30 mt-[8rem] md:mt-0
                     md:items-start relative">
             <div className="flex flex-col space-y-1">
                 <HeroTitle />

diff --git a/src/components/_Landing/sections/hero/Navbar.tsx b/src/components/_Landing/sections/hero/Navbar.tsx
@@ -11,7 +11,7 @@ function MenuItem(props: { sectionName: string }) {
         <Menu.Item>
             {({ active }) => (
                 <button
-                    className={`${active ? "bg-blue-300 text-white" : "text-gray-900"}
+                    className={`${active ? "bg-f23-lightGreen text-white" : "text-gray-900"}
                     group flex w-full items-center rounded-md px-2 py-2 text-lg`}
                     onClick={() => scrollToSectionName(sectionName)}
                 >
@@ -24,7 +24,7 @@ function MenuItem(props: { sectionName: string }) {
 
 function CollapsedMenu() {
     return (
-        <div className="text-right bg-cyan-100 z-40 md:hidden">
+        <div className="text-right bg-f23-mediumGreen rounded-md z-40 md:hidden absolute right-4 top-4">
             <Menu as="div"
                 className="relative inline-block text-left">
                 <div>
@@ -69,8 +69,10 @@ function Navbar() {
     const sections = ["Home", "About", "Schedule", "FAQ"];
 
     return (
-        <div className="flex fixed justify-end z-40 w-[100%]">
-            <img src={yellowHackRULogo} alt="yellow hackru logo" className="w-24 absolute top-2 left-4 z-50" />
+        <div className="flex md:fixed justify-end z-40 w-[100%]">
+            <img src={yellowHackRULogo}
+                alt="yellow hackru logo"
+                className="w-24 absolute top-2 left-4 z-50" />
             <CollapsedMenu />
             <div
                 className="absolute top-0 font-light text-text hidden md:flex

diff --git a/src/components/_Landing/sections/hero/hero.tsx b/src/components/_Landing/sections/hero/hero.tsx
@@ -14,8 +14,8 @@ import { Profile } from "../../../Profile";
 
 function Rabbit() {
     return (
-        <div className="absolute z-10 w-[27rem] sm:w-128 bottom-[15rem]
-         -right-32 md:top-60 md:-right-10 lg:w-[45em] lg:-right-44 xl:w-[60rem] xl:top-[7rem] floating">
+        <div className="absolute z-10 w-[27rem] sm:w-128 bottom-[3rem]
+         -right-32 md:w-[40rem] md:top-[25rem] md:-right-22 lg:w-[45em] lg:-right-44 xl:w-[60rem] xl:top-[7rem] floating">
             <img src={rabbit}
                 alt="rabbit" />
         </div>
@@ -28,7 +28,7 @@ function Hero(props: { profile: Profile }) {
 
     return (
         <div className="w-[100%] h-[100vh] px-5
-                        flex text-white space-y-3
+                        flex text-white
                         flex-col items-center text-center justify-start md:justify-start relative
                         md:min-h-[1060px] min-h-[940px]
                         "
@@ -61,14 +61,14 @@ function Hero(props: { profile: Profile }) {
                 <img src={cloud2}
                     alt="cloud" />
             </div>
-
+            {/*
             <div className="absolute z-0 w-96 top-[10rem] left-[45rem]
        opacity-50 md:opacity-50 md:top-[30rem] md:left-[40rem]
        lg:top-[40rem] lg:left-[50rem]
        lg:w-144 cloud">
                 <img src={cloud3}
                     alt="cloud" />
-            </div>
+            </div> */}
 
             <div className="absolute z-0 w-96 top-[10rem] left-[-10rem]
        opacity-50 md:opacity-80 md:top-[30rem] md:left-[-10rem]

diff --git a/src/components/_Landing/sections/library/ColorButton.jsx b/src/components/_Landing/sections/library/ColorButton.jsx
@@ -3,9 +3,9 @@ import { Button, withStyles } from "@material-ui/core";
 const ColorButton = withStyles(() => ({
     root: {
         color: "white",
-        backgroundColor: "#1583d2",
+        backgroundColor: "#8db67e",
         "&:hover": {
-            backgroundColor: "#1583d2",
+            backgroundColor: "#3e8169",
         },
     },
 }))(Button);

diff --git a/src/library/AuthForm.jsx b/src/library/AuthForm.jsx
@@ -57,14 +57,14 @@ AuthForm.propTypes = {
 const renderSpinner = () => (
     <div style={{ display: "block", width: "100%" }}
         align="center">
-        <RingLoader color="#1583d2"/>
+        <RingLoader color="#8db67e"/>
     </div>
 );
 
 const renderErrors = (errors) => (
     errors !== ""
         ? (<Alert
-            style={{ background: "#1583d2", border: "none", color: "white" }}
+            style={{ background: "#8db67e", border: "none", color: "white" }}
             color="danger">
             {errors}
         </Alert>)

diff --git a/src/library/ColorButton.jsx b/src/library/ColorButton.jsx
@@ -3,9 +3,9 @@ import { Button, withStyles } from "@material-ui/core";
 const ColorButton = withStyles(() => ({
     root: {
         color: "white",
-        backgroundColor: "#1583d2",
+        backgroundColor: "#8db67e",
         "&:hover": {
-            backgroundColor: "#1583d2",
+            backgroundColor: "#8db67e",
         },
     },
 }))(Button);