Tweak title line alignment everywhere

radicle-dev · Jan 7, 2025 · 05ded70 · 05ded70
1 parent e41d761
commit 05ded70
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 91 deletions.
diff --git a/public/index.css b/public/index.css
@@ -62,6 +62,7 @@ body {
   padding: 0 0.5rem;
   min-width: 1.5rem;
   font-weight: var(--font-weight-regular);
+  flex-shrink: 0;
 }
 
 :root {

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -38,6 +38,7 @@
     -webkit-user-select: none;
     user-select: none;
 
+    height: 2rem;
     column-gap: 0;
     row-gap: 0;
     display: grid;
@@ -301,7 +302,7 @@
   .p3-3 {
     grid-area: p3-3;
     background-color: var(--button-color-1);
-    padding: 2px 8px;
+    padding: 0 8px;
     display: flex;
     align-items: center;
     gap: 0.5rem;

diff --git a/src/components/DropdownListItem.svelte b/src/components/DropdownListItem.svelte
@@ -26,8 +26,8 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    gap: 0.375rem;
-    padding: 0.5rem 0.375rem;
+    min-height: 2rem;
+    padding: 0 0.5rem;
     white-space: nowrap;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);

diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -32,6 +32,7 @@
       | "markdown"
       | "moon"
       | "more-vertical"
+      | "none"
       | "offline"
       | "online"
       | "patch"
@@ -442,6 +443,38 @@
     <path d="M9 2V4L7 4L7 2L9 2Z" />
     <path d="M9 7L9 9H7L7 7H9Z" />
     <path d="M9 12L9 14H7L7 12H9Z" />
+  {:else if name === "none"}
+    <path d="M6 13H8V14H6V13Z" />
+    <path d="M10 13H7V14H10V13Z" />
+    <path d="M3 5.00003L3 8.00003H2L2 5.00003L3 5.00003Z" />
+    <path d="M13 6.00003V8.00003H14V6.00003H13Z" />
+    <path d="M4 12H6V13H4V12Z" />
+    <path d="M12 12H10V13H12V12Z" />
+    <path d="M4 4.00003V6.00003H3L3 4.00003H4Z" />
+    <path d="M12 4.00003V6.00003L13 6.00003V4.00003L12 4.00003Z" />
+    <path d="M4 10L4 12H3L3 10H4Z" />
+    <path d="M12 10V12H13V10H12Z" />
+    <path d="M6 4.00003L4 4.00003L4 3.00003L6 3.00003V4.00003Z" />
+    <path d="M10 4.00003L12 4.00003V3.00003L10 3.00003V4.00003Z" />
+    <path d="M3 8.00003L3 10H2L2 8.00003H3Z" />
+    <path d="M13 7.00003V10H14V7.00003H13Z" />
+    <path d="M9 3.00003L6 3.00003V2.00003L9 2.00003V3.00003Z" />
+    <path d="M8 3.00003L10 3.00003L10 2.00003L8 2.00003L8 3.00003Z" />
+    <path d="M11 4.00003H12V5.00003H11V4.00003Z" />
+    <path d="M10 5.00003H11V6.00003H10V5.00003Z" />
+    <path d="M11 5.00003H12V6.00003L11 6.00003V5.00003Z" />
+    <path d="M10 6.00003H11V7.00003H10V6.00003Z" />
+    <path d="M9 7.00003L10 7.00003V8.00003H9V7.00003Z" />
+    <path d="M8 8.00003H9V9.00003H8V8.00003Z" />
+    <path d="M7 9.00003L8 9.00003L8 10H7V9.00003Z" />
+    <path d="M6 10H7V11H6V10Z" />
+    <path d="M5 11H6L6 12H5V11Z" />
+    <path d="M9 6.00003H10V7.00003L9 7.00003V6.00003Z" />
+    <path d="M8 7.00003H9V8.00003H8V7.00003Z" />
+    <path d="M7 8.00003L8 8.00003V9.00003L7 9.00003V8.00003Z" />
+    <path d="M6 9.00003H7V10H6V9.00003Z" />
+    <path d="M5 10H6V11H5L5 10Z" />
+    <path d="M4 11H5V12H4V11Z" />
   {:else if name === "offline"}
     <path d="M3 6L3 8H2L2 6H3Z" />
     <path d="M13 10V8H14V10H13Z" />

diff --git a/src/components/IssueSecondColumn.svelte b/src/components/IssueSecondColumn.svelte
@@ -25,6 +25,12 @@
 </script>
 
 <style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 40px;
+  }
   .issue-list {
     margin-top: 0.5rem;
     display: flex;
@@ -34,7 +40,7 @@
   }
 </style>
 
-<div class="global-flex" style:justify-content="space-between">
+<div class="container">
   <div class="txt-regular txt-semibold global-flex" style:gap="4px">
     {title}
     <Icon name="chevron-right" />

diff --git a/src/components/IssueStateButton.svelte b/src/components/IssueStateButton.svelte
@@ -57,13 +57,11 @@
 
   <Popover
     popoverPadding="0"
