From 6edbd37c4c6561338d9cf19803ade78ee8d16e0a Mon Sep 17 00:00:00 2001
From: Brandon Oxendine <brandon.oxendine@gmail.com>
Date: Wed, 29 Jun 2022 17:15:01 +0200
Subject: [PATCH] Unify border-radius

Signed-off-by: Brandon Oxendine <brandon.oxendine@gmail.com>
Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 public/index.css                              | 20 +++++++++----------
 src/Avatar.svelte                             |  2 +-
 src/BlockTimer.svelte                         |  4 ++--
 src/Blockies.svelte                           |  2 +-
 src/Card.svelte                               |  4 ++--
 src/Clipboard.svelte                          |  2 +-
 src/Comment.svelte                            |  2 +-
 src/Dropdown.svelte                           |  6 ------
 src/Form.svelte                               |  2 +-
 src/Header.svelte                             |  8 ++++----
 src/Input.svelte                              |  4 ++--
 src/Loading.svelte                            |  3 +--
 src/Markdown.svelte                           |  2 +-
 src/Message.svelte                            |  2 +-
 src/MobileNavbar.svelte                       |  2 +-
 src/Placeholder.svelte                        |  2 +-
 src/ReactionSelector.svelte                   | 12 +++++------
 src/base/home/Index.svelte                    |  2 +-
 src/base/orgs/Create.svelte                   |  2 +-
 src/base/profiles/AnchorBadge.svelte          |  2 +-
 src/base/projects/Blob.svelte                 |  8 +++++---
 src/base/projects/BranchSelector.svelte       |  6 +++---
 src/base/projects/Commit.svelte               |  2 +-
 .../projects/Commit/CommitAuthorship.svelte   |  2 +-
 src/base/projects/Commit/CommitTeaser.svelte  |  8 ++++----
 src/base/projects/Header.svelte               |  2 +-
 src/base/projects/History.svelte              |  8 ++++----
 src/base/projects/Issue.svelte                |  6 +++---
 src/base/projects/Issue/IssueFilter.svelte    |  2 +-
 src/base/projects/Issue/IssueTeaser.svelte    |  2 +-
 src/base/projects/Issues.svelte               |  2 +-
 src/base/projects/PeerSelector.svelte         |  2 +-
 src/base/projects/Readme.svelte               |  2 +-
 .../projects/SourceBrowser/Changeset.svelte   |  4 ----
 .../projects/SourceBrowser/FileDiff.svelte    |  2 +-
 src/base/projects/Tree/File.svelte            |  2 +-
 src/base/projects/Tree/Folder.svelte          |  2 +-
 src/base/projects/Widget.svelte               |  2 +-
 src/ens/DomainInput.svelte                    |  4 ++--
 39 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/public/index.css b/public/index.css
index 26149b924..039294693 100644
--- a/public/index.css
+++ b/public/index.css
@@ -74,10 +74,9 @@
 	--font-family-monospace: monospace;
 	--font-weight-medium: 600;
 	--font-weight-bold: 700;
-
-	--border-radius: 50px;
-	--border-radius-medium: 0.25rem;
-
+	--border-radius: 1rem;
+	--border-radius-small: 0.5rem;
+	--border-radius-round: 10rem;
 	--box-shadow-color: var(--color-secondary-2);
 
 	--content-max-width: 1920px;
