Adjust info and help modal styling

Fix minor typos in store.ts, App.vue, IconButton, etc

8 files changed, 48 insertions, 28 deletions

diff --git a/src/App.vue b/src/App.vue
index 375882f..c3dbd04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
 	</transition>
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNodeName != null && infoModalData != null"
-			:nodeName="infoModalNodeName" :infoResponse="infoModalData" :tolMap="tolMap"
+			:nodeName="infoModalNodeName" :infoResponse="infoModalData"
 			class="z-10" @close="onInfoClose"/>
 	</transition>
 	<transition name="fade">
diff --git a/src/README.md b/src/README.md
index 5c88b2e..152904f 100644
--- a/src/README.md
+++ b/src/README.md
@@ -14,6 +14,7 @@
     -   **IconButton.vue**:    Simple button component containing an SVG icon.
     -   **SCollapsible.vue**:  Simple collapsible-content component.
     -   **icon**:              Contains components that display SVG icons.
+-   **store.ts**:       App global storage.
 -   **tol.ts**:    Holds types for tree-of-life data.
 -   **layout.ts**: Holds code for laying out tiles.
 -   **lib.ts**:    Holds project-wide globals.
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 7eb2ea2..5ebc36e 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -182,9 +182,10 @@
 						<br/>
 						<h1 class="text-lg font-bold">Keyboard Shortcuts</h1>
 						<ul class="list-disc pl-4">
-							<li>Ctrl-F opens the search bar</li>
-							<li>Ctrl-Shift-F toggles the search animation</li>
-							<li>Esc closes an open pane, and cancels an active search or auto mode</li>
+							<li><span class="font-bold">Ctrl-F</span> opens the search bar</li>
+							<li><span class="font-bold">Ctrl-Shift-F</span> toggles the search animation</li>
+							<li><span class="font-bold">Esc</span> closes an open pane,
+								and cancels an active search or auto mode</li>
 						</ul>
 						<br/>
 						<h1 class="text-lg font-bold">Unusual Node Names</h1>
@@ -419,6 +420,9 @@
 			:disabled="tutOpen" @click.stop="onStartTutorial">
 			Start Tutorial
 		</s-button>
+		<p class="absolute text-xs md:text-sm text-stone-500 right-2 bottom-2">
+			Last updated 28/01/23
+		</p>
 	</div>
 </div>
 </template>
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 9357e97..a897c6f 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,6 +1,6 @@
 <template>
-<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
-	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
+<div :style="styles" class="p-2 rounded-full"
+	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled, 'hover:cursor-pointer': !disabled}">
 	<slot class="w-full h-full">?</slot>
 </div>
 </template>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 2d0e354..52dd1b2 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -18,16 +18,17 @@
 				{{getDisplayName(nodeName, tolNode)}}
 			</h1>
 			<div class="flex justify-evenly text-sm md:text-base">
-				<div> Children: {{(tolNode.children.length).toLocaleString()}} </div>
-				<div> Tips: {{(tolNode.tips).toLocaleString()}} </div>
+				<div><span class="font-bold">Children:</span> {{(tolNode.children.length).toLocaleString()}}</div>
+				<div><span class="font-bold">Tips:</span> {{(tolNode.tips).toLocaleString()}}</div>
 				<div v-if="tolNode.iucn != null">
 					<a href="https://en.wikipedia.org/wiki/Endangered_species_(IUCN_status)"
-						target="_blank" title="IUCN Conservation Status">IUCN</a>:
+						target="_blank" title="IUCN Conservation Status" class="font-bold">IUCN: </a>
 					<span :style="iucnStyles(tolNode.iucn)">{{getDisplayIucn(tolNode.iucn)}}</span>
 				</div>
 				<div>
 					<a :href="'https://tree.opentreeoflife.org/opentree/argus/opentree13.4@' + tolNode.otolId"
-						target="_blank" title="Look up in Open Tree of Life">OTOL <external-link-icon class="inline-block w-3 h-3"/></a>
+						target="_blank" title="Look up in Open Tree of Life" class="font-bold">OTOL
+						<external-link-icon class="inline-block w-3 h-3"/></a>
 				</div>
 			</div>
 			<div v-if="nodes.length > 1" class="text-center text-sm px-2">
@@ -60,34 +61,35 @@
 							<ul class="rounded shadow overflow-x-auto p-1"
 								:style="{backgroundColor: store.color.bg, color: store.color.text}">
 								<li v-if="imgInfos[idx]!.url != ''">
-									<span :style="{color: store.color.alt}">Source: </span>
-									<a :href="imgInfos[idx]!.url" target="_blank">Link</a>
+									<span :style="sourceLabelStyles">Source: </span>
+									<a :href="imgInfos[idx]!.url" target="_blank" :style="aStyles">Link</a>
 									<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 								</li>
 								<li v-if="imgInfos[idx]!.artist != ''" class="whitespace-nowrap">
-									<span :style="{color: store.color.alt}">Artist: </span>
+									<span :style="sourceLabelStyles">Artist: </span>
 									{{imgInfos[idx]!.artist}}
 								</li>
 								<li v-if="imgInfos[idx]!.credit != ''" class="whitespace-nowrap">
-									<span :style="{color: store.color.alt}">Credits: </span>
+									<span :style="sourceLabelStyles">Credits: </span>
 									{{imgInfos[idx]!.credit}}
 								</li>
 								<li>