-    popoverPositionTop="3rem"
+    popoverPositionTop="2.5rem"
     popoverPositionRight="0">
     {#snippet toggle(onclick)}
       <Button flatLeft {onclick} variant="secondary">
-        <div style:height="22px" class="global-flex">
-          <Icon name="chevron-down" />
-        </div>
+        <Icon name="chevron-down" />
       </Button>
     {/snippet}
     {#snippet popover()}

diff --git a/src/components/IssuesSecondColumn.svelte b/src/components/IssuesSecondColumn.svelte
@@ -24,7 +24,6 @@
     flex-direction: column;
     height: 100%;
     justify-content: space-between;
-    padding-bottom: 1rem;
   }
   .tab {
     align-items: center;
@@ -59,7 +58,9 @@
 
 <div class="container">
   <div>
-    <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+      <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+    </div>
 
     <Border
       variant="ghost"

diff --git a/src/components/NakedButton.svelte b/src/components/NakedButton.svelte
@@ -14,7 +14,7 @@
     title,
     variant,
     onclick,
-    styleHeight = "32px",
+    styleHeight = "2rem",
   }: Props = $props();
 
   const style = $derived(
@@ -71,7 +71,7 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    padding: 2px 8px;
+    padding: 0 8px;
     display: flex;
     align-items: center;
     gap: 0.5rem;

diff --git a/src/components/OutlineButton.svelte b/src/components/OutlineButton.svelte
@@ -68,7 +68,7 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    padding: 2px 8px;
+    padding: 0 8px;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -224,6 +224,7 @@
   }
 
   .container {
+    height: 2rem;
     cursor: pointer;
     white-space: nowrap;
 

diff --git a/src/components/PatchesSecondColumn.svelte b/src/components/PatchesSecondColumn.svelte
@@ -23,7 +23,6 @@
     flex-direction: column;
     height: 100%;
     justify-content: space-between;
-    padding-bottom: 1rem;
   }
   .tab {
     align-items: center;
@@ -64,7 +63,9 @@
 
 <div class="container">
   <div>
-    <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+      <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+    </div>
 
     <div style:margin-bottom="0.5rem">
       <Link

diff --git a/src/components/RepoTeaser.svelte b/src/components/RepoTeaser.svelte
@@ -12,8 +12,7 @@
 <style>
   .teaser {
     align-items: center;
-    height: 34px;
-    margin: 0 4px 1rem 12px;
+    min-height: 40px;
   }
 
   .seeding {

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -44,7 +44,7 @@
 </style>
 
 <div class="global-flex" style:flex-direction="column" style:gap="0.5rem">
-  <div class="global-flex" style:margin-bottom="5px" style:height="40px">
+  <div class="global-flex" style:height="40px">
     <Icon name="repo" />
   </div>
   {#if activeTab.type === "issues"}

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
@@ -14,7 +14,12 @@
   import * as roles from "@app/lib/roles";
   import { invoke } from "@app/lib/invoke";
   import { nodeRunning } from "@app/lib/events";
-  import { publicKeyFromDid, scrollIntoView } from "@app/lib/utils";
+  import {
+    issueStatusBackgroundColor,
+    issueStatusColor,
+    publicKeyFromDid,
+    scrollIntoView,
+  } from "@app/lib/utils";
 
   import { announce } from "@app/components/AnnounceSwitch.svelte";
 
@@ -310,7 +315,13 @@
     align-items: center;
     justify-content: space-between;
     word-break: break-all;
-    padding-top: 4px;
+    min-height: 40px;
+  }
+  .status {
+    padding: 0;
+    margin-right: 0.75rem;
+    height: 2rem;
+    width: 2rem;
   }
   .issue-body {
     margin-top: 1rem;
@@ -342,7 +353,6 @@
     gap: 1rem;
     margin-left: 1rem;
     align-items: center;
-    height: 40px;
   }
   .metadata-divider {
     width: 2px;
@@ -384,9 +394,17 @@
   {/snippet}
 
   <div class="content">
-    <div style:margin-bottom="1rem">
+    <div style:margin-bottom="0.5rem">
       {#if editingTitle}
         <div class="title">
+          <div
+            class="global-counter status"
+            style:color={issueStatusColor[issue.state.status]}
+            style:background-color={issueStatusBackgroundColor[
+              issue.state.status
+            ]}>
+            <Icon name="issue" />
+          </div>
           <TextInput
             valid={updatedTitle.trim().length > 0}
             bind:value={updatedTitle}
@@ -419,7 +437,17 @@
         </div>
       {:else}
         <div class="title">
-          <InlineTitle content={issue.title} fontSize="medium" />
+          <div class="global-flex" style:gap="0">
+            <div
+              class="global-counter status"
+              style:color={issueStatusColor[issue.state.status]}
+              style:background-color={issueStatusBackgroundColor[
+                issue.state.status
+              ]}>
+              <Icon name="issue" />
+            </div>
+            <InlineTitle content={issue.title} fontSize="medium" />
+          </div>
           {#if roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), issue.body.author.did, )}
             <div class="title-icons">
               <Icon name="pen" onclick={() => (editingTitle = !editingTitle)} />