From 4d5b7de84bb23669dff65df97f4f0fdfd8573cdc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 11:19:12 -0400
Subject: [PATCH] tighten up playground buttons

---
 .../(authed)/playground/[id]/+page.svelte     |  2 +-
 .../playground/[id]/AppControls.svelte        | 31 ++++++++++++-------
 packages/site-kit/src/lib/styles/base.css     |  8 -----
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 6c17f996ad..b16a39000a 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -162,7 +162,7 @@
 		flex-direction: column;
 
 		@media (min-width: 800px) {
-			--app-controls-h: 4.4rem;
+			--app-controls-h: 4.8rem;
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index ea9c8c68fa..72eed882bf 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -220,29 +220,29 @@ export default app;`
 	<div class="buttons">
 		<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
-				<Icon name="close" />
+				<Icon size={18} name="close" />
 			{:else}
-				<Icon name="maximize" />
+				<Icon size={18} name="maximize" />
 			{/if}
 		</button>
 
 		<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
-			<Icon name="download" />
+			<Icon size={18} name="download" />
 		</button>
 
 		<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
 			{#if justForked}
-				<Icon name="check" />
+				<Icon size={18} name="check" />
 			{:else}
-				<Icon name="git-branch" />
+				<Icon size={18} name="git-branch" />
 			{/if}
 		</button>
 
 		<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
 			{#if justSaved}
-				<Icon name="check" />
+				<Icon size={18} name="check" />
 			{:else}
-				<Icon name="save" />
+				<Icon size={18} name="save" />
 				{#if modified_count}
 					<div class="badge">{modified_count}</div>
 				{/if}
@@ -252,7 +252,11 @@ export default app;`
 		{#if user}
 			<UserMenu {user} />
 		{:else}
-			<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
+			<button
+				class="raised icon"
+				onclick={(e) => (e.preventDefault(), login())}
+				style="width: auto; padding: 0 0.4rem"
+			>
 				<Icon name="log-in" />
 				<span>&nbsp;Log in to save</span>
 			</button>
@@ -301,15 +305,18 @@ export default app;`
 		gap: 0.2em;
 	}
 
+	button {
+		width: 3.2rem;
+		height: 3.2rem;
+	}
+
 	.icon {
 		transform: translateY(0.1rem);
 		display: inline-block;
-		padding: 0.4em;
-		opacity: 0.7;
 		transition: opacity 0.3s;
 		font-family: var(--sk-font-ui);
-		font-size: 1.6rem;
-		color: var(--sk-text-1);
+		font-size: var(--sk-font-size-ui-small);
+		color: var(--sk-text-3);
 		line-height: 1;
 	}
 
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 74246bdf02..d66c8f0eda 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -156,14 +156,6 @@ button[disabled] {
 	pointer-events: none;
 }
 
-button > svg {
-	position: relative;
-	top: -0.1rem;
-	width: 2rem !important;
-	height: 2rem !important;
-	stroke: currentColor !important;
-}
-
 .raised {
 	border-radius: var(--sk-border-radius);
 	border-style: solid;