From 5b3f8d8c173c6e9a83ddf943876674904ea7f24b Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 7 Apr 2024 13:29:14 +1200
Subject: [PATCH] Improved video action button styling

---
 .../src/routes/watch/[slug]/+page.svelte      | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 230ca5e1..cbfaa312 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -262,9 +262,9 @@
 						{/if}
 					</nav>
 				</div>
-				<div class="s12 m12 l4 video-actions">
+				<div class="s12 m12 l7 video-actions">
 					{#if data.returnYTDislikes}
-						<nav class="no-space no-margin" style="margin-right: .5em;">
+						<nav class="no-space" style="margin-right: .5em;">
 							<button style="cursor: default;" class="border left-round">
 								<i class="small">thumb_up</i>
 								<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
@@ -275,17 +275,10 @@
 							</button>
 						</nav>
 					{/if}
-				</div>
-
-				<div class="s12 m12 l3 video-actions">
-					<button
-						class="no-margin"
-						on:click={() => (audioMode = !audioMode)}
-						class:border={!audioMode}
-					>
+					<button on:click={() => (audioMode = !audioMode)} class:border={!audioMode}>
 						<i>headphones</i>
 					</button>
-					<button class="border" style="margin-right: 0;"
+					<button class="border"
 						><i>share</i>
 						<menu class="no-wrap">
 							<a
@@ -318,7 +311,7 @@
 							></menu
 						></button
 					>
-					{#if data.downloadOptions}
+					{#if data.downloadOptions.length > 0}
 						<button class="border"
 							><i>download</i>
 							<menu class="no-wrap">
@@ -331,7 +324,7 @@
 						>
 					{/if}
 					{#if data.personalPlaylists}
-						<button class="border no-margin">
+						<button class="border">
 							<i>add</i>
 							<menu>
 								{#each data.personalPlaylists as personalPlaylist}
@@ -470,6 +463,10 @@
 		justify-content: flex-end;
 	}
 
+	.video-actions button:not(.left-round):not(.right-round) {
+		margin: 0.3em;
+	}
+
 	@media screen and (max-width: 1000px) {
 		.video-actions {
 			justify-content: flex-start;