Skip to content

Commit

Permalink
fix: css
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillermo Alejandro Gallardo Diez authored and Guillermo Alejandro Gallardo Diez committed Jan 5, 2025
1 parent b14cccf commit a194e5a
Showing 1 changed file with 94 additions and 95 deletions.
189 changes: 94 additions & 95 deletions src/pages/newsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import styled, { keyframes } from 'styled-components';
import useSWR from 'swr';
import { sanitize } from 'dompurify';

import ScrollToTop from '@/components/scrollToTop';
import { useDefaultLayout } from '@/hooks/useLayout';
Expand All @@ -29,7 +30,8 @@ const IssueCover = styled.img`
const GreenBox = styled.div`
background: #00ec97;
border-radius: 6px;
padding: 5px 10px;
padding: 1rem 10px;
margin-bottom: 1rem;
`;

const Confirmation = styled.div`
Expand Down Expand Up @@ -68,6 +70,13 @@ const LinksList = styled.ul`
margin: 10px 0;
`;

const Fixed = styled.div`
@media (min-width: 1000px) {
position: fixed;
padding: 0 1rem 0 0;
}
`

type SubscribeForm = {
email: string;
};
Expand Down Expand Up @@ -141,107 +150,97 @@ const NewsPage: NextPageWithLayout = () => {
if (campaignLoading) return;

return (
<>
<Section grow="available">
<Head>
<title>News</title>
<title>NEAR Newsletter</title>
</Head>
<Section grow="available" style={{ border: 'none', paddingTop: '2rem' }}>
<Container>
<Grid columns="2fr 1fr" columnsPhone="minmax(0, 1fr)" columnsTablet="minmax(0, 1fr)" gap="l">
{issueLoading ? (
<>
<div className="spinner-border text-dark" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</>
) : (
<div>
<div dangerouslySetInnerHTML={{ __html: parseCampaignHTML(issueDetails) }}></div>
</div>
)}

<Flex style={{ flexDirection: 'column' }}>
<div>
<IssueCover src={`newsletter/${issueId}.jpg`} alt="" />
</div>
<GreenBox style={{ padding: '15px' }}>
<Grid columns="2fr 1fr" columnsPhone="minmax(0, 1fr)" columnsTablet="minmax(0, 1fr)">
{issueLoading ? (
<div className="spinner-border text-dark" role="status">
<span className="visually-hidden">Loading...</span>
</div>
) : (
<div style={{ overflowX: "auto" }}>
<div dangerouslySetInnerHTML={{ __html: sanitize(parseCampaignHTML(issueDetails)) }}></div>
</div>
)}

<Flex style={{ flexDirection: 'column' }}>
<Fixed>
<IssueCover src={`newsletter/${issueId}.jpg`} alt="" />
<GreenBox style={{ padding: '15px' }}>
<h3>
<Text size="text-l">Subscribe to the newsletter</Text>
</h3>
{isFormSubmitted ? (
<>
<Confirmation style={{ background: 'white', padding: '15px, 10px' }}>
<Text size="text-s">
<Text weight={600}>Thank you!</Text> Please visit your e-mail to confirm your subscription.
</Text>
</Confirmation>
</>
) : (
<>
<Form onSubmit={handleSubmit(onSubmit)}>
{errors.email && <span style={{ color: 'red' }}> This field is required!</span>}
<SubscribeForm gap="none">
<input
{...register('email', { required: true })}
placeholder="dev@youremail.com"
type="email"
className=""
/>
<Button
label="Subscribe"
style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}
type="submit"
/>
</SubscribeForm>
</Form>
</>
)}
</GreenBox>
<GreenBox>
<h3>
<Text size="text-l">Subscribe to the newsletter</Text>
<Text size="text-l">Recent Issues</Text>
</h3>
{isFormSubmitted ? (
<>
<Confirmation style={{ background: 'white', padding: '15px, 10px' }}>
<Text size="text-s">
<Text weight={600}>Thank you!</Text> Please visit your e-mail to confirm your subscibtion.
</Text>
</Confirmation>{' '}
</>
) : (
<>
<Form onSubmit={handleSubmit(onSubmit)}>
{errors.email && <span style={{ color: 'red' }}> This field is required!</span>}
<SubscribeForm gap="none">
<input
{...register('email', { required: true })}
placeholder="dev@youremail.com"
type="email"
className=""
/>
<Button
label="Subscribe"
style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}
type="submit"
/>
</SubscribeForm>
</Form>
</>
)}
</GreenBox>
<div>
<GreenBox>
<h3>
<Text size="text-l">Recent Issues</Text>
</h3>
</GreenBox>
<LinksList>
{campaigns.map((issue: Issue) => (
<li key={issue.id} style={{ fontWeight: issueId === issue.id ? 'bold' : 'normal' }}>
<Link href={{ pathname: '/newsletter', query: { id: issue.id } }} prefetch={true}>
{issue.settings.subject_line}
</Link>
</li>
))}
</LinksList>
<hr />
</div>
<div>
<GreenBox>
<h3>
<Text size="text-l">Looking for more?</Text>
</h3>
</GreenBox>
<LinksList>
<li>
<Link href={'https://nearweek.com'}> NEARWEEK →</Link>
</li>
<li>
<Link href={'https://x.com/neardevhub'}> DevHub on X →</Link>
</li>
<li>
<Link href={'https://x.com/NEARProtocol'}> NEAR on X →</Link>
<LinksList>
{campaigns.map((issue: Issue) => (
<li key={issue.id} style={{ fontWeight: issueId === issue.id ? 'bold' : 'normal' }}>
<Link href={{ pathname: '/newsletter', query: { id: issue.id } }} prefetch={true}>
{issue.settings.subject_line}
</Link>
</li>
<li>
<Link href={'https://near.org/blog'}> NEAR Blog →</Link>
</li>
</LinksList>
<hr />
</div>
</Flex>
</Grid>
</Container>
</Section>
))}
</LinksList>
<hr />
<GreenBox>
<h3>
<Text size="text-l">Looking for more?</Text>
</h3>
</GreenBox>
<LinksList>
<li>
<Link href={'https://nearweek.com'}> NEARWEEK →</Link>
</li>
<li>
<Link href={'https://x.com/neardevhub'}> DevHub on X →</Link>
</li>
<li>
<Link href={'https://x.com/NEARProtocol'}> NEAR on X →</Link>
</li>
<li>
<Link href={'https://near.org/blog'}> NEAR Blog →</Link>
</li>
</LinksList>
<hr />
</Fixed>
</Flex>
</Grid>
<ScrollToTop />
</>
</Section>
);
};

Expand Down

0 comments on commit a194e5a

Please sign in to comment.