From 8bea726e9807a21a33e66f4bd7f2e9cef3039e6f Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 3 Aug 2020 18:38:22 +0000
Subject: [PATCH] theming of previews and sidebar

---
 src/AppDarkTheme.module.css             | 10 +++++++++-
 src/AppLightTheme.module.css            | 10 +++++++++-
 src/elements/Preview/Preview.js         |  4 ++--
 src/elements/Preview/Preview.module.css |  3 ---
 src/elements/SideBar/SideBar.js         |  9 +++++++--
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index f022b1e..ffc2e7d 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -14,6 +14,10 @@
     color: #dedad6;
 }
 
+.lighttextcolor {
+    color: #d5d5d5;
+}
+
 .navitem::after {
     background: white;
 }
@@ -22,7 +26,11 @@
     border-color: rgba(255, 255, 255, .1);
 }
 
-.previewhover:hover {
+.secbackground {
+    background-color: #3c3d48;
+}
+
+.preview:hover {
     box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
 }
 
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 496bfc8..a3edaf0 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -18,10 +18,18 @@
     color: #212529;
 }
 
+.lighttextcolor {
+    color: #3d3d3d;
+}
+
 .hrcolor {
     border-color: rgba(0, 0, 0, 0.1);
 }
 
-.previewhover:hover {
+.secbackground {
+    background-color: #a8c3ff;
+}
+
+.preview:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index f854ce2..0d316a1 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -38,8 +38,8 @@ class Preview extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
-                <div className={style.previewtitle}>{this.state.name}</div>
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
+                <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
                 <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
                         <img className={style.previewimage}
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index ebfce87..d8f73f9 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -1,6 +1,5 @@
 .previewtitle {
     height: 20px;
-    color: #3d3d3d;
     text-align: center;
     font-weight: bold;
     max-width: 266px;
@@ -36,8 +35,6 @@
     float: left;
     margin-left: 25px;
     margin-top: 25px;
-    /*background-color: #7F7F7F;*/
-    background-color: #a8c3ff;
     cursor: pointer;
     opacity: 0.85;
     border-radius: 20px;
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 9375f33..6ae2ac0 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,9 +1,13 @@
 import React from "react";
 import style from "./SideBar.module.css"
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class SideBar extends React.Component {
     render() {
-        return (<div className={style.sideinfo}>
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
             {this.props.children}
         </div>);
     }
@@ -11,8 +15,9 @@ class SideBar extends React.Component {
 
 export class SideBarTitle extends React.Component {
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.sidebartitle}>{this.props.children}</div>
+            <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
         );
     }
 }