fixup! fix(talk): add dot badge on main menu when update is available

Author: ShGKme

src/talk/renderer/TitleBar/components/MainMenu.vue

@@ -63,7 +63,11 @@ window.TALK_DESKTOP.checkForUpdate()
 				target="_blank"
 				close-after-click>
 				<template #icon>
-					<UiDotBadge inset-block-start="30%" enabled>
+					<UiDotBadge
+						inset-block-start="32%"
+						inset-inline-end="22%"
+						enabled
+						no-outline>
 						<IconCloudDownloadOutline :size="20" />
 					</UiDotBadge>
 				</template>

src/talk/renderer/TitleBar/components/UiDotBadge.vue

@@ -9,6 +9,7 @@ const {
 	size = '6px',
 	insetBlockStart = '20%',
 	insetInlineEnd = '20%',
+	noOutline = false,
 } = defineProps<{
 	/**
 	 * Whether to show the dot
@@ -28,12 +29,17 @@ const {
 	 * Default is 20%, but due to different icon's shape the perfect position might vary.
 	 */
 	insetInlineEnd?: string
+	/**
+	 * Whether to remove the transparent outline around the dot icon.
+	 * The outline helps to separate the dot from the icon, but may look bad when the dote does not overlap with the icon at all.
+	 */
+	noOutline?: boolean
 }>()
 </script>
 
 <template>
 	<span :class="$style.dotBadge">
-		<span :class="{ [$style.dotBadge__iconWithDotHole]: enabled }">
+		<span :class="{ [$style.dotBadge__iconWithDotHole]: enabled && !noOutline }">
 			<slot />
 		</span>
 		<sup v-if="enabled" :class="[$style.dotBadge__dot]" />