frontend: Some more styling

.dockerignore

@@ -0,0 +1,2 @@
+local/
+node_modules/

frontend/src/App.js

@@ -32,7 +32,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                 {login && (
                   <li>
                     <Link to="/upload">
-                      <Button compact color="green">
+                      <Button compact primary>
                         <Icon name="cloud upload" />
                         Upload
                       </Button>
@@ -54,7 +54,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                   <>
                     <li>
                       <Link to="/settings">
-                        <Avatar user={login} />
+                        <Avatar user={login} className={styles.avatar} />
                       </Link>
                     </li>
                     <li>

frontend/src/App.module.scss

@@ -11,6 +11,20 @@
   align-items: center;
 }
 
+.avatar {
+  width: 2.5em;
+  height: 2.5em;
+  display: inline-block;
+  vertical-align: -0.6em;
+  border-radius: 100%;
+
+  > img {
+    border-radius: 100%;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .headline {
   left: 0;
   top: 0;
@@ -23,9 +37,13 @@
 }
 
 .pageTitle {
-  font-family: 'Roboto Slab';
+  font-family: 'Open Sans Condensed';
   font-weight: 600;
   font-size: 18pt;
+
+  &, a, a:hover {
+    color: $obsColorB4;
+  }
 }
 
 .menu {

frontend/src/components/Avatar/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {Comment} from 'semantic-ui-react'
+import classnames from 'classnames'
 
 import './styles.scss'
 
@@ -17,21 +18,21 @@ function getColor(s) {
   return `hsl(${h}, 50%, 50%)`
 }
 
-export default function Avatar({user}) {
+export default function Avatar({user, className}) {
   const {image, username} = user || {}
 
   if (image) {
-    return <Comment.Avatar src={image} />
+    return <Comment.Avatar src={image} className={className} />
   }
 
   if (!username) {
-    return <div className="avatar empty-avatar" />
+    return <div className={classnames(className, "avatar", "empty-avatar")} />
   }
 
   const color = getColor(username)
 
   return (
-    <div className="avatar text-avatar" style={{background: color}}>
+    <div className={classnames(className, "avatar", "text-avatar")} style={{background: color}}>
       {username && <span>{username[0]}</span>}
     </div>
   )

frontend/src/semantic-ui/site/globals/site.variables

@@ -12,10 +12,5 @@
 @obsColorG6: #EFB509;
 @obsColorS: #000000;
 
-@blue: #80A6CD;
-@green: #78CB5B;
-@orange: #D26911;
-@black: #333333;
-
 @primaryColor: @obsColorB4;
 @secondaryColor: @obsColorG1;

frontend/src/styles.scss

@@ -3,3 +3,15 @@
   margin: 0 auto;
   padding: 0 16px;
 }
+
+
+$obsColorB4: #114594;
+$obsColorG1: #76520E;
+$obsColorW: #FFFFFF;
+$obsColorB1: #122037;
+$obsColorG6: #EFB509;
+$obsColorS: #000000;
+
+$primaryColor: $obsColorB4;
+$secondaryColor: $obsColorG1;
+