theming of previews and sidebar

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;
 }
 

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;
 }

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.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
-                <div className={style.previewtitle}>{this.state.name}</div>
+                <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
                 <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
                         <img className={style.previewimage}

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;

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>
         );
     }
 }