From c380b0d1fbc6bd838db495c7daea9f2ab4387b19 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Fri, 7 May 2021 18:10:15 +0200
Subject: [PATCH] frontend: Some more styling

---
 .dockerignore                                 |  2 ++
 frontend/src/App.js                           |  4 ++--
 frontend/src/App.module.scss                  | 20 ++++++++++++++++++-
 frontend/src/components/Avatar/index.tsx      |  9 +++++----
 .../semantic-ui/site/globals/site.variables   |  5 -----
 frontend/src/styles.scss                      | 12 +++++++++++
 6 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..441eff7
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,2 @@
+local/
+node_modules/
diff --git a/frontend/src/App.js b/frontend/src/App.js
index da0b207..d7ad79f 100644
--- a/frontend/src/App.js
+++ b/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>
diff --git a/frontend/src/App.module.scss b/frontend/src/App.module.scss
index 7f5389f..c0d0413 100644
--- a/frontend/src/App.module.scss
+++ b/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 {
diff --git a/frontend/src/components/Avatar/index.tsx b/frontend/src/components/Avatar/index.tsx
index b3dd74a..18e9692 100644
--- a/frontend/src/components/Avatar/index.tsx
+++ b/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>
   )
diff --git a/frontend/src/semantic-ui/site/globals/site.variables b/frontend/src/semantic-ui/site/globals/site.variables
index 1e5c820..af864b3 100644
--- a/frontend/src/semantic-ui/site/globals/site.variables
+++ b/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;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index d65caf5..656fdaf 100644
--- a/frontend/src/styles.scss
+++ b/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;
+