From 9d1a885d87aa349ac1ce1070581024300e90796e Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 25 Jun 2023 18:10:17 +0300
Subject: [PATCH] add slight rounding to main ui shell

---
 frontend/src/components/ChannelView.svelte     |  4 ++--
 frontend/src/components/PresenceSidebar.svelte |  8 ++++----
 frontend/src/components/Sidebar.svelte         |  2 +-
 frontend/src/styles/global.css                 | 12 ++++++++++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ChannelView.svelte b/frontend/src/components/ChannelView.svelte
index bda28d3..8aa24bb 100644
--- a/frontend/src/components/ChannelView.svelte
+++ b/frontend/src/components/ChannelView.svelte
@@ -4,7 +4,7 @@
     import Messages from "./Messages.svelte";
     import { quadInOut } from "svelte/easing";
     import { maybeFly } from "../animations";
-    import { statusBarStore } from "../stores";
+    import { showSidebar, statusBarStore } from "../stores";
 
     export let channel;
 </script>
@@ -21,7 +21,7 @@
     }
 </style>
 
-<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
+<div class="main-container" class:round-left="{ $showSidebar }" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
     {#if $statusBarStore}
         <div class="info-bar">
             <span class="info-text">{ $statusBarStore }</span>
diff --git a/frontend/src/components/PresenceSidebar.svelte b/frontend/src/components/PresenceSidebar.svelte
index d1facb2..0b6ed0b 100644
--- a/frontend/src/components/PresenceSidebar.svelte
+++ b/frontend/src/components/PresenceSidebar.svelte
@@ -19,14 +19,14 @@
         font-size: var(--h6);
     }
 
-    .presence-sidebar {
+    .presence-sidebar-limited {
         min-width: 248px;
         max-width: 248px;
     }
 </style>
 
-<div class="sidebar-container presence-sidebar" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
-    <div class="sidebar">
+<div class="sidebar-container" class:presence-sidebar-limited="{ !$smallViewport }" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
+    <div class="sidebar sidebar-full">
         <span class="online-label">ONLINE</span>
 
         <div class="sidebar-buttons">
@@ -34,7 +34,7 @@
                 <button class="sidebar-button">
                     <UserView size={28} user={entry.user}></UserView>
                     {#if entry.bridgesTo || entry.privacy || entry.terms}
-                        <span class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</span>
+                        <button class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</button>
                     {/if}
                 </button>
             {/each}
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index fb1ff1e..324b09e 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -87,7 +87,7 @@
             <span class="material-icons-outlined">settings</span>
         </button>
     </div>
-    <div class="sidebar">
+    <div class="sidebar round-left">
         <div class="top-bar text-small text-bold">
             {#if $selectedCommunity.id !== -1}
                 {$selectedCommunity.name || ""}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index c31915b..2685c99 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -463,6 +463,10 @@ body {
 	background-color: var(--background-color-1);
 }
 
+.sidebar-full {
+	width: 100%;
+}
+
 .sidebar-buttons {
 	width: 100%;
 	height: 100%;
@@ -552,6 +556,14 @@ body {
 	cursor: pointer;
 }
 
+/* util */
+
+.round-left {
+	border-top-left-radius: var(--radius-mdplus);
+	border-bottom-left-radius: var(--radius-mdplus);
+}
+
+
 /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 *,