tighten up playground buttons (#303)

Author: Rich-Harris

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -168,7 +168,7 @@
 		flex-direction: column;
 
 		@media (min-width: 800px) {
-			--app-controls-h: 4.4rem;
+			--app-controls-h: 4.8rem;
 		}
 	}
 

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;
 	}
 

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;