Merge branch 'hotfix/news_styles'

package.json

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

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

@@ -40,7 +40,7 @@ const App = ({ state, actions }) => {
         <link rel="icon" type="image/png" href={Favicon} sizes="16x16" />
         <link rel="icon" type="image/png" href={Favicon} sizes="32x32" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Bebas+Neue"
+          href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;700"
           rel="stylesheet"
         />
         <script

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

@@ -9,6 +9,14 @@ export const NewsSection = styled.section`
   justify-content: center;
   margin: 0;
   background: ${({ colors }) => colors && colors.secondary};
+
+  @media all and (min-width: 768px) {
+    padding: 0 80px;
+  }
+
+  @media all and (min-width: 1200px) {
+    padding: 0 150px;
+  }
 `;
 NewsSection.displayName = 'NewsSection';
 
@@ -23,8 +31,9 @@ export const NewsWrapper = styled.div`
   @media all and (min-width: 768px) {
     display: grid;
 
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     padding: 24px;
+    grid-gap: 10px;
   }
 `;
 NewsWrapper.displayName = 'NewsWrapper';

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

@@ -8,7 +8,7 @@ import { fetchData } from '../../../utils';
 
 const MEDIA_PATH = 'https://www.nonamekitchen.org/wp-json/wp/v2/media';
 
-const FeaturedMedia = ({ state, id, news, read }) => {
+const FeaturedMedia = ({ state, id, news }) => {
   const [media, updateMedia] = useState(state.source.attachment[id]);
 
   const srcset =
@@ -46,7 +46,6 @@ const FeaturedMedia = ({ state, id, news, read }) => {
             alt={media.title.rendered}
             src={media.source_url}
             srcSet={srcset}
-            read={read}
           />
         </Container>
       )}
@@ -57,8 +56,7 @@ const FeaturedMedia = ({ state, id, news, read }) => {
 FeaturedMedia.propTypes = {
   state: StatePropType.isRequired,
   id: number.isRequired,
-  news: bool,
-  read: bool.isRequired
+  news: bool
 };
 
 FeaturedMedia.defaultProps = {

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

@@ -1,13 +1,13 @@
-import { css, styled } from 'frontity';
+import { styled } from 'frontity';
+// eslint-disable-next-line import/no-unresolved
 import Image from '@frontity/components/image';
-import { sizeSmall } from '../../../setup/themes';
 
 export const Container = styled.div`
   margin-top: ${({ news }) => (news ? 0 : '16px')};
   height: 20vh;
 
   @media all and (min-width: 768px) {
-    height: 300px;
+    height: 250px;
   }
 `;
 Container.displayName = 'Container';
@@ -17,11 +17,5 @@ export const StyledImage = styled(Image)`
   height: 100%;
   width: 100%;
   object-fit: cover;
-
-  ${({ read }) =>
-    read &&
-    css`
-      filter: grayscale(1) opacity(0.3);
-    `}
 `;
 StyledImage.displayName = 'StyledImage';

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'; // eslint-disable-line import/no-extraneous-dependencies
 import { connect } from 'frontity';
-import { ACTIONS_TEXTS } from '../../../db';
+import { ACTIONS_TEXTS, NEWS_SECTIONS } from '../../../db';
 import FeaturedMedia from '../FeaturedMedia';
 import List from '../List';
 import {
@@ -17,7 +17,7 @@ import {
   PostWrapper,
   BackToReportsArrow
 } from './styles';
-import { updatedReadPosts } from '../../../utils';
+import { getFormatedDate, updatedReadPosts } from '../../../utils';
 import Link from '../Link';
 
 const Post = ({ actions, libraries, state }) => {
@@ -29,7 +29,13 @@ const Post = ({ actions, libraries, state }) => {
   const date = new Date(post.date);
   const Html2React = libraries.html2react.Component;
   const isReport = post.slug.includes('report');
-  const texts = ACTIONS_TEXTS[language];
+  let texts = ACTIONS_TEXTS[language];
+  let newsSection = NEWS_SECTIONS[language];
+
+  useEffect(() => {
+    newsSection = NEWS_SECTIONS[language];
+    texts = ACTIONS_TEXTS[language];
+  }, [language]);
 
   console.log('$$$ data', data);
   console.log('$$$ post: ', post);
@@ -96,8 +102,10 @@ const Post = ({ actions, libraries, state }) => {
               </StyledLink>
             )} */}
               <DateWrapper colors={colors} isReport={isReport}>
-                {' '}
-                Published on <b>{date.toDateString()}</b>
+                {`${newsSection.publishedOn} ${getFormatedDate(
+                  date,
+                  language
+                )}`}{' '}
               </DateWrapper>
             </div>
           )}

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

@@ -4,7 +4,9 @@ import {
   sizeLargeTitle,
   sizeMedium,
   sizeSmall,
-  sizeSmallTitle
+  sizeSmallTitle,
+  sizeMediumTitle,
+  fontTitleNews
 } from '../../../setup/themes';
 import Link from '../Link';
 
@@ -35,10 +37,12 @@ export const Title = styled.h1`
   margin: 0;
   margin-top: 24px;
   margin-bottom: 8px;
-  color: ${({ colors }) => colors && colors.terciary};
-  font-size: ${sizeLargeTitle};
-  text-align: justify;
+  color: ${({ colors }) => colors && colors.primary};
+  font-size: ${sizeMediumTitle};
+  text-align: left;
+  font-family: ${fontTitleNews};
   padding: 5px 15px;
+  font-weight: 700;
 `;
 Title.displayName = 'Title';
 
@@ -102,12 +106,13 @@ export const Content = styled.div`
     isReport &&
     css`
       margin: 40px auto;
-      text-align: justify;
+      text-align: left;
     `}
   padding: 0 5px;
-  font-size: ${sizeSmallTitle};
+  font-size: ${sizeLarge};
+
   @media only screen and (min-width: 1200px) {
-    font-size: ${sizeLarge};
+    font-size: ${sizeMedium};
   }
 
   /* WordPress Core Align Classes */
@@ -145,7 +150,7 @@ export const Content = styled.div`
     margin: 20px auto;
     width: 100%;
     color: ${({ colors }) => colors && colors.primary};
-    text-align: justify;
+    text-align: left;
   }
 
   span {

packages/nnk/src/components/views/NewsItem/index.js

@@ -20,7 +20,7 @@ const NewsItem = ({ state, item, read, texts }) => {
       {item.featured_media !== 0 && (
         <ArticleWrapper colors={colors} highlight={item.tags.includes(263)}>
           <Link link={item.link}>
-            <FeaturedMedia id={item.featured_media} news read={read} />
+            <FeaturedMedia id={item.featured_media} news />
             <Title
               colors={colors}
               dangerouslySetInnerHTML={{ __html: item.title.rendered }}
@@ -41,7 +41,6 @@ const NewsItem = ({ state, item, read, texts }) => {
                 dangerouslySetInnerHTML={{
                   __html: clearOriginalLink(item.excerpt.rendered)
                 }}
-                read={read}
               />
             </Link>
           )}

packages/nnk/src/components/views/NewsItem/styles.js

@@ -1,5 +1,12 @@
 import { css, styled } from 'frontity';
-import { sizeMedium, sizeSmall } from '../../../setup/themes';
+import {
+  sizeMedium,
+  sizeSmall,
+  sizeSmallTitle,
+  sizeDefaultText,
+  fontTitleNews,
+  fontTitle
+} from '../../../setup/themes';
 import Link from '../../core/Link';
 
 // --- List Item
@@ -41,21 +48,13 @@ export const AuthorName = styled.span`
 export const Excerpt = styled.div`
   line-height: 1.6em;
   color: ${({ colors }) => colors && colors.primary};
-  text-align: justify;
+  text-align: left;
 
   & > p {
     color: ${({ colors }) => colors && colors.primary};
-    font-size: ${sizeMedium};
+    font-size: ${sizeDefaultText};
     padding: 5px 10px;
   }
-
-  ${({ read }) =>
-    read &&
-    css`
-      & > p {
-        color: gray;
-      }
-    `}
 `;
 
 export const InfoBox = styled.div`
@@ -74,14 +73,17 @@ export const StyledLink = styled(Link)`
 `;
 
 export const Title = styled.h3`
-  font-size: 2rem;
+  font-size: ${sizeSmallTitle};
   margin: 0;
   padding: 5px 10px;
   padding-bottom: 5px;
   box-sizing: border-box;
   width: 100%;
-  text-align: justify;
+  text-align: left;
   color: ${({ colors }) => colors && colors.primary};
+  font-size: ${sizeSmallTitle};
+  font-family: ${fontTitleNews};
+  font-weight: 500;
 
   ${({ read }) =>
     read &&
@@ -94,6 +96,7 @@ export const Title = styled.h3`
         vertical-align: middle;
         text-transform: uppercase;
         color: red;
+        font-family: ${fontTitle};
       }
     `}
 `;

packages/nnk/src/index.js

@@ -13,7 +13,7 @@ const newsListHandler = {
     const response = await libraries.source.api.get({
       endpoint: 'posts',
       // params: { page }
-      params: { page, per_page: 12 }
+      params: { page, per_page: 10, categories: 262 }
       // params: { categories: 262 }
     });
 

packages/nnk/src/setup/config.js

@@ -9,7 +9,7 @@ export default {
   buttonsText: THEMES[DARK].primary,
   buttonsHighlight: THEMES[DARK].terciary,
   latestReportsNum: 9,
-  dateFormat: 'mMm D', // mMm keeps the default month format
+  dateFormat: 'mMmm D yyyy', // mMm keeps the default month format
   socialLinks: [
     {
       type: 'Facebook',

packages/nnk/src/setup/themes.js

@@ -26,11 +26,13 @@ export const THEMES = {
 
 /* Fonts */
 export const fontTitle = "'Bebas Neue', sans-serif";
+export const fontTitleNews = "'Poppins', sans-serif";
 export const fontText = "'Century Gothic', sans-serif";
 
 /* Sizes */
 
 export const sizeSmall = '0.7rem';
+export const sizeDefaultText = '0.9rem';
 export const sizeMedium = '1rem';
 export const sizeLarge = '1.3rem';
 export const sizeXLarge = '2.8rem';