diff --git a/webclient/src/logo.svg b/webclient/public/logo-long.svg
similarity index 100%
rename from webclient/src/logo.svg
rename to webclient/public/logo-long.svg
diff --git a/webclient/public/logo-short.svg b/webclient/public/logo-short.svg
new file mode 100644
index 0000000..2b59a35
--- /dev/null
+++ b/webclient/public/logo-short.svg
@@ -0,0 +1,112 @@
+
+
+
+
diff --git a/webclient/src/App.js b/webclient/src/App.js
index bd39ba7..12810cd 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
-import Logo from './logo.svg';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js';
import { Home } from './Home.js';
@@ -12,6 +11,7 @@ import { Courses, CourseDetail } from './Courses.js';
import { Classes, ClassDetail } from './Classes.js';
import { Members } from './Members.js';
import { NotFound, PleaseLogin } from './Misc.js';
+import { Footer } from './Footer.js';
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
@@ -47,9 +47,11 @@ function App() {
return (
+
+
-
+
@@ -162,7 +164,10 @@ function App() {
}
+
+
+
)
};
diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js
index 08a86e5..fc50958 100644
--- a/webclient/src/Classes.js
+++ b/webclient/src/Classes.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
-import Logo from './logo.svg';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { requester } from './utils.js';
diff --git a/webclient/src/Courses.js b/webclient/src/Courses.js
index d88cb2b..0fb0c33 100644
--- a/webclient/src/Courses.js
+++ b/webclient/src/Courses.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
-import Logo from './logo.svg';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { requester } from './utils.js';
diff --git a/webclient/src/Footer.js b/webclient/src/Footer.js
new file mode 100644
index 0000000..9b0a549
--- /dev/null
+++ b/webclient/src/Footer.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Container, Icon } from 'semantic-ui-react';
+
+export function Footer() {
+ return (
+
+
+
+
+
+
+
+ Contact us: info@protospace.ca
+
+
+
+ Created and hosted by Protospace members for Protospace members.
+
+
+
+ Spaceport is free and open-source software. Click here to view the source code and license.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ © 2020 Calgary Protospace Ltd.
+
+
+
+ );
+};
diff --git a/webclient/src/Transactions.js b/webclient/src/Transactions.js
index e229a3c..1367d6b 100644
--- a/webclient/src/Transactions.js
+++ b/webclient/src/Transactions.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
-import Logo from './logo.svg';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
diff --git a/webclient/src/light.css b/webclient/src/light.css
index ffeeda7..b026516 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -1,17 +1,26 @@
html, body {
font-size: 16px;
+ height: 100%;
+ margin: 0;
}
body {
+ background: black;
overflow-y: scroll;
}
+#root {
+ position: relative;
+ height: 100%;
+ margin: 0;
+}
+
.header {
padding-top: 1.5rem;
margin-bottom: 1.5rem;
}
-.header .logo {
+.header .logo-long {
max-width: 100%;
height: 2rem;
display: block;
@@ -44,3 +53,49 @@ body {
max-width: 100%;
height: auto;
}
+
+.content-wrap {
+ min-height: 100%;
+ background: white;
+}
+
+.content-wrap-inside {
+ padding-bottom: 24rem;
+}
+
+.footer {
+ margin-top: -20rem;
+
+ background: black;
+ color: white;
+}
+
+.footer .container {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+}
+
+.footer p {
+ color: white;
+}
+
+.footer .logo {
+ filter: invert(100%);
+ height: 1.5rem;
+}
+
+.footer a {
+ color: white;
+ outline: 0;
+}
+
+.footer .text a {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 2px;
+}
+
+.footer i {
+ margin-top: 3px;
+ margin-left: -3.5px;
+ margin-right: 0.5em;
+}