v3 - customer case styling fixes

messages/no.json

@@ -9,7 +9,7 @@
     "industry": "Bransje",
     "delivery": "Leveranse",
     "variants": "Variantene",
-    "in_project": "Varianter i prosjektet",
+    "in_project": "Varianter i arbeid",
     "design": "Design",
     "development": "Utvikling",
     "project_management": "Prosjektledelse",

src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx

@@ -1,13 +1,8 @@
 import Image from "next/image";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
 
-import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
-import { aliasFromEmail } from "src/utils/employees";
-import { LinkType } from "studio/lib/interfaces/navigation";
 
 import styles from "./customerCaseEmployeeCard.module.css";
 
@@ -18,13 +13,8 @@ export interface CustomerCaseEmployeeCardProps {
 }
 
 export default function CustomerCaseEmployeeCard({
-  currentLanguage,
   employee,
-  employeePageSlug,
 }: CustomerCaseEmployeeCardProps) {
-  const title = <p className={styles.employeeName}>{employee.name}</p>;
-  const t = useTranslations("custom_link");
-
   return (
     employee.imageThumbUrl &&
     employee.name &&
@@ -39,49 +29,32 @@ export default function CustomerCaseEmployeeCard({
           />
         </div>
         <div className={styles.employeeInfo}>
-          {employeePageSlug !== undefined ? (
-            <Link
-              href={`/${currentLanguage}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
-            >
-              {title}
-            </Link>
-          ) : (
-            title
-          )}
-          <div className={styles.employeeRole}>
-            {employee.competences.map((competence) => (
-              <Text
-                className={styles.employeeRoleDot}
-                type="labelRegular"
-                key={competence}
-              >
-                {competence}
+          <div className={styles.employeeName}>
+            <Text type="bodyNormal">{employee.name}</Text>
+            <div className={styles.employeeRole}>
+              {employee.competences.map((competence) => (
+                <Text
+                  className={styles.employeeRoleDot}
+                  type="labelRegular"
+                  key={competence}
+                >
+                  {competence}
+                </Text>
+              ))}
+            </div>
+          </div>
+          <div>
+            {employee.email && (
+              <Text type="bodyExtraSmall" className={styles.employeeEmail}>
+                {employee.email}
+              </Text>
+            )}
+            {employee.telephone && (
+              <Text type="bodyExtraSmall" className={styles.employeeTelephone}>
+                {formatPhoneNumber(employee.telephone)}
               </Text>
-            ))}
+            )}
           </div>
-          {employee.email && (
-            <p className={styles.employeeEmail}>{employee.email}</p>
-          )}
-          {employee.telephone && (
-            <p className={styles.employeeTelephone}>
-              {formatPhoneNumber(employee.telephone)}
-            </p>
-          )}
-          {employeePageSlug && (
-            <CustomLink
-              size={"small"}
-              link={{
-                _key: "go-to-mini-cv",
-                _type: "link",
-                linkType: LinkType.Internal,
-                linkTitle: t("visit_cv"),
-                language: currentLanguage,
-                internalLink: {
-                  _ref: `${employeePageSlug}/${aliasFromEmail(employee.email)}`,
-                },
-              }}
-            />
-          )}
         </div>
       </div>
     )

src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css

@@ -2,6 +2,8 @@
   display: flex;
   width: 100%;
   gap: 1rem;
+  min-width: 400px;
+  width: fit-content;
 }
 
 .employeeImage {
@@ -10,26 +12,28 @@
   align-items: center;
   background-color: var(--primary-black);
   border-radius: 12px;
-  height: 125px;
-  width: 50%;
-  padding: 1rem;
   position: relative;
+  width: 96px;
+  height: 94px;
 }
 
 .employeeInfo {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  gap: 0.5rem;
-  white-space: nowrap;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.employeeName {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
 }
 
 .employeeRole {
   display: flex;
+  width: fit-content;
   flex-direction: row;
-  overflow: visible;
-  align-self: stretch;
-  width: 100%;
 }
 
 .employeeRoleDot::after {
@@ -42,24 +46,10 @@
   margin: 0;
 }
 
-.employeeName {
-  color: var(--text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 120%;
-}
-
 .employeeRole {
-  color: var(--text-primary);
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 120%;
+  color: var(--text-tertiary);
 }
-
 .employeeEmail,
 .employeeTelephone {
-  color: var(--text-primary);
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 120%;
+  color: var(--text-tertiary);
 }

src/components/customerCases/customerCase/customerCase.module.css

@@ -55,7 +55,6 @@
   flex-direction: column;
   align-self: center;
   width: 100%;
-  max-width: 960px;
 }
 
 .sectionsWrapper {

src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css

@@ -14,7 +14,7 @@
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
+  max-width: 50%;
 }
 
 .badgeWrapper {
@@ -38,10 +38,10 @@
 }
 
 .varianter {
-  max-width: 537px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  max-width: 80%;
 }
 
 .dotSeperatorVarianter::after {
@@ -57,6 +57,7 @@
 .projectInfoItem {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .title {
@@ -67,6 +68,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  flex-wrap: wrap;
 }
 
 .preFancyCharacter {

src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx

@@ -29,7 +29,7 @@ export default async function CustomerCaseConsultants({
 
   return (
     <div className={styles.wrapper}>
-      <Text type={"h3"}>{t("in_project")}</Text>
+      <Text type={"h4"}>{t("in_project")}</Text>
       <div className={styles.content}>
         {consultants.map((consultant) => (
           <CustomerCaseEmployeeCard

src/components/text/text.module.css

@@ -1,4 +1,5 @@
 :where(.desktopLink, .h1, .h2, .h3, .h4, .h5, .h6, .bodyXl) {
+  margin: 0;
   font-family: var(--font-britti-sans);
 }
 
@@ -94,8 +95,17 @@
   line-height: 150%;
 }
 
-/* TODO: add font variables */
-/* .bodyExtraSmall */
+.bodyExtraSmall {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.14px;
+
+  @media (max-width: 375px) {
+    font-size: 12px;
+    letter-spacing: 0.12px;
+  }
+}
 
 .labelSmall {
   font-size: 1rem;