From f27e1501d03da36ea63ce0ed047b4aff102683a6 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 9 Aug 2020 23:23:31 -0500
Subject: [PATCH] fix character list button styling, title attr instead of
 popover

---
 client/src/components/CharacterList.vue | 48 ++++++++++++++++++-------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index 5a35da3..d699ba6 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -1,16 +1,13 @@
 <template>
-    <b-container v-if="characters" :fluid=true>
-        <b-row cols="12">
-            <b-col sm="1" v-for="character in characters" :key="character.name">
-                <b-button squared class="mx-1" variant="dark" size="sm" :id="`character-${character.id}`">
-                    {{ character.name }}
-                </b-button>
-                <b-popover boundary-padding="2" :target="`character-${character.id}`" triggers="hover" placement="top"
-                           :content="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`">
-                </b-popover>
-            </b-col>
-        </b-row>
-    </b-container>
+    <div class="pt-2" v-if="characters" :fluid=true>
+        <b-button squared class="mx-2 my-1 character-button" size="sm"
+                  v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
+                  :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
+        >
+            {{ character.name }}
+            <b-badge class="ml-1">{{ character.appearances}}</b-badge>
+        </b-button>
+    </div>
 </template>
 
 <style lang="scss">
@@ -20,6 +17,33 @@
         &:focus { box-shadow: none; }
     }
 
+    .character-button {
+        background-color: #292929;
+        border-color: #1d1d1d;
+    }
+
+    .character-button {
+        &:focus {
+            background-color: #292929 !important;
+            border-color: #1d1d1d !important;
+            &:active { box-shadow: none !important;}
+        }
+
+        &:hover {
+            background-color: #1d1d1d  !important;
+            border-color: #161616 !important;
+        }
+
+        &:active {
+            background-color: #1d1d1d !important;
+            border-color: #161616 !important;
+        }
+    }
+
+    .character-button > .badge {
+        background-color: #565656;
+    }
+
     /*.btn-dark {*/
     /*    &:not(:disabled), &:not {*/
     /*        */