From aa1991239a1255855791f4c5aad9ffcb6b21a2d6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 04:35:40 +1000
Subject: Clean up code in *Button and *Icon components

---
 src/README.md                        |  4 ++--
 src/components/HelpModal.vue         |  8 ++++----
 src/components/RButton.vue           | 16 ----------------
 src/components/SButton.vue           | 17 +++++++++++++++++
 src/components/SettingsModal.vue     |  8 ++++----
 src/components/TutorialPane.vue      | 16 ++++++++--------
 src/components/icon/CloseIcon.vue    |  2 +-
 src/components/icon/HelpIcon.vue     |  2 +-
 src/components/icon/InfoIcon.vue     |  2 +-
 src/components/icon/LogInIcon.vue    |  2 +-
 src/components/icon/PlayIcon.vue     |  4 ++--
 src/components/icon/SearchIcon.vue   |  2 +-
 src/components/icon/SettingsIcon.vue |  2 +-
 13 files changed, 43 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/RButton.vue
 create mode 100644 src/components/SButton.vue

diff --git a/src/README.md b/src/README.md
index a97d23b..65f9a49 100644
--- a/src/README.md
+++ b/src/README.md
@@ -9,8 +9,8 @@
     -   HelpModal.vue:     Modal displaying help info.
     -   AncestryBar.vue:   Displays ancestors of the outermost Tile.
     -   TutorialPane.vue:  Displays tutorial content.
-    -   RButton.vue:       Basic button component.
-    -   IconButton.vue:    Basic button component containing SVG icon.
+    -   SButton.vue:       Simple button component.
+    -   IconButton.vue:    Simple button component containing an SVG icon.
     -   icon:              Contains components that display SVG icons.
 -   lib.ts:    Contains classes/types and utility functions.
 -   layout.ts: Contains code for laying out Tiles.
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 0c536bc..4a6168b 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 
 import {defineComponent, PropType} from 'vue';
-import RButton from './RButton.vue';
+import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {UiOptions} from '../lib';
 
@@ -29,7 +29,7 @@ export default defineComponent({
 			this.$emit('close');
 		},
 	},
-	components: {RButton, CloseIcon, },
+	components: {SButton, CloseIcon, },
 	emits: ['close', 'start-tutorial', ],
 });
 </script>
@@ -60,9 +60,9 @@ export default defineComponent({
 			in culpa qui officia deserunt mollit anim id
 			est laborum.
 		</div>
-		<r-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
+		<s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
 			Start Tutorial
-		</r-button>
+		</s-button>
 	</div>
 </div>
 </template>
diff --git a/src/components/RButton.vue b/src/components/RButton.vue
deleted file mode 100644
index 8086697..0000000
--- a/src/components/RButton.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-
-export default defineComponent({
-	props: {
-		disabled: {type: Boolean, default: false},
-	},
-});
-</script>
-
-<template>
-<button :disabled="disabled"
-	class="block rounded px-4 py-2" :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
-	<slot>A Button</slot>
-</button>
-</template>
diff --git a/src/components/SButton.vue b/src/components/SButton.vue
new file mode 100644
index 0000000..4bb827d
--- /dev/null
+++ b/src/components/SButton.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+
+export default defineComponent({
+	props: {
+		disabled: {type: Boolean, default: false},
+	},
+});
+</script>
+
+<template>
+<button :disabled="disabled"
+	class="block rounded px-4 py-2"
+	:class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
+	<slot>?</slot>
+</button>
+</template>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 34d0043..5c19d60 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 
 import {defineComponent, PropType} from 'vue';
-import RButton from './RButton.vue';
+import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {UiOptions} from '../lib';
 import {LayoutOptions} from '../layout';
@@ -52,7 +52,7 @@ export default defineComponent({
 			this.$emit('setting-chg', setting);
 		},
 	},
-	components: {RButton, CloseIcon, },
+	components: {SButton, CloseIcon, },
 	emits: ['close', 'setting-chg', 'reset', ],
 });
 </script>
