From 8bea726e9807a21a33e66f4bd7f2e9cef3039e6f Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner 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 ( -
this.itemClick()}> -
{this.state.name}
+
this.itemClick()}> +
{this.state.name}
{this.state.previewpicture != null ? + const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; + return (
{this.props.children}
); } @@ -11,8 +15,9 @@ class SideBar extends React.Component { export class SideBarTitle extends React.Component { render() { + const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; return ( -
{this.props.children}
+
{this.props.children}
); } }