-									<span :style="{color: store.color.alt}">License: </span>
-									<a :href="licenseToUrl(imgInfos[idx]!.license)" target="_blank">
+									<span :style="sourceLabelStyles">License: </span>
+									<a :href="licenseToUrl(imgInfos[idx]!.license)" target="_blank" :style="aStyles">
 										{{imgInfos[idx]!.license}}
 									</a>
 									<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 								</li>
 								<li v-if="imgInfos[idx]!.src != 'picked'">
-									<span :style="{color: store.color.alt}">Obtained via: </span>
-									<a v-if="imgInfos[idx]!.src == 'eol'" href="https://eol.org/">EoL</a>
-									<a v-else href="https://www.wikipedia.org/">Wikipedia</a>
+									<span :style="sourceLabelStyles">Obtained via: </span>
+									<a v-if="imgInfos[idx]!.src == 'eol'" href="https://eol.org/"
+										:style="aStyles">EoL</a>
+									<a v-else href="https://www.wikipedia.org/" :style="aStyles">Wikipedia</a>
 									<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 								</li>
 								<li>
-									<span :style="{color: store.color.alt}">Changes: </span>
-									Cropped and resized
+									<span :style="sourceLabelStyles">Changes: </span>
+									Cropped &amp; resized
 								</li>
 							</ul>
 						</template>
@@ -95,7 +97,7 @@
 				</div>
 				<div v-if="descInfos[idx]! != null">
 					<div>{{descInfos[idx]!.text}}</div>
-					<div class="text-sm text-right">
+					<div class="text-sm text-stone-600 text-right">
 						<a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId"
 							target="_blank">From Wikipedia</a>
 						<external-link-icon class="inline-block w-3 h-3 ml-1"/>
@@ -260,6 +262,15 @@ function getImgStyles(tolNode: TolNode | null): Record<string,string> {
 		boxShadow: store.shadowNormal,
 	};
 }
+const sourceLabelStyles = computed((): Record<string,string> => {
+	return {
+		color: store.color.textDark,
+		fontWeight: 'bold',
+	};
+});
+const aStyles = computed((): Record<string,string> => ({
+	color: store.color.alt,
+}));
 function iucnStyles(iucn: string): Record<string,string>{
 	let col = 'currentcolor';
 	switch (iucn){
diff --git a/src/components/TolTile.vue b/src/components/TolTile.vue
index 1f6e1d3..99aa4e1 100644
--- a/src/components/TolTile.vue
+++ b/src/components/TolTile.vue
@@ -32,7 +32,7 @@
 				<info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
 					@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
 			</div>
-			<transition name="fadein">
+			<transition name="fadeout">
 				<div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70 z-20"/>
 			</transition>
 		</div>
@@ -42,7 +42,7 @@
 			@leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld"
 			@info-click="onInnerInfoIconClick"/>
 	</div>
-	<transition name="fadein">
+	<transition name="fadeout">
 		<div v-if="inFlash" :style="{top: scrollOffset + 'px'}"
 			class="absolute w-full h-full left-0 rounded-[inherit] bg-amber-500/70"/>
 	</transition>
@@ -226,7 +226,9 @@ const pendingScrollHdlr = ref(0); // Used for throttling updating of scrollOffse
 function onScroll(): void {
 	if (pendingScrollHdlr.value == 0){
 		pendingScrollHdlr.value = setTimeout(() => {
-			scrollOffset.value = rootRef.value!.scrollTop;
+			if (rootRef.value != null){
+				scrollOffset.value = rootRef.value!.scrollTop;
+			}
 			pendingScrollHdlr.value = 0;
 		}, store.animationDelay);
 	}
diff --git a/src/index.css b/src/index.css
index 8e8b70f..9ed4bc5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,10 +25,10 @@
 	transition-duration: 1000ms;
 	transition-timing-function: linear;
 }
-.fadein-leave-to {
+.fadeout-leave-to {
 	opacity: 0;
 }
-.fadein-leave-active {
+.fadeout-leave-active {
 	transition-property: opacity;
 	transition-duration: 300ms;
 	transition-timing-function: ease-out;
diff --git a/src/store.ts b/src/store.ts
index 00892b7..7cc8f55 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -26,6 +26,7 @@ export type StoreState = {
 	// Coloring
 	color: {
 		text: string, // CSS color
+		textDark: string,
 		textAlt: string,
 		bg: string,
 		bgLight: string,
@@ -66,6 +67,7 @@ function getDefaultState(): StoreState {
 	const tileSpacing = breakpoint == 'sm' ? 6 : 9;
 	const color = { // Note: For scrollbar colors on chrome, edit ./index.css
 		text: '#fafaf9',      // stone-50
+		textDark: '#a8a29e',  // stone-400
 		textAlt: '#1c1917',   // stone-900
 		bg: '#292524',        // stone-800
 		bgLight: '#44403c',   // stone-700
@@ -216,7 +218,7 @@ export const useStore = defineStore('store', {
 			const defaultState = getDefaultState();
 			for (const key of STORE_COMP_KEYS){
 				const defaultVal = getStoreVal(defaultState, key);
-				if (getStoreVal(this, key) != defaultState && localStorage.getItem(key) == null){
+				if (getStoreVal(this, key) != defaultVal && localStorage.getItem(key) == null){
 					setStoreVal(this, key, defaultVal)
 				}
 			}