diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-23 23:42:37 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-23 23:42:37 +1000 |
| commit | 2815620867a8122f9512195f7d7efe2a406a222e (patch) | |
| tree | 9b82fa4cc76122a4ef8fda91a3e98506008a125f | |
| parent | b77d3f8aa4bfea6f62fc597adf4f36ef13d7e002 (diff) | |
Make title bar larger, and with colored buttons
| -rw-r--r-- | src/App.vue | 28 | ||||
| -rw-r--r-- | src/components/icon/PlayIcon.vue | 6 |
2 files changed, 20 insertions, 14 deletions
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> |