refactor(footer): use tokens and adjust spacing

eea · May 31, 2022 · 2cb1669 · 2cb1669
1 parent f8b4457
commit 2cb1669
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 100 deletions.
diff --git a/src/ui/Footer/Contact.jsx b/src/ui/Footer/Contact.jsx
@@ -11,8 +11,10 @@ const Contact = ({ children, contacts, header, address }) =>
       <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Icon className={contact.icon} size="big"></Icon>
-          <Link to={contact.link}>{contact.text}</Link>
+          <Link to={contact.link}>
+            <Icon className={contact.icon} size="big"></Icon>
+            {contact.text}
+          </Link>
         </div>
       ))}
       {address && <p className="address">{address}</p>}

diff --git a/src/ui/Footer/Footer.stories.js b/src/ui/Footer/Footer.stories.js
@@ -40,13 +40,6 @@ const Template = (args) => (
                 <Grid.Column mobile={6} tablet={12} computer={7}>
                   <div className="eionet logo">
                     <Image src={EIONETLogo} alt="EIONET Logo"></Image>
-                    {/* <p className="description">
-                      European Environment
-                      <br />
-                      Information and
-                      <br />
-                      Observation Network
-                    </p> */}
                   </div>
                 </Grid.Column>
               </Grid>

diff --git a/src/ui/Footer/FooterHeader.jsx b/src/ui/Footer/FooterHeader.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 const FooterHeader = (props) => {
   return (
     <div className="theme-sites mobile hidden">
-      <p className="header">{props.children}</p>
+      <p className="header text-center">{props.children}</p>
     </div>
   );
 };

diff --git a/theme/themes/eea/extras/footer.less b/theme/themes/eea/extras/footer.less
@@ -28,7 +28,6 @@ footer .theme-sites {
 
   .header {
     font-weight: @footerTitleFontWeight;
-    text-align: center;
   }
 
   .logos .logo {
@@ -49,24 +48,7 @@ footer .theme-sites {
     margin-bottom: @mobileItemHeaderMarginBottom;
     font-size: @mobileFooterTitleFontSize;
     font-weight: @footerTitleFontWeight;
-  }
-}
-
-.eionet.logo {
-  display: flex;
-  align-items: center;
-
-  img {
-    //width: @mobileEionetLogoWidth;
-    margin-left: @mobileEionetLogoMarginLeft;
-    margin-right: @mobileEionetLogoMarginRight;
-  }
-
-  .description {
-    padding-top: @mobileEionetDescriptionPaddingTop;
-    font-size: @mobileEionetDescriptionFontSize;
-    line-height: @mobileEionetDescriptionLineHeight;
-    font-weight: @eionetDescriptionFontWeight;
+    text-align: center;
   }
 }
 
@@ -84,6 +66,11 @@ footer .theme-sites {
   a {
     color: @menuLinkColor;
   }
+
+  i.big.icon {
+    margin-right: @mobileContactIconMarginRight;
+    font-size: @mobileContactIconFontSize;
+  }
 }
 
 .subfooter .address {
@@ -146,8 +133,8 @@ footer .theme-sites {
     }
 
     .header {
-      margin-bottom: @tabletItemHeaderMarginBottom;
       font-size: @tabletFooterTitleFontSize;
+      text-align: left;
     }
 
     .social a i.icon {
@@ -157,30 +144,14 @@ footer .theme-sites {
 
   .eionet.logo {
     img {
-      //width: @tabletEionetLogoWidth;
       margin-left: @tabletEionetLogoMarginLeft;
     }
-
-    .description {
-      padding-top: @tabletEionetDescriptionPaddingTop;
-      font-size: @tabetEionetDescriptionFontSize;
-      line-height: @tabletEionetDescriptionLineHeight;
-    }
   }
 
   .subfooter .contact-block {
     margin-inline: @tabletContactBlockMarginInline;
   }
 
-  .subfooter .contact {
-    margin: @tabletContactMargin;
-
-    i.big.icon {
-      margin-right: @tabletContactIconMarginRight;
-      font-size: @tabletContactIconFontSize;
-    }
-  }
-
   .subfooter .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
@@ -227,19 +198,6 @@ footer .theme-sites {
     }
   }
 
-  .eionet.logo {
-    img {
-      //width: @computerEionetLogoWidth;
-      margin-left: @computerEionetLogoMarginLeft;
-      margin-right: @computerEionetLogoMarginRight;
-    }
-
-    .description {
-      font-size: @computerEionetDescriptionFontSize;
-      line-height: @computerEionetDescriptionLineHeight;
-    }
-  }
-
   .subfooter .contact {
     font-size: @computerContactFontSize;
     margin: @computerContactMargin;

diff --git a/theme/themes/eea/extras/footer.variables b/theme/themes/eea/extras/footer.variables
@@ -16,64 +16,41 @@
 @mobileWrapperBackgroundSize         : cover;
 @computerWrapperBackgroundSize       : 100% 100%;
 @wrapperWidth                        : 100%;
-@mobileWrapperPadding                : 3rem 0 1rem;
-@computerWrapperPadding              : 5rem 0 3rem;
+@mobileWrapperPadding                : @space-9 0 @space-6;
+@tabletWrapperPadding                : @space-13 0 @space-8;
+@computerWrapperPadding              : @space-20 0 @space-18;
 
 /* Theme Sites */
 @mobileThemeSitesPadding            : @space-2 0 @space-8;
 @computerThemeSitesPadding          : @space-4 0 @space-8;
 
 /* Subfooter with logo and contact info */
-@mobileItemMarginTop                : 1rem;
-@tabletItemMarginTop                : 2rem;
-@computerItemMarginTop              : 4rem;
+@mobileItemMarginTop                : @space-4;
+@tabletItemMarginTop                : @space-8;
+@computerItemMarginTop              : @space-18;
 
 /* Subfooter Item Header */
-@mobileItemHeaderMarginBottom       : 0.625rem;
-@tabletItemHeaderMarginBottom       : 0.938rem;
-@computerItemHeaderMarginBottom     : 1.563rem;
+@mobileItemHeaderMarginBottom       : @space-5;
+@computerItemHeaderMarginBottom     : @space-12;
 
 /* Site Logo */
-@tabletSiteLogoWidth                : 192px;
+@tabletSiteLogoWidth                : 200px;
 @computerSiteLogoWidth              : 283px;
 @tabletSiteLogoDisplay              : inline-block;
 
 /* EIONET Logo */
-@mobileEionetMarginTop: 0rem;
-@computerEionetMarginTop: 0rem;
-
-@mobileEionetLogoWidth               : 42px;
-@tabletEionetLogoWidth               : 60px;
-@computerEionetLogoWidth             : 66px;
-
-@mobileEionetLogoMarginLeft          : 0;
-@tabletEionetLogoMarginLeft          : 0.625rem;
-@computerEionetLogoMarginLeft        : 0;
-@mobileEionetLogoMarginRight         : 0.5rem;
-@computerEionetLogoMarginRight       : 1.25rem;
-
-/* eIONET Logo Description */
-@eionetDescriptionFontWeight         : @bold;
-@mobileEionetDescriptionPaddingTop   : 0.125rem;
-@tabletEionetDescriptionPaddingTop   : 0.313rem;
-@mobileEionetDescriptionFontSize     : 0.5rem;
-@tabetEionetDescriptionFontSize      : 1rem;
-@computerEionetDescriptionFontSize   : 12px;
-@mobileEionetDescriptionLineHeight   : 0.625rem;
-@tabletEionetDescriptionLineHeight   : 1.5rem;
-@computerEionetDescriptionLineHeight : 1.5;
+@tabletEionetLogoMarginLeft          : @space-2;
 
 /* Contact Info */
 @mobileContactBlockMarginInline     : 10%;
 @tabletContactBlockMarginInline     : 0;
-@tabletContactBlockMarginbottom     : 1rem;
-@mobileContactMargin                : 0.3rem 0;
-@tabletContactMargin                : 0.6rem 0;
-@computerContactMargin              : 1rem 0;
+@tabletContactBlockMarginbottom     : @space-4;
+@mobileContactMargin                : @space-4 0;
+@computerContactMargin              : @space-5 0;
 @mobileContactFontSize              : @font-size-1;
 @computerContactFontSize            : @font-size-2;
-@tabletContactIconMarginRight       : 0.938rem;
-@tabletContactIconFontSize          : @font-size-4;
+@mobileContactIconMarginRight       : @space-3;
+@mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-5;
 
 /* Address */
@@ -89,9 +66,9 @@
 @computerSocialIconSize             : @font-size-5;
 
 /* Footer Menu */
-@mobileMenuMargin                   : @space-8 auto 0;  // update
-@tabletMenuMargin                   : @space-13 auto 0; // update
-@desktopMenuMargin                  : @space-20 auto 0; // update
+@mobileMenuMargin                   : @space-8 auto 0;
+@tabletMenuMargin                   : @space-13 auto 0;
+@desktopMenuMargin                  : @space-20 auto 0;
 @mobileMenuWidth                    : 100%;
 @tabletMenuWidth                    : 350px;
 @desktopMenuWidth                   : 500px;