Merge pull request #29 from mongabay/update-style

Update page style
mongabay · Feb 18, 2024 · d1a47cc · d1a47cc
2 parents 02dd683 + 3b4f29f
commit d1a47cc
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 44 deletions.
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}>
@@ -59,17 +59,11 @@ const HeaderMenu = () => {
           </ul>
           <div className="header__menu__content__wrap__buttons">
             <a
-              href="mailto:info@mongabay.org"
+              href="https://www.mongabay.com/contact/"
               className="btn btn-dark text-white bg-dark-gray 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;
+      font-weight: 700;
       letter-spacing: 0.96px;
-      text-transform: uppercase;
-    }
-
-    &__name {
-      text-transform: uppercase;
     }
   }
   &__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;
+            transform: scale(0.8);
             stroke-width: 0px;
           }
         }
         &__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;
         }
         ul {
           display: flex;
@@ -91,12 +91,18 @@
               display: flex;
               align-items: center;
               gap: 16px;
-              font: $font-weight-strong $font-size-m $font-family-1;
-              text-transform: uppercase;
+
+              font-family: $font-family-1;
+              font-size: 24px;
+              font-style: normal;
+              font-weight: 300;
+              line-height: 32px; /* 133.333% */
               color: $text-color-1;
               border-radius: 22px;
+
               &:hover {
                 text-decoration: underline;
+                text-decoration-thickness: 1px;
               }
               &:focus-visible {
                 outline: $primary auto 1px;
@@ -122,11 +128,14 @@
           }
         }
         &__buttons {
-          padding-top: 42px;
-          display: flex;
-          align-items: flex-end;
-          gap: 12px;
-          font: $font-weight-strong $font-size-s $font-family-1;
+          a {
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 600;
+            padding: 12px 32px;
+            background-color: black;
+            border-radius: 80px;
+          }
         }
       }
     }

diff --git a/components/icons/index.js b/components/icons/index.js
diff --git a/components/tool/sidebar/component.jsx b/components/tool/sidebar/component.jsx
@@ -52,8 +52,8 @@ const Sidebar = ({
       <div className="content">
         <h1>Trade Flow Map</h1>
         <p>
-          Create images of maps with flows representing the exchange of a variety of commodities
-          across the world.
+          Agricultural commodities move globally and cause deforestation. Find, follow, and create
+          maps of their trail with data from Trase.earth.
         </p>
         <h2>Data Layers</h2>
         <div className="scrollable-container pt-2">
@@ -145,7 +145,7 @@ const Sidebar = ({
       </div>
       <div className="d-flex align-items-center mt-4">
         <Tooltip sticky="popper" plugins={[sticky]} content={<ExportTooltip />}>
-          <button type="button" className="btn btn-primary py-2" disabled={loading}>
+          <button type="button" className="btn btn-primary py-2 px-6" disabled={loading}>
             Export
           </button>
         </Tooltip>

diff --git a/components/tool/sidebar/style.scss b/components/tool/sidebar/style.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  flex-basis: rem(300);
+  flex-basis: rem(356);
   max-height: 100%;
   margin-right: map-get($spacers, 5);
 
@@ -15,18 +15,29 @@
     overflow: hidden;
     h1 {
       line-height: 3rem; /* 33px */
-      font-weight: 700;
+      font-weight: 300;
+      font-family: $font-family-1;
+      font-size: 44px;
     }
     h2 {
       margin-top: 20px;
       font-weight: 400;
-      font-size: 30px;
+      font-size: 28px;
     }
 
     .scrollable-container {
       margin: map-get($spacers, 2) 0;
       padding: map-get($spacers, 2) 0;
       overflow: auto;
+      label {
+        text-transform: uppercase;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px; /* 133.333% */
+        text-transform: uppercase;
+        padding-bottom: 4px;
+      }
     }
 
     .note {
@@ -35,6 +46,11 @@
     }
   }
 
+  .btn {
+    padding: 12px 32px;
+    width: 172px;
+  }
+
   .loading-text {
     @include font-size($font-size-m);
   }

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,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,700;1,400&display=swap"
             rel="stylesheet"
           />
         </Head>