Add Discord advert.

ieee-uottawa · Jan 9, 2021 · c1f499d · c1f499d
1 parent 14e87b4
commit c1f499d
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 138 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,10 +5,11 @@
     "author": "Ryan Fleck | Nevin WS Ganesan | Rushil Perera",
     "dependencies": {
         "@loadable/component": "^5.14.1",
-        "@material-ui/core": "^3.2.2",
+        "@material-ui/core": "^4.11.2",
+        "@material-ui/data-grid": "^4.0.0-alpha.15",
         "@sentry/browser": "^4.1.1",
         "aframe": "^1.0.4",
-        "axios": "^0.19.2",
+        "axios": "^0.21.1",
         "dayjs": "^1.7.7",
         "eslint-config-prettier": "^6.5.0",
         "eslint-plugin-prettier": "^3.1.1",

diff --git a/frontend/src/data/carousel.json b/frontend/src/data/carousel.json
@@ -1,4 +1,18 @@
 [
+    {
+        "message": "Join Us On Discord",
+        "button": {
+            "text": "Office Hours",
+            "url": "/office-hours"
+        },
+        "imageFile": {
+            "id": "santa-pic",
+            "image": "../../static/images/csme-site.jpg",
+            "style": {
+                "backgroundPositionY": "-175px"
+            }
+        }
+    },
     {
         "message": "Powering Your Student Experience",
         "button": {

diff --git a/frontend/src/pages/ContactUs/OfficeHours.jsx b/frontend/src/pages/ContactUs/OfficeHours.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { isServerSideRendering } from '../../utils/util';
 import Title from '../../components/Titles/Title';
-import officeHoursImg from '../../../static/images/office-hours/office-hours.png';
+// import officeHoursImg from '../../../static/images/office-hours/office-hours.png';
 import { translate } from '../../helpers/translation';
 
 class OfficeHours extends Component {
@@ -41,11 +41,29 @@ class OfficeHours extends Component {
                 <Title variant="h5" gutterBottom className="title">
                     {translate('Office Hours')}
                 </Title>
-                <img
+                <table style="width:100%">
+                    <tr>
+                        <th>Firstname</th>
+                        <th>Lastname</th>
+                        <th>Age</th>
+                    </tr>
+                    <tr>
+                        <td>Jill</td>
+                        <td>Smith</td>
+                        <td>50</td>
+                    </tr>
+                    <tr>
+                        <td>Eve</td>
+                        <td>Jackson</td>
+                        <td>94</td>
+                    </tr>
+                </table>
+
+                {/*<img
                     src={officeHoursImg}
                     alt="IEEE Office Hours"
                     style={imgStyle}
-                />
+                />*/}
             </>
         );
     }

diff --git a/frontend/src/pages/OfficeHours/OfficeHours.jsx b/frontend/src/pages/OfficeHours/OfficeHours.jsx
@@ -4,6 +4,33 @@ import Title from '../../components/Titles/Title';
 import officeHoursImg from '../../../static/images/office-hours/office-hours.png';
 import { translate } from '../../helpers/translation';
 
+import { DataGrid } from '@material-ui/data-grid';
+import { Typography } from '@material-ui/core';
+
+const columns = [
+    { field: 'name', headerName: 'Name', width: 150 },
+    { field: 'discord', headerName: 'Discord Tag', width: 200 },
+    { field: 'hours', headerName: 'Office Hours', width: 200 },
+    { field: 'bilingual', headerName: 'Bilingual', width: 200 }
+];
+
+const rows = [
+    {
+        id: 1,
+        name: 'Ryan',
+        discord: '@RyanFleck',
+        hours: '0700-1200 Mon-Fri',
+        bilingual: false
+    },
+    {
+        id: 2,
+        name: 'Vlad',
+        discord: '@VLAD',
+        hours: '1200-1700 Mon-Fri',
+        bilingual: false
+    }
+];
+
 class OfficeHours extends Component {
     constructor(props) {
         super(props);
@@ -41,18 +68,46 @@ class OfficeHours extends Component {
         };
 
         return (
-            <>
+            <div
+                style={{
+                    maxWidth: '820px',
+                    margin: '0 auto',
+                    textAlign: 'center'
+                }}
+            >
                 <Title variant="h5" gutterBottom className="title">
                     {translate('Office Hours')}
                 </Title>
-                <div style={{ textAlign: 'center' }}>
-                    <img
-                        src={officeHoursImg}
-                        alt="IEEE Office Hours"
-                        style={imgStyle}
+                <div>
+                    <span>
+                        <Typography>
+                            {"The Discord link is "}
+                            <a href="https://discord.gg/jPHy6uUThH">
+                                https://discord.gg/jPHy6uUThH
+                            </a>
+                        </Typography>
+                    </span>
+                </div>
+                <div
+                    style={{
+                        width: '100%',
+                        height: '500px',
+                        paddingTop: '1rem'
+                    }}
+                >
+                    <DataGrid
+                        rows={rows}
+                        columns={columns}
+                        pageSize={5}
+                        autoHeight
                     />
                 </div>
-            </>
+                {/*<img
+                    src={officeHoursImg}
+                    alt="IEEE Office Hours"
+                    style={imgStyle}
+                />*/}
+            </div>
         );
     }
 }

diff --git a/frontend/static/images/csme-site.jpg b/frontend/static/images/csme-site.jpg