@@ -141,7 +140,7 @@ html {
 }
 *::-webkit-scrollbar-thumb {
 	background: transparent;
-	border-radius: 4px;
+	border-radius: var(--border-radius);
 }
 *::-webkit-scrollbar-corner {
 	background: transparent;
@@ -175,7 +174,7 @@ button {
 	font-size: 1rem;
 	padding: 0rem 1.5rem;
 	border: 1px solid var(--color-foreground-6);
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-round);
 	cursor: pointer;
 	min-width: 6rem;
 	height: var(--button-regular-height);
@@ -293,8 +292,8 @@ input[type="text"] {
 	color: var(--color-foreground);
 	background: transparent;
 	border: 1px solid var(--color-secondary);
-	border-radius: var(--border-radius);
-	padding: 0rem 1.5rem;
+	border-radius: var(--border-radius-round);
+	padding: 1rem 1.5rem;
 	margin: 1rem;
 	height: var(--button-regular-height);
 }
@@ -335,10 +334,11 @@ label.input {
 .dropdown, .popup {
 	background-color: var(--color-foreground-background);
 	margin-top: 0.5rem;
+	padding: 0.5rem 0;
 	position: absolute;
 	box-shadow: 16px 16px 32px 32px var(--color-shadow);
 	z-index: 10;
-	border-radius: 0.25rem;
+	border-radius: var(--border-radius-small);
 }
 
 .error {
@@ -458,7 +458,7 @@ span.small, .text-xsmall {
 
 .notice {
 	font-size: 0.875rem;
-	border-radius: 0.25rem;
+	border-radius: var(--border-radius);
 	color: var(--color-yellow);
 	background-color: var(--color-yellow-background);
 	padding: 1rem;
diff --git a/src/Avatar.svelte b/src/Avatar.svelte
index 90c103a04..863291b39 100644
--- a/src/Avatar.svelte
+++ b/src/Avatar.svelte
@@ -32,7 +32,7 @@
 <style>
   .avatar {
     display: block;
-    border-radius: 50%;
+    border-radius: var(--border-radius-round);
     min-width: 1rem;
     min-height: 1rem;
     height: 100%;
diff --git a/src/BlockTimer.svelte b/src/BlockTimer.svelte
index f5459e9a4..bf4ee7b96 100644
--- a/src/BlockTimer.svelte
+++ b/src/BlockTimer.svelte
@@ -17,13 +17,13 @@
     text-align: center;
     height: 0.5rem;
     width: 100%;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     background-color: var(--color-secondary-background);
   }
   .loader {
     height: 0.5rem;
     width: 0px;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     background-color: var(--color-secondary);
   }
 </style>
diff --git a/src/Blockies.svelte b/src/Blockies.svelte
index 9c4734af3..fef04598a 100644
--- a/src/Blockies.svelte
+++ b/src/Blockies.svelte
@@ -26,7 +26,7 @@
     min-height: 1rem;
     background-size: cover;
     background-repeat: no-repeat;
-    border-radius: 50%;
+    border-radius: var(--border-radius-round);
   }
   .icon.glowOnHover:hover {
     box-shadow: 0 0 3rem var(--color-secondary);
diff --git a/src/Card.svelte b/src/Card.svelte
index ae8a82e57..aa65ac56c 100644
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -37,7 +37,7 @@
     padding: 1rem;
     display: inline-block;
     text-align: center;
-    border-radius: 1rem;
+    border-radius: var(--border-radius);
   }
   .card::last-child {
     margin-right: 0;
@@ -56,7 +56,7 @@
     display: inline-block;
     font-weight: var(--font-weight-medium);
     margin-top: 0.75rem;
-    border-radius: 0.75rem;
+    border-radius: var(--border-radius);
     padding: 0rem;
     text-overflow: ellipsis;
     overflow-x: hidden;
diff --git a/src/Clipboard.svelte b/src/Clipboard.svelte
index 98bcd9658..1474b391a 100644
--- a/src/Clipboard.svelte
+++ b/src/Clipboard.svelte
@@ -26,7 +26,7 @@
     stroke: var(--color-positive);
   }
   .clipboard:hover {
-    border-radius: 1.5rem;
+    border-radius: var(--border-radius);
   }
 </style>
 
diff --git a/src/Comment.svelte b/src/Comment.svelte
index d44232a1a..03bfc0da7 100644
--- a/src/Comment.svelte
+++ b/src/Comment.svelte
@@ -54,7 +54,7 @@
   .card {
     flex: 1;
     border: 1px solid var(--color-foreground-3);
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
   }
   .card-header {
     display: flex;
diff --git a/src/Dropdown.svelte b/src/Dropdown.svelte
index 6a99b26db..57ce7a561 100644
--- a/src/Dropdown.svelte
+++ b/src/Dropdown.svelte
@@ -12,12 +12,6 @@
 </script>
 
 <style>
-  .dropdown {
-    background-color: var(--color-foreground-background);
-    padding: 0.5rem 0;
-    margin-top: 0.5rem;
-    position: absolute;
-  }
   .dropdown-item {
     white-space: nowrap;
     cursor: pointer;
diff --git a/src/Form.svelte b/src/Form.svelte
index 44b81c9f2..af33bc742 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -133,7 +133,7 @@
   }
 
   input.field {
-    border-radius: 1rem;
+    border-radius: var(--border-radius);
     overflow: hidden;
     text-overflow: ellipsis;
     border-color: var(--color-secondary) !important;
diff --git a/src/Header.svelte b/src/Header.svelte
index 4ace71dd7..fe5a2cede 100644
--- a/src/Header.svelte
+++ b/src/Header.svelte
@@ -114,10 +114,10 @@
     background-color: var(--color-tertiary-background);
     line-height: 1.5em;
     padding: 0rem 1rem;
-    border-radius: var(--border-radius);
-	height: var(--button-regular-height);
-	display: flex;
-	align-items: center;
+    height: var(--button-regular-height);
+    display: flex;
+    align-items: center;
+    border-radius: var(--border-radius-round);
   }
   .network.unavailable {
     color: #888;
diff --git a/src/Input.svelte b/src/Input.svelte
index d89ef82a2..20bab4583 100644
--- a/src/Input.svelte
+++ b/src/Input.svelte
@@ -18,7 +18,7 @@
     text-align: right;
     -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     mask: linear-gradient(90deg, transparent 0%, #fff 50%);
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   }
   input {
     font-size: 0.75rem;
@@ -28,7 +28,7 @@
     outline: none;
     width: 100%;
     text-overflow: ellipsis !important;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
   }
   main:hover .clipboard {
     visibility: visible;
diff --git a/src/Loading.svelte b/src/Loading.svelte
index 729f016cf..d66f84c92 100644
--- a/src/Loading.svelte
+++ b/src/Loading.svelte
@@ -35,8 +35,7 @@
     width: 18px;
     height: 18px;
     background-color: #5555ff;
-
-    border-radius: 100%;
+    border-radius: var(--border-radius-round);
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
diff --git a/src/Markdown.svelte b/src/Markdown.svelte
index 13c36a6bb..1b72a48ab 100644
--- a/src/Markdown.svelte
+++ b/src/Markdown.svelte
@@ -171,7 +171,7 @@
     font-size: 1rem;
     background-color: var(--color-foreground-background);
     padding: 1rem !important;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     margin: 1rem 0;
     overflow: scroll;
     scrollbar-width: none;
diff --git a/src/Message.svelte b/src/Message.svelte
index dce4af7ea..40967e45e 100644
--- a/src/Message.svelte
+++ b/src/Message.svelte
@@ -8,7 +8,7 @@
   }
   .message-error {
     color: var(--color-negative);
-    border-radius: 0.5rem;
+    border-radius: var(--border-radius);
     background-color: var(--color-glow-error);
   }
 </style>
diff --git a/src/MobileNavbar.svelte b/src/MobileNavbar.svelte
index ecfab44b6..8bae519a6 100644
--- a/src/MobileNavbar.svelte
+++ b/src/MobileNavbar.svelte
@@ -36,7 +36,7 @@
     background: var(--color-background);
     min-width: 240px;
     max-width: 360px;
-    border-radius: 1rem;
+    border-radius: var(--border-radius);
     text-align: center;
   }
   .modal-title {
diff --git a/src/Placeholder.svelte b/src/Placeholder.svelte
index 4d48bb2f4..43c9e3e45 100644
--- a/src/Placeholder.svelte
+++ b/src/Placeholder.svelte
@@ -5,7 +5,7 @@
 <style>
   .placeholder {
     text-align: center;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     padding-bottom: 2rem;
     color: var(--color-foreground-faded) !important;
     background-color: var(--color-foreground-background);
diff --git a/src/ReactionSelector.svelte b/src/ReactionSelector.svelte
index 90c8ed6cc..aa0adf7d1 100644
--- a/src/ReactionSelector.svelte
+++ b/src/ReactionSelector.svelte
@@ -17,7 +17,7 @@
     justify-content: center;
     position: relative;
     color: var(--color-foreground-faded);
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
     height: 1rem;
     width: 1rem;
     cursor: not-allowed;
@@ -30,18 +30,18 @@
     position: absolute;
     left: 1.5rem;
     background-color: var(--color-foreground-background);
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
   }
   .modal > div {
     padding: 0.5rem;
   }
   .modal > div:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+    border-top-right-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
   }
   .modal > div:first-child {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
+    border-top-left-radius: var(--border-radius-small);
+    border-bottom-left-radius: var(--border-radius-small);
   }
   .modal > div:hover {
     background-color: var(--color-foreground-subtle);
diff --git a/src/base/home/Index.svelte b/src/base/home/Index.svelte
index 91575f5c3..db7025b3a 100644
--- a/src/base/home/Index.svelte
+++ b/src/base/home/Index.svelte
@@ -45,7 +45,7 @@
     max-width: 70%;
     font-size: 1.25rem;
     text-align: left;
-    border-radius: 1rem;
+    border-radius: var(--border-radius);
     margin-bottom: 1.5rem;
   }
   .heading {
diff --git a/src/base/orgs/Create.svelte b/src/base/orgs/Create.svelte
index b3352cb65..2bd264d55 100644
--- a/src/base/orgs/Create.svelte
+++ b/src/base/orgs/Create.svelte
@@ -97,7 +97,7 @@
   }
   .governance {
     background-color: var(--color-secondary-background);
-    border-radius: 1rem;
+    border-radius: var(--border-radius);
     padding: 1rem 1rem 0rem 1rem;
     margin-bottom: 2rem;
   }
diff --git a/src/base/profiles/AnchorBadge.svelte b/src/base/profiles/AnchorBadge.svelte
index 041ee9a93..3fdd96ab4 100644
--- a/src/base/profiles/AnchorBadge.svelte
+++ b/src/base/profiles/AnchorBadge.svelte
@@ -16,7 +16,7 @@
   .anchor-widget {
     display: flex;
     padding: 0.5rem 0.75rem;
-    border-radius: inherit;
+    border-radius: var(--border-radius-small);
     color: var(--color-tertiary);
     background-color: var(--color-tertiary-background);
     cursor: pointer;
diff --git a/src/base/projects/Blob.svelte b/src/base/projects/Blob.svelte
index 6b66a7761..cd77a5f9c 100644
--- a/src/base/projects/Blob.svelte
+++ b/src/base/projects/Blob.svelte
@@ -28,8 +28,8 @@
     border-width: 1px 1px 0 1px;
     border-color: var(--color-foreground-subtle);
     border-style: solid;
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+    border-top-left-radius: var(--border-radius-small);
+    border-top-right-radius: var(--border-radius-small);
   }
 
   header .file-name {
@@ -45,7 +45,7 @@
     color: var(--color-secondary);
     background-color: var(--color-secondary-background);
     font-size: 0.75rem;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -80,6 +80,8 @@
     display: flex;
     border: 1px solid var(--color-foreground-subtle);
     border-top-style: dashed;
+	border-bottom-left-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
   }
 
   .binary {
diff --git a/src/base/projects/BranchSelector.svelte b/src/base/projects/BranchSelector.svelte
index eee848696..a7894faa8 100644
--- a/src/base/projects/BranchSelector.svelte
+++ b/src/base/projects/BranchSelector.svelte
@@ -42,7 +42,7 @@
     padding: 0.5rem 0.75rem;
     color: var(--color-secondary);
     background-color: var(--color-secondary-background);
-    border-radius: 0.25rem 0 0 0.25rem;
+    border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
   }
   .commit .branch.not-allowed {
     cursor: not-allowed;
@@ -55,10 +55,10 @@
     color: var(--color-secondary);
     background-color: var(--color-secondary-background-darker);
     padding: 0.5rem 0.75rem;
-    border-radius: 0 0.25rem 0.25rem 0;
+    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   }
   .commit .hash.unlabeled {
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
   }
   .stat {
     font-family: var(--font-family-monospace);
diff --git a/src/base/projects/Commit.svelte b/src/base/projects/Commit.svelte
index b17eacd4b..0ebb12f4e 100644
--- a/src/base/projects/Commit.svelte
+++ b/src/base/projects/Commit.svelte
@@ -25,7 +25,7 @@
   header {
     padding: 1rem;
     background: var(--color-foreground-background-subtle);
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
   }
   .summary {
     display: flex;
diff --git a/src/base/projects/Commit/CommitAuthorship.svelte b/src/base/projects/Commit/CommitAuthorship.svelte
index 1f20f64f2..6c9f4e5b3 100644
--- a/src/base/projects/Commit/CommitAuthorship.svelte
+++ b/src/base/projects/Commit/CommitAuthorship.svelte
@@ -21,7 +21,7 @@
   .authorship .avatar {
     width: 1rem;
     height: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--border-radius);
     margin-right: 0.25rem;
   }
   .authorship .avatar:not(:first-child) {
diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index 57cea8cd9..6f4eb0d0d 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -30,12 +30,12 @@
     background-color: var(--color-foreground-background-lighter);
   }
   .commit-teaser:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+    border-top-left-radius: var(--border-radius-small);
+    border-top-right-radius: var(--border-radius-small);
   }
   .commit-teaser:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
   }
   .commit-teaser {
     display: flex;
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index f838eb8b1..e06c4e40c 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -62,7 +62,7 @@
     gap: 0.5rem;
   }
   .widget {
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     min-width: max-content;
   }
   .anchor {
diff --git a/src/base/projects/History.svelte b/src/base/projects/History.svelte
index fee28e558..c4c5a208a 100644
--- a/src/base/projects/History.svelte
+++ b/src/base/projects/History.svelte
@@ -38,12 +38,12 @@
     cursor: pointer;
   }
   .commit:first-child {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+    border-top-left-radius: var(--border-radius-small);
+    border-top-right-radius: var(--border-radius-small);
   }
   .commit:last-child {
-    border-bottom-left-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
   }
 
   @media (max-width: 960px) {
diff --git a/src/base/projects/Issue.svelte b/src/base/projects/Issue.svelte
index dc750c8b9..0e2c3294c 100644
--- a/src/base/projects/Issue.svelte
+++ b/src/base/projects/Issue.svelte
@@ -26,7 +26,7 @@
   header {
     padding: 1rem;
     background: var(--color-foreground-background-subtle);
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
     margin-bottom: 2rem;
   }
   main {
@@ -39,7 +39,7 @@
   .metadata {
     flex-basis: 18rem;
     margin-left: 1rem;
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
     font-size: 0.875rem;
     padding-left: 1rem;
   }
@@ -89,7 +89,7 @@
   }
   .summary-state {
     padding: 0.5rem 1rem;
-    border-radius: 1.25rem;
+    border-radius: var(--border-radius);
   }
   .open {
     color: var(--color-positive);
diff --git a/src/base/projects/Issue/IssueFilter.svelte b/src/base/projects/Issue/IssueFilter.svelte
index c9b96141f..93a9a3061 100644
--- a/src/base/projects/Issue/IssueFilter.svelte
+++ b/src/base/projects/Issue/IssueFilter.svelte
@@ -16,7 +16,7 @@
     display: flex;
     flex-direction: row;
     margin: 1rem 0;
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
   }
   .state-toggle {
     cursor: pointer;
diff --git a/src/base/projects/Issue/IssueTeaser.svelte b/src/base/projects/Issue/IssueTeaser.svelte
index 321403cd5..49d4329ee 100644
--- a/src/base/projects/Issue/IssueTeaser.svelte
+++ b/src/base/projects/Issue/IssueTeaser.svelte
@@ -64,7 +64,7 @@
   .state-icon {
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: 0.5rem;
+    border-radius: var(--border-radius-small);
   }
   .open {
     background-color: var(--color-positive);
diff --git a/src/base/projects/Issues.svelte b/src/base/projects/Issues.svelte
index 3be1e4f67..4c37915e4 100644
--- a/src/base/projects/Issues.svelte
+++ b/src/base/projects/Issues.svelte
@@ -26,7 +26,7 @@
     font-size: 0.875rem;
   }
   .issues-list {
-    border-radius: var(--border-radius-medium);
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
   .teaser:not(:last-child) {
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte
index ef3f0d67e..13e292647 100644
--- a/src/base/projects/PeerSelector.svelte
+++ b/src/base/projects/PeerSelector.svelte
@@ -42,7 +42,7 @@
     padding: 0.5rem 0.75rem;
     color: var(--color-secondary);
     background-color: var(--color-secondary-background);
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
   }
   .selector .peer.not-allowed {
     cursor: not-allowed;
diff --git a/src/base/projects/Readme.svelte b/src/base/projects/Readme.svelte
index 204ba7990..3521af44e 100644
--- a/src/base/projects/Readme.svelte
+++ b/src/base/projects/Readme.svelte
@@ -10,7 +10,7 @@
   article {
     padding: 2rem;
     background: var(--color-foreground-background-subtle);
-    border-radius: 0.5rem;
+    border-radius: var(--border-radius);
   }
 </style>
 
diff --git a/src/base/projects/SourceBrowser/Changeset.svelte b/src/base/projects/SourceBrowser/Changeset.svelte
index c38a48e3f..57e0cfb1f 100644
--- a/src/base/projects/SourceBrowser/Changeset.svelte
+++ b/src/base/projects/SourceBrowser/Changeset.svelte
@@ -33,10 +33,6 @@
   .changeset-summary .deletions {
     color: var(--color-negative);
   }
-  .diff-listing {
-    /* This border forces to keep the FileDiff margin-bottom visible */
-    border: 1px solid transparent;
-  }
 </style>
 
 <div class="changeset-summary">
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index 85739242b..9d36c25f4 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -19,7 +19,7 @@
 <style>
   .changeset-file {
     border: 1px solid var(--color-foreground-3);
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     min-width: var(--content-min-width);
     margin-bottom: 2rem;
     line-height: 1.5rem;
diff --git a/src/base/projects/Tree/File.svelte b/src/base/projects/Tree/File.svelte
index f0406ad75..74348b42e 100644
--- a/src/base/projects/Tree/File.svelte
+++ b/src/base/projects/Tree/File.svelte
@@ -9,7 +9,7 @@
 <style>
   .file {
     color: var(--color-foreground-90);
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
diff --git a/src/base/projects/Tree/Folder.svelte b/src/base/projects/Tree/Folder.svelte
index 562e8f479..35c7b6a24 100644
--- a/src/base/projects/Tree/Folder.svelte
+++ b/src/base/projects/Tree/Folder.svelte
@@ -42,7 +42,7 @@
   }
   .folder:hover {
     background-color: var(--color-foreground-background);
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
   }
 
   .folder-name {
diff --git a/src/base/projects/Widget.svelte b/src/base/projects/Widget.svelte
index 4dbea26cc..b2f1d6712 100644
--- a/src/base/projects/Widget.svelte
+++ b/src/base/projects/Widget.svelte
@@ -33,7 +33,7 @@
     justify-content: space-between;
     padding: 1rem;
     border: 1px solid var(--color-secondary-faded);
-    border-radius: 0.25rem;
+    border-radius: var(--border-radius-small);
     min-width: 36rem;
     cursor: pointer;
   }
diff --git a/src/ens/DomainInput.svelte b/src/ens/DomainInput.svelte
index b99a51f27..9869fa799 100644
--- a/src/ens/DomainInput.svelte
+++ b/src/ens/DomainInput.svelte
@@ -24,7 +24,7 @@
 	/* padding: 0.7rem 2rem; */
 	padding: .4rem 1rem;
     color: var(--color-secondary);
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
     border: 1px solid var(--color-secondary);
     border-left: none;
 	height: var(--button-regular-height);
@@ -35,7 +35,7 @@
     margin-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
+    border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
     border-right: none;
   }
   input[disabled] {