fix some inconsitency (#4494)

open-chat-labs · Oct 4, 2023 · 71d1c60 · 71d1c60
1 parent d3023c4
commit 71d1c60
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+    }
+}