From 854bfee0c69339851ab8e844715b39f85b62afa3 Mon Sep 17 00:00:00 2001
From: alex <alex@dytry.ch>
Date: Tue, 19 Mar 2024 15:29:01 +0000
Subject: [PATCH] top bar design tweaks (#3205)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For a while, there've been a couple design issues with our top bar that
have been bothering me:


![image](https://github.com/tldraw/tldraw/assets/1489520/55355b7c-7ff2-4843-841c-5e53cbd788b2)

This diff:
- Makes the document title and share button have the same height and
vertical alignment
- Vertically centers the share button between the top of the viewport
and the share panel
- Aligns the right of the share button to the right of the style panel

<img width="1512" alt="Screenshot 2024-03-18 at 16 08 09"
src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e">

<img width="1512" alt="Screenshot 2024-03-18 at 16 08 18"
src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67">

Also tweaking some of the spacing and radiuses around the document title
itself to get things ✨pixel perfect✨

Before:
<img width="395" alt="Screenshot 2024-03-19 at 15 23 05"
src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394">

After:
<img width="378" alt="Screenshot 2024-03-19 at 15 22 27"
src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1">


### Change Type

- [x] `dotcom` — Changes the tldraw.com web app
- [x] `bugfix` — Bug fix
---
 apps/dotcom/styles/z-board.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/dotcom/styles/z-board.css b/apps/dotcom/styles/z-board.css
index 8754e7012..facad3d2a 100644
--- a/apps/dotcom/styles/z-board.css
+++ b/apps/dotcom/styles/z-board.css
@@ -7,11 +7,12 @@
 .tlui-share-zone {
 	padding: 0px 0px 0px 0px;
 	display: flex;
-	height: 40px;
 	flex-direction: row;
 	justify-content: flex-end;
 	z-index: var(--layer-panels);
 	align-items: center;
+	padding-top: 2px;
+	padding-right: 4px;
 }
 
 .tlui-share-zone__connection-status {
@@ -327,7 +328,9 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	height: 40px;
+	height: 36px;
+	margin-top: 4px;
+	padding-left: 2px;
 	max-width: 100%;
 	color: var(--color-text);
 	text-shadow: 1px 1px 0px var(--color-background);
@@ -351,6 +354,8 @@
 
 .tlui-document-name__input {
 	position: absolute;
+	padding: var(--space-1) var(--space-3);
+	margin-top: 2px;
 	width: 100%;
 	border-radius: var(--radius-2);
 	color: var(--color-text);
@@ -375,13 +380,8 @@
 }
 
 .tlui-document-name__menu {
-	width: 40px;
-	height: 40px;
-}
-
-.tlui-document-name__input__wrapper:focus-within + .tlui-document-name__menu::after {
-	/* when the input is focused, its outline is flush against the menu button which doesn't look
-	good. This shifts the left-hand edge of the menu button over by 2px to give it a little
-	breathing room when the input is focused. */
-	width: calc(100% - 10px);
+	width: 36px;
+	min-width: 36px;
+	height: 36px;
+	transform: translateX(2px);
 }