Skip to content

Commit 53af493

Browse files
javiert-oktajaviert-okta
committed
update assets component
1 parent fe00bcf commit 53af493

File tree

2 files changed

+74
-145
lines changed

2 files changed

+74
-145
lines changed

‎src/features/home/components/assets/assets.component.tsx‎

Lines changed: 20 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -16,139 +16,53 @@ import iconWithLabelImg from "./jwt-label.icon.png";
1616
import { createUrlPath } from "@/libs/utils/path.utils";
1717
import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
1818
import { Button } from "react-aria-components";
19-
20-
interface DownloadButtonProps {
21-
asset: StaticImageData;
22-
filename: string;
23-
}
24-
25-
const DownloadButton: React.FC<DownloadButtonProps> = ({ asset, filename }) => {
26-
const downloadSVG = useCallback(
27-
(image: StaticImageData, filename: string) => {
28-
const link = document.createElement("a");
29-
link.href = image.src;
30-
link.download = filename;
31-
document.body.appendChild(link);
32-
link.click();
33-
document.body.removeChild(link);
34-
},
35-
[],
36-
);
37-
38-
return (
39-
<Button
40-
className={styles.downloadButton}
41-
onPress={() => {
42-
setTimeout(() => {
43-
downloadSVG(asset, filename);
44-
}, 0);
45-
}}
46-
>
47-
<DownloadIconComponent />
48-
</Button>
49-
);
50-
};
19+
import { ArrowHeadIconComponent } from "@/features/common/assets/arrow-head-icon.component";
20+
import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
21+
import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
5122

5223
type AssetsComponentProps = {
5324
languageCode: string;
54-
dictionary: JwtDictionaryModel;
25+
jwtDictionary: JwtDictionaryModel;
26+
auth0Dictionary: Auth0DictionaryModel;
5527
};
5628

5729
export const AssetsComponent: React.FC<AssetsComponentProps> = ({
5830
languageCode,
59-
dictionary,
31+
jwtDictionary,
32+
auth0Dictionary,
6033
}) => {
6134
const libraryLinkPath = createUrlPath([
6235
languageCode === DEFAULT_LANGUAGE_CODE ? "" : languageCode,
63-
dictionary.libraries.ctaButton.path
64-
? dictionary.libraries.ctaButton.path
36+
jwtDictionary.libraries.ctaButton.path
37+
? jwtDictionary.libraries.ctaButton.path
6538
: "",
6639
]);
6740

6841
return (
69-
<BoxComponent
70-
containerClassName={styles.container}
71-
contentClassName={styles.content}
72-
>
42+
<div className={styles.content}>
7343
<div className={clsx(styles.assets__column)}>
7444
<h4
7545
className={clsx(
7646
styles.assets__title,
77-
getLocalizedSecondaryFont(languageCode),
47+
getLocalizedSecondaryFont(languageCode)
7848
)}
7949
>
80-
{dictionary.libraries.title}
50+
{jwtDictionary.libraries.title}
8151
</h4>
8252
<div className={styles.assets__content}>
8353
<p className={styles.assets__description}>
84-
{dictionary.libraries.description}
54+
{jwtDictionary.libraries.description}
8555
</p>
8656
<Link className={styles.asset__link} href={libraryLinkPath}>
87-
{dictionary.libraries.ctaButton.label}
57+
{jwtDictionary.libraries.ctaButton.label}
58+
<ArrowHeadIconComponent />
8859
</Link>
8960
</div>
9061
</div>
91-
<div className={clsx(styles.assets__column)}>
92-
<h4
93-
className={clsx(
94-
styles.assets__title,
95-
getLocalizedSecondaryFont(languageCode),
96-
)}
97-
>
98-
{dictionary.assets.badges.title}
99-
</h4>
100-
<div className={styles.assets__content}>
101-
<div className={styles.card}>
102-
<Image
103-
{...dictionary.assets.badges.images.viewOn}
104-
alt={dictionary.assets.badges.images.viewOn.alt}
105-
/>
106-
<DownloadButton
107-
filename={"view-on-jwt.badge.png"}
108-
asset={viewOnImg}
109-
/>
110-
</div>
111-
<div className={styles.card}>
112-
<Image
113-
{...dictionary.assets.badges.images.compatible}
114-
alt={dictionary.assets.badges.images.compatible.alt}
115-
/>
116-
<DownloadButton
117-
filename={"jwt-compatible.badge.png"}
118-
asset={compatibleImg}
119-
/>
120-
</div>
121-
</div>
122-
</div>
123-
<div className={clsx(styles.assets__column)}>
124-
<h4
125-
className={clsx(
126-
styles.assets__title,
127-
getLocalizedSecondaryFont(languageCode),
128-
)}
129-
>
130-
{dictionary.assets.logotype.title}
131-
</h4>
132-
<div className={styles.assets__content}>
133-
<div className={styles.card}>
134-
<Image
135-
{...dictionary.assets.logotype.images.icon}
136-
alt={dictionary.assets.logotype.images.icon.alt}
137-
/>
138-
<DownloadButton filename={"jwt.icon.png"} asset={iconImg} />
139-
</div>
140-
<div className={styles.card}>
141-
<Image
142-
{...dictionary.assets.logotype.images.iconWithLabel}
143-
alt={dictionary.assets.logotype.images.iconWithLabel.alt}
144-
/>
145-
<DownloadButton
146-
filename={"jwt-label.icon.png"}
147-
asset={iconWithLabelImg}
148-
/>
149-
</div>
150-
</div>
151-
</div>
152-
</BoxComponent>
62+
<Auth0CtaComponent
63+
languageCode={languageCode}
64+
dictionary={auth0Dictionary.banner}
65+
/>
66+
</div>
15367
);
15468
};

