feat: change footer illustration styling (#1093)

* feat: change footer illustration styling * style: run lint fix * chore: remove unnecessary styling
varianter · Jan 7, 2025 · 6bc0da8 · 6bc0da8
1 parent 2eedf05
commit 6bc0da8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 29 deletions.
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
@@ -59,7 +59,6 @@ const Footer = ({
             <div className={styles.flex_container_left}>
               <div>
                 <TextTertiary>{t("text")}</TextTertiary>
-                {/*  TODO:: Get offices and map through. Should these link to something?  */}
                 <ul className={styles.offices}>
                   {companyLocations.map((location) => (
                     <li
@@ -108,31 +107,6 @@ const Footer = ({
             height={74}
           />
           <div className={styles.grey_links}>
-            {/* <ul className={styles.grey_links__language}>
-              <li>
-                <CustomLink link={dummyLink("English")} type="footerLink" />
-              </li>
-            </ul> */}
-            {/* THERE ARE NO LEGAL DOCUMENTS FOR LAUNCH, REINSTATE WHEN WE HAVE LEGAL DOCUMENTS TO SHOW */}
-            {/* <ul className={styles.credits}>
-              {legalData?.map((legal) => {
-                const link: ILink = {
-                  _key: legal._id,
-                  _type: legal._type,
-                  linkTitle: legal.basicTitle,
-                  linkType: LinkType.Internal,
-                  internalLink: {
-                    _ref: legal.slug.current,
-                  },
-                  language: legal.language,
-                };
-                return (
-                  <li key={legal._id}>
-                    <CustomLink link={link} type="footerLink" />
-                  </li>
-                );
-              })}
-            </ul> */}
             <span className={styles.organisationNumber}>
               Org. nr. {companyInfo.organizationNumber}
             </span>

diff --git a/src/components/navigation/footer/footer.module.css b/src/components/navigation/footer/footer.module.css
@@ -21,6 +21,9 @@
   border-radius: 0.75rem;
   padding: 1.5rem;
   padding-bottom: 2.25rem;
+  position: relative;
+  z-index: 1;
+
   @media (min-width: 802px) {
     padding: 2.25rem;
   }
@@ -91,6 +94,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 120%;
+
   &:hover {
     text-decoration: underline;
   }

diff --git a/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx b/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
@@ -10,6 +10,7 @@ export const FooterIllustration = ({ color }: FooterIllustrationProps) => {
   return (
     <div className={styles.footerIllustrations}>
       <svg
+        className={styles.svgLeft}
         xmlns="http://www.w3.org/2000/svg"
         width="147"
         height="71"
@@ -44,6 +45,7 @@ export const FooterIllustration = ({ color }: FooterIllustrationProps) => {
         />
       </svg>
       <svg
+        className={styles.svgRight}
         xmlns="http://www.w3.org/2000/svg"
         width="215"
         height="84"

diff --git a/src/components/navigation/footer/footerIllustration/footerIllustration.module.css b/src/components/navigation/footer/footerIllustration/footerIllustration.module.css
@@ -2,10 +2,38 @@
   background-color: transparent;
   display: flex;
   align-items: flex-end;
-  justify-content: space-around;
+  padding-left: 6.5rem;
+  gap: 9.3rem;
+  position: relative;
+  top: 2rem;
+  z-index: 0;
 
-  & > svg {
-    width: 20%;
+  & > .svgLeft {
+    width: 283px;
     height: auto;
   }
+
+  & > .svgRight {
+    width: 421px;
+    height: auto;
+  }
+
+  @media (max-width: 834px) {
+    top: 0;
+    padding-left: 5.25rem;
+    gap: 10rem;
+
+    & > .svgLeft {
+      width: 141px;
+    }
+
+    & > .svgRight {
+      width: 211px;
+    }
+  }
+
+  @media (max-width: 425px) {
+    padding-left: 1.25rem;
+    gap: 0rem;
+  }
 }