Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Typography: use final font + Modal: fix image size #365

Merged
merged 1 commit into from Mar 27, 2024
Merged

Typography: use final font + Modal: fix image size #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/blue-laws-lie.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
"@cambly/syntax-core": minor
---

Typography: use final font + Modal: fix image size
8 changes: 7 additions & 1 deletion packages/syntax-core/src/Modal/Modal.stories.tsx
View file
Open in desktop
Expand Up @@ -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);
Expand Down
6 changes: 4 additions & 2 deletions packages/syntax-core/src/Modal/Modal.tsx
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/syntax-core/src/Typography/Typography.module.css
View file
Open in desktop
Expand Up @@ -8,15 +8,15 @@
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 {
font-family: "GT Super";
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 {
Expand Down