Design Polish V — radicle-explorer

modified src/components/Comment.svelte

@@ -97,7 +97,7 @@

     align-items: center;
     gap: 0.5rem;
     padding-left: 2.25rem;
     margin-left: -0.25rem;
     margin-left: -0.375rem;
   }
   .timestamp {
     font-size: var(--font-size-small);

modified src/components/IconButton.svelte

@@ -18,7 +18,7 @@

     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2px 4px;
     padding: 8px 6px;
     gap: 0.25rem;
     font-size: var(--font-size-small);
   }

modified src/components/Markdown.svelte

@@ -384,10 +384,14 @@

   }
   .markdown :global(a) {
     text-decoration: underline;
     text-decoration-color: var(--color-foreground-dim);
   }
   .markdown :global(a.no-underline) {
     text-decoration: none;
   }
   .markdown :global(a:hover) {
     text-decoration-color: var(--color-foreground-contrast);
   }
   .markdown :global(hr) {
     height: 0;

modified src/components/ReactionSelector.svelte

@@ -21,11 +21,10 @@

     display: flex;
     align-items: center;
     border-radius: var(--border-radius-tiny);
     padding: 0.2rem;
     padding: 0.4rem;
     gap: 0.2rem;
   }
   .selector button {
     padding: 0.5rem;
     border: 0;
     background-color: transparent;
   }

@@ -46,14 +45,12 @@

     popoverPositionLeft="0"
     popoverPadding="0">
     <IconButton
       stylePadding="4px"
       slot="toggle"
       let:toggle
       on:click={toggle}
       title="toggle-reaction-popover">
       <IconSmall name="face" />
     </IconButton>
     <div class="selector" slot="popover">
       {#each config.reactions as reaction}
         {@const lookedUpReaction = reactions?.find(

modified src/modals/HotkeysModal.svelte

@@ -47,11 +47,6 @@

       </div>
       <div class="pair">
         <span>Close</span>
         <KeyHint>ESC</KeyHint>
       </div>
       <div class="pair">
         <span>Select multiple lines</span>
         <div class="keys">
           <KeyHint>Shift</KeyHint>

@@ -59,6 +54,10 @@

           <IconSmall name="cursor" />
         </div>
       </div>
       <div class="pair">
         <span>Close</span>
         <KeyHint>Esc</KeyHint>
       </div>
     </div>
   </div>
 </Modal>

modified src/views/projects/Cob/CobCommitTeaser.svelte

@@ -21,24 +21,27 @@

   .teaser {
     display: flex;
     font-size: var(--font-size-small);
     align-items: start;
     padding: 0.125rem 0;
   }
   .message {
     align-items: center;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
   }
   .left {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0 0.5rem;
     flex-direction: column;
   }
   .right {
     display: flex;
     align-items: flex-start;
     align-items: center;
     gap: 1rem;
     margin-left: auto;
     height: 21px;
   }
   .summary:hover {
     text-decoration: underline;

@@ -64,11 +67,13 @@

         </div>
       </Link>
       {#if commit.description}
         <ExpandButton
           variant="inline"
           on:toggle={() => {
             commitMessageVisible = !commitMessageVisible;
           }} />
         <div style="height: 21px; display: flex; align-items: center;">
           <ExpandButton
             variant="inline"
             on:toggle={() => {
               commitMessageVisible = !commitMessageVisible;
             }} />
         </div>
       {/if}
     </div>
     {#if commitMessageVisible}

@@ -78,10 +83,8 @@

     {/if}
   </div>
   <div class="right">
     <div style:display="flex" style:gap="1rem" style:height="1.5rem">
       <div style:margin-bottom="1rem">
         <CompactCommitAuthorship {commit} />
       </div>
     <div style="display: flex; gap: 0.5rem; height: 21px; align-items: center;">
       <CompactCommitAuthorship {commit} />
       <IconButton title="Browse repo at this commit">
         <Link
           route={{

modified src/views/projects/Cob/Revision.svelte

@@ -193,14 +193,14 @@

     font-weight: var(--font-weight-medium);
   }
   .revision-data {
     gap: 0.75rem;
     gap: 0.5rem;
     display: flex;
     align-items: center;
     margin-left: auto;
     color: var(--color-foreground-dim);
   }
   .revision-description {
     margin-left: 2rem;
     margin-left: 2.75rem;
   }
   .author-metadata {
     color: var(--color-fill-gray);

@@ -224,7 +224,7 @@

   .authorship-header {
     display: flex;
     align-items: center;
     padding: 0 0.75rem;
     padding: 0 0.5rem;
     height: 1.5rem;
     gap: 0.5rem;
     font-size: var(--font-size-small);

@@ -237,7 +237,7 @@

     display: flex;
     flex-direction: row;
     align-items: center;
     padding-left: 2rem;
     padding-left: 2.5rem;
     gap: 0.5rem;
   }
   .commits {

@@ -247,15 +247,14 @@

     font-size: 0.875rem;
     margin-left: 1.25rem;
     gap: 0.5rem;
     padding: 1rem 1rem;
     padding: 1rem 0.5rem 1rem 1rem;
     border-left: 1px solid var(--color-fill-separator);
   }
   .commit:last-of-type::after {
     content: "";
     position: absolute;
     left: -18.5px;
     top: 12px;
     top: 14px;
     bottom: -1rem;
     border-left: 4px solid var(--color-background-default);
   }

@@ -267,7 +266,7 @@

     width: 4px;
     height: 4px;
     position: absolute;
     top: 0.5rem;
     top: 0.625rem;
     left: -18.5px;
     background-color: var(--color-fill-separator);
   }

@@ -388,7 +387,9 @@

       <div>
         <div class="patch-header">
           <div class="authorship-header">
             <div style:color={badgeColor(patchState)}>
             <div
               style:color={badgeColor(patchState)}
               style:padding="0 0.375rem">
               <IconSmall name="patch" />
             </div>
             <NodeId

modified src/views/projects/Source/ProjectNameHeader.svelte

@@ -39,6 +39,9 @@

     color: inherit;
   }
   .description :global(a) {
     border-bottom: 1px solid var(--color-foreground-dim);
   }
   .description :global(a:hover) {
     border-bottom: 1px solid var(--color-foreground-contrast);
   }
   .id {