Update push preview to look like a mobile device

src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte

@@ -8,7 +8,9 @@
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
         <Heading tag="h6" size="7">Preview</Heading>
-        <PushPhone title={$message.data.title} body={$message.data.body} />
+        <div class="u-flex u-main-center u-margin-block-start-24 u-width-full-line">
+            <PushPhone title={$message.data.title} body={$message.data.body} />
+        </div>
     </div>
     <svelte:fragment slot="aside">
         <FormList>

src/routes/console/project-[project]/messaging/pushPhone.svelte

@@ -1,16 +1,73 @@
 <script lang="ts">
+    import { project } from '../store';
+
     export let title = '';
     export let body = '';
+    export let classes = '';
 </script>
 
-<!-- TODO: Style to look like a push notification -->
-<div class="phone card is-only-desktop">
-    <p class="body-text-1 u-bold">{title}</p>
-    <p class="body-text-2">{body}</p>
+<div class="phone {classes}">
+    <div
+        class="u-flex u-flex-vertical card u-margin-inline-start-24 u-margin-inline-end-24 u-gap-8">
+        <div class="u-flex u-main-space-between header">
+            <div class="u-flex u-gap-4 u-cross-center">
+                <span class="u-icon icon-bell u-line-height-1" /><span class=""
+                    >{$project.name}</span>
+            </div>
+            <div class="u-flex u-cross-center">now</div>
+        </div>
+        <div>
+            <p class="body-text-1 u-small u-bold">{title || 'Message Title'}</p>
+            <p class="body-text-2 u-x-small">
+                {body || 'Enter your message in the input field on the left to see it here'}
+            </p>
+        </div>
+    </div>
 </div>
 
 <style lang="scss">
     .phone {
-        inline-size: calc(320 * 1rem / 16);
+        width: 320px;
+        height: 539px;
+        background-image: url('./push-notification-preview-light.svg');
+        background-repeat: no-repeat;
+        padding-top: 197px;
+        --p-body-text-color: hsl(var(--color-neutral-120));
+
+        .card {
+            position: relative;
+            width: 329px;
+            --card-padding: 1rem;
+
+            .header {
+                --p-body-text-color: hsl(var(--color-neutral-100));
+
+                .icon-bell {
+                    --p-body-text-color: hsl(var(--color-neutral-50));
+                }
+            }
+        }
+    }
+
+    :global(.theme-dark) .phone {
+        background-image: url('./push-notification-preview-dark.svg');
+
+        .card {
+            --p-card-bg-color: 240, 3%, 14%, 0.9;
+
+            .header {
+                .icon-bell {
+                    --p-body-text-color: hsl(var(--color-neutral-150));
+                }
+            }
+
+            .body-text-1 {
+                --p-body-text-color: #e4e4e7;
+            }
+
+            .body-text-2 {
+                --p-body-text-color: #adadb0;
+            }
+        }
     }
 </style>

src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte

@@ -97,7 +97,7 @@
 </script>
 
 <div class="u-flex u-gap-24">
-    <FormList class="u-stretch">
+    <FormList class="u-stretch u-cross-child-start">
         <InputText
             id="title"
             label="Title"
@@ -239,5 +239,12 @@
     </FormList>
     <PushPhone
         title={$messageParams[$providerType]['title']}
-        body={$messageParams[$providerType]['body']} />
+        body={$messageParams[$providerType]['body']}
+        classes="is-only-desktop" />
+</div>
+<div class="u-flex u-main-center u-margin-block-start-24">
+    <PushPhone
+        title={$messageParams[$providerType]['title']}
+        body={$messageParams[$providerType]['body']}
+        classes="is-not-desktop" />
 </div>