From c62762852ff1c51d86a3c934947a8fc49dad0e57 Mon Sep 17 00:00:00 2001
From: Allen Lee <allen.lee@asu.edu>
Date: Tue, 22 Feb 2022 14:34:19 -0700
Subject: [PATCH] fix: refactor game manual button style

- use css classes instead of overriding base dom elements
- TODO: some manual margin tuning needed for game manual button to
  vertically center / align properly, need to look into why this is
  happening
---
 client/src/components/game/HUDRightButtons.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/game/HUDRightButtons.vue b/client/src/components/game/HUDRightButtons.vue
index 79e34c98c..50678868e 100644
--- a/client/src/components/game/HUDRightButtons.vue
+++ b/client/src/components/game/HUDRightButtons.vue
@@ -4,6 +4,7 @@
       <button
         v-b-tooltip.hover.top="'Phase Information'"
         :class="buttonClass(view.PhaseInformation)"
+        class="hud-button"
         @click="switchCurrentView(view.PhaseInformation)"
       >
         <font-awesome-icon :icon="['fas', 'info']" class="icon" size="lg" />
@@ -13,14 +14,15 @@
       <button
         v-b-tooltip.hover.top="'Active Events'"
         :class="buttonClass(view.ActiveEvents)"
+        class="hud-button"
         @click="switchCurrentView(view.ActiveEvents)"
       >
         <font-awesome-icon :icon="['fas', 'meteor']" class="icon" size="lg" />
       </button>
     </b-col>
-    <b-col cols="auto" class="ml-auto">
-      <b-button class="float-right" v-b-tooltip.hover.top="'Game Manual'" :to="manual" target="_blank">
-        <font-awesome-icon :icon="['fas', 'question-circle']" class="icon" size="lg" />
+    <b-col cols="3">
+      <b-button class="hud-button" v-b-tooltip.hover.top="'Game Manual'" :to="manual" target="_blank">
+        <font-awesome-icon :icon="['fas', 'question-circle']" class="icon mt-2" size="lg" />
       </b-button>
     </b-col>
   </b-row>
@@ -67,7 +69,7 @@ export default class HUDRightButtons extends Vue {
 </script>
 
 <style lang="scss" scoped>
-button {
+.hud-button {
   @include reset-button;
   height: 3rem;
   width: 3rem;