Adjust text stories to fit more nicely

stylesheets/components/TextAttachment.scss

@@ -27,13 +27,15 @@
   &__text {
     border-radius: 36px;
     padding: 28px;
-    margin-left: 72px;
+    margin-left: 56px;
-    margin-right: 72px;
+    margin-right: 56px;
+
+    &--with-bg {
+      margin-left: 36px;
+      margin-right: 36px;
+    }
 
     &__container {
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 13;
-      display: -webkit-box;
       overflow: hidden;
       user-select: none;
     }
@@ -60,8 +62,9 @@
 
   &__preview-container {
     position: relative;
-    margin-left: 72px;
+    margin-top: 36px;
-    margin-right: 72px;
+    margin-left: 56px;
+    margin-right: 56px;
   }
 
   &__preview {
@@ -70,9 +73,32 @@
     border-radius: 28px;
     display: flex;
     flex-direction: row;
-    height: 122px;
+    height: 112px;
     justify-content: center;
-    padding: 34px;
+    padding: 16px;
+
+    &__no-image {
+      margin-right: 16px;
+    }
+
+    &__location {
+      color: $color-white;
+      font: bold 22px Inter;
+      max-width: 422px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @include dark-theme {
+        color: $color-white;
+      }
+
+      .TextAttachment__preview-container--large & {
+        color: $color-white-alpha-60;
+        font: 18px Inter;
+        max-width: 352px;
+      }
+    }
 
     &__remove {
       backdrop-filter: blur(26px);
@@ -97,13 +123,13 @@
     }
 
     .TextAttachment__preview-container--large & {
-      height: 192px;
+      height: 140px;
     }
 
     &__no-image {
       .TextAttachment__preview-container--large & {
-        height: 144px;
+        height: 105px;
-        width: 144px;
+        width: 105px;
       }
     }
 
@@ -123,24 +149,13 @@
     &__title {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
-      color: $color-gray-05;
-      display: -webkit-box;
-      font: bold 30px Inter;
-      overflow: hidden;
-    }
-
-    &__location {
       color: $color-white;
-      font: bold 30px Inter;
+      display: -webkit-box;
-      max-width: 422px;
+      font: bold 22px Inter;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
 
-      .TextAttachment__preview-container--large & {
+      @include dark-theme {
-        color: $color-white-alpha-60;
+        color: $color-white;
-        font: 24px Inter;
-        max-width: 352px;
       }
     }
 

ts/components/TextAttachment.stories.tsx

@@ -316,3 +316,24 @@ export const LinkPreviewWRJ = (): JSX.Element => (
 LinkPreviewWRJ.story = {
   name: 'Link Preview w/ R&J',
 };
+
+export const TextBackgroundAndLinkPreview = (): JSX.Element => (
+  <TextAttachment
+    {...getDefaultProps()}
+    textAttachment={{
+      gradient: {
+        angle: 175,
+        endColor: 4294859832,
+        startColor: 4294950980,
+      },
+      text: 'Check out this neat video I found',
+      textBackgroundColor: 4294967295,
+      textForegroundColor: 4278249037,
+      textStyle: 1,
+      preview: {
+        title: 'A really long title so that the we can test the margins',
+        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      },
+    }}
+  />
+);

ts/components/TextAttachment.tsx

@@ -30,7 +30,7 @@ const renderNewLines: RenderTextCallbackType = ({
 
 const CHAR_LIMIT_TEXT_LARGE = 50;
 const CHAR_LIMIT_TEXT_MEDIUM = 200;
-const FONT_SIZE_LARGE = 64;
+const FONT_SIZE_LARGE = 59;
 const FONT_SIZE_MEDIUM = 42;
 const FONT_SIZE_SMALL = 32;
 
@@ -161,7 +161,11 @@ export const TextAttachment = ({
           >
             {(textContent || onChange) && (
               <div
-                className="TextAttachment__text"
+                className={classNames('TextAttachment__text', {
+                  'TextAttachment__text--with-bg': Boolean(
+                    textAttachment.textBackgroundColor
+                  ),
+                })}
                 style={{
                   backgroundColor: textAttachment.textBackgroundColor
                     ? getHexFromNumber(textAttachment.textBackgroundColor)