feat: add update notification component with download and install functionality

src/app/components/update-notification/UpdateNotification.css.ts

@@ -0,0 +1,76 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const CheckButton = style({
+  all: 'unset',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: config.space.S200,
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  color: color.Secondary.Main,
+  backgroundColor: 'transparent',
+  transition: 'background-color 0.15s',
+  minWidth: toRem(32),
+  minHeight: toRem(32),
+  opacity: 0.7,
+
+  ':hover': {
+    backgroundColor: color.Surface.ContainerHover,
+    opacity: 1,
+  },
+
+  ':active': {
+    backgroundColor: color.Surface.ContainerActive,
+  },
+
+  ':focus-visible': {
+    outline: `2px solid ${color.Secondary.Main}`,
+    outlineOffset: '2px',
+  },
+});
+
+export const UpdateButton = style({
+  all: 'unset',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: config.space.S200,
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  color: color.Success.Main,
+  backgroundColor: 'transparent',
+  transition: 'background-color 0.15s',
+  minWidth: toRem(32),
+  minHeight: toRem(32),
+
+  ':hover': {
+    backgroundColor: color.Surface.ContainerHover,
+  },
+
+  ':active': {
+    backgroundColor: color.Surface.ContainerActive,
+  },
+
+  ':focus-visible': {
+    outline: `2px solid ${color.Success.Main}`,
+    outlineOffset: '2px',
+  },
+});
+
+export const UpdateMenu = style({
+  minWidth: toRem(280),
+  maxWidth: toRem(320),
+  backgroundColor: color.Surface.Container,
+  borderRadius: config.radii.R400,
+  boxShadow: config.shadow.E400,
+  border: `1px solid ${color.Surface.ContainerLine}`,
+});
+
+export const ProgressText = style({
+  color: color.Success.Main,
+  fontWeight: 500,
+  minWidth: toRem(35),
+  textAlign: 'center',
+});