@@ -132,10 +132,10 @@ export default defineComponent({
 					@change="onSettingChg('searchJumpMode')"/> Skip search animation </label>
 			</div>
 		</div>
-		<r-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+		<s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
 			@click="$emit('reset')">
 			Reset
-		</r-button>
+		</s-button>
 	</div>
 </div>
 </template>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index fe877ef..243ee33 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 
 import {defineComponent, PropType} from 'vue';
-import RButton from './RButton.vue';
+import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {Action, UiOptions} from '../lib';
 
@@ -99,7 +99,7 @@ export default defineComponent({
 			this.stage += 1;
 		}
 	},
-	components: {CloseIcon, RButton, },
+	components: {CloseIcon, SButton, },
 	emits: ['close', 'stage-chg', 'skip', ],
 });
 </script>
@@ -118,8 +118,8 @@ export default defineComponent({
 			For more project information, click here.
 		</div>
 		<div class="w-full flex justify-evenly mt-2">
-			<r-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</r-button>
-			<r-button :style="buttonStyles" @click="onSkipTutorial">Skip</r-button>
+			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
+			<s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
 		</div>
 	</template>
 	<template v-else>
@@ -154,12 +154,12 @@ export default defineComponent({
 		</div>
 		<!-- Buttons -->
 		<div class="w-full flex justify-evenly mt-2">
-			<r-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
+			<s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
 				Prev
-			</r-button>
-			<r-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
+			</s-button>
+			<s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
 				{{stage != lastStage ? 'Next' : 'Finish'}}
-			</r-button>
+			</s-button>
 		</div>
 	</template>
 </div>
diff --git a/src/components/icon/CloseIcon.vue b/src/components/icon/CloseIcon.vue
index eed0c0f..374b07c 100644
--- a/src/components/icon/CloseIcon.vue
+++ b/src/components/icon/CloseIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<svg viewBox="0 0 24 24" fill="none"
 	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 	<line x1="18" y1="6" x2="6" y2="18"/>
 	<line x1="6" y1="6" x2="18" y2="18"/>
diff --git a/src/components/icon/HelpIcon.vue b/src/components/icon/HelpIcon.vue
index ecd40a0..a85c3ef 100644
--- a/src/components/icon/HelpIcon.vue
+++ b/src/components/icon/HelpIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<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"/>
 	<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
diff --git a/src/components/icon/InfoIcon.vue b/src/components/icon/InfoIcon.vue
index 0a17ce1..44d1cfa 100644
--- a/src/components/icon/InfoIcon.vue
+++ b/src/components/icon/InfoIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<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"/>
 	<line x1="12" y1="16" x2="12" y2="12"/>
diff --git a/src/components/icon/LogInIcon.vue b/src/components/icon/LogInIcon.vue
index bb925b0..8ce94aa 100644
--- a/src/components/icon/LogInIcon.vue
+++ b/src/components/icon/LogInIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<svg viewBox="0 0 24 24" fill="none"
 	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 	<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
 	<polyline points="10 17 15 12 10 7"></polyline>
diff --git a/src/components/icon/PlayIcon.vue b/src/components/icon/PlayIcon.vue
index e885993..f54d203 100644
--- a/src/components/icon/PlayIcon.vue
+++ b/src/components/icon/PlayIcon.vue
@@ -4,8 +4,8 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<svg viewBox="-2 0 24 24" fill="none"
 	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<polygon points="7 3 21 12 7 21 7 3"></polygon>
+	<polygon points="5 3 19 12 5 21 5 3"></polygon>
 </svg>
 </template>
diff --git a/src/components/icon/SearchIcon.vue b/src/components/icon/SearchIcon.vue
index c84c0e4..1418af5 100644
--- a/src/components/icon/SearchIcon.vue
+++ b/src/components/icon/SearchIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<svg viewBox="0 0 24 24" fill="none"
 	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 	<circle cx="11" cy="11" r="8"/>
 	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
diff --git a/src/components/icon/SettingsIcon.vue b/src/components/icon/SettingsIcon.vue
index 2e6f621..e23ba20 100644
--- a/src/components/icon/SettingsIcon.vue
+++ b/src/components/icon/SettingsIcon.vue
@@ -4,7 +4,7 @@ export default defineComponent({});
 </script>
 
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+<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="3"/>
 	<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0
-- 
cgit v1.2.3