From 031e19df63ef307a836c1abd6bea47a2b4b04c05 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 25 Aug 2020 12:13:43 +1000
Subject: [PATCH] themify group panel

---
 stylesheets/_modules.scss             |  5 ---
 stylesheets/_session.scss             | 47 +++++++++++++++++++--------
 stylesheets/_session_group_panel.scss | 38 ++++++++++++++--------
 3 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index b8f9c27cb..11508487e 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1587,15 +1587,10 @@
 
 .module-media-gallery__tab {
   width: 100%;
-  background-color: $color-light-02;
   padding: 20px;
   text-align: center;
 }
 
-.module-media-gallery__tab--active {
-  border-bottom: 2px solid $color-signal-blue;
-}
-
 .module-media-gallery__content {
   display: flex;
   flex-grow: 1;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 0bc9ee066..745e4d10a 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -346,7 +346,6 @@ textarea {
   }
 }
 
-$session-separator-element-border: 1px solid $session-shade-6;
 $session-element-border-green: 4px solid $session-color-green;
 
 /* CONVERSATION AND MESSAGES */
@@ -809,8 +808,17 @@ label {
     height: 50px;
     padding: 0px $session-margin-md;
     font-size: $session-font-sm;
-    color: $session-color-white;
-    background-color: $session-shade-1;
+
+    @include themify($themes) {
+      color: themed('textColor');
+      background: themed('cellBackground');
+    }
+
+    &:hover {
+      @include themify($themes) {
+        background: themed('clickableHovered');
+      }
+    }
 
     .session-icon {
       opacity: 0.6;
@@ -838,21 +846,29 @@ label {
     justify-content: center;
     height: 35px;
     padding: 0 $session-margin-md;
-    color: $session-color-white;
-    background-color: $session-shade-1;
+    @include themify($themes) {
+      background: themed('cellBackground');
+      color: themed('textColor');
+    }
     font-size: 0.8rem;
     width: -webkit-fill-available;
     transition: $session-transition-duration;
 
     &:first-child {
-      border-top: $session-separator-element-border;
+      @include themify($themes) {
+        border-top: themed('borderActionPanel');
+      }
     }
     &:last-child {
-      border-bottom: $session-separator-element-border;
+      @include themify($themes) {
+        border-top: themed('borderActionPanel');
+      }
     }
 
     &:hover {
-      @include session-dark-background-hover;
+      @include themify($themes) {
+        background: themed('clickableHovered');
+      }
     }
 
     .session-icon {
@@ -864,7 +880,9 @@ label {
 
     &.active,
     &:hover {
-      background-color: $session-shade-7;
+      @include themify($themes) {
+        background: themed('clickableHovered');
+      }
     }
 
     &.danger {
@@ -873,6 +891,9 @@ label {
   }
 
   &:hover {
+    @include themify($themes) {
+      background: themed('clickableHovered');
+    }
     .session-icon {
       opacity: 1;
     }
@@ -1409,7 +1430,9 @@ input {
 .dark-theme .invite-friends-dialog .member-item {
   height: 64px;
   background-color: $session-shade-4;
-  border: $session-separator-element-border;
+  @include themify($themes) {
+    border: themed('borderActionPanel');
+  }
   display: flex;
   align-items: center;
   transition: $session-transition-duration;
@@ -1428,10 +1451,6 @@ input {
   }
 }
 
-.dark-theme .modal .content {
-  background-color: $session-shade-4;
-}
-
 .loki-dialog button {
   border: none;
 }
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 1557f13bb..41fe3fb4a 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -10,8 +10,10 @@
   height: 100vh;
   width: 22vw;
   flex-shrink: 0;
-  border: $session-separator-element-border;
-  background-color: $session-shade-4;
+  @include themify($themes) {
+    background: themed('leftpaneOverlayBackground');
+    border-left: themed('borderActionPanel');
+  }
   align-items: center;
 
   &-header {
@@ -37,11 +39,13 @@
 
   .description {
     margin: $session-margin-md 0;
-    border: $session-separator-element-border;
-    background-color: $session-shade-1;
     min-height: 4rem;
     width: inherit;
-    color: $session-color-white;
+    @include themify($themes) {
+      color: themed('textColor');
+      background: themed('cellBackground');
+      border: themed('borderActionPanel');
+    }
     text-align: center;
     display: none;
   }
@@ -49,19 +53,23 @@
   &-item {
     display: flex;
     align-items: center;
-    background-color: $session-shade-1;
     min-height: 3rem;
     font-size: 0.8rem;
-    color: $session-color-white;
+    @include themify($themes) {
+      color: themed('textColor');
+      background: themed('cellBackground');
+      border-top: themed('borderActionPanel');
+      border-bottom: themed('borderActionPanel');
+    }
     width: -webkit-fill-available;
     padding: 0 $session-margin-md;
-    border-bottom: $session-separator-element-border;
-    border-top: $session-separator-element-border;
     transition: $session-transition-duration;
     cursor: pointer;
 
     &:hover {
-      @include session-dark-background-hover;
+      @include themify($themes) {
+        background: themed('clickableHovered');
+      }
     }
   }
 
@@ -74,11 +82,13 @@
   .session-button.square-outline.danger {
     margin-top: auto;
     width: 100%;
-    border: none;
     height: 3.5rem;
-    background-color: black;
     flex-shrink: 0;
     align-items: center;
+    @include themify($themes) {
+      border: none;
+      border-top: themed('borderActionPanel');
+    }
   }
 
   .module-empty-state {
@@ -104,7 +114,9 @@
       }
 
       &__tab {
-        color: white;
+        @include themify($themes) {
+          color: themed('textColor');
+        }
         font-weight: bold;
         font-size: 0.9rem;
         padding: 0.6rem;