Feature/mp 202 update style (#30)

* Update style
mongabay · Feb 18, 2024 · 6a4086f · 6a4086f
1 parent c7cea68
commit 6a4086f
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 51 deletions.
diff --git a/components/header/constants.js b/components/header/constants.js
@@ -3,28 +3,26 @@ export const COLORS = ['#03755E', '#184B95', '#A01200', '#7E56D8'];
 export const TOOLS = [
   {
     id: 'earth-atlas',
-    name: 'Earth Atlas',
     color: COLORS[1],
+    name: 'Earth Atlas',
     url: 'https://maps.mongabay.com',
   },
   {
     id: 'fire-weather-almanac',
-    name: 'Fire Weather Almanac',
     color: COLORS[2],
-    image: '/images/fire-tool.png',
+    name: 'Fire Weather Almanac',
     url: 'https://charts.mongabay.com',
   },
   {
     id: 'reforestation-app',
-    title: 'Reforestation App',
     color: COLORS[0],
     name: 'Reforestation App',
     url: 'https://reforestation.app',
   },
   {
     id: 'trade-flow-map',
-    name: 'Trade Flow Map',
     color: COLORS[3],
+    name: 'Trade Flow Map',
     url: 'https://chains.mongabay.com',
   },
 ];
diff --git a/components/header/menu/index.js b/components/header/menu/index.js
@@ -40,7 +40,7 @@ const HeaderMenu = () => {
             <span className="sr-only">close navigation menu</span>
             <Icon name="menu-close" className="header__menu__content__wrap__close-btn__icon" />
           </button>
-          <p className="header__menu__content__wrap__title">Data Journalism Tools</p>
+          <p className="header__menu__content__wrap__title">Mongabay Data Studio</p>
           <ul className="space-y-6">
             {TOOLS.map(({ name, url, id, color }) => (
               <li key={name}>
@@ -57,20 +57,13 @@ const HeaderMenu = () => {
               </li>
             ))}
           </ul>
-          <div className="header__menu__content__wrap__buttons">
-            {/* TODO: add lights */}
+          <div className="header__menu__content__wrap__button">
             <a
-              href="mailto:info@mongabay.org"
-              className="btn btn-dark text-white bg-dark-gray shadow-none"
+              href="https://www.mongabay.com/contact/"
+              className="btn btn-dark text-white bg-black shadow-none"
             >
               Get in touch
             </a>
-            <a
-              href="https://mongabay.org/"
-              className="btn btn-light text-dark-gray border border-gray-dark shadow-none"
-            >
-              Find out more
-            </a>
           </div>
         </div>
       </div>

diff --git a/components/header/style.scss b/components/header/style.scss
@@ -23,20 +23,14 @@
       color: white;
       font-family: $font-family-1;
       font-size: $font-size-xs;
-      font-weight: $font-weight-strong;
       letter-spacing: 0.96px;
-      text-transform: uppercase;
-    }
-
-    &__name {
-      text-transform: uppercase;
+      font-weight: 700;
     }
   }
   &__menu {
     flex-shrink: 0;
-    &__icon {
-      width: 29px;
-      height: 29px;
+    &__icon.c-icon {
+      transform: scale(0.9);
     }
     &__content {
       position: fixed;
@@ -71,14 +65,20 @@
           right: 2rem;
           top: 10px;
           &__icon.c-icon {
-            stroke: $text-color-1;
+            stroke: black;
             width: 51px;
             height: 51px;
             stroke-width: 0px;
+            transform: scale(0.8);
           }
         }
         &__title {
-          font: $font-weight-bold $font-size-l $font-family-2;
+          color: var(--Black-500, #000);
+          font-family: 'Open Sans';
+          font-size: 44px;
+          font-style: normal;
+          font-weight: 300;
+          line-height: 56px; /* 127.273% */
         }
         ul {
           display: flex;
@@ -91,12 +91,16 @@
               display: flex;
               align-items: center;
               gap: 16px;
-              font: $font-weight-strong $font-size-medium $font-family-1;
-              text-transform: uppercase;
+              font-family: $font-family-1;
+              font-size: 24px;
+              font-style: normal;
+              font-weight: 300;
+              line-height: 32px;
               color: $text-color-1;
               border-radius: 22px;
               &:hover {
                 text-decoration: underline;
+                text-decoration-thickness: 1px;
               }
               &:focus-visible {
                 outline: $primary auto 1px;
@@ -121,12 +125,16 @@
             }
           }
         }
-        &__buttons {
+        &__button a {
           padding-top: 42px;
           display: flex;
           align-items: flex-end;
           gap: 12px;
-          font: $font-weight-strong $font-size-s $font-family-1;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          padding: 12px 32px;
+          background-color: black;
         }
       }
     }
@@ -160,6 +168,7 @@
     }
   }
   .btn {
+    border-radius: 80px;
     &:focus-visible {
       outline: $primary auto 1px;
       outline-offset: 2px;

diff --git a/components/icons/index.js b/components/icons/index.js
diff --git a/components/tool/data-layer-list/style.scss b/components/tool/data-layer-list/style.scss
@@ -5,7 +5,7 @@
     margin: 0 0 map-get($spacers, 3);
     font-family: $font-family-1;
     text-transform: uppercase;
-    @include font-size($font-size-base);
+    @include font-size($font-size-medium);
     font-weight: $font-weight-bold;
   }
 

diff --git a/components/tool/sidebar/component.js b/components/tool/sidebar/component.js
@@ -31,8 +31,9 @@ const Sidebar = ({ exporting, onClickPresets }) => {
       <DownloadSuccessModal open={downloadModalOpen} onClose={() => setDownloadModalOpen(false)} />
       <h1>Earth Atlas</h1>
       <p className="c-tool-sidebar__description">
-        Create images of maps using various basemaps, contextual and data layers, or explore the map
-        presets about topics like conservation.
+        Seeing patterns of planetary change is profound. Combine environmental, social, and
+        satellite data aggregated from various reputable sources to create maps that add evidence
+        and context to articles quickly.
       </p>
       <Accordion
         multi={false}
@@ -73,9 +74,9 @@ const Sidebar = ({ exporting, onClickPresets }) => {
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
-      <div className="mt-4">
+      <div className="mt-4 buttons">
         <Tooltip sticky="popper" plugins={[sticky]} content={<ExportTooltip />}>
-          <button type="button" className="btn btn-primary mr-2">
+          <button type="button" className="btn btn-primary">
             Export
           </button>
         </Tooltip>

diff --git a/components/tool/sidebar/style.scss b/components/tool/sidebar/style.scss
@@ -10,15 +10,18 @@
   padding: 3rem 0 3rem 3rem;
 
   h1 {
-    font-weight: $font-weight-bold;
+    font-weight: 300;
+    font-family: $font-family-1;
+    font-size: 44px;
   }
 
-  h2, .h2 {
+  h2,
+  .h2 {
     font-weight: $font-weight-normal;
   }
 
   &__description {
-    font-size: 18px;
+    font-size: 16px;
     margin: 0;
   }
 
@@ -29,6 +32,10 @@
     flex-grow: 1;
     overflow: hidden;
 
+    .title .button .h1 {
+      font-weight: 400;
+    }
+
     .item {
       margin: map-get($spacers, 2) 0;
       overflow: hidden;
@@ -55,4 +62,14 @@
       }
     }
   }
+  .buttons {
+    display: flex;
+    gap: 12px;
+    .btn {
+      flex: 1;
+      padding-block: 11px;
+      font-weight: 600;
+      border-radius: 80px;
+    }
+  }
 }
diff --git a/css/_settings.scss b/css/_settings.scss
@@ -34,7 +34,7 @@ $font-family-2: 'Cardo', sans-serif;
 
 $font-family-base: $font-family-1;
 
-$font-size-l: rem(30);
+$font-size-l: rem(28);
 $font-size-base: rem(16);
 $font-size-medium: rem(14);
 $font-size-s: rem(13);

diff --git a/pages/_document.js b/pages/_document.js
@@ -17,7 +17,7 @@ export default class MyDocument extends Document {
           <meta name="author" content="Vizzuality" />
           <link rel="icon" href="/icon.png" type="image/png" sizes="64x64" />
           <link
-            href="https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap"
             rel="stylesheet"
           />
           <script