From abbf485a8381494d1dde2e282934dad1809d95af Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 12 Dec 2023 13:30:19 -0800
Subject: [PATCH] Update SMS preview to look like a mobile device

---
 .../messaging/bubble-tail-dark.svg            |   3 +
 .../messaging/bubble-tail-light.svg           |   3 +
 .../messaging/sms-preview-dark.svg            |  46 +++++++
 .../messaging/sms-preview-light.svg           |  41 ++++++
 .../messaging/smsPhone.svelte                 | 118 +++++++++++++++++-
 .../messaging/wizard/smsFormList.svelte       |   7 +-
 6 files changed, 212 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/console/project-[project]/messaging/bubble-tail-dark.svg
 create mode 100644 src/routes/console/project-[project]/messaging/bubble-tail-light.svg
 create mode 100644 src/routes/console/project-[project]/messaging/sms-preview-dark.svg
 create mode 100644 src/routes/console/project-[project]/messaging/sms-preview-light.svg

diff --git a/src/routes/console/project-[project]/messaging/bubble-tail-dark.svg b/src/routes/console/project-[project]/messaging/bubble-tail-dark.svg
new file mode 100644
index 0000000000..b5e7c0ba72
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/bubble-tail-dark.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.5C4.49857 13.5086 1.66667 16.3333 0 17C6.4 17 10.5 14.8333 11.5 13.5L16.5 15L16 0H5.5V2V4V4.5C5.5 5.5 5.5 7.5 5 10.5Z" fill="#333333"/>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/bubble-tail-light.svg b/src/routes/console/project-[project]/messaging/bubble-tail-light.svg
new file mode 100644
index 0000000000..9dcbbe34f4
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/bubble-tail-light.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.5C4.49857 13.5086 1.66667 16.3333 0 17C6.4 17 10.5 14.8333 11.5 13.5L16.5 15L16 0H5.5V2V4V4.5C5.5 5.5 5.5 7.5 5 10.5Z" fill="#E9E9EB"/>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/sms-preview-dark.svg b/src/routes/console/project-[project]/messaging/sms-preview-dark.svg
new file mode 100644
index 0000000000..cafc7a33bc
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/sms-preview-dark.svg
@@ -0,0 +1,46 @@
+<svg width="320" height="529" viewBox="0 0 320 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_10_77" fill="white">
+<path d="M0 60C0 26.8629 26.8629 0 60 0H260C293.137 0 320 26.8629 320 60V529H0V60Z"/>
+</mask>
+<path d="M0 60C0 26.8629 26.8629 0 60 0H260C293.137 0 320 26.8629 320 60V529H0V60Z" fill="url(#paint0_linear_10_77)"/>
+<path d="M-1.25 60C-1.25 26.1726 26.1726 -1.25 60 -1.25H260C293.827 -1.25 321.25 26.1726 321.25 60H318.75C318.75 27.5533 292.447 1.25 260 1.25H60C27.5533 1.25 1.25 27.5533 1.25 60H-1.25ZM320 529H0H320ZM-1.25 529V60C-1.25 26.1726 26.1726 -1.25 60 -1.25V1.25C27.5533 1.25 1.25 27.5533 1.25 60V529H-1.25ZM260 -1.25C293.827 -1.25 321.25 26.1726 321.25 60V529H318.75V60C318.75 27.5533 292.447 1.25 260 1.25V-1.25Z" fill="url(#paint1_linear_10_77)" fill-opacity="0.08" mask="url(#path-1-inside-1_10_77)"/>
+<rect x="7" y="7" width="305" height="522" rx="57" fill="url(#paint2_linear_10_77)"/>
+<mask id="path-4-inside-2_10_77" fill="white">
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V139H7V65Z"/>
+</mask>
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V139H7V65Z" fill="#17171A"/>
+<path d="M7 7H312H7ZM312 140H7V138H312V140ZM7 139V7V139ZM312 7V139V7Z" fill="#3C3C43" fill-opacity="0.06" mask="url(#path-4-inside-2_10_77)"/>
+<path d="M25 95.939C25 96.3208 25.146 96.6465 25.4492 96.9385L34.209 105.507C34.4448 105.754 34.7593 105.878 35.1187 105.878C35.8486 105.878 36.4214 105.316 36.4214 104.575C36.4214 104.216 36.2754 103.89 36.0283 103.643L28.1333 95.939L36.0283 88.2349C36.2754 87.9766 36.4214 87.6509 36.4214 87.2915C36.4214 86.5615 35.8486 86 35.1187 86C34.7593 86 34.4448 86.1235 34.209 86.3706L25.4492 94.9395C25.146 95.2314 25.0112 95.5571 25 95.939Z" fill="#007AFF"/>
+<rect x="135.5" y="63" width="48" height="48" rx="24" fill="url(#paint3_linear_10_77)"/>
+<path d="M274.674 104.412H285.368C287.865 104.412 289.359 102.959 289.359 100.462V99.0597L293.227 102.334C293.636 102.672 294.086 102.907 294.506 102.907C295.406 102.907 296 102.242 296 101.291V90.7095C296 89.7578 295.406 89.0926 294.506 89.0926C294.086 89.0926 293.636 89.328 293.227 89.6657L289.359 92.9403V91.5281C289.359 89.0415 287.865 87.5884 285.368 87.5884H274.674C272.29 87.5884 270.683 89.0415 270.683 91.5281V100.462C270.683 102.959 272.177 104.412 274.674 104.412ZM274.961 102.866C273.283 102.866 272.331 101.997 272.331 100.226V91.7737C272.331 89.9932 273.283 89.1233 274.961 89.1233H285.081C286.749 89.1233 287.711 89.9932 287.711 91.7737V100.226C287.711 101.997 286.749 102.866 285.081 102.866H274.961ZM293.994 100.943L289.359 97.1154V94.8846L293.994 91.0574C294.086 90.9858 294.148 90.9346 294.24 90.9346C294.363 90.9346 294.414 91.0369 294.414 91.1802V100.82C294.414 100.963 294.363 101.055 294.24 101.055C294.148 101.055 294.086 101.004 293.994 100.943Z" fill="#007AFF"/>
+<path d="M59.2984 28.4162C59.72 28.4193 60.1355 28.4962 60.5449 28.647C60.9542 28.7978 61.3235 29.044 61.6528 29.3857C61.9852 29.7273 62.2499 30.1889 62.4468 30.7706C62.6469 31.3492 62.7485 32.0694 62.7515 32.9311C62.7515 33.759 62.6684 34.4961 62.5022 35.1424C62.336 35.7856 62.0975 36.3288 61.7867 36.772C61.4789 37.2152 61.105 37.5522 60.6649 37.783C60.2248 38.0138 59.7293 38.1293 59.1784 38.1293C58.6152 38.1293 58.115 38.0185 57.678 37.7969C57.241 37.5753 56.8855 37.2691 56.6116 36.8782C56.3377 36.4843 56.1669 36.0318 56.0992 35.521H57.5072C57.5995 35.9272 57.7873 36.2565 58.0704 36.5089C58.3566 36.7582 58.726 36.8828 59.1784 36.8828C59.8708 36.8828 60.411 36.5812 60.7988 35.978C61.1865 35.3717 61.382 34.5253 61.3851 33.4389H61.3112C61.1511 33.7036 60.9511 33.9313 60.711 34.1222C60.4741 34.313 60.2078 34.4607 59.9124 34.5653C59.6169 34.67 59.3015 34.7223 58.966 34.7223C58.4213 34.7223 57.9258 34.5884 57.4795 34.3207C57.0333 34.0529 56.6778 33.6851 56.4131 33.2173C56.1484 32.7495 56.0161 32.2156 56.0161 31.6154C56.0161 31.0183 56.1515 30.4767 56.4223 29.9904C56.6962 29.5041 57.0779 29.1194 57.5672 28.8363C58.0596 28.5501 58.6367 28.41 59.2984 28.4162ZM59.303 29.6165C58.9429 29.6165 58.6182 29.7057 58.3289 29.8842C58.0427 30.0597 57.8165 30.2982 57.6503 30.5998C57.4841 30.8983 57.401 31.2307 57.401 31.5969C57.401 31.9632 57.4811 32.2956 57.6411 32.5941C57.8042 32.8896 58.0258 33.125 58.3059 33.3004C58.589 33.4728 58.9122 33.5589 59.2753 33.5589C59.5462 33.5589 59.7985 33.5066 60.0324 33.402C60.2663 33.2973 60.471 33.1527 60.6464 32.968C60.8218 32.7803 60.9588 32.5679 61.0573 32.331C61.1558 32.094 61.205 31.8447 61.205 31.5831C61.205 31.2353 61.1219 30.9122 60.9557 30.6136C60.7926 30.3151 60.5679 30.075 60.2817 29.8935C59.9955 29.7088 59.6693 29.6165 59.303 29.6165ZM65.0271 36.8274C64.7748 36.8274 64.5578 36.7382 64.3762 36.5597C64.1946 36.3781 64.1038 36.1596 64.1038 35.9041C64.1038 35.6518 64.1946 35.4363 64.3762 35.2578C64.5578 35.0762 64.7748 34.9854 65.0271 34.9854C65.2795 34.9854 65.4965 35.0762 65.6781 35.2578C65.8596 35.4363 65.9504 35.6518 65.9504 35.9041C65.9504 36.0734 65.9074 36.2288 65.8212 36.3704C65.7381 36.5089 65.6273 36.6197 65.4888 36.7028C65.3503 36.7859 65.1964 36.8274 65.0271 36.8274ZM65.0271 32.0909C64.7748 32.0909 64.5578 32.0017 64.3762 31.8232C64.1946 31.6416 64.1038 31.4231 64.1038 31.1676C64.1038 30.9152 64.1946 30.6998 64.3762 30.5213C64.5578 30.3397 64.7748 30.2489 65.0271 30.2489C65.2795 30.2489 65.4965 30.3397 65.6781 30.5213C65.8596 30.6998 65.9504 30.9152 65.9504 31.1676C65.9504 31.3369 65.9074 31.4923 65.8212 31.6339C65.7381 31.7724 65.6273 31.8832 65.4888 31.9663C65.3503 32.0494 65.1964 32.0909 65.0271 32.0909ZM67.2624 36.1534V34.9993L71.3479 28.5455H72.2574V30.2443H71.6803L68.7581 34.87V34.9439H74.3579V36.1534H67.2624ZM71.745 38V35.8026L71.7542 35.2763V28.5455H73.1068V38H71.745ZM79.1068 28.5455V38H77.6757V29.9766H77.6203L75.3582 31.4538V30.0874L77.7172 28.5455H79.1068Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<rect x="115" y="20" width="89" height="24" rx="12" fill="#DBDBDB" fill-opacity="0.04"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M238.025 27.7143H238.875C239.344 27.7143 239.725 28.0981 239.725 28.5714V35.4286C239.725 35.902 239.344 36.2857 238.875 36.2857H238.025C237.556 36.2857 237.175 35.902 237.175 35.4286V28.5714C237.175 28.0981 237.556 27.7143 238.025 27.7143Z" fill="#F9F9F9" fill-opacity="0.18"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.2 29.4286H235.05C235.519 29.4286 235.9 29.8123 235.9 30.2857V35.4286C235.9 35.9019 235.519 36.2857 235.05 36.2857H234.2C233.731 36.2857 233.35 35.9019 233.35 35.4286V30.2857C233.35 29.8123 233.731 29.4286 234.2 29.4286Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M230.375 31.1429H231.225C231.694 31.1429 232.075 31.5266 232.075 32V35.4286C232.075 35.902 231.694 36.2857 231.225 36.2857H230.375C229.906 36.2857 229.525 35.902 229.525 35.4286V32C229.525 31.5266 229.906 31.1429 230.375 31.1429Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.55 32.4286H227.4C227.869 32.4286 228.25 32.8123 228.25 33.2857V35.4286C228.25 35.9019 227.869 36.2857 227.4 36.2857H226.55C226.081 36.2857 225.7 35.9019 225.7 35.4286V33.2857C225.7 32.8123 226.081 32.4286 226.55 32.4286Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M253.116 33.6625C253.676 33.6625 254.219 33.8065 254.698 34.0812L254.893 34.1925C255.04 34.2768 255.066 34.4743 254.945 34.5921L253.288 36.2111C253.186 36.3106 253.021 36.3106 252.919 36.2111L251.272 34.6026C251.152 34.4852 251.177 34.2888 251.323 34.2038L251.515 34.092C251.999 33.8104 252.549 33.6625 253.116 33.6625Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M253.116 30.6884C254.508 30.6884 255.845 31.1408 256.933 31.9785L257.087 32.0969C257.21 32.1913 257.221 32.3691 257.11 32.477L256.121 33.4435C256.029 33.5329 255.884 33.5432 255.781 33.4677L255.66 33.3798C254.925 32.8445 254.038 32.5573 253.116 32.5573C252.188 32.5573 251.297 32.8481 250.559 33.3896L250.438 33.4782C250.334 33.5543 250.189 33.5443 250.097 33.4546L249.108 32.4885C248.998 32.3808 249.008 32.2034 249.13 32.1089L249.283 31.9904C250.375 31.1452 251.717 30.6884 253.116 30.6884Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path d="M253.116 27.7143C255.325 27.7143 257.438 28.4776 259.11 29.8768L259.253 29.9962C259.368 30.0928 259.375 30.2648 259.267 30.3697L258.281 31.3331C258.186 31.4264 258.033 31.433 257.929 31.3482L257.807 31.2481C256.491 30.1698 254.841 29.5832 253.116 29.5832C251.386 29.5832 249.73 30.1738 248.412 31.2589L248.29 31.3595C248.186 31.4447 248.033 31.4383 247.937 31.3448L246.951 30.3815C246.844 30.2768 246.851 30.105 246.966 30.0084L247.108 29.8889C248.782 28.4822 250.9 27.7143 253.116 27.7143Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<path opacity="0.4" d="M283 31V31C283.552 31 284 31.4477 284 32V33C284 33.5523 283.552 34 283 34V34V31Z" fill="#F9F9F9" fill-opacity="0.18"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M267.217 28H279.783C281.007 28 282 29.0074 282 30.25V34.75C282 35.9926 281.007 37 279.783 37H267.217C265.993 37 265 35.9926 265 34.75V30.25C265 29.0074 265.993 28 267.217 28ZM267.217 28.75C266.401 28.75 265.739 29.4216 265.739 30.25V34.75C265.739 35.5784 266.401 36.25 267.217 36.25H279.783C280.599 36.25 281.261 35.5784 281.261 34.75V30.25C281.261 29.4216 280.599 28.75 279.783 28.75H267.217Z" fill="#F9F9F9" fill-opacity="0.18"/>
+<path d="M266 30.5C266 29.6716 266.672 29 267.5 29H279.5C280.328 29 281 29.6716 281 30.5V34.5C281 35.3284 280.328 36 279.5 36H267.5C266.672 36 266 35.3284 266 34.5V30.5Z" fill="#DBDBDB" fill-opacity="0.7"/>
+<defs>
+<linearGradient id="paint0_linear_10_77" 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_10_77" 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_10_77" x1="159.5" y1="7" x2="159.5" y2="529" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191C"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<linearGradient id="paint3_linear_10_77" x1="142.5" y1="70.5" x2="173.5" y2="106.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9FA5B2"/>
+<stop offset="1" stop-color="#8D929D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/sms-preview-light.svg b/src/routes/console/project-[project]/messaging/sms-preview-light.svg
new file mode 100644
index 0000000000..9e9099038a
--- /dev/null
+++ b/src/routes/console/project-[project]/messaging/sms-preview-light.svg
@@ -0,0 +1,41 @@
+<svg width="320" height="529" viewBox="0 0 320 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1_1738" fill="white">
+<path d="M0 60C0 26.8629 26.8629 0 60 0H260C293.137 0 320 26.8629 320 60V529H0V60Z"/>
+</mask>
+<path d="M0 60C0 26.8629 26.8629 0 60 0H260C293.137 0 320 26.8629 320 60V529H0V60Z" fill="white"/>
+<path d="M-1.25 60C-1.25 26.1726 26.1726 -1.25 60 -1.25H260C293.827 -1.25 321.25 26.1726 321.25 60H318.75C318.75 27.5533 292.447 1.25 260 1.25H60C27.5533 1.25 1.25 27.5533 1.25 60H-1.25ZM320 529H0H320ZM-1.25 529V60C-1.25 26.1726 26.1726 -1.25 60 -1.25V1.25C27.5533 1.25 1.25 27.5533 1.25 60V529H-1.25ZM260 -1.25C293.827 -1.25 321.25 26.1726 321.25 60V529H318.75V60C318.75 27.5533 292.447 1.25 260 1.25V-1.25Z" fill="url(#paint0_linear_1_1738)" fill-opacity="0.08" mask="url(#path-1-inside-1_1_1738)"/>
+<rect x="7" y="7" width="305" height="522" rx="57" fill="white"/>
+<mask id="path-4-inside-2_1_1738" fill="white">
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V139H7V65Z"/>
+</mask>
+<path d="M7 65C7 32.9675 32.9675 7 65 7H254C286.033 7 312 32.9675 312 65V139H7V65Z" fill="#F5F4F4"/>
+<path d="M7 7H312H7ZM312 140H7V138H312V140ZM7 139V7V139ZM312 7V139V7Z" fill="#3C3C43" fill-opacity="0.06" mask="url(#path-4-inside-2_1_1738)"/>
+<path d="M25 95.939C25 96.3208 25.146 96.6465 25.4492 96.9385L34.209 105.507C34.4448 105.754 34.7593 105.878 35.1187 105.878C35.8486 105.878 36.4214 105.316 36.4214 104.575C36.4214 104.216 36.2754 103.89 36.0283 103.643L28.1333 95.939L36.0283 88.2349C36.2754 87.9766 36.4214 87.6509 36.4214 87.2915C36.4214 86.5615 35.8486 86 35.1187 86C34.7593 86 34.4448 86.1235 34.209 86.3706L25.4492 94.9395C25.146 95.2314 25.0112 95.5571 25 95.939Z" fill="#007AFF"/>
+<rect x="135.5" y="63" width="48" height="48" rx="24" fill="url(#paint1_linear_1_1738)"/>
+<path d="M274.674 104.412H285.368C287.865 104.412 289.359 102.959 289.359 100.462V99.0597L293.227 102.334C293.636 102.672 294.086 102.907 294.506 102.907C295.406 102.907 296 102.242 296 101.291V90.7095C296 89.7578 295.406 89.0926 294.506 89.0926C294.086 89.0926 293.636 89.328 293.227 89.6657L289.359 92.9403V91.5281C289.359 89.0415 287.865 87.5884 285.368 87.5884H274.674C272.29 87.5884 270.683 89.0415 270.683 91.5281V100.462C270.683 102.959 272.177 104.412 274.674 104.412ZM274.961 102.866C273.283 102.866 272.331 101.997 272.331 100.226V91.7737C272.331 89.9932 273.283 89.1233 274.961 89.1233H285.081C286.749 89.1233 287.711 89.9932 287.711 91.7737V100.226C287.711 101.997 286.749 102.866 285.081 102.866H274.961ZM293.994 100.943L289.359 97.1154V94.8846L293.994 91.0574C294.086 90.9858 294.148 90.9346 294.24 90.9346C294.363 90.9346 294.414 91.0369 294.414 91.1802V100.82C294.414 100.963 294.363 101.055 294.24 101.055C294.148 101.055 294.086 101.004 293.994 100.943Z" fill="#007AFF"/>
+<path d="M59.2984 28.4162C59.72 28.4193 60.1355 28.4962 60.5449 28.647C60.9542 28.7978 61.3235 29.044 61.6528 29.3857C61.9852 29.7273 62.2499 30.1889 62.4468 30.7706C62.6469 31.3492 62.7485 32.0694 62.7515 32.9311C62.7515 33.759 62.6684 34.4961 62.5022 35.1424C62.336 35.7856 62.0975 36.3288 61.7867 36.772C61.4789 37.2152 61.105 37.5522 60.6649 37.783C60.2248 38.0138 59.7293 38.1293 59.1784 38.1293C58.6152 38.1293 58.115 38.0185 57.678 37.7969C57.241 37.5753 56.8855 37.2691 56.6116 36.8782C56.3377 36.4843 56.1669 36.0318 56.0992 35.521H57.5072C57.5995 35.9272 57.7873 36.2565 58.0704 36.5089C58.3566 36.7582 58.726 36.8828 59.1784 36.8828C59.8708 36.8828 60.411 36.5812 60.7988 35.978C61.1865 35.3717 61.382 34.5253 61.3851 33.4389H61.3112C61.1511 33.7036 60.9511 33.9313 60.711 34.1222C60.4741 34.313 60.2078 34.4607 59.9124 34.5653C59.6169 34.67 59.3015 34.7223 58.966 34.7223C58.4213 34.7223 57.9258 34.5884 57.4795 34.3207C57.0333 34.0529 56.6778 33.6851 56.4131 33.2173C56.1484 32.7495 56.0161 32.2156 56.0161 31.6154C56.0161 31.0183 56.1515 30.4767 56.4223 29.9904C56.6962 29.5041 57.0779 29.1194 57.5672 28.8363C58.0596 28.5501 58.6367 28.41 59.2984 28.4162ZM59.303 29.6165C58.9429 29.6165 58.6182 29.7057 58.3289 29.8842C58.0427 30.0597 57.8165 30.2982 57.6503 30.5998C57.4841 30.8983 57.401 31.2307 57.401 31.5969C57.401 31.9632 57.4811 32.2956 57.6411 32.5941C57.8042 32.8896 58.0258 33.125 58.3059 33.3004C58.589 33.4728 58.9122 33.5589 59.2753 33.5589C59.5462 33.5589 59.7985 33.5066 60.0324 33.402C60.2663 33.2973 60.471 33.1527 60.6464 32.968C60.8218 32.7803 60.9588 32.5679 61.0573 32.331C61.1558 32.094 61.205 31.8447 61.205 31.5831C61.205 31.2353 61.1219 30.9122 60.9557 30.6136C60.7926 30.3151 60.5679 30.075 60.2817 29.8935C59.9955 29.7088 59.6693 29.6165 59.303 29.6165ZM65.0271 36.8274C64.7748 36.8274 64.5578 36.7382 64.3762 36.5597C64.1946 36.3781 64.1038 36.1596 64.1038 35.9041C64.1038 35.6518 64.1946 35.4363 64.3762 35.2578C64.5578 35.0762 64.7748 34.9854 65.0271 34.9854C65.2795 34.9854 65.4965 35.0762 65.6781 35.2578C65.8596 35.4363 65.9504 35.6518 65.9504 35.9041C65.9504 36.0734 65.9074 36.2288 65.8212 36.3704C65.7381 36.5089 65.6273 36.6197 65.4888 36.7028C65.3503 36.7859 65.1964 36.8274 65.0271 36.8274ZM65.0271 32.0909C64.7748 32.0909 64.5578 32.0017 64.3762 31.8232C64.1946 31.6416 64.1038 31.4231 64.1038 31.1676C64.1038 30.9152 64.1946 30.6998 64.3762 30.5213C64.5578 30.3397 64.7748 30.2489 65.0271 30.2489C65.2795 30.2489 65.4965 30.3397 65.6781 30.5213C65.8596 30.6998 65.9504 30.9152 65.9504 31.1676C65.9504 31.3369 65.9074 31.4923 65.8212 31.6339C65.7381 31.7724 65.6273 31.8832 65.4888 31.9663C65.3503 32.0494 65.1964 32.0909 65.0271 32.0909ZM67.2624 36.1534V34.9993L71.3479 28.5455H72.2574V30.2443H71.6803L68.7581 34.87V34.9439H74.3579V36.1534H67.2624ZM71.745 38V35.8026L71.7542 35.2763V28.5455H73.1068V38H71.745ZM79.1068 28.5455V38H77.6757V29.9766H77.6203L75.3582 31.4538V30.0874L77.7172 28.5455H79.1068Z" fill="black"/>
+<rect x="115" y="20" width="89" height="24" rx="12" fill="#19191C" fill-opacity="0.04"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.2 29.4286H235.05C235.519 29.4286 235.9 29.8123 235.9 30.2857V35.4286C235.9 35.902 235.519 36.2857 235.05 36.2857H234.2C233.731 36.2857 233.35 35.902 233.35 35.4286V30.2857C233.35 29.8123 233.731 29.4286 234.2 29.4286Z" fill="#F9F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M230.375 31.1429H231.225C231.694 31.1429 232.075 31.5266 232.075 32V35.4286C232.075 35.902 231.694 36.2857 231.225 36.2857H230.375C229.906 36.2857 229.525 35.902 229.525 35.4286V32C229.525 31.5266 229.906 31.1429 230.375 31.1429Z" fill="#F9F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.55 32.4286H227.4C227.869 32.4286 228.25 32.8123 228.25 33.2857V35.4286C228.25 35.902 227.869 36.2857 227.4 36.2857H226.55C226.081 36.2857 225.7 35.902 225.7 35.4286V33.2857C225.7 32.8123 226.081 32.4286 226.55 32.4286Z" fill="#F9F9F9"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M238.025 27.7143H238.875C239.344 27.7143 239.725 28.098 239.725 28.5714V35.4286C239.725 35.902 239.344 36.2857 238.875 36.2857H238.025C237.556 36.2857 237.175 35.902 237.175 35.4286V28.5714C237.175 28.098 237.556 27.7143 238.025 27.7143Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M234.2 29.4286H235.05C235.519 29.4286 235.9 29.8123 235.9 30.2857V35.4286C235.9 35.902 235.519 36.2857 235.05 36.2857H234.2C233.731 36.2857 233.35 35.902 233.35 35.4286V30.2857C233.35 29.8123 233.731 29.4286 234.2 29.4286Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M230.375 31.1429H231.225C231.694 31.1429 232.075 31.5266 232.075 32V35.4286C232.075 35.902 231.694 36.2857 231.225 36.2857H230.375C229.906 36.2857 229.525 35.902 229.525 35.4286V32C229.525 31.5266 229.906 31.1429 230.375 31.1429Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M226.55 32.4286H227.4C227.869 32.4286 228.25 32.8123 228.25 33.2857V35.4286C228.25 35.902 227.869 36.2857 227.4 36.2857H226.55C226.081 36.2857 225.7 35.902 225.7 35.4286V33.2857C225.7 32.8123 226.081 32.4286 226.55 32.4286Z" fill="black"/>
+<path d="M253.116 33.6625C253.676 33.6625 254.219 33.8065 254.698 34.0812L254.893 34.1925C255.04 34.2768 255.066 34.4743 254.945 34.5921L253.288 36.2111C253.186 36.3106 253.021 36.3106 252.919 36.2111L251.272 34.6025C251.152 34.4852 251.177 34.2887 251.323 34.2038L251.515 34.092C251.999 33.8104 252.549 33.6625 253.116 33.6625Z" fill="black"/>
+<path d="M253.116 30.6884C254.508 30.6884 255.845 31.1408 256.933 31.9785L257.087 32.0969C257.21 32.1913 257.221 32.3691 257.11 32.477L256.121 33.4435C256.029 33.5329 255.884 33.5432 255.781 33.4677L255.66 33.3798C254.925 32.8445 254.038 32.5573 253.116 32.5573C252.188 32.5573 251.297 32.8481 250.559 33.3896L250.438 33.4782C250.334 33.5543 250.189 33.5443 250.097 33.4546L249.108 32.4885C248.998 32.3808 249.008 32.2034 249.13 32.1089L249.283 31.9904C250.375 31.1452 251.717 30.6884 253.116 30.6884Z" fill="black"/>
+<path d="M253.116 27.7143C255.325 27.7143 257.438 28.4776 259.11 29.8768L259.253 29.9962C259.368 30.0927 259.375 30.2648 259.267 30.3697L258.281 31.3331C258.186 31.4264 258.033 31.433 257.929 31.3482L257.807 31.2481C256.491 30.1698 254.841 29.5832 253.116 29.5832C251.386 29.5832 249.73 30.1738 248.412 31.2589L248.29 31.3595C248.186 31.4446 248.033 31.4383 247.937 31.3448L246.951 30.3815C246.844 30.2767 246.851 30.105 246.966 30.0084L247.108 29.8889C248.782 28.4822 250.9 27.7143 253.116 27.7143Z" fill="black"/>
+<path opacity="0.4" d="M283 31C283.552 31 284 31.4477 284 32V33C284 33.5523 283.552 34 283 34V31Z" fill="black"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M267.217 28H279.783C281.007 28 282 29.0074 282 30.25V34.75C282 35.9926 281.007 37 279.783 37H267.217C265.993 37 265 35.9926 265 34.75V30.25C265 29.0074 265.993 28 267.217 28ZM267.217 28.75C266.401 28.75 265.739 29.4216 265.739 30.25V34.75C265.739 35.5784 266.401 36.25 267.217 36.25H279.783C280.599 36.25 281.261 35.5784 281.261 34.75V30.25C281.261 29.4216 280.599 28.75 279.783 28.75H267.217Z" fill="black"/>
+<path d="M266 30.5C266 29.6716 266.672 29 267.5 29H279.5C280.328 29 281 29.6716 281 30.5V34.5C281 35.3284 280.328 36 279.5 36H267.5C266.672 36 266 35.3284 266 34.5V30.5Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_1_1738" 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_1738" x1="142.5" y1="70.5" x2="173.5" y2="106.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9FA5B2"/>
+<stop offset="1" stop-color="#8D929D"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/messaging/smsPhone.svelte b/src/routes/console/project-[project]/messaging/smsPhone.svelte
index c7db28c112..dfa2f82615 100644
--- a/src/routes/console/project-[project]/messaging/smsPhone.svelte
+++ b/src/routes/console/project-[project]/messaging/smsPhone.svelte
@@ -1,14 +1,124 @@
 <script lang="ts">
