Added a footer and replaced "CRM" by the real name of the new system

Author: Yoronex

public/gewis.svg

@@ -1,10 +1,17 @@
 .main {
   position: absolute;
   top: 43px;
-  height: calc(100vh - 43px);
+  height: calc(100vh - 43px - 48px);
   overflow-y: auto;
 }
 
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 35px;
+}
+
 .ui.table.fixed tr > th {
   overflow: visible;
-}
+}

src/App.scss

@@ -33,6 +33,7 @@ import UsersPage from './pages/UsersPage';
 import SingleUserPage from './pages/SingleUserPage';
 import UserCreatePage from './pages/UserCreatePage';
 import ProductInstanceModal from './pages/ProductInstanceModal';
+import Footer from './components/navigation/Footer';
 
 interface Props extends RouteComponentProps {
   // eslint-disable-next-line react/no-unused-prop-types
@@ -47,7 +48,7 @@ function Routes(props: Props) {
         <Dimmer active page inverted>
 
           <Header as="h2" icon>
-            <Loader inline content="CRM" size="large" />
+            <Loader inline content="ParelPracht" size="large" />
             <Header.Subheader>Checking login information...</Header.Subheader>
           </Header>
         </Dimmer>
@@ -70,12 +71,15 @@ function Routes(props: Props) {
       <Switch>
         <Route path="/login" exact>
           <LoginPage />
+          <Footer />
         </Route>
         <Route path="/forgot-password" exact>
           <ForgotPasswordPage />
+          <Footer />
         </Route>
         <Route path="/reset-password" exact>
           <ResetPasswordPage />
+          <Footer />
         </Route>
       </Switch>
     );
@@ -168,6 +172,7 @@ function Routes(props: Props) {
           <Route path="/user/:userId" exact component={SingleUserPage} />
         </Switch>
       </Container>
+      <Footer />
     </div>
   );
 }

src/Routes.tsx

@@ -17,7 +17,7 @@ class AlertContainer extends React.Component<AlertsProps> {
       <Rail
         internal={this.props.internal}
         position="right"
-        style={{ marginTop: this.props.internal ? '2em' : undefined }}
+        style={{ marginTop: this.props.internal ? '2em' : undefined, maxHeight: 'calc(100vh - 2em)' }}
       >
         {this.props.alerts.map((alert) => (
           <AlertItem

src/components/alerts/AlertContainer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Container, Grid, Segment } from 'semantic-ui-react';
+
+function Footer() {
+  return (
+    <div className="footer">
+      <Segment style={{ backgroundColor: '#eee', padding: '0' }} vertical basic>
+        <Container style={{ padding: '0' }}>
+          <Grid columns={2}>
+            <Grid.Column textAlign="left">
+              © Study Association GEWIS - 2020
+            </Grid.Column>
+            <Grid.Column textAlign="right">
+              Designed and built with
+              {' '}
+              <span role="img" aria-label="love">🍑</span>
+              {' '}
+              by the 39th board
+            </Grid.Column>
+          </Grid>
+        </Container>
+      </Segment>
+    </div>
+  );
+}
+
+export default Footer;

src/components/navigation/Footer.tsx

@@ -8,7 +8,7 @@ function Navigation() {
     <Menu fixed="top" inverted size="large">
       <Container>
         <Menu.Item as={NavLink} header to="/" exact>
-          CRM
+          ParelPracht
         </Menu.Item>
         <Menu.Item as={NavLink} to="/product">
           <Icon name="shopping bag" />

src/components/navigation/Navigation.tsx

@@ -14,7 +14,7 @@ function LoginPage() {
         <Grid textAlign="center" verticalAlign="middle" style={{ height: '100vh' }}>
           <Grid.Column width={6}>
             <Header as="h1">
-              CRM
+              ParelPracht
             </Header>
             <Segment>
               <LoginForm />