From 26db45d3dc37d09d49a7270fbcd32a148a226b2a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:21:14 +0100
Subject: [PATCH] Update push preview to look like a mobile device

---
 .../message-[message]/pushPreview.svelte      |  4 +-
 .../push-notification-preview-dark.svg        | 36 ++++++++++
 .../push-notification-preview-light.svg       | 35 ++++++++++
 .../messaging/pushPhone.svelte                | 67 +++++++++++++++++--
 .../messaging/wizard/pushFormList.svelte      | 11 ++-
 5 files changed, 145 insertions(+), 8 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/push-notification-preview-dark.svg
 create mode 100644 src/routes/console/project-[project]/messaging/push-notification-preview-light.svg

diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
index e632394d5..b5695ed3f 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/push-notification-preview-dark.svg b/src/routes/console/project-[project]/messaging/push-notification-preview-dark.svg
new file mode 100644
index 000000000..777dec267
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/push-notification-preview-dark.svg
@@ -0,0 +1,36 @@
+<svg width="352" height="529" viewBox="0 0 352 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_7_28" fill="white">
+<path d="M0 64C0 28.6538 28.6538 0 64 0H256C291.346 0 320 28.6538 320 64V529H0V64Z"/>
+</mask>
+<path d="M0 64C0 28.6538 28.6538 0 64 0H256C291.346 0 320 28.6538 320 64V529H0V64Z" fill="url(#paint0_linear_7_28)"/>
+<path d="M-1.25 64C-1.25 27.9634 27.9634 -1.25 64 -1.25H256C292.037 -1.25 321.25 27.9634 321.25 64H318.75C318.75 29.3441 290.656 1.25 256 1.25H64C29.3441 1.25 1.25 29.3441 1.25 64H-1.25ZM320 529H0H320ZM-1.25 529V64C-1.25 27.9634 27.9634 -1.25 64 -1.25V1.25C29.3441 1.25 1.25 29.3441 1.25 64V529H-1.25ZM256 -1.25C292.037 -1.25 321.25 27.9634 321.25 64V529H318.75V64C318.75 29.3441 290.656 1.25 256 1.25V-1.25Z" fill="url(#paint1_linear_7_28)" fill-opacity="0.08" mask="url(#path-1-inside-1_7_28)"/>
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V529H7V65Z" fill="url(#paint2_linear_7_28)"/>
+<path d="M114.024 214.504C108.368 214.504 103.748 213.02 100.164 210.052C96.58 207.084 94.452 203.024 93.78 197.872H102.936C103.608 200.616 104.924 202.8 106.884 204.424C108.844 205.992 111.364 206.776 114.444 206.776C118.98 206.776 122.48 204.984 124.944 201.4C127.408 197.76 128.64 192.86 128.64 186.7C128.64 185.86 128.612 185.076 128.556 184.348C128.5 184.404 128.388 184.656 128.22 185.104C128.052 185.496 127.884 185.832 127.716 186.112C126.372 188.632 124.384 190.62 121.752 192.076C119.176 193.476 116.18 194.176 112.764 194.176C106.884 194.176 102.096 192.384 98.4 188.8C94.76 185.216 92.94 180.456 92.94 174.52C92.94 168.752 94.9 164.02 98.82 160.324C102.74 156.572 107.808 154.696 114.024 154.696C121.808 154.696 127.8 157.776 132 163.936C135.472 169.256 137.208 176.004 137.208 184.18C137.208 193.644 135.164 201.064 131.076 206.44C127.044 211.816 121.36 214.504 114.024 214.504ZM113.94 186.616C117.524 186.616 120.436 185.496 122.676 183.256C124.916 180.96 126.036 177.992 126.036 174.352C126.036 170.824 124.916 167.94 122.676 165.7C120.492 163.46 117.636 162.34 114.108 162.34C110.58 162.34 107.724 163.488 105.54 165.784C103.356 168.024 102.264 170.936 102.264 174.52C102.264 178.048 103.328 180.96 105.456 183.256C107.584 185.496 110.412 186.616 113.94 186.616ZM143.727 182.416C142.663 181.352 142.131 179.98 142.131 178.3C142.131 176.62 142.663 175.248 143.727 174.184C144.847 173.12 146.247 172.588 147.927 172.588C149.607 172.588 151.007 173.12 152.127 174.184C153.247 175.248 153.807 176.62 153.807 178.3C153.807 179.98 153.247 181.352 152.127 182.416C151.007 183.48 149.607 184.012 147.927 184.012C146.247 184.012 144.847 183.48 143.727 182.416ZM143.727 212.908C142.663 211.844 142.131 210.472 142.131 208.792C142.131 207.112 142.663 205.74 143.727 204.676C144.847 203.612 146.247 203.08 147.927 203.08C149.607 203.08 151.007 203.612 152.127 204.676C153.247 205.74 153.807 207.112 153.807 208.792C153.807 210.472 153.247 211.844 152.127 212.908C151.007 213.972 149.607 214.504 147.927 214.504C146.247 214.504 144.847 213.972 143.727 212.908ZM155.644 200.392V192.496L183.952 155.2H194.872V192.328H203.776V200.392H194.872V214H185.716V200.392H155.644ZM185.716 165.364L165.22 192.328H185.716V165.364ZM214.064 161.164V155.2H223.22V214H213.896V173.68C213.056 174.184 211.824 174.436 210.2 174.436H200.624V166.456H209.78C212.636 166.456 214.064 164.692 214.064 161.164Z" fill="#ADADB0" fill-opacity="0.08"/>
+<path d="M98.7727 134.273C98.7045 133.697 98.428 133.25 97.9432 132.932C97.4583 132.614 96.8636 132.455 96.1591 132.455C95.6439 132.455 95.1932 132.538 94.8068 132.705C94.4242 132.871 94.125 133.1 93.9091 133.392C93.697 133.684 93.5909 134.015 93.5909 134.386C93.5909 134.697 93.6648 134.964 93.8125 135.188C93.964 135.407 94.1572 135.591 94.392 135.739C94.6269 135.883 94.8731 136.002 95.1307 136.097C95.3883 136.187 95.625 136.261 95.8409 136.318L97.0227 136.636C97.3258 136.716 97.6629 136.826 98.0341 136.966C98.4091 137.106 98.767 137.297 99.108 137.54C99.4527 137.778 99.7367 138.085 99.9602 138.46C100.184 138.835 100.295 139.295 100.295 139.841C100.295 140.47 100.131 141.038 99.8011 141.545C99.4754 142.053 98.9981 142.456 98.3693 142.756C97.7443 143.055 96.9848 143.205 96.0909 143.205C95.2576 143.205 94.536 143.07 93.9261 142.801C93.3201 142.532 92.8428 142.157 92.4943 141.676C92.1496 141.195 91.9545 140.636 91.9091 140H93.3636C93.4015 140.439 93.5492 140.803 93.8068 141.091C94.0682 141.375 94.3977 141.587 94.7955 141.727C95.197 141.864 95.6288 141.932 96.0909 141.932C96.6288 141.932 97.1117 141.845 97.5398 141.67C97.9678 141.492 98.3068 141.246 98.5568 140.932C98.8068 140.614 98.9318 140.242 98.9318 139.818C98.9318 139.432 98.8239 139.117 98.608 138.875C98.392 138.633 98.108 138.436 97.7557 138.284C97.4034 138.133 97.0227 138 96.6136 137.886L95.1818 137.477C94.2727 137.216 93.553 136.843 93.0227 136.358C92.4924 135.873 92.2273 135.239 92.2273 134.455C92.2273 133.803 92.4034 133.235 92.7557 132.75C93.1117 132.261 93.589 131.883 94.1875 131.614C94.7898 131.341 95.4621 131.205 96.2045 131.205C96.9545 131.205 97.6212 131.339 98.2045 131.608C98.7879 131.873 99.25 132.237 99.5909 132.699C99.9356 133.161 100.117 133.686 100.136 134.273H98.7727ZM107.858 139.432V134.273H109.199V143H107.858V141.523H107.767C107.563 141.966 107.245 142.343 106.813 142.653C106.381 142.96 105.836 143.114 105.177 143.114C104.631 143.114 104.146 142.994 103.722 142.756C103.298 142.513 102.964 142.15 102.722 141.665C102.48 141.176 102.358 140.561 102.358 139.818V134.273H103.699V139.727C103.699 140.364 103.877 140.871 104.233 141.25C104.593 141.629 105.052 141.818 105.608 141.818C105.942 141.818 106.281 141.733 106.625 141.562C106.974 141.392 107.266 141.131 107.5 140.778C107.739 140.426 107.858 139.977 107.858 139.432ZM112.924 137.75V143H111.583V134.273H112.879V135.636H112.992C113.197 135.193 113.508 134.837 113.924 134.568C114.341 134.295 114.879 134.159 115.538 134.159C116.129 134.159 116.646 134.28 117.089 134.523C117.532 134.761 117.877 135.125 118.123 135.614C118.369 136.098 118.492 136.712 118.492 137.455V143H117.151V137.545C117.151 136.86 116.973 136.326 116.617 135.943C116.261 135.557 115.773 135.364 115.151 135.364C114.723 135.364 114.341 135.456 114.004 135.642C113.67 135.828 113.407 136.098 113.214 136.455C113.021 136.811 112.924 137.242 112.924 137.75ZM124.166 143.182C123.439 143.182 122.797 142.998 122.24 142.631C121.683 142.259 121.248 141.737 120.933 141.062C120.619 140.384 120.462 139.583 120.462 138.659C120.462 137.742 120.619 136.947 120.933 136.273C121.248 135.598 121.685 135.078 122.246 134.71C122.806 134.343 123.454 134.159 124.189 134.159C124.757 134.159 125.206 134.254 125.535 134.443C125.869 134.629 126.123 134.841 126.297 135.08C126.475 135.314 126.613 135.508 126.712 135.659H126.825V131.364H128.166V143H126.871V141.659H126.712C126.613 141.818 126.473 142.019 126.291 142.261C126.109 142.5 125.85 142.714 125.513 142.903C125.176 143.089 124.727 143.182 124.166 143.182ZM124.348 141.977C124.886 141.977 125.34 141.837 125.712 141.557C126.083 141.273 126.365 140.881 126.558 140.381C126.751 139.877 126.848 139.295 126.848 138.636C126.848 137.985 126.753 137.415 126.564 136.926C126.374 136.434 126.094 136.051 125.723 135.778C125.352 135.502 124.893 135.364 124.348 135.364C123.78 135.364 123.306 135.509 122.927 135.801C122.552 136.089 122.27 136.481 122.081 136.977C121.895 137.47 121.802 138.023 121.802 138.636C121.802 139.258 121.897 139.822 122.087 140.33C122.28 140.833 122.564 141.235 122.939 141.534C123.318 141.83 123.787 141.977 124.348 141.977ZM133.304 143.205C132.751 143.205 132.249 143.1 131.799 142.892C131.348 142.68 130.99 142.375 130.725 141.977C130.46 141.576 130.327 141.091 130.327 140.523C130.327 140.023 130.426 139.617 130.623 139.307C130.819 138.992 131.083 138.746 131.412 138.568C131.742 138.39 132.105 138.258 132.503 138.17C132.905 138.08 133.308 138.008 133.713 137.955C134.244 137.886 134.674 137.835 135.003 137.801C135.337 137.763 135.579 137.701 135.73 137.614C135.886 137.527 135.963 137.375 135.963 137.159V137.114C135.963 136.553 135.81 136.117 135.503 135.807C135.2 135.496 134.74 135.341 134.123 135.341C133.482 135.341 132.98 135.481 132.617 135.761C132.253 136.042 131.998 136.341 131.85 136.659L130.577 136.205C130.804 135.674 131.107 135.261 131.486 134.966C131.869 134.667 132.285 134.458 132.736 134.341C133.191 134.22 133.638 134.159 134.077 134.159C134.357 134.159 134.679 134.193 135.043 134.261C135.41 134.326 135.765 134.46 136.105 134.665C136.45 134.869 136.736 135.178 136.963 135.591C137.191 136.004 137.304 136.557 137.304 137.25V143H135.963V141.818H135.895C135.804 142.008 135.653 142.21 135.441 142.426C135.229 142.642 134.946 142.826 134.594 142.977C134.242 143.129 133.812 143.205 133.304 143.205ZM133.509 142C134.039 142 134.486 141.896 134.85 141.688C135.217 141.479 135.494 141.21 135.679 140.881C135.869 140.551 135.963 140.205 135.963 139.841V138.614C135.907 138.682 135.782 138.744 135.588 138.801C135.399 138.854 135.179 138.902 134.929 138.943C134.683 138.981 134.443 139.015 134.208 139.045C133.977 139.072 133.789 139.095 133.645 139.114C133.297 139.159 132.971 139.233 132.668 139.335C132.369 139.434 132.126 139.583 131.941 139.784C131.759 139.981 131.668 140.25 131.668 140.591C131.668 141.057 131.84 141.409 132.185 141.648C132.533 141.883 132.975 142 133.509 142ZM140.231 146.273C140.004 146.273 139.801 146.254 139.623 146.216C139.445 146.182 139.322 146.148 139.254 146.114L139.595 144.932C139.92 145.015 140.208 145.045 140.458 145.023C140.708 145 140.93 144.888 141.123 144.688C141.32 144.491 141.5 144.17 141.663 143.727L141.913 143.045L138.685 134.273H140.14L142.549 141.227H142.64L145.049 134.273H146.504L142.799 144.273C142.632 144.723 142.426 145.097 142.18 145.392C141.934 145.691 141.648 145.913 141.322 146.057C141 146.201 140.636 146.273 140.231 146.273ZM149.655 141.409L149.564 142.023C149.499 142.455 149.401 142.917 149.268 143.409C149.139 143.902 149.005 144.366 148.865 144.801C148.725 145.237 148.609 145.583 148.518 145.841H147.496C147.545 145.598 147.609 145.278 147.689 144.881C147.768 144.483 147.848 144.038 147.927 143.545C148.011 143.057 148.079 142.557 148.132 142.045L148.2 141.409H149.655ZM166.495 137.182C166.495 138.409 166.273 139.47 165.83 140.364C165.387 141.258 164.779 141.947 164.006 142.432C163.234 142.917 162.351 143.159 161.359 143.159C160.366 143.159 159.484 142.917 158.711 142.432C157.938 141.947 157.33 141.258 156.887 140.364C156.444 139.47 156.222 138.409 156.222 137.182C156.222 135.955 156.444 134.894 156.887 134C157.33 133.106 157.938 132.417 158.711 131.932C159.484 131.447 160.366 131.205 161.359 131.205C162.351 131.205 163.234 131.447 164.006 131.932C164.779 132.417 165.387 133.106 165.83 134C166.273 134.894 166.495 135.955 166.495 137.182ZM165.131 137.182C165.131 136.174 164.963 135.324 164.626 134.631C164.292 133.938 163.84 133.413 163.268 133.057C162.7 132.701 162.063 132.523 161.359 132.523C160.654 132.523 160.016 132.701 159.444 133.057C158.876 133.413 158.423 133.938 158.086 134.631C157.753 135.324 157.586 136.174 157.586 137.182C157.586 138.189 157.753 139.04 158.086 139.733C158.423 140.426 158.876 140.951 159.444 141.307C160.016 141.663 160.654 141.841 161.359 141.841C162.063 141.841 162.7 141.663 163.268 141.307C163.84 140.951 164.292 140.426 164.626 139.733C164.963 139.04 165.131 138.189 165.131 137.182ZM172.156 143.182C171.338 143.182 170.633 142.989 170.042 142.602C169.451 142.216 168.997 141.684 168.679 141.006C168.361 140.328 168.201 139.553 168.201 138.682C168.201 137.795 168.364 137.013 168.69 136.335C169.02 135.653 169.478 135.121 170.065 134.739C170.656 134.352 171.345 134.159 172.133 134.159C172.747 134.159 173.3 134.273 173.792 134.5C174.285 134.727 174.688 135.045 175.003 135.455C175.317 135.864 175.512 136.341 175.588 136.886H174.247C174.145 136.489 173.917 136.136 173.565 135.83C173.217 135.519 172.747 135.364 172.156 135.364C171.633 135.364 171.175 135.5 170.781 135.773C170.391 136.042 170.086 136.422 169.866 136.915C169.65 137.403 169.542 137.977 169.542 138.636C169.542 139.311 169.648 139.898 169.861 140.398C170.076 140.898 170.379 141.286 170.77 141.562C171.164 141.839 171.626 141.977 172.156 141.977C172.504 141.977 172.821 141.917 173.105 141.795C173.389 141.674 173.629 141.5 173.826 141.273C174.023 141.045 174.164 140.773 174.247 140.455H175.588C175.512 140.97 175.325 141.434 175.025 141.847C174.73 142.256 174.338 142.581 173.849 142.824C173.364 143.062 172.8 143.182 172.156 143.182ZM181.271 134.273V135.409H176.749V134.273H181.271ZM178.067 132.182H179.408V140.5C179.408 140.879 179.463 141.163 179.573 141.352C179.686 141.538 179.83 141.663 180.004 141.727C180.182 141.788 180.37 141.818 180.567 141.818C180.715 141.818 180.836 141.811 180.931 141.795C181.025 141.777 181.101 141.761 181.158 141.75L181.431 142.955C181.34 142.989 181.213 143.023 181.05 143.057C180.887 143.095 180.681 143.114 180.431 143.114C180.052 143.114 179.681 143.032 179.317 142.869C178.957 142.706 178.658 142.458 178.419 142.125C178.184 141.792 178.067 141.371 178.067 140.864V132.182ZM186.668 143.182C185.88 143.182 185.189 142.994 184.594 142.619C184.003 142.244 183.541 141.72 183.208 141.045C182.878 140.371 182.714 139.583 182.714 138.682C182.714 137.773 182.878 136.979 183.208 136.301C183.541 135.623 184.003 135.097 184.594 134.722C185.189 134.347 185.88 134.159 186.668 134.159C187.456 134.159 188.146 134.347 188.736 134.722C189.331 135.097 189.793 135.623 190.123 136.301C190.456 136.979 190.623 137.773 190.623 138.682C190.623 139.583 190.456 140.371 190.123 141.045C189.793 141.72 189.331 142.244 188.736 142.619C188.146 142.994 187.456 143.182 186.668 143.182ZM186.668 141.977C187.267 141.977 187.759 141.824 188.146 141.517C188.532 141.21 188.818 140.807 189.003 140.307C189.189 139.807 189.282 139.265 189.282 138.682C189.282 138.098 189.189 137.555 189.003 137.051C188.818 136.547 188.532 136.14 188.146 135.83C187.759 135.519 187.267 135.364 186.668 135.364C186.07 135.364 185.577 135.519 185.191 135.83C184.805 136.14 184.519 136.547 184.333 137.051C184.147 137.555 184.055 138.098 184.055 138.682C184.055 139.265 184.147 139.807 184.333 140.307C184.519 140.807 184.805 141.21 185.191 141.517C185.577 141.824 186.07 141.977 186.668 141.977ZM192.779 143V131.364H194.12V135.659H194.234C194.332 135.508 194.469 135.314 194.643 135.08C194.821 134.841 195.075 134.629 195.404 134.443C195.738 134.254 196.189 134.159 196.757 134.159C197.492 134.159 198.139 134.343 198.7 134.71C199.261 135.078 199.698 135.598 200.012 136.273C200.327 136.947 200.484 137.742 200.484 138.659C200.484 139.583 200.327 140.384 200.012 141.062C199.698 141.737 199.262 142.259 198.706 142.631C198.149 142.998 197.507 143.182 196.779 143.182C196.219 143.182 195.77 143.089 195.433 142.903C195.096 142.714 194.836 142.5 194.654 142.261C194.473 142.019 194.332 141.818 194.234 141.659H194.075V143H192.779ZM194.098 138.636C194.098 139.295 194.194 139.877 194.387 140.381C194.581 140.881 194.863 141.273 195.234 141.557C195.605 141.837 196.06 141.977 196.598 141.977C197.158 141.977 197.626 141.83 198.001 141.534C198.38 141.235 198.664 140.833 198.853 140.33C199.047 139.822 199.143 139.258 199.143 138.636C199.143 138.023 199.048 137.47 198.859 136.977C198.673 136.481 198.391 136.089 198.012 135.801C197.637 135.509 197.166 135.364 196.598 135.364C196.052 135.364 195.594 135.502 195.223 135.778C194.851 136.051 194.571 136.434 194.382 136.926C194.192 137.415 194.098 137.985 194.098 138.636ZM206.122 143.182C205.281 143.182 204.556 142.996 203.946 142.625C203.34 142.25 202.872 141.727 202.543 141.057C202.217 140.383 202.054 139.598 202.054 138.705C202.054 137.811 202.217 137.023 202.543 136.341C202.872 135.655 203.331 135.121 203.918 134.739C204.509 134.352 205.198 134.159 205.986 134.159C206.44 134.159 206.889 134.235 207.332 134.386C207.776 134.538 208.179 134.784 208.543 135.125C208.906 135.462 209.196 135.909 209.412 136.466C209.628 137.023 209.736 137.708 209.736 138.523V139.091H203.009V137.932H208.372C208.372 137.439 208.274 137 208.077 136.614C207.884 136.227 207.607 135.922 207.247 135.699C206.891 135.475 206.471 135.364 205.986 135.364C205.452 135.364 204.99 135.496 204.6 135.761C204.213 136.023 203.916 136.364 203.707 136.784C203.499 137.205 203.395 137.655 203.395 138.136V138.909C203.395 139.568 203.509 140.127 203.736 140.585C203.967 141.04 204.287 141.386 204.696 141.625C205.105 141.86 205.581 141.977 206.122 141.977C206.475 141.977 206.793 141.928 207.077 141.83C207.365 141.727 207.613 141.576 207.821 141.375C208.029 141.17 208.19 140.917 208.304 140.614L209.6 140.977C209.463 141.417 209.234 141.803 208.912 142.136C208.59 142.466 208.192 142.723 207.719 142.909C207.245 143.091 206.713 143.182 206.122 143.182ZM211.704 143V134.273H212.999V135.591H213.09C213.249 135.159 213.537 134.809 213.954 134.54C214.37 134.271 214.84 134.136 215.363 134.136C215.461 134.136 215.584 134.138 215.732 134.142C215.88 134.146 215.992 134.152 216.067 134.159V135.523C216.022 135.511 215.918 135.494 215.755 135.472C215.596 135.445 215.427 135.432 215.249 135.432C214.825 135.432 214.446 135.521 214.113 135.699C213.783 135.873 213.522 136.116 213.329 136.426C213.139 136.733 213.045 137.083 213.045 137.477V143H211.704ZM226.081 131.364V143H224.672V132.841H224.604L221.763 134.727V133.295L224.672 131.364H226.081Z" fill="white" fill-opacity="0.12"/>
+<rect x="114" y="20" width="90" height="24" rx="12" fill="#DBDBDB" fill-opacity="0.04"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M230.025 27.7143H230.875C231.344 27.7143 231.725 28.0981 231.725 28.5714V35.4286C231.725 35.902 231.344 36.2857 230.875 36.2857H230.025C229.556 36.2857 229.175 35.902 229.175 35.4286V28.5714C229.175 28.0981 229.556 27.7143 230.025 27.7143Z" fill="#F9F9F9" fill-opacity="0.18"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.2 29.4286H227.05C227.519 29.4286 227.9 29.8123 227.9 30.2857V35.4286C227.9 35.9019 227.519 36.2857 227.05 36.2857H226.2C225.731 36.2857 225.35 35.9019 225.35 35.4286V30.2857C225.35 29.8123 225.731 29.4286 226.2 29.4286Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M222.375 31.1429H223.225C223.694 31.1429 224.075 31.5266 224.075 32V35.4286C224.075 35.902 223.694 36.2857 223.225 36.2857H222.375C221.906 36.2857 221.525 35.902 221.525 35.4286V32C221.525 31.5266 221.906 31.1429 222.375 31.1429Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M218.55 32.4286H219.4C219.869 32.4286 220.25 32.8123 220.25 33.2857V35.4286C220.25 35.9019 219.869 36.2857 219.4 36.2857H218.55C218.081 36.2857 217.7 35.9019 217.7 35.4286V33.2857C217.7 32.8123 218.081 32.4286 218.55 32.4286Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M245.116 33.6625C245.676 33.6625 246.219 33.8065 246.698 34.0812L246.893 34.1925C247.04 34.2768 247.066 34.4743 246.945 34.5921L245.288 36.2111C245.186 36.3106 245.021 36.3106 244.919 36.2111L243.272 34.6026C243.152 34.4852 243.177 34.2888 243.323 34.2038L243.515 34.092C243.999 33.8104 244.549 33.6625 245.116 33.6625Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M245.116 30.6884C246.508 30.6884 247.845 31.1408 248.933 31.9785L249.087 32.0969C249.21 32.1913 249.221 32.3691 249.11 32.477L248.121 33.4435C248.029 33.5329 247.884 33.5432 247.781 33.4677L247.66 33.3798C246.925 32.8445 246.038 32.5573 245.116 32.5573C244.188 32.5573 243.297 32.8481 242.559 33.3896L242.438 33.4782C242.334 33.5543 242.189 33.5443 242.097 33.4546L241.108 32.4885C240.998 32.3808 241.008 32.2034 241.13 32.1089L241.283 31.9904C242.375 31.1452 243.717 30.6884 245.116 30.6884Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M245.116 27.7143C247.325 27.7143 249.438 28.4776 251.11 29.8768L251.253 29.9962C251.368 30.0928 251.375 30.2648 251.267 30.3697L250.281 31.3331C250.186 31.4264 250.033 31.433 249.929 31.3482L249.807 31.2481C248.491 30.1698 246.841 29.5832 245.116 29.5832C243.386 29.5832 241.73 30.1738 240.412 31.2589L240.29 31.3595C240.186 31.4447 240.033 31.4383 239.937 31.3448L238.951 30.3815C238.844 30.2768 238.851 30.105 238.966 30.0084L239.108 29.8889C240.782 28.4822 242.9 27.7143 245.116 27.7143Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M275 31V31C275.552 31 276 31.4477 276 32V33C276 33.5523 275.552 34 275 34V34V31Z" fill="#424245"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.217 28H271.783C273.007 28 274 29.0074 274 30.25V34.75C274 35.9926 273.007 37 271.783 37H259.217C257.993 37 257 35.9926 257 34.75V30.25C257 29.0074 257.993 28 259.217 28ZM259.217 28.75C258.401 28.75 257.739 29.4216 257.739 30.25V34.75C257.739 35.5784 258.401 36.25 259.217 36.25H271.783C272.599 36.25 273.261 35.5784 273.261 34.75V30.25C273.261 29.4216 272.599 28.75 271.783 28.75H259.217Z" fill="#424245"/>
+<path d="M258 30.5C258 29.6716 258.672 29 259.5 29H271.5C272.328 29 273 29.6716 273 30.5V34.5C273 35.3284 272.328 36 271.5 36H259.5C258.672 36 258 35.3284 258 34.5V30.5Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<defs>
+<linearGradient id="paint0_linear_7_28" x1="160" y1="0" x2="160" y2="529" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1E1E22"/>
+<stop offset="1" stop-color="#1E1E22" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7_28" x1="160" y1="0" x2="160" y2="673" gradientUnits="userSpaceOnUse">
+<stop offset="0.262534" stop-color="#EDEDF0"/>
+<stop offset="1" stop-color="#EDEDF0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7_28" x1="159.5" y1="7" x2="159.5" y2="543.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="0.676095" stop-color="#1D1D21"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/push-notification-preview-light.svg b/src/routes/console/project-[project]/messaging/push-notification-preview-light.svg
new file mode 100644
index 000000000..7fd66545d
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/push-notification-preview-light.svg
@@ -0,0 +1,35 @@
+<svg width="352" height="529" viewBox="0 0 352 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1_1925" fill="white">
+<path d="M0 64C0 28.6538 28.6538 0 64 0H256C291.346 0 320 28.6538 320 64V529H0V64Z"/>
+</mask>
+<path d="M0 64C0 28.6538 28.6538 0 64 0H256C291.346 0 320 28.6538 320 64V529H0V64Z" fill="white"/>
+<path d="M-1.25 64C-1.25 27.9634 27.9634 -1.25 64 -1.25H256C292.037 -1.25 321.25 27.9634 321.25 64H318.75C318.75 29.3441 290.656 1.25 256 1.25H64C29.3441 1.25 1.25 29.3441 1.25 64H-1.25ZM320 529H0H320ZM-1.25 529V64C-1.25 27.9634 27.9634 -1.25 64 -1.25V1.25C29.3441 1.25 1.25 29.3441 1.25 64V529H-1.25ZM256 -1.25C292.037 -1.25 321.25 27.9634 321.25 64V529H318.75V64C318.75 29.3441 290.656 1.25 256 1.25V-1.25Z" fill="url(#paint0_linear_1_1925)" fill-opacity="0.08" mask="url(#path-1-inside-1_1_1925)"/>
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V529H7V65Z" fill="url(#paint1_linear_1_1925)"/>
+<path d="M114.024 214.504C108.368 214.504 103.748 213.02 100.164 210.052C96.58 207.084 94.452 203.024 93.78 197.872H102.936C103.608 200.616 104.924 202.8 106.884 204.424C108.844 205.992 111.364 206.776 114.444 206.776C118.98 206.776 122.48 204.984 124.944 201.4C127.408 197.76 128.64 192.86 128.64 186.7C128.64 185.86 128.612 185.076 128.556 184.348C128.5 184.404 128.388 184.656 128.22 185.104C128.052 185.496 127.884 185.832 127.716 186.112C126.372 188.632 124.384 190.62 121.752 192.076C119.176 193.476 116.18 194.176 112.764 194.176C106.884 194.176 102.096 192.384 98.4 188.8C94.76 185.216 92.94 180.456 92.94 174.52C92.94 168.752 94.9 164.02 98.82 160.324C102.74 156.572 107.808 154.696 114.024 154.696C121.808 154.696 127.8 157.776 132 163.936C135.472 169.256 137.208 176.004 137.208 184.18C137.208 193.644 135.164 201.064 131.076 206.44C127.044 211.816 121.36 214.504 114.024 214.504ZM113.94 186.616C117.524 186.616 120.436 185.496 122.676 183.256C124.916 180.96 126.036 177.992 126.036 174.352C126.036 170.824 124.916 167.94 122.676 165.7C120.492 163.46 117.636 162.34 114.108 162.34C110.58 162.34 107.724 163.488 105.54 165.784C103.356 168.024 102.264 170.936 102.264 174.52C102.264 178.048 103.328 180.96 105.456 183.256C107.584 185.496 110.412 186.616 113.94 186.616ZM143.727 182.416C142.663 181.352 142.131 179.98 142.131 178.3C142.131 176.62 142.663 175.248 143.727 174.184C144.847 173.12 146.247 172.588 147.927 172.588C149.607 172.588 151.007 173.12 152.127 174.184C153.247 175.248 153.807 176.62 153.807 178.3C153.807 179.98 153.247 181.352 152.127 182.416C151.007 183.48 149.607 184.012 147.927 184.012C146.247 184.012 144.847 183.48 143.727 182.416ZM143.727 212.908C142.663 211.844 142.131 210.472 142.131 208.792C142.131 207.112 142.663 205.74 143.727 204.676C144.847 203.612 146.247 203.08 147.927 203.08C149.607 203.08 151.007 203.612 152.127 204.676C153.247 205.74 153.807 207.112 153.807 208.792C153.807 210.472 153.247 211.844 152.127 212.908C151.007 213.972 149.607 214.504 147.927 214.504C146.247 214.504 144.847 213.972 143.727 212.908ZM155.644 200.392V192.496L183.952 155.2H194.872V192.328H203.776V200.392H194.872V214H185.716V200.392H155.644ZM185.716 165.364L165.22 192.328H185.716V165.364ZM214.064 161.164V155.2H223.22V214H213.896V173.68C213.056 174.184 211.824 174.436 210.2 174.436H200.624V166.456H209.78C212.636 166.456 214.064 164.692 214.064 161.164Z" fill="#19191C" fill-opacity="0.04"/>
+<path d="M98.7727 134.273C98.7045 133.697 98.428 133.25 97.9432 132.932C97.4583 132.614 96.8636 132.455 96.1591 132.455C95.6439 132.455 95.1932 132.538 94.8068 132.705C94.4242 132.871 94.125 133.1 93.9091 133.392C93.697 133.684 93.5909 134.015 93.5909 134.386C93.5909 134.697 93.6648 134.964 93.8125 135.188C93.964 135.407 94.1572 135.591 94.392 135.739C94.6269 135.883 94.8731 136.002 95.1307 136.097C95.3883 136.187 95.625 136.261 95.8409 136.318L97.0227 136.636C97.3258 136.716 97.6629 136.826 98.0341 136.966C98.4091 137.106 98.767 137.297 99.108 137.54C99.4527 137.778 99.7367 138.085 99.9602 138.46C100.184 138.835 100.295 139.295 100.295 139.841C100.295 140.47 100.131 141.038 99.8011 141.545C99.4754 142.053 98.9981 142.456 98.3693 142.756C97.7443 143.055 96.9848 143.205 96.0909 143.205C95.2576 143.205 94.536 143.07 93.9261 142.801C93.3201 142.532 92.8428 142.157 92.4943 141.676C92.1496 141.195 91.9545 140.636 91.9091 140H93.3636C93.4015 140.439 93.5492 140.803 93.8068 141.091C94.0682 141.375 94.3977 141.587 94.7955 141.727C95.197 141.864 95.6288 141.932 96.0909 141.932C96.6288 141.932 97.1117 141.845 97.5398 141.67C97.9678 141.492 98.3068 141.246 98.5568 140.932C98.8068 140.614 98.9318 140.242 98.9318 139.818C98.9318 139.432 98.8239 139.117 98.608 138.875C98.392 138.633 98.108 138.436 97.7557 138.284C97.4034 138.133 97.0227 138 96.6136 137.886L95.1818 137.477C94.2727 137.216 93.553 136.843 93.0227 136.358C92.4924 135.873 92.2273 135.239 92.2273 134.455C92.2273 133.803 92.4034 133.235 92.7557 132.75C93.1117 132.261 93.589 131.883 94.1875 131.614C94.7898 131.341 95.4621 131.205 96.2045 131.205C96.9545 131.205 97.6212 131.339 98.2045 131.608C98.7879 131.873 99.25 132.237 99.5909 132.699C99.9356 133.161 100.117 133.686 100.136 134.273H98.7727ZM107.858 139.432V134.273H109.199V143H107.858V141.523H107.767C107.563 141.966 107.245 142.343 106.813 142.653C106.381 142.96 105.836 143.114 105.177 143.114C104.631 143.114 104.146 142.994 103.722 142.756C103.298 142.513 102.964 142.15 102.722 141.665C102.48 141.176 102.358 140.561 102.358 139.818V134.273H103.699V139.727C103.699 140.364 103.877 140.871 104.233 141.25C104.593 141.629 105.052 141.818 105.608 141.818C105.942 141.818 106.281 141.733 106.625 141.562C106.974 141.392 107.266 141.131 107.5 140.778C107.739 140.426 107.858 139.977 107.858 139.432ZM112.924 137.75V143H111.583V134.273H112.879V135.636H112.992C113.197 135.193 113.508 134.837 113.924 134.568C114.341 134.295 114.879 134.159 115.538 134.159C116.129 134.159 116.646 134.28 117.089 134.523C117.532 134.761 117.877 135.125 118.123 135.614C118.369 136.098 118.492 136.712 118.492 137.455V143H117.151V137.545C117.151 136.86 116.973 136.326 116.617 135.943C116.261 135.557 115.773 135.364 115.151 135.364C114.723 135.364 114.341 135.456 114.004 135.642C113.67 135.828 113.407 136.098 113.214 136.455C113.021 136.811 112.924 137.242 112.924 137.75ZM124.166 143.182C123.439 143.182 122.797 142.998 122.24 142.631C121.683 142.259 121.248 141.737 120.933 141.062C120.619 140.384 120.462 139.583 120.462 138.659C120.462 137.742 120.619 136.947 120.933 136.273C121.248 135.598 121.685 135.078 122.246 134.71C122.806 134.343 123.454 134.159 124.189 134.159C124.757 134.159 125.206 134.254 125.535 134.443C125.869 134.629 126.123 134.841 126.297 135.08C126.475 135.314 126.613 135.508 126.712 135.659H126.825V131.364H128.166V143H126.871V141.659H126.712C126.613 141.818 126.473 142.019 126.291 142.261C126.109 142.5 125.85 142.714 125.513 142.903C125.176 143.089 124.727 143.182 124.166 143.182ZM124.348 141.977C124.886 141.977 125.34 141.837 125.712 141.557C126.083 141.273 126.365 140.881 126.558 140.381C126.751 139.877 126.848 139.295 126.848 138.636C126.848 137.985 126.753 137.415 126.564 136.926C126.374 136.434 126.094 136.051 125.723 135.778C125.352 135.502 124.893 135.364 124.348 135.364C123.78 135.364 123.306 135.509 122.927 135.801C122.552 136.089 122.27 136.481 122.081 136.977C121.895 137.47 121.802 138.023 121.802 138.636C121.802 139.258 121.897 139.822 122.087 140.33C122.28 140.833 122.564 141.235 122.939 141.534C123.318 141.83 123.787 141.977 124.348 141.977ZM133.304 143.205C132.751 143.205 132.249 143.1 131.799 142.892C131.348 142.68 130.99 142.375 130.725 141.977C130.46 141.576 130.327 141.091 130.327 140.523C130.327 140.023 130.426 139.617 130.623 139.307C130.819 138.992 131.083 138.746 131.412 138.568C131.742 138.39 132.105 138.258 132.503 138.17C132.905 138.08 133.308 138.008 133.713 137.955C134.244 137.886 134.674 137.835 135.003 137.801C135.337 137.763 135.579 137.701 135.73 137.614C135.886 137.527 135.963 137.375 135.963 137.159V137.114C135.963 136.553 135.81 136.117 135.503 135.807C135.2 135.496 134.74 135.341 134.123 135.341C133.482 135.341 132.98 135.481 132.617 135.761C132.253 136.042 131.998 136.341 131.85 136.659L130.577 136.205C130.804 135.674 131.107 135.261 131.486 134.966C131.869 134.667 132.285 134.458 132.736 134.341C133.191 134.22 133.638 134.159 134.077 134.159C134.357 134.159 134.679 134.193 135.043 134.261C135.41 134.326 135.765 134.46 136.105 134.665C136.45 134.869 136.736 135.178 136.963 135.591C137.191 136.004 137.304 136.557 137.304 137.25V143H135.963V141.818H135.895C135.804 142.008 135.653 142.21 135.441 142.426C135.229 142.642 134.946 142.826 134.594 142.977C134.242 143.129 133.812 143.205 133.304 143.205ZM133.509 142C134.039 142 134.486 141.896 134.85 141.688C135.217 141.479 135.494 141.21 135.679 140.881C135.869 140.551 135.963 140.205 135.963 139.841V138.614C135.907 138.682 135.782 138.744 135.588 138.801C135.399 138.854 135.179 138.902 134.929 138.943C134.683 138.981 134.443 139.015 134.208 139.045C133.977 139.072 133.789 139.095 133.645 139.114C133.297 139.159 132.971 139.233 132.668 139.335C132.369 139.434 132.126 139.583 131.941 139.784C131.759 139.981 131.668 140.25 131.668 140.591C131.668 141.057 131.84 141.409 132.185 141.648C132.533 141.883 132.975 142 133.509 142ZM140.231 146.273C140.004 146.273 139.801 146.254 139.623 146.216C139.445 146.182 139.322 146.148 139.254 146.114L139.595 144.932C139.92 145.015 140.208 145.045 140.458 145.023C140.708 145 140.93 144.888 141.123 144.688C141.32 144.491 141.5 144.17 141.663 143.727L141.913 143.045L138.685 134.273H140.14L142.549 141.227H142.64L145.049 134.273H146.504L142.799 144.273C142.632 144.723 142.426 145.097 142.18 145.392C141.934 145.691 141.648 145.913 141.322 146.057C141 146.201 140.636 146.273 140.231 146.273ZM149.655 141.409L149.564 142.023C149.499 142.455 149.401 142.917 149.268 143.409C149.139 143.902 149.005 144.366 148.865 144.801C148.725 145.237 148.609 145.583 148.518 145.841H147.496C147.545 145.598 147.609 145.278 147.689 144.881C147.768 144.483 147.848 144.038 147.927 143.545C148.011 143.057 148.079 142.557 148.132 142.045L148.2 141.409H149.655ZM166.495 137.182C166.495 138.409 166.273 139.47 165.83 140.364C165.387 141.258 164.779 141.947 164.006 142.432C163.234 142.917 162.351 143.159 161.359 143.159C160.366 143.159 159.484 142.917 158.711 142.432C157.938 141.947 157.33 141.258 156.887 140.364C156.444 139.47 156.222 138.409 156.222 137.182C156.222 135.955 156.444 134.894 156.887 134C157.33 133.106 157.938 132.417 158.711 131.932C159.484 131.447 160.366 131.205 161.359 131.205C162.351 131.205 163.234 131.447 164.006 131.932C164.779 132.417 165.387 133.106 165.83 134C166.273 134.894 166.495 135.955 166.495 137.182ZM165.131 137.182C165.131 136.174 164.963 135.324 164.626 134.631C164.292 133.938 163.84 133.413 163.268 133.057C162.7 132.701 162.063 132.523 161.359 132.523C160.654 132.523 160.016 132.701 159.444 133.057C158.876 133.413 158.423 133.938 158.086 134.631C157.753 135.324 157.586 136.174 157.586 137.182C157.586 138.189 157.753 139.04 158.086 139.733C158.423 140.426 158.876 140.951 159.444 141.307C160.016 141.663 160.654 141.841 161.359 141.841C162.063 141.841 162.7 141.663 163.268 141.307C163.84 140.951 164.292 140.426 164.626 139.733C164.963 139.04 165.131 138.189 165.131 137.182ZM172.156 143.182C171.338 143.182 170.633 142.989 170.042 142.602C169.451 142.216 168.997 141.684 168.679 141.006C168.361 140.328 168.201 139.553 168.201 138.682C168.201 137.795 168.364 137.013 168.69 136.335C169.02 135.653 169.478 135.121 170.065 134.739C170.656 134.352 171.345 134.159 172.133 134.159C172.747 134.159 173.3 134.273 173.792 134.5C174.285 134.727 174.688 135.045 175.003 135.455C175.317 135.864 175.512 136.341 175.588 136.886H174.247C174.145 136.489 173.917 136.136 173.565 135.83C173.217 135.519 172.747 135.364 172.156 135.364C171.633 135.364 171.175 135.5 170.781 135.773C170.391 136.042 170.086 136.422 169.866 136.915C169.65 137.403 169.542 137.977 169.542 138.636C169.542 139.311 169.648 139.898 169.861 140.398C170.076 140.898 170.379 141.286 170.77 141.562C171.164 141.839 171.626 141.977 172.156 141.977C172.504 141.977 172.821 141.917 173.105 141.795C173.389 141.674 173.629 141.5 173.826 141.273C174.023 141.045 174.164 140.773 174.247 140.455H175.588C175.512 140.97 175.325 141.434 175.025 141.847C174.73 142.256 174.338 142.581 173.849 142.824C173.364 143.062 172.8 143.182 172.156 143.182ZM181.271 134.273V135.409H176.749V134.273H181.271ZM178.067 132.182H179.408V140.5C179.408 140.879 179.463 141.163 179.573 141.352C179.686 141.538 179.83 141.663 180.004 141.727C180.182 141.788 180.37 141.818 180.567 141.818C180.715 141.818 180.836 141.811 180.931 141.795C181.025 141.777 181.101 141.761 181.158 141.75L181.431 142.955C181.34 142.989 181.213 143.023 181.05 143.057C180.887 143.095 180.681 143.114 180.431 143.114C180.052 143.114 179.681 143.032 179.317 142.869C178.957 142.706 178.658 142.458 178.419 142.125C178.184 141.792 178.067 141.371 178.067 140.864V132.182ZM186.668 143.182C185.88 143.182 185.189 142.994 184.594 142.619C184.003 142.244 183.541 141.72 183.208 141.045C182.878 140.371 182.714 139.583 182.714 138.682C182.714 137.773 182.878 136.979 183.208 136.301C183.541 135.623 184.003 135.097 184.594 134.722C185.189 134.347 185.88 134.159 186.668 134.159C187.456 134.159 188.146 134.347 188.736 134.722C189.331 135.097 189.793 135.623 190.123 136.301C190.456 136.979 190.623 137.773 190.623 138.682C190.623 139.583 190.456 140.371 190.123 141.045C189.793 141.72 189.331 142.244 188.736 142.619C188.146 142.994 187.456 143.182 186.668 143.182ZM186.668 141.977C187.267 141.977 187.759 141.824 188.146 141.517C188.532 141.21 188.818 140.807 189.003 140.307C189.189 139.807 189.282 139.265 189.282 138.682C189.282 138.098 189.189 137.555 189.003 137.051C188.818 136.547 188.532 136.14 188.146 135.83C187.759 135.519 187.267 135.364 186.668 135.364C186.07 135.364 185.577 135.519 185.191 135.83C184.805 136.14 184.519 136.547 184.333 137.051C184.147 137.555 184.055 138.098 184.055 138.682C184.055 139.265 184.147 139.807 184.333 140.307C184.519 140.807 184.805 141.21 185.191 141.517C185.577 141.824 186.07 141.977 186.668 141.977ZM192.779 143V131.364H194.12V135.659H194.234C194.332 135.508 194.469 135.314 194.643 135.08C194.821 134.841 195.075 134.629 195.404 134.443C195.738 134.254 196.189 134.159 196.757 134.159C197.492 134.159 198.139 134.343 198.7 134.71C199.261 135.078 199.698 135.598 200.012 136.273C200.327 136.947 200.484 137.742 200.484 138.659C200.484 139.583 200.327 140.384 200.012 141.062C199.698 141.737 199.262 142.259 198.706 142.631C198.149 142.998 197.507 143.182 196.779 143.182C196.219 143.182 195.77 143.089 195.433 142.903C195.096 142.714 194.836 142.5 194.654 142.261C194.473 142.019 194.332 141.818 194.234 141.659H194.075V143H192.779ZM194.098 138.636C194.098 139.295 194.194 139.877 194.387 140.381C194.581 140.881 194.863 141.273 195.234 141.557C195.605 141.837 196.06 141.977 196.598 141.977C197.158 141.977 197.626 141.83 198.001 141.534C198.38 141.235 198.664 140.833 198.853 140.33C199.047 139.822 199.143 139.258 199.143 138.636C199.143 138.023 199.048 137.47 198.859 136.977C198.673 136.481 198.391 136.089 198.012 135.801C197.637 135.509 197.166 135.364 196.598 135.364C196.052 135.364 195.594 135.502 195.223 135.778C194.851 136.051 194.571 136.434 194.382 136.926C194.192 137.415 194.098 137.985 194.098 138.636ZM206.122 143.182C205.281 143.182 204.556 142.996 203.946 142.625C203.34 142.25 202.872 141.727 202.543 141.057C202.217 140.383 202.054 139.598 202.054 138.705C202.054 137.811 202.217 137.023 202.543 136.341C202.872 135.655 203.331 135.121 203.918 134.739C204.509 134.352 205.198 134.159 205.986 134.159C206.44 134.159 206.889 134.235 207.332 134.386C207.776 134.538 208.179 134.784 208.543 135.125C208.906 135.462 209.196 135.909 209.412 136.466C209.628 137.023 209.736 137.708 209.736 138.523V139.091H203.009V137.932H208.372C208.372 137.439 208.274 137 208.077 136.614C207.884 136.227 207.607 135.922 207.247 135.699C206.891 135.475 206.471 135.364 205.986 135.364C205.452 135.364 204.99 135.496 204.6 135.761C204.213 136.023 203.916 136.364 203.707 136.784C203.499 137.205 203.395 137.655 203.395 138.136V138.909C203.395 139.568 203.509 140.127 203.736 140.585C203.967 141.04 204.287 141.386 204.696 141.625C205.105 141.86 205.581 141.977 206.122 141.977C206.475 141.977 206.793 141.928 207.077 141.83C207.365 141.727 207.613 141.576 207.821 141.375C208.029 141.17 208.19 140.917 208.304 140.614L209.6 140.977C209.463 141.417 209.234 141.803 208.912 142.136C208.59 142.466 208.192 142.723 207.719 142.909C207.245 143.091 206.713 143.182 206.122 143.182ZM211.704 143V134.273H212.999V135.591H213.09C213.249 135.159 213.537 134.809 213.954 134.54C214.37 134.271 214.84 134.136 215.363 134.136C215.461 134.136 215.584 134.138 215.732 134.142C215.88 134.146 215.992 134.152 216.067 134.159V135.523C216.022 135.511 215.918 135.494 215.755 135.472C215.596 135.445 215.427 135.432 215.249 135.432C214.825 135.432 214.446 135.521 214.113 135.699C213.783 135.873 213.522 136.116 213.329 136.426C213.139 136.733 213.045 137.083 213.045 137.477V143H211.704ZM226.081 131.364V143H224.672V132.841H224.604L221.763 134.727V133.295L224.672 131.364H226.081Z" fill="black" fill-opacity="0.08"/>
+<rect x="114" y="20" width="90" height="24" rx="12" fill="#19191C" fill-opacity="0.04"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.2 29.4286H227.05C227.519 29.4286 227.9 29.8123 227.9 30.2857V35.4286C227.9 35.902 227.519 36.2857 227.05 36.2857H226.2C225.731 36.2857 225.35 35.902 225.35 35.4286V30.2857C225.35 29.8123 225.731 29.4286 226.2 29.4286Z" fill="#F9F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M222.375 31.1429H223.225C223.694 31.1429 224.075 31.5266 224.075 32V35.4286C224.075 35.902 223.694 36.2857 223.225 36.2857H222.375C221.906 36.2857 221.525 35.902 221.525 35.4286V32C221.525 31.5266 221.906 31.1429 222.375 31.1429Z" fill="#F9F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M218.55 32.4286H219.4C219.869 32.4286 220.25 32.8123 220.25 33.2857V35.4286C220.25 35.902 219.869 36.2857 219.4 36.2857H218.55C218.081 36.2857 217.7 35.902 217.7 35.4286V33.2857C217.7 32.8123 218.081 32.4286 218.55 32.4286Z" fill="#F9F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M230.025 27.7143H230.875C231.344 27.7143 231.725 28.098 231.725 28.5714V35.4286C231.725 35.902 231.344 36.2857 230.875 36.2857H230.025C229.556 36.2857 229.175 35.902 229.175 35.4286V28.5714C229.175 28.098 229.556 27.7143 230.025 27.7143Z" fill="#19191C" fill-opacity="0.06"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.2 29.4286H227.05C227.519 29.4286 227.9 29.8123 227.9 30.2857V35.4286C227.9 35.902 227.519 36.2857 227.05 36.2857H226.2C225.731 36.2857 225.35 35.902 225.35 35.4286V30.2857C225.35 29.8123 225.731 29.4286 226.2 29.4286Z" fill="black" fill-opacity="0.12"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M222.375 31.1429H223.225C223.694 31.1429 224.075 31.5266 224.075 32V35.4286C224.075 35.902 223.694 36.2857 223.225 36.2857H222.375C221.906 36.2857 221.525 35.902 221.525 35.4286V32C221.525 31.5266 221.906 31.1429 222.375 31.1429Z" fill="black" fill-opacity="0.12"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M218.55 32.4286H219.4C219.869 32.4286 220.25 32.8123 220.25 33.2857V35.4286C220.25 35.902 219.869 36.2857 219.4 36.2857H218.55C218.081 36.2857 217.7 35.902 217.7 35.4286V33.2857C217.7 32.8123 218.081 32.4286 218.55 32.4286Z" fill="black" fill-opacity="0.12"/>
+<path d="M245.116 33.6625C245.676 33.6625 246.219 33.8065 246.698 34.0812L246.893 34.1925C247.04 34.2768 247.066 34.4743 246.945 34.5921L245.288 36.2111C245.186 36.3106 245.021 36.3106 244.919 36.2111L243.272 34.6025C243.152 34.4852 243.177 34.2887 243.323 34.2038L243.515 34.092C243.999 33.8104 244.549 33.6625 245.116 33.6625Z" fill="black" fill-opacity="0.12"/>
+<path d="M245.116 30.6884C246.508 30.6884 247.845 31.1408 248.933 31.9785L249.087 32.0969C249.21 32.1913 249.221 32.3691 249.11 32.477L248.121 33.4435C248.029 33.5329 247.884 33.5432 247.781 33.4677L247.66 33.3798C246.925 32.8445 246.038 32.5573 245.116 32.5573C244.188 32.5573 243.297 32.8481 242.559 33.3896L242.438 33.4782C242.334 33.5543 242.189 33.5443 242.097 33.4546L241.108 32.4885C240.998 32.3808 241.008 32.2034 241.13 32.1089L241.283 31.9904C242.375 31.1452 243.717 30.6884 245.116 30.6884Z" fill="black" fill-opacity="0.12"/>
+<path d="M245.116 27.7143C247.325 27.7143 249.438 28.4776 251.11 29.8768L251.253 29.9962C251.368 30.0927 251.375 30.2648 251.267 30.3697L250.281 31.3331C250.186 31.4264 250.033 31.433 249.929 31.3482L249.807 31.2481C248.491 30.1698 246.841 29.5832 245.116 29.5832C243.386 29.5832 241.73 30.1738 240.412 31.2589L240.29 31.3595C240.186 31.4446 240.033 31.4383 239.937 31.3448L238.951 30.3815C238.844 30.2767 238.851 30.105 238.966 30.0084L239.108 29.8889C240.782 28.4822 242.9 27.7143 245.116 27.7143Z" fill="black" fill-opacity="0.12"/>
+<path d="M275 31V31C275.552 31 276 31.4477 276 32V33C276 33.5523 275.552 34 275 34V34V31Z" fill="#19191C" fill-opacity="0.08"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.217 28H271.783C273.007 28 274 29.0074 274 30.25V34.75C274 35.9926 273.007 37 271.783 37H259.217C257.993 37 257 35.9926 257 34.75V30.25C257 29.0074 257.993 28 259.217 28ZM259.217 28.75C258.401 28.75 257.739 29.4216 257.739 30.25V34.75C257.739 35.5784 258.401 36.25 259.217 36.25H271.783C272.599 36.25 273.261 35.5784 273.261 34.75V30.25C273.261 29.4216 272.599 28.75 271.783 28.75H259.217Z" fill="#19191C" fill-opacity="0.08"/>
+<path d="M258 30.5C258 29.6716 258.672 29 259.5 29H271.5C272.328 29 273 29.6716 273 30.5V34.5C273 35.3284 272.328 36 271.5 36H259.5C258.672 36 258 35.3284 258 34.5V30.5Z" fill="black" fill-opacity="0.12"/>
+<defs>
+<linearGradient id="paint0_linear_1_1925" x1="160" y1="0" x2="160" y2="673" gradientUnits="userSpaceOnUse">
+<stop offset="0.262534" stop-color="#19191C"/>
+<stop offset="1" stop-color="#19191C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_1925" x1="159.5" y1="7" x2="159.5" y2="543.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFB"/>
+<stop offset="0.676095" stop-color="#FAFAFB"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/pushPhone.svelte b/src/routes/console/project-[project]/messaging/pushPhone.svelte
index 2acfc19f8..a6fb893f7 100644
--- a/src/routes/console/project-[project]/messaging/pushPhone.svelte
+++ b/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>
diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
index 49ec8bfca..9329272b4 100644
--- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/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>