fix(ui): adjust loading gryphon sizes and search members dropdown

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>

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;
     }

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>

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>