From 6e1f3dea8b09f9744c07cbe7058764481ae803ce Mon Sep 17 00:00:00 2001
From: dnlklmn <pelicansinberlin@gmail.com>
Date: Thu, 18 Jan 2024 21:56:10 +0100
Subject: [PATCH] Make issue/patch body stand out more via background color

---
 src/components/Button.svelte            |  13 +-
 src/components/Radio.svelte             |   2 +-
 src/views/projects/Cob/CobHeader.svelte |   5 +-
 src/views/projects/Issue.svelte         |  89 ++++++----
 src/views/projects/Patch.svelte         | 205 ++++++++++++------------
 src/views/projects/Source/Header.svelte |  13 +-
 6 files changed, 171 insertions(+), 156 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 4c78e2ece..3f8b0fb3f 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -292,30 +292,29 @@
   }
 
   .tab {
-    background-color: var(--color-background-default);
+    background-color: transparent;
     color: var(--color-foreground-contrast);
-    border: 1px solid transparent;
-    border-bottom: 1px solid var(--color-fill-separator);
+    border: 1px solid var(--color-border-hint);
+    border-radius: 4px 4px 0 0;
   }
 
   .tab[disabled] {
     background-color: var(--color-background-default);
     color: var(--color-foreground-disabled);
+    border: none;
+    border-bottom: 1px solid var(--color-border-hint);
   }
 
   .tab:not([disabled]):hover {
     background-color: var(--color-fill-float-hover);
-    border-top-right-radius: var(--border-radius-tiny) !important;
-    border-top-left-radius: var(--border-radius-tiny) !important;
   }
 
   .tab-active {
     background-color: var(--color-background-default);
     border: 1px solid var(--color-fill-separator);
     border-bottom: 1px solid var(--color-background-default);
+    border-radius: 4px 4px 0 0;
     color: var(--color-foreground-contrast);
-    border-top-right-radius: var(--border-radius-tiny) !important;
-    border-top-left-radius: var(--border-radius-tiny) !important;
   }
 
   .tab-active[disabled] {
diff --git a/src/components/Radio.svelte b/src/components/Radio.svelte
index b6407caa1..8e3fa589f 100644
--- a/src/components/Radio.svelte
+++ b/src/components/Radio.svelte
@@ -6,7 +6,7 @@
 <style>
   .radio {
     display: flex;
-    gap: 0.25rem;
+    gap: 0.375rem;
     border-radius: var(--border-radius-tiny);
     justify-content: center;
     align-items: center;
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
index 74b08b8cb..2aea90f36 100644
--- a/src/views/projects/Cob/CobHeader.svelte
+++ b/src/views/projects/Cob/CobHeader.svelte
@@ -1,6 +1,7 @@
 <style>
   .header {
     display: flex;
+    padding: 1rem;
     flex-direction: column;
     border-radius: var(--border-radius-small);
   }
@@ -18,11 +19,11 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   .description {
     font-size: var(--font-size-small);
-    margin-top: 1rem;
+    margin-top: 2rem;
     word-break: break-word;
   }
 </style>
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index d0f03ac75..237df8541 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -404,6 +404,21 @@
     flex: 1;
     min-height: 100%;
   }
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1.5rem;
+    background-color: var(--color-background-float);
+  }
+  .bottom {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    background-color: var(--color-background-default);
+  }
+
   .metadata {
     display: flex;
     flex-direction: column;
@@ -463,7 +478,7 @@
 
 <Layout {baseUrl} {project} activeTab="issues">
   <div class="issue">
-    <div class="content">
+    <div class="main">
       <CobHeader>
         <svelte:fragment slot="title">
           {#if issueState !== "read"}
@@ -572,40 +587,44 @@
           {/if}
         </div>
       </CobHeader>
-      {#if threads.length > 0}
-        <div class="threads">
-          {#each threads as thread (thread.root.id)}
-            <ThreadComponent
-              enableAttachments
-              {thread}
-              rawPath={rawPath(project.head)}
-              canEditComment={partial(
-                role.isDelegateOrAuthor,
-                session?.publicKey,
-                project.delegates,
-              )}
-              editComment={session && partial(editComment, session.id)}
-              createReply={session && partial(createReply, session.id)}
-              handleReaction={session && partial(handleReaction, session)} />
-          {/each}
-        </div>
-      {/if}
-      {#if session}
-        <CommentToggleInput
-          rawPath={rawPath(project.head)}
-          placeholder="Leave your comment"
-          enableAttachments
-          submit={partial(createComment, session.id)} />
-        <div style:display="flex">
-          {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
-            <CobStateButton
-              items={items.filter(([, state]) => !isEqual(state, issue.state))}
-              {selectedItem}
-              state={issue.state}
-              save={partial(saveStatus, session.id)} />
-          {/if}
-        </div>
-      {/if}
+      <div class="bottom">
+        {#if threads.length > 0}
+          <div class="threads">
+            {#each threads as thread (thread.root.id)}
+              <ThreadComponent
+                enableAttachments
+                {thread}
+                rawPath={rawPath(project.head)}
+                canEditComment={partial(
+                  role.isDelegateOrAuthor,
+                  session?.publicKey,
+                  project.delegates,
+                )}
+                editComment={session && partial(editComment, session.id)}
+                createReply={session && partial(createReply, session.id)}
+                handleReaction={session && partial(handleReaction, session)} />
+            {/each}
+          </div>
+        {/if}
+        {#if session}
+          <CommentToggleInput
+            rawPath={rawPath(project.head)}
+            placeholder="Leave your comment"
+            enableAttachments
+            submit={partial(createComment, session.id)} />
+          <div style:display="flex">
+            {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
+              <CobStateButton
+                items={items.filter(
+                  ([, state]) => !isEqual(state, issue.state),
+                )}
+                {selectedItem}
+                state={issue.state}
+                save={partial(saveStatus, session.id)} />
+            {/if}
+          </div>
+        {/if}
+      </div>
     </div>
     <div class="metadata global-hide-on-mobile">
       <AssigneeInput
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 237bd8123..4d6c3ca89 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -561,7 +561,12 @@
     display: flex;
     flex: 1;
     min-height: 100%;
-    min-height: 100%;
+  }
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: var(--color-background-float);
   }
   .metadata {
     display: flex;
@@ -583,11 +588,10 @@
     font-size: var(--font-size-large);
     height: 2.5rem;
   }
-  .content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-width: 25rem;
+  .bottom {
+    background-color: var(--color-background-default);
+    padding: 1rem;
+    height: 100%;
   }
   .tabs {
     font-size: var(--font-size-tiny);
@@ -596,18 +600,12 @@
     justify-content: left;
     flex-wrap: wrap;
     position: relative;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+    margin-top: 1rem;
+    box-shadow: inset 0 -1px 0 var(--color-border-hint);
   }
-  .tabs::after {
-    content: "";
-    position: absolute;
-    left: -1rem;
-    bottom: 0;
-    border-bottom: 1px solid var(--color-fill-separator);
-    width: calc(100% + 2rem);
-    width: calc(100% + 2rem);
-    z-index: -1;
+  .tabs-spacer {
+    width: 1rem;
+    height: 100%;
   }
   .author {
     display: flex;
@@ -659,7 +657,7 @@
 
 <Layout {baseUrl} {project} activeTab="patches">
   <div class="patch">
-    <div class="content">
+    <div class="main">
       <CobHeader>
         <svelte:fragment slot="title">
           {#if patchState !== "read"}
@@ -740,11 +738,11 @@
       </CobHeader>
 
       <div class="tabs">
+        <div class="tabs-spacer" />
         <Radio>
           {#each Object.entries(tabs) as [name, { route, icon }]}
             <Link {route}>
               <Button
-                styleBorderRadius="0"
                 size="large"
                 variant={name === view.name ? "tab-active" : "tab"}>
                 <IconSmall name={icon} />
@@ -765,7 +763,7 @@
                   toCommit: view.toCommit,
                 },
               }}>
-              <Button styleBorderRadius="0" size="large" variant="tab-active">
+              <Button size="large" variant="tab-active">
                 Compare <span class="diff-button-range">
                   {view.fromCommit.substring(0, 6)}..{view.toCommit.substring(
                     0,
@@ -842,93 +840,96 @@
             </div>
           {/if}
         </div>
+        <div class="tabs-spacer" />
       </div>
-      {#if view.name === "diff"}
-        <div style:margin-top="1rem">
-          <Changeset
-            {baseUrl}
-            projectId={project.id}
-            revision={view.toCommit}
-            files={view.files}
-            diff={view.diff} />
-        </div>
-      {:else if view.name === "activity"}
-        {#each timelineTuple as [revision, timelines], index}
-          {@const previousRevision =
-            index > 0 ? patch.revisions[index - 1] : undefined}
-          <RevisionComponent
-            {baseUrl}
-            {rawPath}
-            projectId={project.id}
-            {timelines}
-            projectDefaultBranch={project.defaultBranch}
-            projectHead={project.head}
-            {...revision}
-            first={index === 0}
-            canEdit={partial(
-              role.isDelegateOrAuthor,
-              session?.publicKey,
-              project.delegates,
-            )}
-            editRevision={session &&
-              partial(editRevision, session.id, revision.revisionId)}
-            editComment={session &&
-              partial(editComment, session.id, revision.revisionId)}
-            handleReaction={session &&
-              partial(handleReaction, session, revision.revisionId)}
-            createReply={session &&
-              partial(createReply, session.id, revision.revisionId)}
-            patchId={patch.id}
-            patchState={patch.state}
-            expanded={index === patch.revisions.length - 1}
-            previousRevId={previousRevision?.id}
-            previousRevOid={previousRevision?.oid}>
-            {#if index === patch.revisions.length - 1}
-              {#if session && view.name === "activity"}
-                <div class="connector" />
-                <CommentToggleInput
-                  rawPath={rawPath(patch.revisions[0].id)}
-                  enableAttachments
-                  placeholder="Leave your comment"
-                  submit={partial(
-                    createComment,
-                    session.id,
-                    revision.revisionId,
-                  )} />
-                {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+      <div class="bottom">
+        {#if view.name === "diff"}
+          <div style:margin-top="1rem">
+            <Changeset
+              {baseUrl}
+              projectId={project.id}
+              revision={view.toCommit}
+              files={view.files}
+              diff={view.diff} />
+          </div>
+        {:else if view.name === "activity"}
+          {#each timelineTuple as [revision, timelines], index}
+            {@const previousRevision =
+              index > 0 ? patch.revisions[index - 1] : undefined}
+            <RevisionComponent
+              {baseUrl}
+              {rawPath}
+              projectId={project.id}
+              {timelines}
+              projectDefaultBranch={project.defaultBranch}
+              projectHead={project.head}
+              {...revision}
+              first={index === 0}
+              canEdit={partial(
+                role.isDelegateOrAuthor,
+                session?.publicKey,
+                project.delegates,
+              )}
+              editRevision={session &&
+                partial(editRevision, session.id, revision.revisionId)}
+              editComment={session &&
+                partial(editComment, session.id, revision.revisionId)}
+              handleReaction={session &&
+                partial(handleReaction, session, revision.revisionId)}
+              createReply={session &&
+                partial(createReply, session.id, revision.revisionId)}
+              patchId={patch.id}
+              patchState={patch.state}
+              expanded={index === patch.revisions.length - 1}
+              previousRevId={previousRevision?.id}
+              previousRevOid={previousRevision?.oid}>
+              {#if index === patch.revisions.length - 1}
+                {#if session && view.name === "activity"}
                   <div class="connector" />
-                  <div style="display: flex;">
-                    <CobStateButton
-                      items={items.filter(
-                        ([, state]) => !isEqual(state, patch.state),
-                      )}
-                      {selectedItem}
-                      state={patch.state}
-                      save={partial(saveStatus, session.id)} />
-                  </div>
+                  <CommentToggleInput
+                    rawPath={rawPath(patch.revisions[0].id)}
+                    enableAttachments
+                    placeholder="Leave your comment"
+                    submit={partial(
+                      createComment,
+                      session.id,
+                      revision.revisionId,
+                    )} />
+                  {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+                    <div class="connector" />
+                    <div style="display: flex;">
+                      <CobStateButton
+                        items={items.filter(
+                          ([, state]) => !isEqual(state, patch.state),
+                        )}
+                        {selectedItem}
+                        state={patch.state}
+                        save={partial(saveStatus, session.id)} />
+                    </div>
+                  {/if}
                 {/if}
               {/if}
-            {/if}
-          </RevisionComponent>
-        {:else}
-          <div style:margin="4rem 0">
-            <Placeholder
-              iconName="no-patches"
-              caption="No activity on this patch yet" />
+            </RevisionComponent>
+          {:else}
+            <div style:margin="4rem 0">
+              <Placeholder
+                iconName="no-patches"
+                caption="No activity on this patch yet" />
+            </div>
+          {/each}
+        {:else if view.name === "changes"}
+          <div style:margin-top="1rem">
+            <Changeset
+              {baseUrl}
+              projectId={project.id}
+              revision={view.oid}
+              files={view.files}
+              diff={view.diff} />
           </div>
-        {/each}
-      {:else if view.name === "changes"}
-        <div style:margin-top="1rem">
-          <Changeset
-            {baseUrl}
-            projectId={project.id}
-            revision={view.oid}
-            files={view.files}
-            diff={view.diff} />
-        </div>
-      {:else}
-        {utils.unreachable(view)}
-      {/if}
+        {:else}
+          {utils.unreachable(view)}
+        {/if}
+      </div>
     </div>
 
     <div class="metadata global-hide-on-mobile">
diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
index e6d3827dd..c0fc205c7 100644
--- a/src/views/projects/Source/Header.svelte
+++ b/src/views/projects/Source/Header.svelte
@@ -46,6 +46,7 @@
   .header {
     font-size: var(--font-size-tiny);
     display: flex;
+    gap: 0.375rem;
     align-items: center;
     justify-content: left;
     flex-wrap: wrap;
@@ -93,7 +94,7 @@
 </div>
 
 <div class="header">
-  <div style="display: flex; gap: 0.25rem;">
+  <div style="display: flex; gap: 0.375rem;">
     <Link
       route={{
         resource: "project.source",
@@ -102,10 +103,7 @@
         peer,
         revision,
       }}>
-      <Button
-        styleBorderRadius="0"
-        size="large"
-        variant={filesLinkActive ? "tab-active" : "tab"}>
+      <Button size="large" variant={filesLinkActive ? "tab-active" : "tab"}>
         <IconSmall name="file" />Files
       </Button>
     </Link>
@@ -118,10 +116,7 @@
         peer,
         revision,
       }}>
-      <Button
-        styleBorderRadius="0"
-        size="large"
-        variant={historyLinkActive ? "tab-active" : "tab"}>
+      <Button size="large" variant={historyLinkActive ? "tab-active" : "tab"}>
         <IconSmall name="commit" />
         <div class="title-counter">
           Commits