home page styles, preliminary graphic #533

impactoss · Feb 21, 2024 · 7c42dba · 7c42dba
1 parent 7679373
commit 7c42dba
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 50 deletions.
diff --git a/app/containers/Footer/index.js b/app/containers/Footer/index.js
@@ -41,16 +41,16 @@ const FooterLink = styled.a`
 `;
 
 const Logo = styled(NormalImg)`
-  height: 40px;
+  height: 50px;
   padding-right: ${({ hasRightPadding }) => hasRightPadding ? '2em' : 0};
   @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
-    height: 65px;
+    height: 75px;
   }
 `;
 
 const Wrapper = styled((p) => <Box margin={{ bottom: 'large' }} {...p} />)`
   font-size: 0.8em;
-  padding: 0px 30px;
+  padding: ${({ fill }) => fill ? 0 : '0px 30px'};
   @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
     width: 100%;
     font-size: 0.9em;
@@ -71,14 +71,15 @@ const Footer = ({
   theme,
   onPageLink,
   pages,
+  fill,
 }) => {
   const size = useContext(ResponsiveContext);
   const isMobile = !isMinSize(size, 'medium');
   const appTitle = `${intl.formatMessage(appMessages.app.title)} - ${intl.formatMessage(appMessages.app.claim)}`;
   return (
     <FooterMain>
       <Container noPaddingBottom>
-        <Wrapper>
+        <Wrapper fill={fill}>
           <BoxRow
             direction={isMobile ? 'column' : 'row'}
             justify="between"
@@ -184,6 +185,7 @@ Footer.propTypes = {
   theme: PropTypes.object.isRequired,
   onPageLink: PropTypes.func.isRequired,
   pages: PropTypes.object,
+  fill: PropTypes.bool,
   intl: intlShape,
 };
 

diff --git a/app/containers/HomePage/index.js b/app/containers/HomePage/index.js
@@ -30,8 +30,6 @@ import { ROUTES } from 'containers/App/constants';
 import {
   SHOW_HOME_TITLE,
   SHOW_BRAND_ON_HOME,
-  HEADER_PATTERN_HEIGHT,
-  SHOW_HEADER_PATTERN_HOME_GRAPHIC,
 } from 'themes/config';
 
 import { DEPENDENCIES } from './constants';
@@ -50,17 +48,11 @@ const GraphicHomeWrapper = styled.div`
     : 0
 }px;
   }
-  background-image: ${(props) => (props.showPattern && props.theme.backgroundImages.header)
-    ? props.theme.backgroundImages.header
-    : 'none'
-};
-  background-repeat: repeat;
-  background-size: ${HEADER_PATTERN_HEIGHT}px auto;
 `;
 
 const GraphicHome = styled(NormalImg)`
   width: 100%;
-  max-width: 1200px;
+  max-width: 600px;
 `;
 
 const SectionTop = styled.div`
@@ -81,9 +73,9 @@ const SectionTop = styled.div`
 const SectionWrapper = styled.div`
   display: ${(props) => props.hasBrand ? 'block' : 'table-cell'};
   vertical-align: ${(props) => props.hasBrand ? 'baseline' : 'middle'};
