From a1c5e2017ef80d360cc0d08ae73437ce32766c6e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 25 Jun 2022 00:33:32 +1000
Subject: Convert UI options towards using bg/alt-color set

---
 src/App.vue | 43 ++++++++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 877ad2c..063f5ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,34 +57,37 @@ function getDefaultLytOpts(): LayoutOptions {
 }
 function getDefaultUiOpts(){
 	let screenSz = getBreakpoint();
-	let bgColor = '#292524', bgLight1 = '#44403c', bgLight2 = '#57534e', bgDark1 = '#1c1917', bgDark2 = '#0e0c0b';
+	let bgColorLight = '#44403c', altColor = '#a3e623';
 	return {
 		// Shared styling
+		textColor: '#fafaf9',
+		bgColor: '#292524',
+		bgColorLight,
+		bgColorDark: '#1c1917',
+		bgColorLight2: '#57534e',
+		bgColorDark2: '#0e0c0b',
+		altColor,
+		altColorDark: '#65a30d',
 		borderRadius: 5, // px
 		shadowNormal: '0 0 2px black',
-		shadowHovered: '0 0 1px 2px greenyellow',
+		shadowHovered: '0 0 1px 2px' + altColor,
 		shadowFocused: '0 0 1px 2px orange',
 		// Styling for App
-		appBgColor: bgColor,
-		titleBarBgColor: bgDark2,
 		mainTileMargin: screenSz == 'sm' ? 6 : 10, // px
 		// Styling for tiles
-		textColor: '#fafaf9',
-		childQtyColors: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
+		childQtyColors: [[1, altColor], [10, 'orange'], [100, 'red']],
 		infoIconSz: 18, // px
 		infoIconMargin: 2, // px
 		leafPadding: 4, // px
 		leafHeaderFontSz: 15, // px
-		nonleafBgColors: [bgLight1, bgLight2],
+		nonleafBgColors: ['#44403c', '#57534e'],
 		nonleafHeaderFontSz: 15, // px
-		nonleafHeaderBgColor: bgDark1,
 		// Styling for other components
 		infoModalImgSz: 200, // px
-		ancestryBarBgColor: 'transparent',
+		ancestryBarBgColor: bgColorLight,
 		ancestryBarImgSz: 100, // px
 		ancestryTileGap: 5, // px
 		tutPaneSz: 200, // px
-		tutPaneBgColor: bgDark1,
 		// Timing related
 		clickHoldDuration: 400, // ms
 		transitionDuration: 300, // ms
@@ -160,6 +163,12 @@ export default defineComponent({
 			}
 			return ancestors.reverse();
 		},
+		iconButtonStyles(): Record<string,string> {
+			return {
+				color: this.uiOpts.textColor,
+				backgroundColor: this.uiOpts.altColorDark,
+			};
+		},
 		tutPaneContainerStyles(): Record<string,string> {
 			return {
 				minHeight: (this.tutorialOpen ? this.uiOpts.tutPaneSz : 0) + 'px',
@@ -918,24 +927,24 @@ 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 shadow" :style="{backgroundColor: uiOpts.titleBarBgColor}">
-		<h1 class="text-lime-500 px-4 my-auto text-2xl">Tree of Life</h1>
+	:style="{backgroundColor: uiOpts.bgColor}">
+	<div class="flex shadow" :style="{backgroundColor: uiOpts.bgColorDark2}">
+		<h1 class="px-4 my-auto text-2xl" :style="{color: uiOpts.altColor}">Tree of Life</h1>
 		<!-- Icons -->
 		<icon-button v-if="!uiOpts.disabledActions.has('search')"
-			class="ml-auto mr-2 my-2 bg-lime-600 text-lime-100" @click="onSearchIconClick">
+			class="ml-auto mr-2 my-2" :style="iconButtonStyles" @click="onSearchIconClick">
 			<search-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('autoMode')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onPlayIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onPlayIconClick">
 			<play-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('settings')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onSettingsIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onSettingsIconClick">
 			<settings-icon/>
 		</icon-button>
 		<icon-button v-if="!uiOpts.disabledActions.has('help')"
-			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onHelpIconClick">
+			class="mr-2 my-2" :style="iconButtonStyles" @click="onHelpIconClick">
 			<help-icon/>
 		</icon-button>
 	</div>
-- 
cgit v1.2.3

