Skip to content

Commit a5b6fa1

Browse files
austincondiffaustincondiff
committed
Built out tile component and prepared temporary site before preview release
1 parent 0d7fbbf commit a5b6fa1

28 files changed

+2058
-157
lines changed

‎assets/discord-icon.svg

Lines changed: 7 additions & 0 deletions
Loading

‎assets/github-icon.svg

Lines changed: 13 additions & 0 deletions
Loading

‎assets/twitter-icon.svg

Lines changed: 7 additions & 0 deletions
Loading

‎components/common/Button.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from "styled-components";
22

33
const Button = styled.button`
4-
cursor: pointer;
4+
cursor: ${({ disabled }) => disabled ? `default` : `pointer`};
55
display: inline-block;
66
text-align: center;
77
white-space: nowrap;
@@ -16,7 +16,7 @@ const Button = styled.button`
1616
padding-top: 8px;
1717
padding-bottom: 8px;
1818
border-radius: 18px;
19-
background: #0071e3;
19+
background: var(${({ disabled }) => disabled ? `--glyph-gray-tertiary` : `--fill-blue`});
2020
color: #fff;
2121
border: 0;
2222
outline: 0;

‎components/common/Footer.jsx

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React from 'react';
33
import styled from 'styled-components'
44
import ColorSchemeToggle from './ColorSchemeToggle';
55
import { mediaQueries } from '@/styles/breakpoints';
6+
import SocialSection from './SocialSection';
7+
import links from '@/data/links';
68

79
const FooterWrap = styled.footer`
810
font-size: 12px;
@@ -16,6 +18,12 @@ const FooterWrap = styled.footer`
1618
background-color: var(--background-tertiary-color);
1719
color: var(--label-tertiary-color);
1820
box-sizing: content-box;
21+
a {
22+
color: var(--glyph-blue);
23+
:hover {
24+
text-decoration: underline;
25+
}
26+
}
1927
`
2028

2129
const FooterContent = styled.div`
@@ -40,12 +48,6 @@ const MiniFooterTop = styled.div`
4048
align-items: flex-end;
4149
justify-content: space-between;
4250
border-color: var(--separator-color);
43-
a {
44-
color: var(--glyph-blue);
45-
:hover {
46-
text-decoration: underline;
47-
}
48-
}
4951
@media ${mediaQueries.sm} {
5052
align-items: flex-start;
5153
flex-direction: column;
@@ -101,9 +103,10 @@ function Footer() {
101103
aria-labelledby="footer-label"
102104
>
103105
<FooterContent>
106+
<SocialSection />
104107
<FooterMini>
105108
<MiniFooterTop>
106-
<div>To view the latest CodeEdit developments, visit <a href="https://github.com/CodeEditApp/CodeEdit">our GitHub repo</a>.</div>
109+
<div>To view the latest CodeEdit developments, visit <a href={links.githubProject}>our roadmap</a>.</div>
107110
<ColorSchemeToggle />
108111
</MiniFooterTop>
109112
<MiniFooterBottom>
@@ -112,14 +115,14 @@ function Footer() {
112115
<a href="https://codeedit.app">CodeEdit.</a> All rights reserved.
113116
</LegalCopyright>
114117
<LegalLinks>
115-
<LegalLink href="/legal/tos">
118+
{/* <LegalLink href="/legal/tos">
116119
Terms of Use
117120
</LegalLink>
118121
<LegalLink href="/legal/privacy">
119122
Privacy Policy
120-
</LegalLink>
121-
<LegalLink href="/legal/terms">
122-
Agreements and Open Source Licenses
123+
</LegalLink> */}
124+
<LegalLink href={links.license}>
125+
Lincense
123126
</LegalLink>
124127
</LegalLinks>
125128
</MiniFooterBottom>

‎components/common/Header.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,8 @@ function Header() {
162162
</label>
163163
</Action>
164164
<Action>
165-
<a href="https://nightly.link/CodeEditApp/CodeEdit/workflows/nightly/main/CodeEdit_Nightly.dmg">
166-
<Button compact>Download Preview</Button>
165+
<a>
166+
<Button disabled compact>Download Coming Soon</Button>
167167
</a>
168168
</Action>
169169
</Actions>

‎components/common/Ribbon.jsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const RibbonWrap = styled.div`
1515
--ribbon-link-color: #fff;
1616
--ribbon-focus-color: rgba(255,255,255,0.6);
1717
overflow: hidden;
18+
${({ onClick }) => onClick ? `cursor: pointer;` : ``}
1819
`;
1920
const RibbonDrop = styled.div`
2021
animation: ${ribbonDrop} 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
@@ -34,20 +35,18 @@ const RibbonContent = styled.div`
3435
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
3536
`;
3637

