Added logo in app (made by Louise)

BenjaVR · Feb 27, 2019 · 13312f3 · 13312f3 · BenjaVR · Feb 27, 2019
1 parent e479bdf
commit 13312f3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/components/containers/AppContainer.module.scss b/src/components/containers/AppContainer.module.scss
@@ -1,16 +1,26 @@
 @import "../../variables.scss";
 
 .logo {
-    height: 32px;
-    margin: 16px;
+    max-width: 100%;
+    width: auto;
+    max-height: 56px;
+    height: auto;
 
-    // TODO: tijdelijk!
-    background-color: $grayBlue;
-    text-align: center;
-    line-height: 32px;
-    color: rgb(197, 197, 197);
-    white-space: nowrap;
-    overflow: hidden;
+    &Container {
+        margin: 16px;
+        padding: 8px;
+        background-color: $grayBlue;
+        text-align: center;
+        line-height: 32px;
+        color: rgb(197, 197, 197);
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &Text {
+        margin: 0;
+        text-transform: uppercase;
+    }
 }
 
 .siderContentWrapper {

diff --git a/src/components/containers/AppContainer.tsx b/src/components/containers/AppContainer.tsx
@@ -1,9 +1,10 @@
-import { Avatar, Button, Col, Icon, Layout, notification, Row, Tooltip } from "antd";
+import { Button, Icon, Layout, notification, Tooltip } from "antd";
 import Menu, { SelectParam } from "antd/lib/menu";
 import classNames from "classnames";
 import * as React from "react";
 import Helmet from "react-helmet";
 import { Link, Redirect, Route, Switch } from "react-router-dom";
+import logo from "../../logo.png";
 import { AnyRouteComponentProps, IRoute, routes } from "../../routes";
 import { Firebase } from "../../services/FirebaseInitializer";
 import styles from "./AppContainer.module.scss";
@@ -62,8 +63,11 @@ class AppContainer extends React.Component<AppContainerProps, IAppContainerState
                         collapsed={this.state.isSiderCollapsed}
                     >
                         <div className={classNames(styles.siderContentWrapper, { [styles.siderContentWrapperCollapsed]: this.state.isSiderCollapsed })}>
-                            <div className={styles.logo}>
-                                {this.state.isSiderCollapsed ? "SP" : "Student Planner"}
+                            <div className={styles.logoContainer}>
+                                <img src={logo} alt="Logo" className={styles.logo} />
+                                {!this.state.isSiderCollapsed &&
+                                    <p className={styles.logoText}>Student Planner</p>
+                                }
                             </div>
                             <Menu
                                 theme="dark"