Skip to content

Commit

Permalink
OCT-2071: Implement email subscription field for Octant app (#522)
Browse files Browse the repository at this point in the history
## Description

## Definition of Done

1. [ ] If required, the desciption of your change is added to the [QA
changelog](https://www.notion.so/octantapp/Changelog-for-the-QA-d96fa3b411cf488bb1d8d9a598d88281)
2. [ ] Acceptance criteria are met.
3. [ ] PR is manually tested before the merge by developer(s).
    - [ ] Happy path is manually checked.
4. [ ] PR is manually tested by QA when their assistance is required
(1).
- [ ] Octant Areas & Test Cases are checked for impact and updated if
required (2).
5. [ ] Unit tests are added unless there is a reason to omit them.
6. [ ] Automated tests are added when required.
7. [ ] The code is merged.
8. [ ] Tech documentation is added / updated, reviewed and approved
(including mandatory approval by a code owner, should such exist for
changed files).
    - [ ] BE: Swagger documentation is updated.
9. [ ] When required by QA:
    - [ ] Deployed to the relevant environment.
    - [ ] Passed system tests.

---

(1) Developer(s) in coordination with QA decide whether it's required.
For small tickets introducing small changes QA assistance is most
probably not required.

(2) [Octant Areas & Test
Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).
  • Loading branch information
jmikolajczyk authored Oct 23, 2024
2 parents 4ae8f75 + 37b9563 commit f7df4a5
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 56 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,131 @@
display: flex;
align-items: center;
width: 100%;
padding: 4.8rem 0 21rem;
padding: 3.2rem 0 20rem;
flex-direction: column-reverse;
@include layoutMaxWidth();

@media #{$tablet-up} {
flex-direction: row;
padding: 4.8rem 0 26rem;
flex-direction: column;
padding: 4.8rem 0 20rem;
}

@media #{$desktop-up} {
padding: 4.8rem 0 5.6rem;
padding: 4.8rem;
margin-bottom: 0;
}

.wrapper {
width: 100%;
flex-direction: column-reverse;
display: flex;
text-align: start;
align-items: center;
margin-right: 2.4rem;

.octantText {
font-size: $font-size-12;
min-width: 23.2rem;
margin-left: 1.6rem;
font-weight: $font-weight-semibold;
line-height: 2rem;
color: $color-octant-grey5;
}
}

.links {
display: grid;
grid-template-columns: repeat(3, 11.2rem [col-start]);
grid-template-rows: 2.4rem 2.4rem;
grid-auto-flow: column;
margin-bottom: 3.2rem;

@media #{$tablet-up} {
margin: 0;
flex-direction: row;
padding-bottom: 4.8rem;
border-bottom: 0.1rem solid $color-octant-grey1;
}

.link {
cursor: pointer;
.info {
width: 100%;
display: flex;
font-size: $font-size-14;
font-weight: $font-weight-semibold;
color: $color-octant-grey5;
text-align: start;
align-items: center;
padding-top: 3.2rem;

@media #{$tablet-up} {
padding-top: 0;
width: auto;
margin-right: 2.4rem;
}

@media #{$desktop-up} {
margin-right: 6.2rem;
}

.octantText {
font-size: $font-size-12;
min-width: 23.2rem;
margin-left: 1.6rem;
font-weight: $font-weight-semibold;
line-height: 2rem;
color: $color-octant-grey5;
}
}

.links {
grid-template-columns: repeat(3, minmax(11.2rem, auto) [col-start]);
padding: 3.2rem 0;
width: 100%;
display: grid;
gap: 0.8rem 0;
grid-template-rows: 2.4rem 2.4rem;
grid-auto-flow: column;
border-bottom: 0.1rem solid $color-octant-grey1;

@media #{$tablet-up} {
margin: 0;
border-bottom: none;
padding: 0;
width: auto;
margin-right: auto;
}

.link {
cursor: pointer;
display: flex;
font-size: $font-size-14;
font-weight: $font-weight-semibold;
color: $color-octant-grey5;

&:hover {
color: $color-octant-grey13;
&:hover {
color: $color-octant-grey13;
}
}
}

