fix: style components to add responsivity

components/Current/Aside/Contacts/Contact.tsx

@@ -1,15 +1,19 @@
-import styles from "./contacts.module.css"
+import styles from "./contact.module.css"
 
-import { ContactNode } from "@/types/requests/asides/contact"
+import { langEnum } from "@/types/lang"
+import type { Lang } from "@/types/lang"
+import type { ContactNode } from "@/types/requests/asides/contact"
 
 export default function Contact({
   title,
   mailing_address,
   visiting_address,
   phone,
+  system: { locale },
 }: ContactNode) {
+  const visitingAddressMessage = getVisitingAddressMessage(locale)
   return (
-    <div className={styles.wrapper} id="sidebar_personalized">
+    <div>
       <div>
         <div>
           <div>
@@ -23,16 +27,18 @@ export default function Contact({
               <br />
               {mailing_address.country}
             </p>
-            <p>Visiting address: {visiting_address.street} </p>
+            <p>
+              {visitingAddressMessage}: {visiting_address.street}{" "}
+            </p>
           </div>
         </div>
         <div>
-          <div className="highlight-infoblock highlight-infoblock--light">
-            <h3>HQ Stockholm, Sweden</h3>
+          <div className={styles.highlightBlock}>
+            <h3>{phone.title}</h3>
             <div className={styles.phoneContainer}>
               <svg
                 focusable="false"
-                className="iconic-item__icon-container__icon icon icon--phone icon--nordicsea"
+                className={styles.phoneIcon}
                 viewBox="0 0 32 32"
               >
                 <use
@@ -42,11 +48,11 @@ export default function Contact({
               </svg>
 
               <a
-                href={phone}
+                href={phone.number}
                 itemProp="telephone"
                 className={styles.phoneNumberLink}
               >
-                {phone}
+                {phone.number}
               </a>
             </div>
           </div>
@@ -55,3 +61,22 @@ export default function Contact({
     </div>
   )
 }
+
+function getVisitingAddressMessage(lang: Lang) {
+  switch (lang) {
+    case langEnum.sv:
+      return "Besöksadress"
+    case langEnum.en:
+      return "Visiting address"
+    case langEnum.da:
+      return "Besøgsadresse"
+    case langEnum.de:
+      return "Besuchsadresse"
+    case langEnum.fi:
+      return "Vierailuosoite"
+    case langEnum.no:
+      return "Besøksadresse"
+    default:
+      return ""
+  }
+}

components/Current/Aside/Contacts/contact.module.css

@@ -0,0 +1,63 @@
+
+.highlightBlock {
+  background: #fff;
+  padding: 10px 10px 15px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.heading {
+  font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
+  font-size: 1.375rem;
+  line-height: 1.1em;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #483729;
+  margin-bottom: 1rem;
+}
+.phoneContainer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.phoneNumberLink {
+  line-height: 1.1em;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  text-transform: none;
+  font-size: 1.125rem;
+  color: #00838e;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.phoneIcon {
+  width: 42px;
+  height: 42px;
+  fill: #00838e;
+}
+
+.p {
+  color: #333;
+  line-height: 1.3;
+  margin-bottom: 1em;
+  padding-top: 7px;
+  text-decoration: none;
+}
+.phoneNumberLink:active,
+.phoneNumberLink:hover {
+  outline: 0;
+  text-decoration: underline;
+}
+
+@media screen and (min-width: 950px) {
+  .heading {
+    font-size: 1.625rem;
+  }
+
+  .phoneNumberLink {
+    line-height: 1.1em;
+    font-size: 1.375rem;
+  }
+}

components/Current/Aside/Puffs/Puff/index.tsx

@@ -8,7 +8,14 @@ import styles from "./puff.module.css"
 import type { PuffProps } from "@/types/components/current/asides/puff"
 import Image from "@/components/Image"
 
-export default function Puff({ imageConnection, is_internal, link, pageConnection, text, title }: PuffProps) {
+export default function Puff({
+  imageConnection,
+  is_internal,
+  link,
+  pageConnection,
+  text,
+  title,
+}: PuffProps) {
   if (is_internal) {
     const page = pageConnection.edges[0]
     if (!page?.node?.url) {
@@ -35,11 +42,14 @@ export default function Puff({ imageConnection, is_internal, link, pageConnectio
   )
 }
 
-
-function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageConnection" | "text" | "title">) {
+function PuffContent({
+  imageConnection,
+  text,
+  title,
+}: Pick<PuffProps, "imageConnection" | "text" | "title">) {
   return (
     <article>
-      {imageConnection.edges.map(image => (
+      {imageConnection.edges.map((image) => (
         <Image
           alt={image.node.title}
           className={styles.image}
@@ -50,10 +60,8 @@ function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageCon
         />
       ))}
       <section className={styles.content}>
-        <header className="content-teaser__body-wrapper">
-          <h3 className={styles.heading}>
-            {title}
-          </h3>
+        <header>
+          <h3 className={styles.heading}>{title}</h3>
         </header>
         <JsonToHtml
           embeds={text.embedded_itemsConnection.edges}
@@ -63,4 +71,4 @@ function PuffContent({ imageConnection, text, title }: Pick<PuffProps, "imageCon
       </section>
     </article>
   )
-}
+}

components/Current/Aside/Puffs/Puff/puff.module.css

@@ -15,7 +15,8 @@
 }
 
 .content {
-  padding: 20px 0px;
+  padding: 10px;
+  background-color: #fff;
 }
 
 .heading {
@@ -40,6 +41,12 @@
   text-decoration: none;
 }
 
+@media screen and (min-width: 740px) {
+ .content {
+  padding: 20px 0px;
+ }
+}
+
 @media screen and (min-width: 950px) {
   .heading {
     font-size: 1.375rem;

components/Current/Aside/aside.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+    padding: 20px 10px 5px;
+}

components/Current/Aside/index.tsx

@@ -1,23 +1,30 @@
-import Puffs from "./Asides/Puffs"
-import Contacts from "./Asides/Contacts"
+import Puffs from "./Puffs"
+import Contacts from "./Contacts"
 
 import { AsideTypenameEnum } from "@/types/requests/utils/typename"
 import type { AsideProps } from "@/types/components/current/aside"
 
+import styles from "./aside.module.css"
+
 export default function Aside({ blocks }: AsideProps) {
   if (!blocks?.length) {
     return null
   }
 
   return (
-    <aside>
+    <aside className={styles.wrapper}>
       {blocks.map((block, idx) => {
         const type = block.__typename
         switch (type) {
           case AsideTypenameEnum.CurrentBlocksPageAsideContact:
             return <Contacts contacts={block.contact.contactConnection.edges} />
           case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
-            return <Puffs key={`block-${idx}`} puffs={block.puff.puffConnection.edges} />
+            return (
+              <Puffs
+                key={`block-${idx}`}
+                puffs={block.puff.puffConnection.edges}
+              />
+            )
           default:
             return null
         }

components/Current/Asides/Contacts/contacts.module.css

@@ -1,80 +0,0 @@
-.wrapper {
-    margin-top: 2rem;
-    }
-    
-    .link {
-      display: inline-block;
-      transition: 200ms ease;
-    }
-    
-    .link:hover {
-      text-decoration: none;
-      transform: scale(1.01);
-    }
-    
-    .image {
-      height: auto;
-      object-fit: contain;
-      object-position: center;
-    }
-    
-    .content {
-      padding: 20px 0px;
-    }
-    
-    .heading {
-        font-family: BrandonText-Bold,Arial,Helvetica,sans-serif;
-        font-size: 1.375rem;
-        line-height: 1.1em;
-        text-transform: uppercase;
-        font-weight: 400;
-        color: #483729;
-        margin-bottom: 1rem;
-    }
-    
-    .link:hover .heading {
-      text-decoration: underline;
-    }
-    
-    .phoneContainer {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-    }
-    
-    .phoneNumberLink {
-      line-height: 1.1em;
-      font-family: Helvetica,Arial,sans-serif;
-      font-weight: 400;
-      text-transform: none;
-      font-size: 1.125rem;
-      color: #00838e;
-      text-decoration: none;
-      cursor: pointer;
-    }
-    
-    
-    .p {
-      color: #333;
-      line-height: 1.3;
-      margin-bottom: 1em;
-      padding-top: 7px;
-      text-decoration: none;
-    }
-
-    .phoneNumberLink:active, 
-    .phoneNumberLink:hover {
-      outline: 0;
-      text-decoration: underline;
-    }
-    
-    @media screen and (min-width: 950px) {
-      .heading {
-        font-size: 1.625rem;
-      }
-    
-      .phoneNumberLink {
-        line-height: 1.1em;
-        font-size: 1.375rem;
-      }
-    }

components/Current/Blocks/List/ListItem.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link"
 import { cva } from "class-variance-authority"
 import { BlockListItemsEnum } from "@/types/requests/blocks/list"
+
 import type { ListItem } from "@/types/requests/blocks/list"
+
 import styles from "./list.module.css"
 
 const config = {

components/Current/Blocks/List/list.module.css

@@ -6,7 +6,6 @@
     font-weight: 400;
     color: #483729;
     margin-bottom: 1rem;
-    margin-top: 2rem;
 }
 
 .ul {

components/Current/Blocks/blocks.module.css

@@ -0,0 +1,11 @@
+.wrapper {
+    background-color: #fff;
+    padding: 20px 10px 5px;
+}
+
+@media screen and (min-width: 740px) {
+    .wrapper {
+     padding:20px 0 0;
+    }
+  }
+  

components/Current/Blocks/index.tsx

@@ -1,8 +1,10 @@
-import List from "./Blocks/List"
-import Puffs from "./Blocks/Puffs"
-import Text from "./Blocks/Text"
+import List from "./List"
+import Puffs from "./Puffs"
+import Text from "./Text"
 
 import { BlocksTypenameEnum } from "@/types/requests/utils/typename"
+
+import styles from "./blocks.module.css"
 import type { BlocksProps } from "@/types/components/current/blocks"
 
 export default function Blocks({ blocks }: BlocksProps) {
@@ -11,8 +13,8 @@ export default function Blocks({ blocks }: BlocksProps) {
   }
 
   return (
-    <section id="mainbody_personalized">
-      {blocks.map(block => {
+    <section className={styles.wrapper}>
+      {blocks.map((block) => {
         const type = block.__typename
         switch (type) {
           case BlocksTypenameEnum.CurrentBlocksPageBlocksList:

components/Current/ContentPage/contentPage.module.css

@@ -0,0 +1,8 @@
+.wrapper {
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    padding-bottom: 50px;
+    background: #f3f2f1;
+    display: block;
+}

components/Current/ContentPage/index.tsx

@@ -6,8 +6,9 @@ import Preamble from "@/components/Current/Preamble"
 import Section from "@/components/Current/Section"
 import SubnavMobile from "@/components/Current/SubnavMobile"
 
-import type { ContentPageProps } from "@/types/components/current/contentPage"
+import styles from "./contentPage.module.css"
 
+import type { ContentPageProps } from "@/types/components/current/contentPage"
 
 export default function ContentPage({ data, lang, uri }: ContentPageProps) {
   const page = data.all_current_blocks_page.items[0]
@@ -19,7 +20,7 @@ export default function ContentPage({ data, lang, uri }: ContentPageProps) {
     <>
       <Header lang={lang} pathname={uri} />
       {images?.totalCount ? <Hero images={images.edges} /> : null}
-      <main className="main l-sections-wrapper" id="maincontent" role="main">
+      <main className={styles.wrapper} id="maincontent" role="main">
         <input
           id="lbl-personalized-areas"
           name="lbl-personalized-areas"

components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css

@@ -1,4 +1,5 @@
 .nav {
+  display: none;
   padding-bottom: 8px;
 }
 
@@ -29,4 +30,11 @@
 .currentPage::before {
   content: "›";
   margin-right: 4px;
+}
+
+
+@media (min-width: 740px){
+  .nav {
+    display: block;
+  }
 }

components/Current/Preamble/preamble.module.css

@@ -1,10 +1,10 @@
 .container {
   display: grid;
   gap: 60px;
-  grid-template-columns: 2fr 1fr;
   margin: 0 auto;
   max-width: 1200px;
-  padding: 30px 0px 45px;
+  padding: 20px 10px 5px;
+  background: #fff;
 }
 
 .preamble {
@@ -13,13 +13,22 @@
   font-size: 1.25rem;
   font-weight: 300;
   line-height: normal;
-  margin-bottom: 0px;
+  margin-bottom: 20px;
   text-transform: none;
 }
 
+@media (min-width: 740px){
+  .container {
+      background: transparent;
+      padding: 20px 30px 15px;
+      grid-template-columns: 2fr 1fr;
+  }
+}
+
 @media screen and (min-width: 950px) {
   .preamble {
     font-size: 1.5rem;
     line-height: 2.25rem;
   }
-}
+}
+

components/Current/Section/section.module.css

@@ -1,20 +1,20 @@
-.wrapper {
-  background-color: #fff;
-}
 
 .section {
   box-sizing: content-box;
-  display: grid;
-  gap: 70px;
   margin: 0 auto;
-  max-width: 1200px;
-  padding: 20px 10px 5px;
 }
 
 @media screen and (min-width: 740px) {
   .section {
     padding: 30px 30px 15px;
     grid-template-columns: 2fr 1fr;
+    display: grid;
+    gap: 70px;
+    max-width: 1200px;
+  }
+
+  .wrapper {
+    background-color: #fff;
   }
 }
 

lib/graphql/Fragments/Contact.graphql

@@ -8,8 +8,12 @@ fragment Contact on ContactBlock {
   }
   system {
     uid
+    locale
+  }
+  phone {
+    number
+    title
   }
-  phone
   title
   visiting_address {
     city

types/requests/asides/contact.ts

@@ -1,3 +1,4 @@
+import { Lang } from "@/types/lang"
 import type { Edges } from "../utils/edges"
 
 export type ContactNode = {
@@ -10,8 +11,12 @@ export type ContactNode = {
   }
   system: {
     uid: string
+    locale: Lang
+  }
+  phone: {
+    number: string
+    title: string
   }
-  phone: string
   title: string
   visiting_address: {
     city: string