fix: style components to add responsivity

components/Current/Aside/Contacts/Contact.tsx

@@ -0,0 +1,82 @@
+import styles from "./contact.module.css"
+
+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>
+      <div>
+        <div>
+          <div>
+            <h2 className={styles.heading}>{title}</h2>
+            <p>
+              {mailing_address.name}
+              <br />
+              {mailing_address.street}
+              <br />
+              {mailing_address.zip} {mailing_address.city}
+              <br />
+              {mailing_address.country}
+            </p>
+            <p>
+              {visitingAddressMessage}: {visiting_address.street}{" "}
+            </p>
+          </div>
+        </div>
+        <div>
+          <div className={styles.highlightBlock}>
+            <h3>{phone.title}</h3>
+            <div className={styles.phoneContainer}>
+              <svg
+                focusable="false"
+                className={styles.phoneIcon}
+                viewBox="0 0 32 32"
+              >
+                <use
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                  xlinkHref="/Static/img/icons/sprites.svg#icon-phone"
+                ></use>
+              </svg>
+
+              <a
+                href={phone.number}
+                itemProp="telephone"
+                className={styles.phoneNumberLink}
+              >
+                {phone.number}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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/Contacts/index.tsx

@@ -0,0 +1,8 @@
+import type { ContactsProps } from "@/types/components/current/asides/contact"
+import Contact from "./Contact"
+
+export default function Contacts({ contacts }: ContactsProps) {
+  return contacts.map((contact) => (
+    <Contact key={contact.node.system.uid} {...contact.node} />
+  ))
+}