Update Website Colors for F19 Theme (#200)

* Font Update * Text color based on bg * Fixing colors on schedule section * Removing HackRU Logo from about section * Fixing footer hover * White logo on dashboard * Larger column to make sure logo & MLH badge do not interfere * Update favicon * Modify hover on nav color * Fix color on dashboard buttons * Missing bracket * Change color of dashboard section header
HackRU · Jul 28, 2019 · 41a52d0 · 41a52d0
1 parent 237010e
commit 41a52d0
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 61 deletions.
diff --git a/public/index.css b/public/index.css
@@ -1,23 +1,25 @@
-@import url("https://fonts.googleapis.com/css?family=Raleway+Dots");
+@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: #26E8BD;
-    --primary-color-alt: #5FFFDC;
-    --secondary-color: #5A7A96;
-    --secondary-color-alt: #354a5f;
-    --accent-color: #FF80CF;
-    --accent-color-alt: #F8A5FF;
-    --disabled-color: #BDBDBD;
-    --hover-color: rgba(255, 255, 255, 0.5);
-    --hover-background-color: #26E8BDA0;
+    --primary-color: #FFF5e8; /* Logo, link colors, text */
+    --primary-color-alt: #000000;  /* 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 */
+    --accent-color-alt: #F1BA43; /* Dashboard button color NOTE:  Dashboard colors are different across navbar on different pages */
+    --disabled-color: #FF0000; /* Unsure.... */
+    --hover-color: rgba(0, 0, 0, 0.9);
+    --hover-background-color: #df897f;
     --active-color: rgba(255, 255, 255, 0.5);
     --active-background-color: #5A7A96A0;
     /* Fonts */
-    --header-font: 'Raleway Dots', serif;
-    --text-font: 'Open Sans', sans-serif;
+    --header-font: 'Titillium Web', sans-serif;
+    --text-font: 'Titillium Web', sans-serif;
+
+/*'Open Sans', sans-serif;  */
     /* Form Inputs */
     --input-background: rgba(255, 255, 255, 0.2);
     --input-placeholder: rgba(255, 255, 255, 0.3);
@@ -90,10 +92,6 @@ h1, h2, h3, h4, h5, h6, p {
 hr {
     background-color: rgba(255, 255, 255, 0.5);
 }
-h4{
-    color: var(--primary-color) !important;
-}
-
 /* Theme Nav/Font */
 .theme-font {
     font-family: var(--header-font);
@@ -108,7 +106,7 @@ h4{
     height: 35px;
     bottom: -25%;
     left: -25%;
-    background: linear-gradient(to left, #FF80CF22, #FF80CF22, #FF80CF22);
+    background:  linear-gradient(to left, #FFF5E855, #FFF5E855, #FFF5E855); 
     visibility: hidden;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
@@ -123,20 +121,21 @@ h4{
 
 /* Background Control */
 .bg-gradient-right {
-    background: #5A7A96;
-    background: linear-gradient(135deg, #5A7A9600, var(--primary-color));
+    background: var(--primary-color);
     width: 100vw; 
     z-index: 10;
+    color: var(--secondary-color);
 }
 .bg-gradient-left {
-    background: #5A7A96;
-    background: linear-gradient(135deg, var(--primary-color), #5A7A9600 );
+    background: var(--primary-color);
     width: 100vw; 
     z-index: 10;
+    color: var(--secondary-color);
 }
 .bg-no-gradient {
     width: 100vw;
     z-index: 10;
+    color: var(--primary-color);
 }
 .skew-right, .skew-left {
     padding-top: 3em;
@@ -150,16 +149,6 @@ h4{
 }
 
 /* Landing Page */
-.faq hr {
-    height: 2px;
-    transition: all 0.5s ease;
-}
-.faq:hover hr {
-    background-color: var(--primary-color);
-}
-.faq h5 {
-    font-weight: 600;
-}
 .footer {
     margin-top: 30px;
     padding-top: 20px;
@@ -173,22 +162,20 @@ h4{
     font-size: 100%; 
 }
 .footer .social-links:hover{
-    color: var(--primary-color);
+    color: var(--hover-color);
 }
 .footer a {
     color: var(--primary-color);
     line-height: 10vh;
     padding: 15px 10px; 
 }
+.footer a:hover {
+   color: var(--hover-color);
+}
 .footer .footer-logo {
     display: inline-block;
     height: calc(10vh*0.45); 
 }
-.color-priority {
-    width: 100%; 
-    color:  #ffffff !important;
-    z-index: 10;
-}
 #navigation-link {
     font-family: var(--text-font);
     color: white;
@@ -199,7 +186,13 @@ h4{
 #landing-section {
     color: white;
 }
-
+.table {
+    background-color: inherit !important;
+    color: inherit !important;
+}
+.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+    color: var(--primary-color);
+}
 /* Form Inputs (Dashboard/Login/Signup/Magic/Forgot) */
 input, textarea, .custom-file-label {
     border-radius: var(--input-border-radius) !important;
@@ -236,6 +229,9 @@ input, textarea, .custom-file-label {
 .custom-av-checkbox div div label p {
     color: var(--input-color);
 }
+form .btn, form btn-secondary {
+    color: var(--secondary-color) !important;
+}
 
 /* Form validator */
 .avfield-hide-inner {
@@ -264,6 +260,19 @@ input, textarea, .custom-file-label {
     transform: scale(1.3);
 }
 
+/* Dashboard QR */
+
+.qr {
+    max-width: 80%;
+    border-radius: 10px;
+    margin: 10px;
+    transition: transform .8s ease-in-out;
+}
+.qr:hover {
+    transform: rotate(360deg);
+}
+
+
 /* Dashboard Alerts */
 .profile-alert {
     border: none !important;
@@ -321,12 +330,3 @@ input, textarea, .custom-file-label {
     padding-top: 5px;
     color: var(--secondary-color);
 }
-.qr {
-    max-width: 80%;
-    border-radius: 10px;
-    margin: 10px;
-    transition: transform .8s ease-in-out;
-}
-.qr:hover {
-    transform: rotate(360deg);
-}
diff --git a/public/index.html b/public/index.html
@@ -21,8 +21,8 @@
     <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 Fall 2019.">
-    <link rel="icon" href="%PUBLIC_URL%/assets/icons/hru-logo-circle-green.png">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/icons/hru-logo-circle-green.png">
+    <link rel="icon" href="%PUBLIC_URL%/assets/icons/hru-logo.png">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/icons/hru-logo.png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="stylesheet" href="%PUBLIC_URL%/index.css">
     <title id="title">HackRU</title>

diff --git a/src/App.jsx b/src/App.jsx
@@ -110,8 +110,6 @@ class App extends Component {
                     <div style={{ position: "fixed", zIndex: 0, width: "100%", height: "100%", left: 0, top: 0, opacity: 0.5 }}>
                         {defaults.enableFlyingLogo && (<FlyingLogo url={"/assets/icons/greenwingstarasset.png"} />)}
                     </div>
-                    <div style={{ position: "fixed", zIndex: 1, width: "100%", height: "100%", left: 0, top: 0, background: "url(/assets/hru-background-large.png)", backgroundSize: "cover", opacity: 0.25 }}></div>
-                    <div style={{ position: "fixed", zIndex: 2, width: "100%", height: "100%", left: 0, top: 0, backgroundColor: "rgb(0, 0, 0)", backgroundSize: "cover", opacity: 0.25 }}></div>
                     <Switch>
                         {/* This is where the URL routing magic actually happens */}
                         <Route exact

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -102,7 +102,7 @@ class Dashboard extends Component {
                     <Container>
                         <div style={{ width: "100%", textAlign: "left", marginBottom: 0, paddingTop: 35 }}>
                             <Row>
-                                <Col md={9}
+                                <Col md={8}
                                     xs={12}>
                                     <h1 className="display-4 theme-font">Welcome, {user.first_name}</h1>
                                     <div style={{ display: "inline-block", marginRight: 20 }}>
@@ -128,12 +128,12 @@ class Dashboard extends Component {
                                         style={{ color: theme.accent[0] + "ff", textDecoration: "none" }}>Logout</Link></p></div>
                                 </Col>
                                 <Col style={{ textAlign: "center" }}
-                                    md={3}
+                                    md={4}
                                     xs={12}>
-                                    <img width="250"
+                                    <img width="150"
                                         style={{ marginTop: 0 }}
                                         alt="logo"
-                                        src="./assets/icons/hru-logo-green.svg" />
+                                        src="./assets/icons/hru-logo-white.svg" />
                                 </Col>
                             </Row>
                         </div>

diff --git a/src/components/Dashboard/Section.jsx b/src/components/Dashboard/Section.jsx
@@ -29,7 +29,7 @@ class Section extends Component {
                     <ListGroupItem action
                         tag="button"
                         href="#"
-                        style={{ background: theme.primary[0] + "2F", color: theme.primary[1] + "FF", borderRadius: 0 }}
+                        style={{ background: theme.primary[0] + "2F", color: theme.primary[0] + "FF", borderRadius: 0 }}
                         onClick={() => 
                             this.setState({ isOpen: !this.state.isOpen })
                         }>

diff --git a/src/components/Landing/Sections/About.jsx b/src/components/Landing/Sections/About.jsx
@@ -8,9 +8,7 @@ class About extends Component {
     render() {
         return (
             <div>
-                <h1 className="display-4 theme-font">About <img width="150"
-                    alt="logo"
-                    src="./assets/icons/hru-logo-white.svg" ></img></h1>
+                <h1 className="display-4 theme-font">About HackRU</h1>
                 <hr />
                 <h2>Who and What?</h2>
                 <p>HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building awesome software and hardware projects. Industry experts and mentors come from all over the country to create an environment that fosters an atmosphere of learning through tech talks and one-on-one guidance. We encourage beginner and advanced hackers alike to challenge themselves and expand their skills. Learn more about HackRU by reading our articles on <a href="https://medium.com/the-hackru">medium!</a></p>

diff --git a/src/components/Landing/Sections/Footer.jsx b/src/components/Landing/Sections/Footer.jsx
@@ -16,7 +16,7 @@ class Footer extends Component {
                             <div className="text-center col-lg-4"
                                 style={{ padding: 0 }}>
                                 <h6 className="align-middle mb-4">
-                                    <a style={{color: "white" }}
+                                    <a 
                                         href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf"
                                         target="_blank"
                                         rel="noopener noreferrer">MLH's Code of Conduct</a>

diff --git a/src/components/Landing/Sections/Schedule.jsx b/src/components/Landing/Sections/Schedule.jsx
@@ -8,7 +8,6 @@ class Schedule extends Component {
     render() {
         return (
             <div>
-
                 <div className="row">
                     <div className="col-12">
                         <h1 className="display-4 theme-font">Schedule</h1>