Update meta images (#8)

* Update meta images

* Apply colors and typography

* Update app logo

* Replace About copy with placeholder text

---------

Co-authored-by: Ricardo Mestre <[email protected]>

webapp/.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs

webapp/app/components/common/about-drawer.tsx

@@ -24,36 +24,24 @@ export default function AboutDrawer(props: AboutDrawerProps) {
         <DrawerCloseButton />
         <DrawerHeader>About</DrawerHeader>
         <DrawerBody display='flex' flexFlow='column' gap={4}>
-          <Heading as='h2'>
-            Welcome to the Water Health Indicator Service
-          </Heading>
+          <Heading as='h2'>Welcome to Poldre</Heading>
           <p>
-            Our service provides a continuously updated data stream about the
-            environmental health of inland water bodies.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            rhoncus ipsum et quam iaculis sodales.
           </p>
 
           <p>
-            The service is an API that provides monitoring and reporting
-            capabilities that allow private sector and public agencies to track
-            a set of specialised and highly descriptive Water Health Indicators.
-            Indicators will be physical descriptions derived from satellite
-            remote sensing, such as water extent, turbidity, chlorophyll
-            concentration, and evapotranspiration.
+            Fusce ornare, velit ac ultrices pretium, nibh odio finibus odio, eu
+            pretium orci sapien in ipsum. Suspendisse dictum luctus arcu id
+            dignissim. Cras lobortis mi neque, nec suscipit felis tempus et.
+            Suspendisse hendrerit sem tortor, vel mollis nunc convallis eget.
           </p>
 
           <p>
-            One key advantage of EO-derived indicators is that they are
-            harmonised in time and space. They are computed with the same
-            underlying method and based on the same input data, regardless of
-            the observation date or geographic location.
-          </p>
-
-          <p>
-            Sources like the Harmonized Landsat Sentinel-2 (HLS) dataset help
-            make the indicators consistent without the usual overhead of massive
-            data processing. This property makes the indicators compatible and
-            comparable against each other without the usual overhead of massive
-            data processing.
+            Fusce fermentum in enim non vehicula. Curabitur sapien nunc,
+            pharetra nec congue sed, lobortis quis orci. Donec consequat congue
+            laoreet. Morbi euismod dapibus mi, sed convallis ipsum pulvinar
+            viverra.
           </p>
         </DrawerBody>
       </DrawerContent>

webapp/app/components/common/logo.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
-import { chakra, ChakraProps, useToken } from '@chakra-ui/react';
+import { chakra, ChakraProps, Flex, Text, useToken } from '@chakra-ui/react';
 
 export default function Logo(props: ChakraProps) {
   const [colorPrimary] = useToken('colors', ['primary.500']);
 
   return (
-    <chakra.svg
-      width='16'
-      height='16'
-      viewBox='0 0 128 128'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <circle cx='64' cy='64' r='64' fill={colorPrimary} />
-    </chakra.svg>
+    <Flex gap={2} alignItems='center'>
+      <chakra.svg
+        width='32px'
+        height='32px'
+        viewBox='0 0 128 128'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <path d='M0 8C0 3.58172 3.58172 0 8 0H56V40H0V8Z' fill='#539772' />
+        <path
+          d='M0 48H56V128H32C14.3269 128 0 113.673 0 96V48Z'
+          fill='#6C7F2A'
+        />
+        <path
+          d='M64 0H96C113.673 0 128 14.3269 128 32V76H64V0Z'
+          fill='#3AAFB9'
+        />
+      </chakra.svg>
+      <Text fontWeight='800' color='base.500'>
+        Poldre
+      </Text>
+    </Flex>
   );
 }

webapp/app/components/common/page-header.tsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import {
-  Box,
-  Divider,
-  Flex,
-  useDisclosure
-} from '@chakra-ui/react';
+import { Box, Divider, Flex, useDisclosure } from '@chakra-ui/react';
 import { useSearchParams } from 'react-router-dom';
 
 import Logo from './logo';
@@ -56,8 +51,12 @@ export default function PageHeader(props: PageHeaderProps) {
         gap={4}
         alignItems='center'
       >
-        <SmartLink to='?about' onClick={onDrawerOpen}>
-          <Logo width={20} height='22px' />
+        <SmartLink
+          to='?about'
+          onClick={onDrawerOpen}
+          _hover={{ textDecoration: 'none' }}
+        >
+          <Logo width='24px' height='24px' />
         </SmartLink>
         {renderHeading && (
           <>

webapp/app/index.html

@@ -17,7 +17,7 @@
   <link rel='preconnect' href='https://fonts.googleapis.com'>
   <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
   <link
-    href='https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap'
+    href='https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap'
     rel='stylesheet'>
 
   <title>{{appTitle}}</title>
@@ -71,7 +71,7 @@
             transitioned out. Replace the contents with something appropriate
             for the project.
           -->
-      <h1><img src='./media/layout/logo.svg' alt='logotype' width='188' height='32' /></h1>
+      <h1><img src='./media/layout/polder--logomark.svg' alt='logotype' width='188' height='32' /></h1>
       <p>In the beginning the Universe was created.
       <p>
       <p>This has made a lot of people very angry and been widely regarded as a bad move.</p>

webapp/app/styles/theme.ts

@@ -3,18 +3,18 @@ import { createColorPalette } from './color-palette';
 
 const theme = {
   colors: {
-    primary: createColorPalette('#1E7BC6'),
-    secondary: createColorPalette('#5FAD56'),
-    base: createColorPalette('#2B2D42'),
+    primary: createColorPalette('#6C7F2A'),
+    secondary: createColorPalette('#3AAFB9'),
+    base: createColorPalette('#3D4018'),
     danger: createColorPalette('#D65108'),
     warning: createColorPalette('#EFA00B'),
-    success: createColorPalette('#5FAD56'),
-    info: createColorPalette('#1E7BC6'),
+    success: createColorPalette('#539772'),
+    info: createColorPalette('#3AAFB9'),
     surface: createColorPalette('#FFF')
   },
   fonts: {
-    body: 'Red Hat Text, serif',
-    heading: 'Red Hat Display, sans-serif'
+    body: 'Nunito Sans, serif',
+    heading: 'Nunito Sans, sans-serif'
   },
   fontSizes: {
     xs: '0.75rem',

webapp/package.json

@@ -70,10 +70,10 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react": "^2.10.2",
     "@devseed-ui/collecticons-chakra": "^0.1.0-beta",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@floating-ui/react": "^0.26.9",
     "@turf/bbox": "^6.5.0",
     "@turf/boolean-point-in-polygon": "^6.5.0",
@@ -88,7 +88,7 @@
     "d3": "^7.8.5",
     "date-fns": "^3.3.1",
     "dayzed": "^3.2.3",
-    "framer-motion": "^11.0.3",
+    "framer-motion": "^11.11.9",
     "lodash.debounce": "^4.0.8",
     "mapbox-gl": "^3.1.2",
     "polished": "^4.3.1",