Add IconButton component

2 files changed, 30 insertions, 17 deletions

diff --git a/src/App.vue b/src/App.vue
index 92607ad..33f09f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import SettingsModal from './components/SettingsModal.vue';
 import HelpModal from './components/HelpModal.vue';
 import AncestryBar from './components/AncestryBar.vue';
 import TutorialPane from './components/TutorialPane.vue';
+import IconButton from './components/IconButton.vue';
 // Icons
 import SearchIcon from './components/icon/SearchIcon.vue';
 import PlayIcon from './components/icon/PlayIcon.vue';
@@ -911,7 +912,7 @@ export default defineComponent({
 	},
 	components: {
 		Tile, AncestryBar,
-		HelpIcon, SettingsIcon, SearchIcon, PlayIcon,
+		IconButton, HelpIcon, SettingsIcon, SearchIcon, PlayIcon,
 		TileInfoModal, HelpModal, SearchModal, SettingsModal, TutorialPane,
 	},
 });
@@ -923,26 +924,22 @@ export default defineComponent({
 	<div class="flex shadow" :style="{backgroundColor: uiOpts.titleBarBgColor}">
 		<h1 class="text-lime-500 px-4 my-auto text-2xl">Tree of Life</h1>
 		<!-- Icons -->
-		<div v-if="!uiOpts.disabledActions.has('search')"
-			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">
+		<icon-button v-if="!uiOpts.disabledActions.has('search')"
+			class="ml-auto mr-2 my-2 bg-lime-600 text-lime-100" @click="onSearchIconClick">
 			<search-icon/>
-		</div>
-		<div v-if="!uiOpts.disabledActions.has('autoMode')"
-			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">
+		</icon-button>
+		<icon-button v-if="!uiOpts.disabledActions.has('autoMode')"
+			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onPlayIconClick">
 			<play-icon/>
-		</div>
-		<div v-if="!uiOpts.disabledActions.has('settings')"
-			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">
+		</icon-button>
+		<icon-button v-if="!uiOpts.disabledActions.has('settings')"
+			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onSettingsIconClick">
 			<settings-icon/>
-		</div>
-		<div v-if="!uiOpts.disabledActions.has('help')"
-			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">
+		</icon-button>
+		<icon-button v-if="!uiOpts.disabledActions.has('help')"
+			class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onHelpIconClick">
 			<help-icon/>
-		</div>
+		</icon-button>
 	</div>
 	<div :style="tutPaneContainerStyles"> <!-- Used to slide-in/out the tutorial pane -->
 		<transition name="fade" @after-enter="tutPaneTransitionEnd" @after-leave="tutPaneTransitionEnd">
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
new file mode 100644
index 0000000..7ce5da4
--- /dev/null
+++ b/src/components/IconButton.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+
+export default defineComponent({
+	props: {
+		disabled: {type: Boolean, default: false},
+	},
+});
+</script>
+
+<template>
+<div class="w-9 h-9 p-2 rounded-full hover:cursor-pointer"
+	:class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
+	<slot class="w-full h-full">?</slot>
+</div>
+</template>