37-
function Ribbon({ children }) {
38-
return (
39-
<RibbonWrap>
40-
<RibbonDrop>
41-
<RibbonContentWrapper>
42-
<RibbonContent>
43-
<div className="column large-12 large-centered">
44-
{children}
45-
</div>
46-
</RibbonContent>
47-
</RibbonContentWrapper>
48-
</RibbonDrop>
49-
</RibbonWrap>
50-
)
38+
function Ribbon({ children, onClick, ...props }) {
39+
return (
40+
<RibbonWrap onClick={onClick} {...props}>
41+
<RibbonDrop>
42+
<RibbonContentWrapper>
43+
<RibbonContent>
44+
{children}
45+
</RibbonContent>
46+
</RibbonContentWrapper>
47+
</RibbonDrop>
48+
</RibbonWrap>
49+
)
5150
}
5251

5352
export default Ribbon;

‎components/common/SocialSection.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import styled from 'styled-components';
2+
import { Heart } from 'react-feather';
3+
import Typography from '@/components/common/Typography';
4+
import { Grid, GridItem, Section, Stack } from '@/components/common/layout';
5+
import TwitterSvg from '@/assets/twitter-icon.svg'
6+
import DiscordSvg from '@/assets/discord-icon.svg'
7+
import GitHubSvg from '@/assets/github-icon.svg'
8+
import links from '@/data/links';
9+
10+
const TwitterIcon = styled(TwitterSvg)`
11+
width: 48px;
12+
height: 48px;
13+
`
14+
const DiscordIcon = styled(DiscordSvg)`
15+
width: 48px;
16+
height: 48px;
17+
`
18+
const GitHubIcon = styled(GitHubSvg)`
19+
width: 48px;
20+
height: 48px;
21+
`
22+
23+
const SocialSection = () => {
24+
return (
25+
<Section contained gutterY>
26+
<Grid columns={{ xs: 1, md: 2, lg: 4}} gap>
27+
<GridItem>
28+
<Stack gap={1} align="center" style={{ textAlign: 'center' }}>
29+
<TwitterIcon />
30+
<Typography variant="headline-body">Keep up to date</Typography>
31+
<Typography variant="body-reduced">
32+
Stay in the know! Follow us @CodeEditApp on Twitter to get the
33+
latest updates.
34+
</Typography>
35+
<Typography variant="body-reduced"><a href={links.twitter}>Follow Us</a></Typography>
36+
</Stack>
37+
</GridItem>
38+
<GridItem>
39+
<Stack gap={1} align="center" style={{ textAlign: 'center' }}>
40+
<DiscordIcon />
41+
<Typography variant="headline-body">Join the conversation</Typography>
42+
<Typography variant="body-reduced">
43+
Some of the best ideas come from our community. Join us to influence CodeEdit.
44+
</Typography>
45+
<Typography variant="body-reduced"><a href={links.discord}>Start a conversation</a></Typography>
46+
</Stack>
47+
</GridItem>
48+
<GridItem>
49+
<Stack gap={1} align="center" style={{ textAlign: 'center' }}>
50+
<GitHubIcon />
51+
<Typography variant="headline-body">Start Contributing</Typography>
52+
<Typography variant="body-reduced">
53+
Help shape the future of CodeEdit. Submit an issue or become a contributor today.
54+
</Typography>
55+
<Typography variant="body-reduced"><a href={links.githubRepo}>Check it out</a></Typography>
56+
</Stack>
57+
</GridItem>
58+
<GridItem>
59+
<Stack gap={1} align="center" style={{ textAlign: 'center' }}>
60+
<Heart size={48} />
61+
<Typography variant="headline-body">Become a Sponsor</Typography>
62+
<Typography variant="body-reduced">
63+
Don&apos;t have time to contribute? You can show your support by becaoming a sponsor.
64+
</Typography>
65+
<Typography variant="body-reduced"><a href={links.githubSponsor}>Sponsor the Project</a></Typography>
66+
</Stack>
67+
</GridItem>
68+
</Grid>
69+
</Section>
70+
);
71+
}
72+
73+
export default SocialSection;

0 commit comments

Comments
 (0)