From 2815620867a8122f9512195f7d7efe2a406a222e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 23 Jun 2022 23:42:37 +1000
Subject: Make title bar larger, and with colored buttons

---
 src/App.vue                      | 28 ++++++++++++++++++----------
 src/components/icon/PlayIcon.vue |  6 ++----
 2 files changed, 20 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index a622caf..c04003b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -842,17 +842,25 @@ export default defineComponent({
 <template>
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col"
 	:style="{backgroundColor: uiOpts.appBgColor}">
-	<div class="flex bg-black">
-		<h1 class="text-white text-bold px-2">Title</h1>
+	<div class="flex bg-black shadow">
+		<h1 class="text-white px-4 my-auto text-2xl">Tree of Life</h1>
 		<!-- Icons -->
-		<search-icon @click="onSearchIconClick"
-			class="ml-auto mr-[6px] my-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
-		<play-icon @click="onPlayIconClick"
-			class="mr-[6px] my-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
-		<settings-icon @click="onSettingsIconClick"
-			class="mr-[6px] my-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
-		<help-icon @click="onHelpIconClick"
-			class="mr-[6px] my-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer"/>
+		<div class="ml-auto mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100
+			hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onSearchIconClick">
+			<search-icon/>
+		</div>
+		<div class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100
+			hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onPlayIconClick">
+			<play-icon/>
+		</div>
+		<div class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100
+			hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onSettingsIconClick">
+			<settings-icon/>
+		</div>
+		<div class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100
+			hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onHelpIconClick">
+			<help-icon/>
+		</div>
 	</div>
 	<div :style="tutPaneContainerStyles"> <!-- Used to slide-in/out the tutorial pane -->
 		<transition name="fade">
diff --git a/src/components/icon/PlayIcon.vue b/src/components/icon/PlayIcon.vue
index 293c827..e885993 100644
--- a/src/components/icon/PlayIcon.vue
+++ b/src/components/icon/PlayIcon.vue
@@ -4,10 +4,8 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg
-	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
 	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<circle cx="12" cy="12" r="10"/>
-	<polygon points="10 8 16 12 10 16 10 8"/>
+	<polygon points="7 3 21 12 7 21 7 3"></polygon>
 </svg>
 </template>
-- 
cgit v1.2.3