CSS cleanup and merged CSS files for redesign/refactoring (#166)

* Updated top navbar so that users not logged in can access every page * Removed empty app.css * Cleanup old components.css file before rewrite * Initial cleanup of pages.css * Initial login CSS cleanup * Removed unused/legacy CSS selectors * Combined styles for refactor * Additional cleanup and fixed # slider * Combine login/# styles * Combine unessesary margin/padding in CSS * Fixed #41 --------- Co-authored-by: sirtinyhead <sirtinyhead@gmail.com>
OSU-MC · Mar 14, 2024 · bae7161 · bae7161
1 parent d05c9e4
commit bae7161
Show file tree

Hide file tree

Showing 17 changed files with 1,203 additions and 1,685 deletions.
diff --git a/client/public/Arrow_left_long.png b/client/public/Arrow_left_long.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,46 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Open-Source Classroom Polling Application" />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <title>MyClassroom</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/client/public/ssoIcon.png b/client/public/ssoIcon.png
diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,4 +1,3 @@
-import './App.css';
 import { Route, Routes, Navigate, Outlet } from 'react-router-dom';
 
 /*

diff --git a/client/src/components/nav/SideNavbar.js b/client/src/components/nav/SideNavbar.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-bootstrap';
 import { Link, useLocation } from 'react-router-dom';
-import './components.css'
 import SchoolIcon from '@mui/icons-material/School';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
@@ -51,4 +50,4 @@ function SideNavbar(props) {
             : <></>}</>
 }
 
-export default SideNavbar;
+export default SideNavbar;
diff --git a/client/src/components/nav/TopNavbar.js b/client/src/components/nav/TopNavbar.js
@@ -1,6 +1,5 @@
 import { React, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import './components.css'
 import useAuth from '../../hooks/useAuth'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
@@ -20,23 +19,43 @@ function TopNavbar(props) {
 
                 {/*TODO: Finish obvious improvements, add functionality to read name of user*/}
                 <div className="navbarCenterContainer">
-                {console.log(props.inCourse)}
                     {props.loggedIn ?
                         <LoggedInButtons />
                         :
-                        <p className='navbarItem smallText'> placeholder not logged in </p>}
+                        <p className='navbarItem smallText'> placeholder not logged in </p>
+                    }
 
                 </div>
                 <div className="navbarRightContainer">
-                    <div className="navbarItem dropdown">
-                        <FontAwesomeIcon className="dropdownIcon" icon={faUser}/>
-                        <UserMenu loggedIn={props.loggedIn}/>
-                    </div>
+                    {props.loggedIn ?
+                        <LoggedInRight loggedIn={props.loggedIn} />
+                        :
+                        <LoggedOutRight />
+                    }
+
                 </div>
             </div>
     );
 }
 
+function LoggedOutRight(){
+    return(
+        <span className="navButtons rightButtons">
+            <a href="/#" className="navLogin"> Log In </a>
+            <a href="/create" className="nav#"> Get Started </a>
+        </span>
+    )
+}
+
+function LoggedInRight(props){
+    return(
+        <div className="navbarItem dropdown">
+            <FontAwesomeIcon className="dropdownIcon" icon={faUser}/>
+            <UserMenu loggedIn={props.loggedIn}/>
+        </div>
+    )
+}
+
 function LoggedInButtons(){
     return(
         <>
@@ -74,4 +93,4 @@ function UserMenu(props) {
     }</>
 }
 
-export default TopNavbar;
+export default TopNavbar;