Merge pull request #6 from Husky-Coding-Project/home-page

Home page
hcp-uw · Sep 17, 2022 · f485d62 · f485d62
2 parents 04794dd + bf7d773
commit f485d62
Show file tree

Hide file tree

Showing 13 changed files with 436 additions and 70 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,40 +1,6 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  width: 100%;
 }
 
 @font-face {

diff --git a/src/App.js b/src/App.js
@@ -18,7 +18,19 @@ let theme = createTheme({
             main: '#FFFFFF',
         },
         secondary: {
-            main: '#B00093',
+            main: '#7A0BC0',
+        },
+        dark: {
+            light: '#7A0BC0',
+            main: '#1A1A40',
+            dark: '#270082',
+            contrastText: '#FA58B6',
+        },
+        accent: {
+            light: '#FA58B6',
+            main: '#FA58B6',
+            dark: '#FA58B6',
+            contrastText: '#FA58B6',
         },
     },
     typography: {
@@ -35,21 +47,67 @@ let theme = createTheme({
             '"Segoe UI Symbol"',
         ].join(','),
     },
+    components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: "#7A0BC0"
+                }
+            }
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: "#7A0BC0"
+                }
+            }
+        },
+        MuiTypography: {
+            styleOverrides: {
+                gutterBottom: {
+                    marginBottom: 12,
+                },
+            },
+        },
+    }
 });
 
 theme.typography.h1 = {
     fontFamily: 'pressStart',
     fontWeight: 300
 }
 
+theme.typography.h2 = {
+    fontFamily: 'pressStart',
+    fontWeight: 300,
+}
+
 theme.typography.h4 = {
     fontFamily: 'pressStart',
-    fontWeight: 300
+    fontWeight: 300,
+    fontSize: '1.5rem',
+    '@media (max-width:600px)': {
+        fontSize: '1.0rem',
+    },
+    '&.MuiTypography-gutterBottom': {
+        marginBottom: 32
+    },
 }
 
