Skip to content

Commit 8c2e8c5

Browse files
raclimraclim
committed
refactor: update class names, add hyperlink to email address
1 parent f89c39b commit 8c2e8c5

File tree

3 files changed

+42
-35
lines changed

3 files changed

+42
-35
lines changed

‎client/modules/About/About.styles.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22
import { remSize, prop } from '../../theme';
33

4-
export const AboutContent = styled.div`
4+
export const AboutPageContent = styled.div`
55
margin: ${remSize(42)} ${remSize(295)};
66
77
@media (max-width: 1279px) {
@@ -13,7 +13,7 @@ export const AboutContent = styled.div`
1313
}
1414
`;
1515

16-
export const IntroSection = styled.div`
16+
export const Intro = styled.div`
1717
& h1 {
1818
font-size: ${remSize(32)};
1919
font-weight: 700;
@@ -42,7 +42,7 @@ export const IntroSection = styled.div`
4242
}
4343
`;
4444

45-
export const IntroSectionContent = styled.div`
45+
export const IntroHeadline = styled.div`
4646
display: flex;
4747
align-items: center;
4848
@@ -70,7 +70,7 @@ export const IntroSectionContent = styled.div`
7070
}
7171
`;
7272

73-
export const IntroSectionDescription = styled.div`
73+
export const IntroDescription = styled.div`
7474
line-height: ${remSize(27)};
7575
font-size: ${remSize(16)};
7676
margin: ${remSize(24)} 0;
@@ -145,7 +145,7 @@ export const SectionItem = styled.div`
145145
}
146146
`;
147147

148-
export const ContactSection = styled.div`
148+
export const Contact = styled.div`
149149
margin-bottom: ${remSize(50)};
150150
151151
& h2 {
@@ -161,15 +161,15 @@ export const ContactSection = styled.div`
161161
}
162162
`;
163163

164-
export const ContactSectionTitle = styled.p`
164+
export const ContactTitle = styled.p`
165165
width: 50%;
166166
167167
@media (max-width: 769px) {
168168
width: 30%;
169169
}
170170
`;
171171

172-
export const ContactSectionDetails = styled.p`
172+
export const ContactHandles = styled.p`
173173
width: 50%;
174174
175175
& a {

‎client/modules/About/pages/About.jsx

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,24 @@ import { useTranslation } from 'react-i18next';
66
import { Link } from 'react-router-dom';
77

88
import {
9-
AboutContent,
10-
IntroSection,
11-
IntroSectionContent,
12-
IntroSectionDescription,
9+
AboutPageContent,
10+
Intro,
11+
IntroHeadline,
12+
IntroDescription,
1313
Section,
1414
SectionContainer,
1515
SectionItem,
16-
ContactSection,
17-
ContactSectionTitle,
18-
ContactSectionDetails,
16+
Contact,
17+
ContactTitle,
18+
ContactHandles,
1919
Footer
2020
} from '../About.styles';
2121

2222
import { ContactSectionLinks, AboutSectionInfo } from '../statics/aboutData';
2323
import Nav from '../../IDE/components/Header/Nav';
2424
import RootPage from '../../../components/RootPage';
2525
import packageData from '../../../../package.json';
26+
2627
import HeartIcon from '../../../images/heart.svg';
2728
import AsteriskIcon from '../../../images/p5-asterisk.svg';
2829
import LogoIcon from '../../../images/p5js-square-logo.svg';
@@ -62,10 +63,10 @@ const About = () => {
6263

6364
<Nav layout="dashboard" />
6465

65-
<AboutContent>
66-
<IntroSection>
66+
<AboutPageContent>
67+
<Intro>
6768
<h1>{t('About.Title')}</h1>
68-
<IntroSectionContent>
69+
<IntroHeadline>
6970
<LogoIcon
7071
role="img"
7172
aria-label={t('Common.p5logoARIA')}
@@ -74,11 +75,11 @@ const About = () => {
7475
<div>
7576
<p>{t('About.OneLine')}</p>
7677
</div>
77-
</IntroSectionContent>
78-
<IntroSectionDescription>
79-
<p>{t('About.Description1')}</p>
80-
<p>{t('About.Description2')}</p>
81-
</IntroSectionDescription>
78+
</IntroHeadline>
79+
<IntroDescription>
80+
<p>{t('About.IntroDescription1')}</p>
81+
<p>{t('About.IntroDescription2')}</p>
82+
</IntroDescription>
8283
<a
8384
href="https://p5js.org/donate/"
8485
target="_blank"
@@ -87,23 +88,29 @@ const About = () => {
8788
<HeartIcon aria-hidden="true" focusable="false" />
8889
{t('About.Donate')}
8990
</a>
90-
</IntroSection>
91+
</Intro>
9192

9293
{AboutSectionInfo.map((section) => (
9394
<AboutSection key={t(section.header)} section={section} t={t} />
9495
))}
9596

96-
<ContactSection>
97+
<Contact>
9798
<h2>{t('Contact')}</h2>
9899
<div>
99-
<ContactSectionTitle>{t('About.Email')}</ContactSectionTitle>
100-
<ContactSectionDetails>
101-
{t('About.EmailAddress')}
102-
</ContactSectionDetails>
100+
<ContactTitle>{t('About.Email')}</ContactTitle>
101+
<ContactHandles>
102+
<a
103+
href={t('About.EmailAddress')}
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
>
107+
{t('About.EmailAddress')}
108+
</a>
109+
</ContactHandles>
103110
</div>
104111
<div>
105-
<ContactSectionTitle>{t('About.Socials')}</ContactSectionTitle>
106-
<ContactSectionDetails>
112+
<ContactTitle>{t('About.Socials')}</ContactTitle>
113+
<ContactHandles>
107114
{ContactSectionLinks.map((item, index, array) => (
108115
<React.Fragment key={item.href}>
109116
<a href={item.href} target="_blank" rel="noopener noreferrer">
@@ -112,9 +119,9 @@ const About = () => {
112119
{index < array.length - 1 && ', '}
113120
</React.Fragment>
114121
))}
115-
</ContactSectionDetails>
122+
</ContactHandles>
116123
</div>
117-
</ContactSection>
124+
</Contact>
118125

119126
<Footer>
120127
<div>
@@ -129,7 +136,7 @@ const About = () => {
129136
p5.js: <span>v{p5version}</span>
130137
</p>
131138
</Footer>
132-
</AboutContent>
139+
</AboutPageContent>
133140
</RootPage>
134141
);
135142
};

‎translations/locales/en-US/translations.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@
9191
"TitleHelmet": "p5.js Web Editor | About",
9292
"OneLine": "Create, share, and remix p5.js sketches with the p5.js Editor.",
9393
"Contribute": "Contribute",
94-
"Description1": "p5.js is a free, open-source JavaScript library for learning to code and make art. Using the p5.js Editor, you can create, share, and remix p5.js sketches without needing to download or configure anything.",
95-
"Description2": "We believe software the tools to learn it, should be as open and inclusive as possible. You can support this work by making a donation to the Processing Foundation, the organization that supports p5.js. Your donation supports sofware development for p5.js, education resources like code examples and tutorials, fellowships, and community events.",
94+
"IntroDescription1": "p5.js is a free, open-source JavaScript library for learning to code and make art. Using the p5.js Editor, you can create, share, and remix p5.js sketches without needing to download or configure anything.",
95+
"IntroDescription2": "We believe software the tools to learn it, should be as open and inclusive as possible. You can support this work by making a donation to the Processing Foundation, the organization that supports p5.js. Your donation supports sofware development for p5.js, education resources like code examples and tutorials, fellowships, and community events.",
9696
"Donate": "Donate",
9797
"NewP5": "New to p5.js?",
9898
"Report": "Report a Bug",

0 commit comments

Comments
 (0)