Redesign report form and prevent duplicate reports (#3211)

* Redesign report form and prevent duplicate reports

* Fix lint

* Add malware evidence notice to report form

* Fix lint

packages/ui/src/components/base/RadialHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :style="colorClasses" class="radial-header relative pb-1" v-bind="$attrs">
+    <slot />
+  </div>
+  <div class="radial-header-divider" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
+  }>(),
+  {
+    color: 'brand',
+  },
+)
+
+const colorClasses = computed(
+  () =>
+    `--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
+)
+</script>
+<style scoped lang="scss">
+.radial-header {
+  background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+      90deg,
+      #ffffff00 0%,
+      var(--_radial-border) 50%,
+      #ffffff00 100%
+    );
+    width: 100%;
+    height: 1px;
+    opacity: 0.8;
+  }
+}
+</style>