-theme.typography.h2 = {
+theme.typography.h5 = {
     fontFamily: 'pressStart',
-    fontWeight: 300
+    fontWeight: 300,
+    fontSize: '1.0rem',
+}
+
+theme.typography.subtitle1 = {
+    fontWeight: 300,
+    fontSize: '1.5rem',
+}
+
+theme.typography.subtitle2 = {
+    fontWeight: 300,
+    fontSize: '1.0rem',
 }
 
 function App() {
@@ -85,9 +143,9 @@ function App() {
         return (
             <ThemeProvider theme={theme}>
                 <div className="App">
-                <Header pages={pages} />
-                { child() }
-                <Footer />
+                    <Header pages={pages} />
+                    { child() }
+                    <Footer />
                 </div>
             </ThemeProvider>
         );

diff --git a/src/api/api.js b/src/api/api.js
@@ -0,0 +1,62 @@
+// import axios from 'axios';
+
+// 'const BASE_URL = 'https://random_url.com';
+const OK = 200;
+
+// For dummy endpoints
+const delay = ms => new Promise(
+    resolve => setTimeout(resolve, ms)
+  );
+
+const events = {
+    status: OK,
+    data: [
+        {
+            date: new Date('Wed, 27 July 2016 13:30:00'),
+            name: 'Default Name',
+            location: 'UW CSE2 271',
+            sponsor: null,
+            attendees: 100,
+            description: "text text and a lot more text. Actually this might be too much random text. Imma go now. Ha im back. Imma go for real now. Got you again rofl. Ok im bored now, signing off. ** Mic drop ** ^-^",
+            image: "https://picsum.photos/200/300",
+        },
+        {
+            date: new Date('Wed, 27 July 2019 13:30:00'),
+            name: 'Better Name',
+            location: 'UW CSE2 271',
+            sponsor: "DubHacks",
+            attendees: 100,
+            description: "This event is MEMBERS ONLY. Actually though, should we add another column in the table for these types of events? But here is much more text than last time and should overflow some stuff! text text and a lot more text. Actually this might be too much random text. Imma go now. Ha im back. Imma go for real now. Got you again rofl. Ok im bored now, signing off. ** Mic drop ** ^-^",
+            image: null,
+        },
+        {
+            date: new Date('Wed, 27 July 2019 13:30:00'),
+            name: 'Workshop',
+            location: 'UW Hub Building Room 12345',
+            sponsor: null,
+            attendees: 1000,
+            description: "text text and a lot more text. A",
+            image: "https://picsum.photos/200/300",
+        }
+    ],
+};
+
+export const getFeaturedEvents = async (callback) => {
+    // await axios.get(BASE_URL + '/test').then(
+    //     (res) => {
+    //         if (res.status === OK && res.data) {
+    //             return {
+    //                 status: OK,
+    //                 data: res.data.slice(0, 3),
+    //             }
+    //         } else {
+    //             return {
+    //                 status: OK,
+    //                 data: [],
+    //             }
+    //         }
+    //     }
+    // );
+    await delay(3000);
+    callback(events.data.slice(0, 3))
+}
diff --git a/src/assets/HCPLogo.jpg b/src/assets/HCPLogo.jpg
diff --git a/src/assets/HCPLogoText-Crop.png b/src/assets/HCPLogoText-Crop.png
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -1,5 +1,5 @@
 footer {
-    background-color: #060b26;
+    background-color: #270082;
     width: 100%;
     height: fit-content;
     display: flex;
@@ -15,8 +15,6 @@ footer > * {
 
 #logo {
     height: 100px;
-    width: 300px;
-    object-fit: cover;
 }
 
 #socials {

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -3,7 +3,7 @@ import { Typography, IconButton } from '@mui/material';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import Logo from '../../assets/HCPLogoText.png'
+import Logo from '../../assets/HCPLogoText-Crop.png'
 
 
 function Footer() {
@@ -34,7 +34,7 @@ function Footer() {
                     {generateIcon(<MailOutlineIcon sx={{ fontSize: 40 }}/>, "mailto:hcpuw@uw.edu")}
                 </div>
                 <br />
-                <Typography variant='caption' color="#FFFFFF"> Copyright © 2022 Husky Coding Project. All Rights Reserved </Typography>
+                <Typography variant='caption' color="primary"> Copyright © 2022 Husky Coding Project. All Rights Reserved </Typography>
             </footer>
         </>
     )

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -16,12 +16,8 @@
 }
 
 .header-logo {
-    align-self: center;
-    margin-bottom: auto;
     margin-right: auto;
     height: 60px;
-    width: 170px;
-    object-fit: cover;
     cursor: pointer;
 }
 

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -10,7 +10,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { useLocation, useNavigate } from "react-router-dom";
 import Sidebar from '../Sidebar/Sidebar';
 import './Header.css';
-import Logo from '../../assets/HCPLogoText.png'
+import Logo from '../../assets/HCPLogoText-Crop.png'
 
 function Header(props) {
     const {
@@ -47,9 +47,9 @@ function Header(props) {
             <Button key={obj.name} color="inherit" className="header-page-button" onClick={() => navigate(obj.path)}>
                 {
                     obj.name === currPage.name ?
-                        <Typography variant='h4' color="#FFFFFF"> { "<" + obj.name + "/>" } </Typography>
+                        <Typography variant='h5' color="#FFFFFF" fontSize="1.0rem"> { "<" + obj.name + "/>" } </Typography>
                     :
-                        <Typography variant='h4' color="#FFFFFF"> { obj.name } </Typography>
+                        <Typography variant='h5' color="#FFFFFF"> { obj.name } </Typography>
                 }
             </Button>
         )
@@ -69,7 +69,7 @@ function Header(props) {
                         handleShow={showSideBar}
                     />
             }
-            <AppBar position='fixed' className="header-appbar" elevation="4" color='secondary'>
+            <AppBar position='fixed' className="header-appbar" elevation={4} color="secondary">
                 <Toolbar className="toolbar">
                     {
                         isMobile &&

diff --git a/src/components/Sidebar/Sidebar.css b/src/components/Sidebar/Sidebar.css
@@ -1,5 +1,5 @@
 .sidebar {
-    background-color: #060b26;
+    background-color: #7A0BC0;
     width: 250px;
     padding-top: 65px;
     height: 100vh;

diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -27,9 +27,9 @@ function Sidebar(props) {
             <Button key={obj.name} color="inherit" className="sidebar-button" onClick={() => navigate(obj.path)}>
                 {
                     obj.name === currPage.name ?
-                        <Typography variant='h4' color="#FFFFFF"> { "<" + obj.name + "/>" } </Typography>
+                        <Typography variant='h5' color="primary"> { "<" + obj.name + "/>" } </Typography>
                     :
-                        <Typography variant='h4' color="#FFFFFF"> { obj.name } </Typography>
+                        <Typography variant='h5' color="primary"> { obj.name } </Typography>
                 }
             </Button>
         )