From 6ebbd3d171d23eae7c9f08a576c7f500333b97db Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 15 Jan 2020 16:34:07 +1100
Subject: [PATCH] replace px units in group panel.scss

---
 stylesheets/_session.scss                      |  4 ++++
 stylesheets/_session_group_panel.scss          | 18 +++++++++---------
 stylesheets/_session_signin.scss               |  2 +-
 stylesheets/_session_theme_dark_left_pane.scss |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 02a25d1a9..320a8b568 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -423,6 +423,10 @@ $session_message-container-border-radius: 5px;
   fill: $session-color-white;
 }
 
+
+$session-separator-element-border: 1px solid $session-shade-6;
+$session-element-border-green: 4px solid $session-color-green;
+
 /* CONVERSATION AND MESSAGES */
 
 @mixin standard-icon-button() {
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 6035d2d73..2b698855a 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 277px;
+  width: 22vw;
   flex-shrink: 0;
-  border: 1px solid #2f2f2f;
+  border: $session-separator-element-border;
   background-color: $session-shade-4;
   align-items: center;
 
@@ -30,7 +30,7 @@
 
   .description {
     margin: $session-margin-md 0;
-    border: 1px solid $session-shade-6;
+    border: $session-separator-element-border;
     background-color: $session-shade-1;
     min-height: 4rem;
     width: inherit;
@@ -47,8 +47,8 @@
     color: $session-color-white;
     width: -webkit-fill-available;
     padding: 0 $session-margin-md;
-    border-bottom: 1px solid $session-shade-6;
-    border-top: 1px solid $session-shade-6;
+    border-bottom: $session-separator-element-border;
+    border-top: $session-separator-element-border;
     transition: $session-transition-duration;
     cursor: pointer;
 
@@ -102,8 +102,8 @@
             display: block;
             margin: 0 auto;
             width: 70%;
-            padding-top: 8px;
-            border-bottom: 4px solid $session-color-green;
+            padding-top: 0.5rem;
+            border-bottom: $session-element-border-green;
           }
         }
       }
@@ -113,8 +113,8 @@
 
         .module-media-grid-item__image,
         .module-media-grid-item {
-          height: 80px;
-          width: 80px;
+          height: calc(22vw/3.5); //.group-settings is 22vw and we want threee rows with some space so divide it by 3.5
+          width: calc(22vw/3.5); //.group-settings is 22vw and we want threee rows with some space so divide it by 3.5
           margin-right: 0;
         }
       }
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index 917e1874a..f8a026587 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -99,7 +99,7 @@
       font-size: 15px;
 
       &--active {
-        border-bottom: 4px solid $session-color-green;
+        border-bottom: $session-element-border-green;
       }
     }
 
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index a2d940dff..1d3e42afe 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -17,7 +17,7 @@ $session-compose-margin: 20px;
   .module-conversation {
     &-list-item {
       &--has-unread {
-        border-left: 4px solid $session-color-green !important;
+        border-left: $session-element-border-green !important;
       }
 
       &__unread-count {