1 files changed, 6 insertions, 20 deletions
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 4ffc811e714..0862f2c0cff 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -1,4 +1,6 @@
 <script>
+import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar_helper';
+
 export default {
   props: {
     entityId: {
@@ -16,26 +18,11 @@ export default {
     },
   },
   computed: {
-    /**
-     * This method is based on app/helpers/avatars_helper.rb#project_identicon
-     */
-    identiconStyles() {
-      const allowedColors = [
-        '#FFEBEE',
-        '#F3E5F5',
-        '#E8EAF6',
-        '#E3F2FD',
-        '#E0F2F1',
-        '#FBE9E7',
-        '#EEEEEE',
-      ];
-
-      const backgroundColor = allowedColors[this.entityId % 7];
-
-      return `background-color: ${backgroundColor}; color: #555;`;
+    identiconBackgroundClass() {
+      return getIdenticonBackgroundClass(this.entityId);
     },
     identiconTitle() {
-      return this.entityName.charAt(0).toUpperCase();
+      return getIdenticonTitle(this.entityName);
     },
   },
 };
@@ -43,8 +30,7 @@ export default {
 
 <template>
   <div
-    :class="sizeClass"
-    :style="identiconStyles"
+    :class="[sizeClass, identiconBackgroundClass]"
     class="avatar identicon">
     {{ identiconTitle }}
   </div>