From 670b6a1563ba8bc22d1a2f96ae0704721031260e Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Tue, 26 May 2020 18:02:48 +0200
Subject: [PATCH] fix(ui): adjust loading gryphon sizes and search members
 dropdown

---
 .../components/achievements/login-incentives.vue |  1 +
 .../src/components/groups/membersModal.vue       | 13 -------------
 .../components/members/memberSearchDropdown.vue  | 15 +++++++++++++--
 .../client/src/components/ui/loadingGryphon.vue  | 16 ++++++++++++++--
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/website/client/src/components/achievements/login-incentives.vue b/website/client/src/components/achievements/login-incentives.vue
index 89bfa7da60..eebfb4e1fb 100644
--- a/website/client/src/components/achievements/login-incentives.vue
+++ b/website/client/src/components/achievements/login-incentives.vue
@@ -20,6 +20,7 @@
             class="avatar"
             :member="user"
             :avatar-only="true"
+            :hide-class-badge="true"
             :with-background="true"
           />
         </div>
diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index e6be50bf55..6e7b15f520 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -241,14 +241,6 @@
           </div>
         </div>
       </div>
-      <div class="modal-footer">
-        <button
-          class="btn btn-primary"
-          @click="close()"
-        >
-          {{ $t('close') }}
-        </button>
-      </div>
     </b-modal>
   </div>
 </template>
@@ -261,11 +253,6 @@
       box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
     }
 
-    .modal-footer {
-      background-color: #edecee;
-      border-radius: 0 0 8px 8px;
-    }
-
     .small-text, .character-name {
       color: #878190;
     }
diff --git a/website/client/src/components/members/memberSearchDropdown.vue b/website/client/src/components/members/memberSearchDropdown.vue
index 7f495926cc..df1b55ea79 100644
--- a/website/client/src/components/members/memberSearchDropdown.vue
+++ b/website/client/src/components/members/memberSearchDropdown.vue
@@ -11,11 +11,14 @@
     >
       <input
         v-model="searchTerm"
-        class="form-control"
+        class="form-control member-input"
         type="text"
       >
     </b-dropdown-form>
-    <loading-gryphon v-if="loading" />
+    <loading-gryphon
+      v-if="loading"
+      :height="32"
+    />
     <b-dropdown-item
       v-for="member in memberResults"
       :key="member._id"
@@ -27,6 +30,14 @@
 </template>
 
 <style lang="scss" scoped>
+.create-dropdown ::v-deep form.b-dropdown-form {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.create-dropdown ::v-deep ul.dropdown-menu {
+  width: 100%;
+}
 </style>
 
 <script>
diff --git a/website/client/src/components/ui/loadingGryphon.vue b/website/client/src/components/ui/loadingGryphon.vue
index 6e2d89c513..a9a600830d 100644
--- a/website/client/src/components/ui/loadingGryphon.vue
+++ b/website/client/src/components/ui/loadingGryphon.vue
@@ -3,6 +3,7 @@
     <div
       v-once
       class="svg-icon loading-gryphon"
+      :style="{width: `${width}px`, height: `${height}px`}"
       v-html="icons.gryphon"
     ></div>
   </div>
@@ -18,8 +19,6 @@
   .loading-gryphon {
     color: #6133b4;
     margin: 0 auto;
-    width: 65px;
-    height: 70px;
     animation: pulsate 2s linear infinite;
   }
 
@@ -34,6 +33,12 @@
 import gryphon from '@/assets/svg/gryphon.svg';
 
 export default {
+  props: {
+    height: {
+      type: Number,
+      default: 48,
+    },
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -41,5 +46,12 @@ export default {
       }),
     };
   },
+  computed: {
+    // The original SVG is 70px tall and 64px wide, we calculate the width based on that
+    // in order to keep the right proportions
+    width () {
+      return (this.height / 70) * 64;
+    },
+  },
 };
 </script>