From 71d1c60b37e58379ad9ec8414aa0622cb99fd839 Mon Sep 17 00:00:00 2001
From: Julian Jelfs <julian.jelfs@gmail.com>
Date: Wed, 4 Oct 2023 15:52:46 +0100
Subject: [PATCH] fix some inconsitency (#4494)

---
 .../home/communities/DirectChatsHeader.svelte | 13 +------------
 .../communities/FavouriteChatsHeader.svelte   | 13 +------------
 .../home/communities/GroupChatsHeader.svelte  | 13 +------------
 .../SelectedCommunityHeader.svelte            |  7 ++++++-
 frontend/app/src/styles/mixins.scss           | 19 +++++++++++++++++++
 5 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/frontend/app/src/components/home/communities/DirectChatsHeader.svelte b/frontend/app/src/components/home/communities/DirectChatsHeader.svelte
index 07beac91a0..bc136f4d9a 100644
--- a/frontend/app/src/components/home/communities/DirectChatsHeader.svelte
+++ b/frontend/app/src/components/home/communities/DirectChatsHeader.svelte
@@ -18,17 +18,6 @@
 
 <style lang="scss">
     .direct-chats {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        gap: $sp4;
-
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-
-        .icon {
-            display: flex;
-        }
+        @include left_panel_header();
     }
 </style>
diff --git a/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte b/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte
index 936ad1491b..f29051a9d3 100644
--- a/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte
+++ b/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte
@@ -18,17 +18,6 @@
 
 <style lang="scss">
     .favourites {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        gap: $sp4;
-
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-
-        .icon {
-            display: flex;
-        }
+        @include left_panel_header();
     }
 </style>
diff --git a/frontend/app/src/components/home/communities/GroupChatsHeader.svelte b/frontend/app/src/components/home/communities/GroupChatsHeader.svelte
index bfe37ff5c0..f8699a5e48 100644
--- a/frontend/app/src/components/home/communities/GroupChatsHeader.svelte
+++ b/frontend/app/src/components/home/communities/GroupChatsHeader.svelte
@@ -22,17 +22,6 @@
 
 <style lang="scss">
     .group-chats {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        gap: $sp4;
-
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-
-        .icon {
-            display: flex;
-        }
+        @include left_panel_header();
     }
 </style>
diff --git a/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte b/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte
index 7026ba0d3d..e9c3b4f981 100644
--- a/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte
+++ b/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte
@@ -58,7 +58,7 @@
         display: flex;
         flex: 1;
         align-items: center;
-        gap: $sp4;
+        gap: $sp3;
         cursor: pointer;
     }
     .wrapper {
@@ -68,6 +68,11 @@
         @include font(book, normal, fs-70);
     }
 
+    .name {
+        @include font(book, normal, fs-120);
+        margin-bottom: $sp1;
+    }
+
     .members {
         color: var(--txt-light);
         .num {
diff --git a/frontend/app/src/styles/mixins.scss b/frontend/app/src/styles/mixins.scss
index 8146c13069..cfb5bb808a 100644
--- a/frontend/app/src/styles/mixins.scss
+++ b/frontend/app/src/styles/mixins.scss
@@ -530,3 +530,22 @@ $shadow-level-3: 2px 6px 12px 0 rgba(25, 25, 25, 0.55);
     -ms-user-select: none; // Internet Explorer/Edge
     user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
 }
+
+@mixin left_panel_header() {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: $sp4;
+
+    @include mobile() {
+        padding: 0 $sp3;
+    }
+
+    .icon {
+        display: flex;
+    }
+
+    .details h4 {
+        @include font(book, normal, fs-120);
+    }
+}