Spring 2023 Landing Page Theme (#521)

* Working on integrating new landing page. Still some errors

* Compiles succesfully. Still many errors

* Tailwindcss now shows in components

* Integrated tailwindCSS

* Login/Register/Dashboard/Logout buttons on Landing Page

* Added particle background. Fixed a tag miscoloring

* Added randomization of animation duration

* Added a global blue gradient background and changed npm script

* Isolated TailwindCSS config to new landing page

* Conditionally render the navbar when going into old dashboard

* Particle Background for all routes

* logo change & schedule CSS updates

* Adjusted padding in the hero title

* finished redesign. tbd about navbar dash

* changed dash-navbar color to blue

* update theme colors

* void schedule

* Adjust padding in hero to look better in mobile

* Adjusted hero padding for desktops

* Hero page works down to 300px width

* Added scroll functionallity to arrow in hero

* Fixed eslint errorsand removed Sponsors section

* Changed index-23.css filename

* changed button color

* unsure about select-background color

* Added re-render on URL changes

* Updated schedule component with old times

* Voided the schedule

* additional color changes

* change dev server back to dev

* New package-lock.json

* Handling out of memory Github action error

Co-authored-by: MugPand <[email protected]>
Co-authored-by: Andrew Heo <[email protected]>
Co-authored-by: Andrew Heo <[email protected]>
Co-authored-by: Mugdhesh Pandkar <[email protected]>

Author: 4 people

.eslintignore

@@ -1,2 +1,5 @@
 *.json
 *.css
+*.png
+*.svg
+*.jpeg

.github/workflows/code-build-assurance.yml

@@ -18,6 +18,8 @@ jobs:
         steps:
             - uses: actions/checkout@v2
             - name: Test using Node ${{ matrix.node-version }}
+              env:
+                NODE_OPTIONS: "--max_old_space_size=4096"
               uses: actions/setup-node@v1
               with:
                   node-version: ${{ matrix.node-version }}

package-lock.json

@@ -6,18 +6,24 @@
         "@devexpress/dx-react-core": "^2.7.2",
         "@devexpress/dx-react-scheduler": "^2.7.2",
         "@devexpress/dx-react-scheduler-material-ui": "^2.7.2",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@headlessui/react": "^1.7.7",
         "@material-ui/core": "^4.11.0",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.56",
         "@material-ui/utils": "^4.10.2",
+        "@mui/material": "^5.11.5",
         "animejs": "^3.0.0",
+        "autoprefixer": "^10.4.13",
         "availity-reactstrap-validation": "^2.5.0",
         "axios": "^0.21.1",
         "bootstrap": "^4.1.3",
         "chart.js": "^2.9.4",
         "font-awesome": "^4.7.0",
         "material-ui-chip-input": "^1.1.0",
         "parallax-js": "^3.1.0",
+        "postcss": "^8.4.21",
         "qrcode.react": "^0.9.3",
         "react": "^16.6.3",
         "react-anime": "^3.0.3",
@@ -28,7 +34,9 @@
         "react-dom": "^16.6.3",
         "react-fa": "^5.0.0",
         "react-google-autocomplete": "^1.0.18",
+        "react-icons": "^4.7.1",
         "react-motion": "^0.5.2",
+        "react-particles": "^2.8.0",
         "react-router-dom": "^4.3.1",
         "react-scripts": "^3.4.3",
         "react-scroll-parallax": "^1.3.5",
@@ -38,10 +46,14 @@
         "react-toggle": "^4.1.1",
         "react-window": "^1.8.5",
         "reactstrap": "^6.5.0",
-        "request": "^2.88.0"
+        "request": "^2.88.0",
+        "tailwindcss": "^3.2.4",
+        "tsparticles": "^2.8.0",
+        "typescript": "^4.9.0"
     },
     "scripts": {
-        "start": "env-cmd development react-scripts start",
+        "tailwind-watch": "npx tailwindcss -i ./src/index.css -o ./public/tailwind-output.css --watch",
+        "start": "npm run tailwind-watch & env-cmd development react-scripts start",
         "build-dev": "env-cmd build-dev react-scripts build",
         "build-prod": "env-cmd build-prod react-scripts build",
         "test": "react-scripts test",
@@ -63,6 +75,7 @@
         "@testing-library/react": "^12.0.0",
         "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^13.2.1",
+        "@types/react-router-dom": "^5.3.3",
         "babel-core": "^6.26.3",
         "babel-eslint": "^10.0.0",
         "env-cmd": "^8.0.2",

package.json

@@ -1,18 +1,19 @@
 @import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
 
-/* Variables */
 :root {
     /* Theme Colors */
     --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: #C85151; /* Background color */
-    --accent-color: #F1BA43; /* Logout, Live button color */
+    --secondary-color-alt:#1f6aa0; /* Background color */
+    --accent-color:  #4bbede; /* Logout, Live button color */
+    /* split card colors */
+    --splitCard-color:#000000;
     --accent-color-alt: #F1BA43; /* Dashboard button color NOTE:  Dashboard colors are different across navbar on different pages */
     --disabled-color: #00000055; /* Unsure.... */
     --hover-color: #F1BA43;
-    --hover-background-color: #df897f;
+    --hover-background-color: #4bbede;
     --active-color: rgba(255, 255, 255, 0.5);
     --active-background-color: #5A7A96A0;
     /* Fonts */
@@ -21,12 +22,12 @@
 
     /*'Open Sans', sans-serif;  */
     /* Form Inputs */
-    --input-background: #C8515111;
+    --input-background: #516b7311;
     --input-placeholder: rgba(0, 0, 0, 0.3);
     --input-border: none;
     --input-color: rgba(0, 0, 0, 1);
     --input-border-radius: 0px;
-    --select-background: #C85151;
+    --select-background: #4bbede;
     --select-color: rgba(0, 0, 0, 1);
     /* Hero Image */
     --hero-width: 1000px;
@@ -41,12 +42,17 @@
     --sponsors-bronze-color: #C96F0D;
 }
 
+a {
+    color: unset !important;
+}
+
 /* Global look and feel */
-body::-webkit-scrollbar { 
-    display: none; 
+body::-webkit-scrollbar {
+    display: none;
 }
 html, body {
     overflow-x: hidden;
+    min-width: 380px;
 }
 body {
     font-family: var(--text-font) !important;
@@ -57,7 +63,7 @@ body {
 ::placeholder {
     color: var(--input-placeholder) !important;
 }
-a:link {
+/* a:link {
     color: var(--accent-color);
     transition: color 0.5s ease;
 }
@@ -71,7 +77,8 @@ a:visited {
 a:visited:hover {
     color: var(--hover-color);
     text-decoration: none;
-}
+} */
+
 .primary-link {
     color: var(--primary-color) !important;
     transition: color 0.5s ease;
@@ -123,7 +130,7 @@ hr {
     height: 35px;
     bottom: -5%;
     left: -25%;
-    background:  linear-gradient(to left, #FFF5E855, #FFF5E855, #FFF5E855); 
+    background:  linear-gradient(to left, #FFF5E855, #FFF5E855, #FFF5E855);
     visibility: hidden;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
@@ -147,13 +154,13 @@ hr {
 /* Background Control */
 .bg-gradient-right {
     background: var(--secondary-color-alt);
-    width: 100vw; 
+    width: 100vw;
     z-index: 10;
     color: var(--secondary-color);
 }
 .bg-gradient-left {
     background: var(--primary-color);
-    width: 100vw; 
+    width: 100vw;
     z-index: 10;
     color: var(--secondary-color);
 }
@@ -169,7 +176,7 @@ hr {
     padding-top: 100px;
     padding-bottom: 100px;
 }
-.skew-right { 
+.skew-right {
     transform: skew(0deg, -4deg);
 }
 .skew-left {
@@ -183,26 +190,26 @@ hr {
 }
 .footer .text-vcenter {
     margin: 0;
-    line-height: 10vh; 
+    line-height: 10vh;
 }
 .footer .social-links {
     color: #ffffff;
-    font-size: 100%; 
+    font-size: 100%;
 }
 .footer .social-links:hover{
     color: var(--hover-color);
 }
 .footer a {
     color: var(--primary-color);
     line-height: 10vh;
-    padding: 15px 10px; 
+    padding: 15px 10px;
 }
 .footer a:hover {
    color: var(--hover-color);
 }
 .footer .footer-logo {
     display: inline-block;
-    height: calc(10vh*0.45); 
+    height: calc(10vh*0.45);
 }
 #navigation-link {
     font-family: var(--text-font);
@@ -345,7 +352,7 @@ form .btn, form btn-secondary {
 .live-messages {
     color: var(--primary-color) !important;
     background-color: transparent !important;
-    border: none !important; 
+    border: none !important;
 }
 .live-messages-text {
     color: var(--primary-color) !important;
@@ -373,25 +380,25 @@ form .btn, form btn-secondary {
     padding-top: 5px;
 }
 
-/* Sponsorship Page */ 
+/* Sponsorship Page */
 
 /* Sponsorship Landing Sepcifics */
 .bronze {
-    color: #FFA038 !important; 
+    color: #FFA038 !important;
 }
-  
+
 .silver {
     color: #B7B7B7 !important;
 }
-  
+
 .gold {
     color: #FFDF00 !important;
 }
-  
+
 .plat {
-    color: #D8D8D8 !important; 
+    color: #D8D8D8 !important;
 }
-  
+
 .titlepack {
     color: var(--primary-color) !important;
 }
@@ -404,7 +411,7 @@ form .btn, form btn-secondary {
 }
 
 .table td {
-    border-top: none !important; 
+    border-top: none !important;
 }
 
 .pd {padding-top: 25px;}
@@ -651,7 +658,7 @@ form .btn, form btn-secondary {
     scrollbar-color: transparent transparent;
 
 }
-.no-scrollbars::-webkit-scrollbar { 
+.no-scrollbars::-webkit-scrollbar {
 display: none;  /* Safari and Chrome */
 }
 .no-style-type {
@@ -660,8 +667,28 @@ display: none;  /* Safari and Chrome */
 
 /* Material UI Specifc */
 
-.MuiAlert-filledSuccess{
+/* .MuiAlert-filledSuccess{
     background-color: var(--primary-color-alt);
     color: var(--primary-color-alt);
 
+} */
+
+.makeStyles-background-14 {
+    background: transparent !important;
+}
+
+.makeStyles-stickyElement-3 {
+    background: transparent !important;
+}
+
+.Cell-dayOfWeek-20 {
+    color: #d1e9ef !important;
+}
+
+.Cell-dayOfMonth-21 {
+    color: #d1e9ef !important;
+}
+
+.Label-text-32 {
+    color: #d1e9ef !important;
 }

public/index-s20.css renamed to public/index-s23.css

@@ -21,10 +21,11 @@
     <meta property="og:image" content="./assets/fb-banner-upper.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Find out more about HackRU Spring 2023.">
-    <link rel="icon" href="%PUBLIC_URL%/assets/icons/red_hackru.png">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/icons/red)hackru.png">
+    <link rel="icon" href="%PUBLIC_URL%/assets/icons/blue_hackru.png">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/icons/blue_hackru.png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="stylesheet" href="%PUBLIC_URL%/index-s20.css">
+    <link rel="stylesheet" href="%PUBLIC_URL%/index-s23.css">
+    <link rel="stylesheet" href="%PUBLIC_URL%/tailwind-output.css">
     <title id="title">HackRU</title>
 </head>