+    import { project } from '../store';
+
     export let content = '';
+    export let classes = '';
+
+    function getIntials(name: string) {
+        let words = name.split(' ');
+        // If there is only one word, split it by underscore
+        if (words.length === 1) {
+            words = words[0].split('_');
+        }
+
+        // Get 1st 2 initials, skipping words that don't start with a letter
+        const initials = words
+            .filter((word) => word.match(/^[a-z]/i))
+            .map((word) => word[0].toUpperCase())
+            .slice(0, 2)
+            .join('');
+
+        return initials;
+    }
+
+    // Current time as H:MM AM/PM
+    function getTime() {
+        const now = new Date();
+        return now.toLocaleTimeString(undefined, {
+            hour: 'numeric',
+            minute: 'numeric',
+            hour12: true
+        });
+    }
 </script>
 
-<!-- TODO: Style to look like a phone -->
-<div class="phone card is-only-desktop">
-    {content}
+<div class="phone {classes}">
+    <div class="avatar-initials u-text-center u-width-full-line u-line-height-1-5 u-medium u-bold">
+        {getIntials($project.name)}
+    </div>
+    <div class="project-name u-text-center u-x-small u-width-full-line">{$project.name}</div>
+    <div class="chat u-text-center u-width-full-line">
+        <div class="time u-text-center u-x-small u-width-full-line u-line-height-0-7">
+            Today {getTime()}
+        </div>
+        <div class="chat-bubble-container">
+            <div class="chat-bubble u-text-start">
+                {content || 'Enter your message in the input field on the left to see it here'}
+            </div>
+        </div>
+    </div>
 </div>
 
 <style lang="scss">
     .phone {
-        inline-size: calc(320 * 1rem / 16);
+        position: relative;
+        width: 320px;
+        height: 539px;
+        background-image: url('./sms-preview-light.svg');
+        background-repeat: no-repeat;
+
+        .avatar-initials {
+            position: absolute;
+            top: 75px;
+            height: 24px;
+            color: white;
+        }
+
+        .project-name {
+            position: absolute;
+            top: 116px;
+            color: black;
+        }
+
+        .chat {
+            position: absolute;
+            top: 151px;
+
+            .time {
+                color: #909093;
+                font-weight: 500;
+            }
+
+            .chat-bubble-container {
+                background-image: url('./bubble-tail-light.svg');
+                background-position: bottom 0px left 2px;
+                background-repeat: no-repeat;
+                margin-inline-start: 7px;
+                margin-block-start: 8px;
+
+                .chat-bubble {
+                    color: black;
+                    background-color: #e9e9eb;
+                    border-radius: 20px;
+                    padding-inline: 12px;
+                    padding-block: 7px;
+                    margin-inline-start: 6px;
+                    margin-inline-end: 33px;
+                }
+            }
+        }
+    }
+
+    :global(.theme-dark) .phone {
+        background-image: url('./sms-preview-dark.svg');
+
+        .avatar-initials {
+            color: hsl(var(--color-neutral-150));
+        }
+
+        .project-name {
+            color: white;
+        }
+
+        .chat {
+            .chat-bubble-container {
+                background-image: url('./bubble-tail-dark.svg');
+
+                .chat-bubble {
+                    color: #e0e0e0;
+                    background-color: #333333;
+                }
+            }
+        }
     }
 </style>
diff --git a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
index ec0af9a11f..ea1d45f263 100644
--- a/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <div class="u-flex u-gap-24">
-    <FormList class="u-stretch">
+    <FormList class="u-stretch u-cross-child-start">
         <div class="u-colum-gap-2">
             <InputTextarea
                 id="message"
@@ -132,5 +132,8 @@
                 autofocus={false} />
         {/if}
     </FormList>
-    <SMSPhone content={$messageParams[$providerType]['content']} />
+    <SMSPhone content={$messageParams[$providerType]['content']} classes="is-only-desktop" />
+</div>
+<div class="u-flex u-main-center u-margin-block-start-24">
+    <SMSPhone content={$messageParams[$providerType]['content']} classes="is-not-desktop" />
 </div>