Merge branch 'release/0.8.2'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nnk",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": true,
   "description": "No Named Kitchen: Supporting People on the Move",
   "repository": "https://github.com/annabranco/nnk",

packages/nnk/src/components/controllers/Header/index.js

@@ -14,11 +14,9 @@ import { StatePropType, ActionsPropType } from '../../../types';
 import { HeaderContainer, Logo } from './styles';
 
 const Header = ({ state, actions }) => {
-  // eslint-disable-next-line no-unused-vars
   const [activeLanguage, changeLanguage] = useState('es');
   const { colors } = state.theme;
-  // eslint-disable-next-line no-unused-vars
-  const { changeTheme } = actions.theme;
+  // const { changeTheme } = actions.theme;
   const MOBILE_VERSION = getMediaQuery() === MOBILE;
 
   // const onClickFlag = () => {
@@ -53,5 +51,4 @@ Header.propTypes = {
   actions: ActionsPropType.isRequired
 };
 
-// Connect the Header component to get access to the `state` in it's `props`
 export default connect(Header);

packages/nnk/src/components/controllers/MainPage/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'frontity';
 import React, { useEffect, useState } from 'react'; // eslint-disable-line import/no-extraneous-dependencies
+import config from '../../../setup/config';
 import { getMediaQuery } from '../../../utils';
 import {
   HOMEPAGE_TEXTS,
@@ -14,7 +15,7 @@ import PageSection from '../../views/HomePageModules';
 import VolunteerModule from '../../views/HomePageModules/Volunteer';
 import { StatePropType } from '../../../types';
 import { MainContainer, SubscriptionButton } from './styles';
-import SubscriptionArea from '../../views/Subscribe';
+import ExternalForm from '../../views/ExternalFrame';
 import AppModal from '../../core/AppModal';
 
 const MainPage = ({ state }) => {
@@ -54,9 +55,12 @@ const MainPage = ({ state }) => {
       </SubscriptionButton>
       {displayModal && (
         <AppModal closeAction={() => toggleModal(false)}>
-          <SubscriptionArea
+          <ExternalForm
             colors={colors}
-            size={getMediaQuery() === MOBILE ? 'small' : 'large'}
+            width={getMediaQuery() === MOBILE ? 340 : 640}
+            height={800}
+            src={config.subscriptionEndpoint}
+            title="subscription"
           />
         </AppModal>
       )}

packages/nnk/src/components/controllers/News/styles.js

@@ -1,6 +1,4 @@
-import { css, styled } from 'frontity';
-import { sizeMedium } from '../../../setup/themes';
-import Link from '../../core/Link';
+import { styled } from 'frontity';
 
 export const NewsSection = styled.section`
   display: flex;
@@ -30,7 +28,7 @@ export const NewsWrapper = styled.div`
 
   @media all and (min-width: 768px) {
     display: grid;
-
+    grid-auto-flow: dense;
     grid-template-columns: repeat(3, 1fr);
     padding: 24px;
     grid-gap: 10px;

packages/nnk/src/components/core/List/styles.js

@@ -1,5 +1,10 @@
 import { css, styled } from 'frontity';
-import { sizeMedium, sizeSmall } from '../../../setup/themes';
+import {
+  sizeLarge,
+  sizeMedium,
+  sizeSmall,
+  sizeSmallestTitle
+} from '../../../setup/themes';
 import Link from '../Link';
 import { BackToReports, BackToReportsArrow } from '../Post/styles';
 
@@ -114,13 +119,17 @@ ButtonsWrapper.displayName = 'ButtonsWrapper';
 
 export const PageButton = styled.p`
   text-align: center;
-  font-size: ${sizeMedium};
+  font-size: ${sizeLarge};
   text-transform: uppercase;
   font-weight: 700;
   margin-top: -15px;
 
   color: ${({ colors }) => colors && colors.terciary};
 
+  @media all and (min-width: 768px) {
+    font-size: ${sizeMedium};
+  }
+
   @media all and (min-width: 1200px) {
     font-size: 0.8rem;
     margin-top: -30px;
@@ -156,7 +165,11 @@ PageButton.displayName = 'PageButton';
 
 export const PageButtonArrow = styled(BackToReportsArrow)`
   margin: ${({ right }) => (right ? '0 0 0 5px' : '0 5px 0 0')};
-  font-size: 0.9rem;
+  font-size: ${sizeLarge};
+
+  @media all and (min-width: 768px) {
+    font-size: ${sizeSmallestTitle};
+  }
 
   @media all and (min-width: 1200px) {
     font-size: ${sizeMedium};

packages/nnk/src/components/core/Post/index.js

@@ -52,7 +52,9 @@ const Post = ({ actions, libraries, state }) => {
   useEffect(() => {
     const onReadAll = () => {
       if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-        onRead();
+        setTimeout(() => {
+          onRead();
+        }, 1000);
       }
     };
 

packages/nnk/src/components/core/Post/styles.js

@@ -6,7 +6,8 @@ import {
   sizeSmall,
   sizeSmallTitle,
   sizeMediumTitle,
-  fontTitleNews
+  fontTitleNews,
+  sizeXLarge
 } from '../../../setup/themes';
 import Link from '../Link';
 
@@ -52,17 +53,19 @@ export const StyledLink = styled(Link)`
 StyledLink.displayName = 'StyledLink';
 
 export const BackToReports = styled.p`
+  z-index: 50;
   position: fixed;
-  bottom: 10%;
-  left: 10%;
+  bottom: 50px;
+  height: 20px;
+  left: 0;
   border: ${({ colors }) => `2px solid ${colors.terciary}`};
   border-radius: 5px;
   padding: 5px 10px;
   background: ${({ colors }) => colors && colors.terciary};
   text-transform: uppercase;
   font-weight: 700;
-  font-size: ${sizeMedium};
-  width: 15%;
+  font-size: ${sizeMediumTitle};
+  width: 100%;
   cursor: pointer;
 
   &:hover {
@@ -73,6 +76,14 @@ export const BackToReports = styled.p`
       transition: transform ease 0.5s;
     }
   }
+
+  @media all and (min-width: 768px) {
+    width: 15%;
+    bottom: 10%;
+    left: 10%;
+    height: auto;
+    font-size: ${sizeMedium};
+  }
 `;
 BackToReports.displayName = 'BackToReports';
 

packages/nnk/src/components/views/Subscribe/index.js → packages/nnk/src/components/views/ExternalFrame/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { string } from 'prop-types';
+import { number, string } from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { ColorsPropType } from '../../../types';
 import { Loading } from '../../../assets/images';
 import { LoadingSpinner, SubscribeContainer, SubscribeFrame } from './styles';
 
-const SubscriptionArea = ({ colors, size }) => {
+const ExternalForm = ({ colors, height, src, title, width }) => {
   const [pageLoaded, toggleLoaded] = useState(false);
   const FrameElement = useRef();
 
@@ -18,8 +18,8 @@ const SubscriptionArea = ({ colors, size }) => {
   const onLoad = () => {
     toggleLoaded(true);
     setAttributes({
-      width: size === 'small' ? 340 : 640,
-      height: 800,
+      width,
+      height,
       frameborder: 0,
       marginheight: 0,
       marginwidth: 0
@@ -32,9 +32,9 @@ const SubscriptionArea = ({ colors, size }) => {
         <LoadingSpinner src={`${Loading}?${Math.random()}`} alt="Loading" />
       )}
       <SubscribeFrame
-        src="https://docs.google.com/forms/d/e/1FAIpQLSfDAwap34je_R2Kt-H3QvK6tLAxRB3TMNGFmmo3_Yn5Xd3IPg/viewform?embedded=true"
+        src={src}
         frameBorder="0"
-        title="subscription"
+        title={title}
         ref={FrameElement}
         onLoad={onLoad}
       >
@@ -44,13 +44,16 @@ const SubscriptionArea = ({ colors, size }) => {
   );
 };
 
-SubscriptionArea.propTypes = {
+ExternalForm.propTypes = {
   colors: ColorsPropType.isRequired,
-  size: string
+  height: number.isRequired,
+  src: string.isRequired,
+  title: string.isRequired,
+  width: number.isRequired
 };
 
-SubscriptionArea.defaultProps = {
+ExternalForm.defaultProps = {
   size: 'large'
 };
 
-export default SubscriptionArea;
+export default ExternalForm;