-  padding-bottom: 3em;
+  padding-bottom: 2em;
   @media (min-width: ${(props) => props.theme.breakpoints.large}) {
-    padding-bottom: 6em;
+    padding-bottom: 3em;
   }
 `;
 
@@ -111,17 +103,16 @@ const Title = styled.h1`
   }
 `;
 
-const Claim = styled.p`
-  color: ${palette('headerBrand', 1)};
+const Claim = styled.h2`
+  color: ${palette('headerBrand', 0)};
   font-family: ${(props) => props.theme.fonts.claim};
   font-size: ${(props) => props.theme.sizes.home.text.claimMobile};
-  font-weight: 100;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.3;
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     font-size: ${(props) => props.theme.sizes.home.text.claim};
-    margin-bottom: 1.5em;
+    margin-bottom: 0.5em;
   }
   @media print {
     font-size: ${(props) => props.theme.sizes.home.print.claim};
@@ -214,26 +205,25 @@ export class HomePage extends React.PureComponent { // eslint-disable-line react
             { name: 'description', content: intl.formatMessage(messages.metaDescription) },
           ]}
         />
-        <SectionTop hasBrand={SHOW_BRAND_ON_HOME}>
-          <SectionWrapper hasBrand={SHOW_BRAND_ON_HOME}>
-            <GraphicHomeWrapper
-              hasBrand={SHOW_BRAND_ON_HOME}
-              showPattern={SHOW_HEADER_PATTERN_HOME_GRAPHIC}
-            >
-              <GraphicHome src={theme.media.graphicHome} alt={intl.formatMessage(appMessages.app.title)} />
-            </GraphicHomeWrapper>
-            { !SHOW_HOME_TITLE
-              && <GraphicHome src={theme.media.titleHome} alt={appTitle} />
-            }
-            <Container noPaddingBottom>
+        <Container noPaddingBottom>
+          <Title>
+            <FormattedMessage {...appMessages.app.title} />
+          </Title>
+          <SectionTop hasBrand={SHOW_BRAND_ON_HOME}>
+            <SectionWrapper hasBrand={SHOW_BRAND_ON_HOME}>
+              <GraphicHomeWrapper
+                hasBrand={SHOW_BRAND_ON_HOME}
+              >
+                <GraphicHome src={theme.media.graphicHome} alt={intl.formatMessage(appMessages.app.title)} />
+              </GraphicHomeWrapper>
+              { !SHOW_HOME_TITLE
+                && <GraphicHome src={theme.media.titleHome} alt={appTitle} />
+              }
               { SHOW_HOME_TITLE
                 && (
                   <Row>
                     <GridSpace lg={1 / 8} />
                     <Grid lg={3 / 4} sm={1}>
-                      <Title>
-                        <FormattedMessage {...appMessages.app.title} />
-                      </Title>
                       <Claim>
                         <FormattedMessage {...appMessages.app.claim} />
                       </Claim>
@@ -318,10 +308,10 @@ export class HomePage extends React.PureComponent { // eslint-disable-line react
                   </Row>
                 )}
               </HomeActions>
-            </Container>
-          </SectionWrapper>
-        </SectionTop>
-        <Footer />
+            </SectionWrapper>
+          </SectionTop>
+        </Container>
+        <Footer fill />
       </div>
     );
   }

diff --git a/app/themes/media/homeGraphic.png b/app/themes/media/homeGraphic.png
diff --git a/app/themes/media/[email protected] b/app/themes/media/[email protected]
diff --git a/app/themes/theme-nz.js b/app/themes/theme-nz.js
@@ -7,7 +7,6 @@ import footerLogo1 from 'themes/media/footer-logo-nzgov.png';
 import footerLogo2 from 'themes/media/footer-logo-nzjustice.png';
 
 import graphicHome from 'themes/media/homeGraphic.png';
-import graphicHome2x from 'themes/media/[email protected]';
 
 import impactossLogo from 'themes/media/impactossLogo.png';
 // import impactossLogo2x from 'themes/media/[email protected]';
@@ -17,10 +16,10 @@ const theme = {};
 // pass array for retina images: [normalSrc, retinaSrc],
 // or single image: src
 theme.media = {
-  headerLogo: [headerLogo, headerLogo],
-  graphicHome: [graphicHome, graphicHome2x],
+  headerLogo: [headerLogo],
+  graphicHome: [graphicHome],
   // titleHome: [titleHome, titleHome2x],
-  impactossLogo: [impactossLogo, impactossLogo],
+  impactossLogo: [impactossLogo],
   // up to 6 partner logos,
   // link text and title to be set in translations/[lang].js > app.components.Footer.partners.[]
   // partnerLogos: [
@@ -29,8 +28,8 @@ theme.media = {
   //   [partner3, partner3x2x],
   //   [partner4, partner4x2x],
   // ],
-  nzGovLogo: [footerLogo1, footerLogo1],
-  nzJusticeLogo: [footerLogo2, footerLogo2],
+  nzGovLogo: [footerLogo1],
+  nzJusticeLogo: [footerLogo2],
 };
 
 // grid-styles settings https://github.com/jxnblk/grid-styled
@@ -402,9 +401,9 @@ theme.sizes = {
     // px or em
     text: {
       title: '2.8em',
-      titleMobile: '1.4em',
-      claim: '1.3em',
-      claimMobile: '1em',
+      titleMobile: '1.6em',
+      claim: '2.2em',
+      claimMobile: '1.2em',
     },
     print: {
       title: '2.8em',

diff --git a/app/translations/en-NZ.json b/app/translations/en-NZ.json
@@ -176,8 +176,8 @@
   "app.containers.ActionView.metaDescription": "Action page description",
   "app.containers.ActionView.header": "Action",
   "app.containers.ActionView.notFound": "Sorry no action found",
-  "app.containers.App.app.title": "NZ Human Rights Map",
-  "app.containers.App.app.claim": "The Open Source Software for Integrated Management and Planning of Actions",
+  "app.containers.App.app.title": "Human Rights Map",
+  "app.containers.App.app.claim": "Nau mai, haere mai",
   "app.containers.App.frameworks.single": "Framework",
   "app.containers.App.frameworks.plural": "Frameworks",
   "app.containers.App.frameworks.all": "All Frameworks",
@@ -555,7 +555,7 @@
   "app.containers.EntityNew.recommendations.pageTitle": "New { type }",
   "app.containers.HomePage.pageTitle": "Home",
   "app.containers.HomePage.metaDescription": "Home page description",
-  "app.containers.HomePage.intro": "Here you can try the application and explore how an example Government Implementation Plan may look like that covers human rights issues and the SDGs and contains detailed actions and up to date progress reports.",
+  "app.containers.HomePage.intro": "The New Zealand **Human Rights Map** allows you to track a broad range of human rights issues the New Zealand Government has committed to address based on international recommendations",
   "app.containers.HomePage.explore": "Explore",
   "app.containers.HomePage.exploreCategories": "Explore by category",
   "app.containers.HomePage.exploreCategoriesLead": "Explore UN recommendations and government actions by category",