Make sidebar footer buttons regular size - 32px tall; Apply changes t…

…o collapsed sidebar too
radicle-dev · Jan 13, 2024 · 161e6d7 · 161e6d7
1 parent 397a313
commit 161e6d7
Showing 1 changed file with 25 additions and 29 deletions.
diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
@@ -89,7 +89,6 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    gap: 0.25rem;
   }
 </style>
 
@@ -98,7 +97,7 @@
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       <div class="project-navigation">
         <Link
-          title="Home"
+          title="Source"
           route={{
             resource: "project.source",
             project: project.id,
@@ -172,47 +171,44 @@
     </div>
 
     <div class="sidebar-footer" style:flex-direction="row">
-      <IconButton title={"Collapse"} on:click={toggleSidebar}>
-        <IconSmall name="chevron-left" /> Collapse
-      </IconButton>
+      <Button title={"Collapse"} on:click={toggleSidebar} variant="background">
+        <IconSmall name="chevron-left" />
+      </Button>
+      <div style:width="1.5rem" />
 
       <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
-        <IconButton title="Settings" slot="toggle" let:toggle on:click={toggle}>
+        <Button
+          variant="background"
+          title="Settings"
+          slot="toggle"
+          let:toggle
+          on:click={toggle}>
           <IconSmall name="settings" />
           Settings
-        </IconButton>
+        </Button>
 
         <Settings slot="popover" />
       </Popover>
-
       <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
-        <IconButton title="Help" slot="toggle" let:toggle on:click={toggle}>
+        <Button
+          variant="background"
+          title="Help"
+          slot="toggle"
+          let:toggle
+          on:click={toggle}>
           <IconSmall name="help" />
           Help
-        </IconButton>
+        </Button>
 
         <Help slot="popover" />
       </Popover>
     </div>
   {:else}
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        title="Copy RID to clipboard"
-        class="id"
-        style:color="var(--color-fill-secondary)"
-        style:cursor="pointer"
-        style:padding="0.5rem 0"
-        role="button"
-        tabindex="0"
-        on:click={() => {
-          clipboard.copy();
-        }}>
-        <Clipboard bind:this={clipboard} text={project.id} />
-      </div>
       <div class="project-navigation">
         <Link
-          title="Home"
+          title="Source"
           route={{
             resource: "project.source",
             project: project.id,
@@ -223,7 +219,7 @@
             size="large"
             stylePadding="0 0.75rem"
             variant={activeTab === "source" ? "gray" : "background"}>
-            <IconSmall name="home" />
+            <IconSmall name="chevron-left-right" />
           </Button>
         </Link>
         <Link
@@ -258,9 +254,11 @@
       </div>
     </div>
 
-    <div class="sidebar-footer" style:flex-direction="column-reverse">
+    <div
+      class="sidebar-footer"
+      style:flex-direction="column-reverse"
+      style:gap="0.5rem">
       <Button
-        size="large"
         stylePadding="0 0.75rem"
         variant="background"
         title={"Expand"}
@@ -270,7 +268,6 @@
 
       <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">
         <Button
-          size="large"
           stylePadding="0 0.75rem"
           variant="background"
           title="Settings"
@@ -285,7 +282,6 @@
 
       <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">
         <Button
-          size="large"
           stylePadding="0 0.75rem"
           variant="background"
           title="Help"