From 211201e03f95d5ad2dbd5db714d09129dfcd5c97 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Wed, 27 Mar 2024 14:52:59 -0700
Subject: [PATCH] Typography: use final font + Modal: fix image size

---
 .changeset/blue-laws-lie.md                               | 5 +++++
 packages/syntax-core/src/Modal/Modal.stories.tsx          | 8 +++++++-
 packages/syntax-core/src/Modal/Modal.tsx                  | 6 ++++--
 packages/syntax-core/src/Typography/Typography.module.css | 4 ++--
 4 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/blue-laws-lie.md

diff --git a/.changeset/blue-laws-lie.md b/.changeset/blue-laws-lie.md
new file mode 100644
index 00000000..069d3bbd
--- /dev/null
+++ b/.changeset/blue-laws-lie.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Typography: use final font + Modal: fix image size
diff --git a/packages/syntax-core/src/Modal/Modal.stories.tsx b/packages/syntax-core/src/Modal/Modal.stories.tsx
index 873e3583..a4afffea 100644
--- a/packages/syntax-core/src/Modal/Modal.stories.tsx
+++ b/packages/syntax-core/src/Modal/Modal.stories.tsx
@@ -99,7 +99,13 @@ export const WithImage: StoryObj<typeof Modal> = {
   args: {
     ...Default.args,
     header: "With Image",
-    image: <img src="https://placehold.co/400x200" alt="placeholder image" />,
+    image: (
+      <img
+        src="https://placehold.co/600x200"
+        alt="placeholder image"
+        style={{ width: "100%" }}
+      />
+    ),
   },
   render: function WithImageExample({ ...args }): JSX.Element {
     const [isOpen, setIsOpen] = useState(false);
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
index cbe44055..d7cea558 100644
--- a/packages/syntax-core/src/Modal/Modal.tsx
+++ b/packages/syntax-core/src/Modal/Modal.tsx
@@ -102,7 +102,9 @@ export default function Modal({
   onDismiss: () => void;
   /**
    * The optional image rendered above the Modal.
-   * Image size should be 400w x 200h.
+   * Image
+   *  * Size should be 600w x 200h
+   *  * Be sure to set width="100%" on the image
    * If images aren't that sized, should ask design to give another image.
    */
   image?: JSX.Element;
@@ -222,7 +224,7 @@ export default function Modal({
                   </Box>
                 )}
               </Box>
-              {image && <Box maxHeight={200}>{image}</Box>}
+              {image && <Box>{image}</Box>}
               <Box
                 display="flex"
                 gap={themeName === "classic" ? 3 : 4}
diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index 8a2212e8..a298142f 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -8,7 +8,7 @@
   font-style: normal;
   font-weight: 510;
   src: local("GT-Super-Text-Medium"),
-    url("https://static.cambly.com/fonts/gt-super-text-medium-converted.woff2");
+    url("https://static.cambly.com/fonts/gt-super-text-medium-final.woff2");
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-style: normal;
   font-weight: 700;
   src: local("GT-Super-Text-Bold"),
-    url("https://static.cambly.com/fonts/gt-super-text-bold-converted.woff2");
+    url("https://static.cambly.com/fonts/gt-super-text-bold-final.woff2");
 }
 
 .sansSerif {