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 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

(limited to 'src/App.vue')

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">
-- 
cgit v1.2.3

