feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/avatar/Avatar.story.vue

@@ -24,14 +24,14 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Invalid or empty SRC">
-      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
         <Avatar name="Bruce Wayne" allow-upload />
       </div>
     </Variant>
 
     <Variant title="Rounded Full">
-      <div class="p-4 bg-white dark:bg-slate-900 space-x-4">
+      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           allow-upload

app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue

@@ -0,0 +1,36 @@
+<script setup>
+import EditableAvatar from './EditableAvatar.vue';
+</script>
+
+<template>
+  <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-white dark:bg-slate-900">
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+          class="bg-ruby-300 dark:bg-ruby-900"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Sizes">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
+          :size="48"
+          class="bg-green-300 dark:bg-green-900"
+        />
+        <EditableAvatar
+          :size="72"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          class="bg-indigo-300 dark:bg-indigo-900"
+        />
+        <EditableAvatar
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          :size="96"
+          class="bg-woot-300 dark:bg-woot-900"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/avatar/EditableAvatar.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 72,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['upload', 'delete']);
+
+const avatarSize = computed(() => `${props.size}px`);
+const iconSize = computed(() => `${props.size / 2}px`);
+
+const fileInput = ref(null);
+const imgError = ref(false);
+
+const shouldShowImage = computed(() => props.src && !imgError.value);
+
+const handleUploadAvatar = () => {
+  fileInput.value.click();
+};
+
+const handleImageUpload = event => {
+  const [file] = event.target.files;
+  if (file) {
+    emit('upload', {
+      file,
+      url: file ? URL.createObjectURL(file) : null,
+    });
+  }
+};
+
+const handleDeleteAvatar = () => {
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  emit('delete');
+};
+
+const handleDismiss = event => {
+  event.stopPropagation();
+  handleDeleteAvatar();
+};
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+    :style="{ width: avatarSize, height: avatarSize }"
+  >
+    <img
+      v-if="shouldShowImage"
+      :src="src"
+      :alt="name || 'avatar'"
+      class="object-cover w-full h-full shadow-sm rounded-xl"
+      @error="imgError = true"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
+    >
+      <FluentIcon
+        icon="building-lucide"
+        icon-lib="lucide"
+        :size="iconSize"
+        class="dark:text-n-brand/50 text-n-brand/30"
+      />
+    </div>
+    <div
+      v-if="src"
+      class="absolute z-20 flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleDismiss"
+    >
+      <FluentIcon icon="dismiss" :size="16" class="text-n-slate-11" />
+    </div>
+    <div
+      class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleUploadAvatar"
+    >
+      <FluentIcon
+        icon="upload-lucide"
+        icon-lib="lucide"
+        :size="iconSize"
+        class="text-white dark:text-white"
+      />
+      <input
+        ref="fileInput"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        class="hidden"
+        @change="handleImageUpload"
+      />
+    </div>
+  </div>
+</template>