feat: implement a What's New prompt (#539)

* feat: create whats new initial component

* feat: create initial whats-new hook

* feat: create whats-new story

* feat: add button to open dialog in storybook

* feat: complete popup ui

* feat: add check for new updates or installs

* fix: fix linter issues

* fix: use proper features and add video

* fix: properly fetch version from manifest

* feat: add a link to open the popup

* fix: update spacing and features' content

* fix: update UTRP Map name

* fix: increase icon size and display version correctly

* feat: update the features video

* fix: update offwhite color

* fix: color typo

* fix: fixing colors again

* feat: use numbers instead of boolean

* fix: typo in import

* feat: add type safety to features array

* feat: cdn video url

* fix: delete mp4 video

* feat: handle video failure to load

* fix: make border outline tight to video

* feat: make design responsive

* fix: make features array readonly

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Derek Chen <derex1987@gmail.com>

src/stories/components/WhatsNewPopup.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@views/components/common/Button';
+import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
+import WhatsNewPopup from '@views/components/common/WhatsNewPopup';
+import useWhatsNewPopUp from '@views/hooks/useWhatsNew';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/WhatsNewPopup',
+    component: WhatsNewPopup,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+} satisfies Meta<typeof WhatsNewPopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: () => (
+        <DialogProvider>
+            <InnerComponent />
+        </DialogProvider>
+    ),
+};
+
+const InnerComponent = () => {
+    const handleOnClick = useWhatsNewPopUp();
+
+    return (
+        <Button color='ut-burntorange' onClick={handleOnClick}>
+            Open Dialog
+        </Button>
+    );
+};