‎src/features/home/components/assets/assets.module.scss‎

Lines changed: 54 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,45 @@
66
}
77

88
.content {
9-
@include InnerContentGrid;
10-
padding-top: 4rem;
11-
padding-bottom: 4rem;
9+
display: flex;
10+
width: calc(100% - 2rem);
11+
max-width: 1312px;
12+
margin: 0 auto;
13+
flex-direction: column;
1214
row-gap: 2rem;
1315

16+
1417
@media #{$breakpoint-dimension-sm} {
18+
width: calc(100% - 4rem);
19+
grid-template-columns: repeat(12,minmax(0,1fr));
20+
}
21+
22+
@media #{$breakpoint-dimension-lg} {
23+
width: calc(100% - 128px);
24+
display: grid;
25+
grid-template-columns: repeat(12, minmax(0, 1fr));
26+
grid-column-gap: 1rem;
27+
column-gap: 1rem;
28+
width: calc(100% - 2rem);
29+
max-width: 1312px;
30+
margin: 0 auto;
31+
grid-row-gap: unset;
1532
row-gap: unset;
1633
}
34+
1735
}
1836

1937
.assets__column {
20-
grid-column: span 6;
38+
grid-column: span 1;
2139
color: var(--color_fg_default);
2240
display: flex;
2341
flex-direction: column;
2442
gap: 1.25rem;
43+
border: 1px solid var(--color_border_default);
44+
border-radius: 1rem;
45+
padding: 2.5rem;
46+
background-color: var(--color_bg_layer);
47+
box-shadow: 0 2px 12px -4px rgba(0,0,0,.08),0 2px 1px -.5px rgba(0,0,0,.04),0 2px 4px -4px rgba(0,0,0,.05),inset -.5px -.5px 2px rgba(0,0,0,.04);
2548

2649
@media #{$breakpoint-dimension-sm} {
2750
grid-column: span 4;
@@ -30,14 +53,19 @@
3053
}
3154

3255
.assets__title {
33-
color: var(--color_fg_bold);
56+
width: 100%;
57+
margin: 0;
58+
text-align: left;
3459
font-size: 1.5rem;
35-
line-height: 2rem;
36-
font-style: normal;
60+
line-height: 1.15;
3761
font-weight: 500;
38-
letter-spacing: -0.5px;
62+
color: var(--color_fg_bold);
63+
font-feature-settings: lining-nums proportional-nums;
64+
font-variant-numeric: lining-nums proportional-nums;
65+
font-style: normal;
3966

40-
@media #{$breakpoint-dimension-sm} {
67+
@media #{$breakpoint-dimension-lg} {
68+
font-size: 2.5rem;
4169
}
4270
}
4371

@@ -49,29 +77,32 @@
4977
.asset__link {
5078
width: fit-content;
5179
display: flex;
52-
height: 48px;
53-
padding: 1rem 1rem;
80+
padding: .25rem .75rem;
5481
justify-content: center;
5582
align-items: center;
56-
gap: 0.5rem;
57-
58-
border-radius: 6px;
59-
background: var(--color_bg_button_primary);
60-
color: var(--color_fg_on_button_primary);
61-
border: 1px solid var(--color_border_button);
62-
63-
font-size: 1rem;
64-
font-style: normal;
65-
font-weight: 400;
66-
line-height: 1.5rem;
67-
letter-spacing: 0.32px;
83+
gap: .25rem;
84+
border-radius: 9999px;
85+
background: var(--color_bg_layer);
86+
border: 1px solid var(--color_border_default);
87+
font-size: .875rem;
88+
font-weight: 700;
89+
line-height: 1.375rem;
90+
font-weight: 500;
91+
letter-spacing: -.2px;
92+
transition: all .3s ease-in-out;
6893

6994
&:focus-visible {
7095
outline: solid 1px var(--color_border_focus);
7196
outline-offset: 0.125rem;
7297
border-radius: 0.125rem;
7398
}
7499

100+
&:hover {
101+
border: 1px solid var(--color_border_bold);
102+
box-shadow: 0 0 0 4px rgba(0,0,0,.12);
103+
transition: all .2s ease-out;
104+
}
105+
75106
@media #{$breakpoint-dimension-sm} {
76107
margin-top: 40px;
77108
}
@@ -114,19 +145,3 @@
114145
padding: 2rem 15px;
115146
}
116147
}
117-
118-
.downloadButton {
119-
background: var(--color_bg_layer);
120-
border-radius: 0.25rem;
121-
outline: none;
122-
border: none;
123-
124-
height: 2rem;
125-
width: 2rem;
126-
127-
&:focus-visible {
128-
outline: solid 1px var(--color_border_focus);
129-
outline-offset: 0.125rem;
130-
border-radius: 0.125rem;
131-
}
132-
}

0 commit comments

Comments
 (0)