Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Use system font #642

Merged
masonmcelvain merged 7 commits into from
Jan 19, 2023
Merged

Use system font #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
68edcdf
feat: test system font performance
federicobadini Aug 16, 2022
e1f97d3
Use current core-primitives sans font stack
davidrans Jan 5, 2023
db04716
Upgrade core primitives to 2.5.1
davidrans Jan 12, 2023
bf2115f
Update snapshot test
davidrans Jan 12, 2023
ecd7f72
fix: remove archivo black references
federicobadini Jan 17, 2023
6d32d48
Merge remote-tracking branch 'origin/main' into use-system-font
masonmcelvain Jan 19, 2023
068141b
fix(jest): update snapshot
masonmcelvain Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"dependencies": {
"@chakra-ui/react": "2.4.8",
"@core-ds/primitives": "2.4.5",
"@core-ds/primitives": "2.5.1",
"@emotion/react": "11.10.5",
"@emotion/styled": "11.10.5",
"@fortawesome/fontawesome-svg-core": "6.2.1",
Expand Down
10 changes: 0 additions & 10 deletions frontend/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@ class MyDocument extends Document {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
rel="prefetch"
href={`${IFIXIT_ORIGIN}/api/2.0/user`}
Expand Down
10 changes: 1 addition & 9 deletions frontend/templates/page/components/SectionHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import { Heading, HeadingProps } from '@chakra-ui/react';

export function SectionHeading(props: HeadingProps) {
return (
<Heading
as="h2"
fontFamily="Archivo Black"
color="gray.700"
size="lg"
{...props}
/>
);
return <Heading as="h2" color="gray.700" size="lg" {...props} />;
}
8 changes: 1 addition & 7 deletions frontend/templates/product-list/sections/BannerSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,7 @@ export function BannerSection({
}}
mb="10"
/>
<Text
as="h2"
fontSize="4xl"
fontFamily="Archivo Black"
color="white"
mb={2}
>
<Text as="h2" fontSize="4xl" color="white" mb={2}>
{title}
</Text>
<Text
Expand Down
1 change: 0 additions & 1 deletion frontend/templates/product-list/sections/FeaturedProductListSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ export function FeaturedProductListSection({
sm: productList.title.length > 30 ? 'lg' : '2xl',
lg: productList.title.length > 40 ? '2xl' : '3xl',
}}
fontFamily="Archivo Black"
color="white"
noOfLines={3}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/templates/product-list/sections/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const HeroTitle = chakra(
as="h1"
className={className}
size="xl"
fontFamily="Archivo Black"
Copy link
Contributor

@masonmcelvain masonmcelvain Jan 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this branch may be out of date- there are more than 3 references to fontFamily="Archivo Black" on main.

Copy link
Contributor Author

@federicobadini federicobadini Jan 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, Probably a couple more reference got created in the meantime
I'll sort this out tomorrow morning

fontWeight="medium"
px={{ base: 6, sm: 0 }}
>
{children}
Expand Down
8 changes: 1 addition & 7 deletions frontend/templates/product/sections/CompatibilitySection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,7 @@ export function CompatibilitySection({
return compatibility && compatibility.devices.length > 0 ? (
<Box id="compatibility" bg="gray.100" py="16" fontSize="sm">
<PageContentWrapper>
<Heading
as="h2"
fontFamily="Archivo Black"
color="gray.700"
textAlign="center"
mb="12"
>
<Heading as="h2" color="gray.700" textAlign="center" mb="12">
Compatibility
</Heading>
<SimpleGrid
Expand Down
1 change: 0 additions & 1 deletion frontend/templates/product/sections/CrossSellSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,6 @@ export function CrossSellSection({
<PageContentWrapper>
<Heading
as="h2"
fontFamily="Archivo Black"
color="gray.700"
textAlign="center"
mb={{
Expand Down
8 changes: 1 addition & 7 deletions frontend/templates/product/sections/FeaturedProductsSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,7 @@ export function FeaturedProductsSection({
return (
<Box bg="white" pt="16" fontSize="sm">
<PageContentWrapper>
<Heading
as="h2"
fontFamily="Archivo Black"
color="gray.700"
textAlign="center"
mb="12"
>
<Heading as="h2" color="gray.700" textAlign="center" mb="12">
Featured Products
</Heading>
<SimpleGrid
Expand Down
8 changes: 1 addition & 7 deletions frontend/templates/product/sections/LifetimeWarrantySection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,7 @@ export function LifetimeWarrantySection({
}}
>
<Box>
<Heading
as="h2"
color="white"
fontFamily="Archivo Black"
letterSpacing="wide"
mb="3"
>
<Heading as="h2" color="white" letterSpacing="wide" mb="3">
Lifetime Guarantee
</Heading>
<Text color="white">
Expand Down
2 changes: 1 addition & 1 deletion frontend/templates/product/sections/ProductSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ const ProductTitle = chakra(
as="h1"
className={className}
size="xl"
fontFamily="Archivo Black"
fontWeight="medium"
data-testid="product-title"
>
{children}
Expand Down
1 change: 0 additions & 1 deletion frontend/templates/product/sections/ReplacementGuidesSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export function ReplacementGuidesSection({
<Heading
as="h2"
id="guides"
fontFamily="Archivo Black"
color="gray.700"
textAlign="center"
mb={{
Expand Down
1 change: 0 additions & 1 deletion frontend/templates/product/sections/ReviewsSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export function ReviewsSection({
<PageContentWrapper>
<Heading
as="h2"
fontFamily="Archivo Black"
color="gray.700"
textAlign="center"
mb={{
Expand Down
20 changes: 10 additions & 10 deletions frontend/tests/jest/tests/__snapshots__/ProductListItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
role="group"
>
<div
class="css-1ej4wy2"
class="css-1cdzrb4"
>
<div
class="css-1upbq1w"
class="css-kot0bi"
>
<span
style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
Expand All @@ -37,19 +37,19 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
</span>
</div>
<div
class="chakra-stack css-mc053s"
class="chakra-stack css-uwaf50"
>
<div
class="css-1c6uy1d"
>
<h3
class="chakra-heading css-yksz35"
class="chakra-heading css-1sm1677"
id="product-heading-galaxy-s9-plus-replacement-battery"
>
Galaxy S9+ Battery
</h3>
<p
class="chakra-text css-1lwz3lo"
class="chakra-text css-1781se3"
>
Replace a dead or malfunctioning model EB-BG96aasd5ABE battery in a Samsung Galaxy S9 Plus smartphone.
</p>
Expand Down Expand Up @@ -147,7 +147,7 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
</svg>
</div>
<p
class="chakra-text css-1g5rt1e"
class="chakra-text css-psi6cs"
>
18
</p>
Expand All @@ -163,10 +163,10 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="chakra-stack css-1gv4c2h"
class="chakra-stack css-1p0brnv"
>
<div
class="chakra-stack css-1nrwugr"
class="chakra-stack css-1ducg4w"
>
<div
class="css-14apnby"
Expand All @@ -180,14 +180,14 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
</div>
</div>
<div
class="chakra-stack css-oi2dk3"
class="chakra-stack css-1r1lvou"
>
<a
class="chakra-linkbox__overlay css-1hnz6hu"
href="/products/galaxy-s9-plus-replacement-battery"
>
<div
class="chakra-button css-1on59sn"
class="chakra-button css-k7fdf3"
>
View
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/theme/foundations/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { ThemeOverride } from '@chakra-ui/react';
import primitives from '@core-ds/primitives';

export const fonts: ThemeOverride['fonts'] = {
body: primitives.fontFamily.lato,
heading: primitives.fontFamily.lato,
body: primitives.fontFamily.sansSystem,
heading: primitives.fontFamily.sansSystem,
mono: primitives.fontFamily.monoSystem,
};
Loading