From a473c04467eda48d5b061e4b409a678e30e4c9cf Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Tue, 21 Dec 2021 15:43:29 +0100
Subject: [PATCH] Improve commit history styling

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 src/base/projects/Commit/CommitTeaser.svelte | 16 ++++++-------
 src/base/projects/Commit/History.svelte      | 18 ++++----------
 src/base/projects/Header.svelte              | 25 +++++++++++++-------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index f790b4d0f..ee4b9f0e0 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -9,7 +9,7 @@
 <style>
   .hash {
     font-family: var(--font-family-monospace);
-    padding: 0 4px 0 0;
+    padding: 0 1rem 0 0;
   }
   .author {
     margin-right: 8px
@@ -18,19 +18,17 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 1rem 0 0.6rem;
+    padding: 0 1rem 0 1rem;
     height: 2.5rem;
   }
-  .small {
-    font-size: 14px;
-  }
+
   @media (max-width: 720px) {
     .commit {
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
-      padding-top: 0.3rem;
-      padding-bottom: 0.3rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
       height: unset;
     }
     .author, .hash {
@@ -45,9 +43,9 @@
   }
 </style>
 
-<div class="commit small">
+<div class="commit">
   <div class="summary">
-    <span class="secondary desktop-inline hash bold">{formatCommit(commit.sha1)}</span>
+    <span class="secondary desktop-inline hash">{formatCommit(commit.sha1)}</span>
     <span>{commit.summary}</span>
   </div>
   <div>
diff --git a/src/base/projects/Commit/History.svelte b/src/base/projects/Commit/History.svelte
index a058cac4f..6ba782dc1 100644
--- a/src/base/projects/Commit/History.svelte
+++ b/src/base/projects/Commit/History.svelte
@@ -18,29 +18,19 @@
 <style>
   .history {
     padding: 0 2rem 0 8rem;
+    font-size: 0.875rem;
   }
   .commit-group header {
-    color: var(--color-foreground-6);
-    padding-left: 0.6rem;
+    color: var(--color-foreground-faded);
   }
   .commit-group-headers {
-    border: 1px solid var(--color-foreground-3);
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     margin-bottom: 2rem;
+    background: var(--color-foreground-background);
   }
   .commit {
-    border-bottom: 1px solid var(--color-foreground-3);
     padding: 0.25rem 0;
   }
-  .commit:first-child {
-    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
-  }
-  .commit:last-child {
-    border-bottom: none;
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
-  }
   @media (max-width: 720px) {
     .history {
       padding-left: 2rem;
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index 8175cc018..1a1f4f877 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -6,7 +6,7 @@
   import type { Info, Tree } from '@app/project';
   import { ProjectContent } from "@app/project";
   import type { Profile } from '@app/profile';
-  
+
   export let config: Config;
   export let anchors: string | null = null;
   export let urn: string;
@@ -137,7 +137,7 @@
     background-color: var(--color-foreground-background-lighter);
   }
 
-  .clone, .commit-count {
+  .clone {
     color: var(--color-primary);
     background-color: var(--color-primary-background);
     font-family: var(--font-family-monospace);
@@ -146,9 +146,16 @@
     cursor: pointer;
     user-select: none;
   }
-  .clone:hover, .commit-count:hover {
+  .clone:hoverr {
     background-color: var(--color-primary-background-lighter);
   }
+  .commit-count {
+    cursor: pointer;
+    user-select: none;
+  }
+  .commit-count:hover {
+    background-color: var(--color-foreground-background-lighter);
+  }
   .dropdown {
     background-color: var(--color-foreground-background);
     padding: 1rem;
@@ -193,6 +200,10 @@
     padding: 0.5rem 0.75rem;
     background: var(--color-foreground-background);
   }
+  .stat.active {
+    color: var(--color-background);
+    background: var(--color-foreground-90);
+  }
 
   .error {
     color: var(--color-negative);
@@ -323,12 +334,8 @@
       {/if}
     </div>
   </span>
-  <div class="stat commit-count" on:click={switchContent}>
-    {#if content == ProjectContent.Browser}
-      <strong>{tree.stats.commits}</strong> commit(s)
-    {:else}
-      <strong>Back to Browser</strong>
-    {/if}
+  <div class="stat commit-count" class:active={content == ProjectContent.Commits} on:click={switchContent}>
+    <strong>{tree.stats.commits}</strong> commit(s)
   </div>
   <div class="stat">
     <strong>{tree.stats.contributors}</strong> contributor(s)