[default-layout] Improve CSS for UI consistency

sanity-io · Oct 6, 2020 · 73b943c · 73b943c
1 parent 323179a
commit 73b943c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/@sanity/default-layout/src/DefaultLayout.css b/packages/@sanity/default-layout/src/DefaultLayout.css
@@ -25,7 +25,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: color(var(--gray) alpha(20%));
+    background: var(--backdrop-color);
     pointer-events: none;
     opacity: 0;
     transition: 150ms opacity ease-in-out;
@@ -43,11 +43,22 @@
   }
 }
 
-.navBar {
+.navbar {
+  position: relative;
   background-color: var(--main-navigation-color);
   color: var(--main-navigation-color--inverted);
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
+
+  @nest &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 1px solid var(--hairline-color);
+  }
 }
 
 .loadingScreen {

diff --git a/packages/@sanity/default-layout/src/DefaultLayout.tsx b/packages/@sanity/default-layout/src/DefaultLayout.tsx
@@ -154,7 +154,7 @@ class DefaultLayout extends React.PureComponent<Props, State> {
           </div>
         )}
 
-        <div className={styles.navBar}>
+        <div className={styles.navbar}>
           <NavbarContainer
             tools={tools}
             createMenuIsOpen={createMenuIsOpen}

diff --git a/packages/@sanity/default-layout/src/navbar/branding/Branding.css b/packages/@sanity/default-layout/src/navbar/branding/Branding.css
@@ -22,7 +22,7 @@
   padding: 0;
   font-size: inherit;
   line-height: calc(17 / 16);
-  font-weight: 600;
+  font-weight: 700;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;