.golemFoundationLink {
color: $color-octant-green;
text-decoration: underline;
}
}
}

.newsletterWrapper {
width: 100%;
display: flex;
flex-direction: column;
padding-bottom: 2.8rem;
border-bottom: 0.1rem solid $color-octant-grey1;

@media #{$tablet-up} {
padding-top: 2.8rem;
padding-bottom: 0;
flex-direction: column-reverse;
border-bottom: none;
}

.newsletter {
width: 100%;
margin-right: auto;
max-width: 32.6rem;

.golemFoundationLink {
color: $color-octant-green;
text-decoration: underline;
@media #{$tablet-up} {
max-width: 35.2rem;
}
}

.newsletterText {
text-align: left;
font-size: $font-size-12;
font-weight: $font-weight-semibold;
color: $color-octant-grey5;
line-height: 2.4rem;
margin-top: 0.4rem;

@media #{$tablet-up} {
margin-top: 0;
margin-bottom: 0.4rem;
}
}
}
64 changes: 43 additions & 21 deletions client/src/components/shared/Layout/LayoutFooter/LayoutFooter.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import cx from 'classnames';
import React, { FC, memo } from 'react';
import React, { FC, memo, useLayoutEffect, useRef } from 'react';
import { Trans, useTranslation } from 'react-i18next';

import Svg from 'components/ui/Svg';
Expand All @@ -25,6 +25,7 @@ import LayoutFooterProps from './types';
const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
const { t } = useTranslation('translation', { keyPrefix: 'layout.footer' });
const { isDesktop } = useMediaQuery();
const newsletterRef = useRef<HTMLDivElement>(null);

const links = isDesktop
? [
Expand All @@ -48,31 +49,52 @@ const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
{ label: t('links.termsOfUse'), link: TERMS_OF_USE },
];

useLayoutEffect(() => {
if (!newsletterRef.current || newsletterRef.current.children.length) {return;}
const script = document.createElement('script');
script.setAttribute(
'src',
'https://cdn.jsdelivr.net/ghost/signup-form@~0.1/umd/signup-form.min.js',
);
script.setAttribute('data-site', 'https://blog.octant.build');
script.setAttribute('data-button-color', '#000000');
script.setAttribute('data-button-text-color', '#FFFFFF');
script.setAttribute('async', 'true');

newsletterRef.current.appendChild(script);
}, []);

return (
<div className={cx(styles.root, className)}>
<div className={styles.wrapper}>
<Svg img={octantSemiTransparent} size={4.8} />
<div className={styles.octantText}>
<Trans
components={[
// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
<a
className={styles.golemFoundationLink}
href={GOLEM_FOUNDATION_LINK}
rel="noreferrer"
target="_blank"
/>,
]}
i18nKey="layout.footer.octantText"
/>
<div className={styles.info}>
<Svg img={octantSemiTransparent} size={4.8} />
<div className={styles.octantText}>
<Trans
components={[
// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
<a
className={styles.golemFoundationLink}
href={GOLEM_FOUNDATION_LINK}
rel="noreferrer"
target="_blank"
/>,
]}
i18nKey="layout.footer.octantText"
/>
</div>
</div>
<div className={styles.links}>
{links.map(({ link, label }) => (
<a key={link} className={styles.link} href={link} rel="noreferrer" target="_blank">
{`→ ${label}`}
</a>
))}
</div>
</div>
<div className={styles.links}>
{links.map(({ link, label }) => (
<a key={link} className={styles.link} href={link} rel="noreferrer" target="_blank">
{`→ ${label}`}
</a>
))}
<div className={styles.newsletterWrapper}>
<div ref={newsletterRef} className={styles.newsletter} />
<div className={styles.newsletterText}>{t('newsletterText')}</div>
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions client/src/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,7 @@
"patron": "Patron"
},
"footer": {
"newsletterText": "Get PGF news and updates from Octant. No spam, ever",
"octantText": "Octant is a <0>Golem Foundation</0> project,<br/> launched in 2023.",
"links": {
"website": "Website",
Expand Down

0 comments on commit f7df4a5

Please sign in to comment.