From e88a895d518d6b260e46ef0893d44a3e40021ddb Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 26 Nov 2024 14:50:28 +0100 Subject: [PATCH 1/3] fix styling on prijectinfo section --- .../customerCases/customerCase/customerCase.module.css | 1 - .../projectInfo/customerCaseProjectInfo.module.css | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css index 5fd4bfcd3..c5ace422a 100644 --- a/src/components/customerCases/customerCase/customerCase.module.css +++ b/src/components/customerCases/customerCase/customerCase.module.css @@ -55,7 +55,6 @@ flex-direction: column; align-self: center; width: 100%; - max-width: 960px; } .sectionsWrapper { diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css index c652f6ff6..e1ef0369f 100644 --- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -14,7 +14,6 @@ gap: 1.5rem; display: flex; flex-direction: column; - flex-wrap: wrap; } .badgeWrapper { @@ -38,10 +37,10 @@ } .varianter { - max-width: 537px; display: flex; flex-direction: row; flex-wrap: wrap; + max-width: 80%; } .dotSeperatorVarianter::after { @@ -57,6 +56,7 @@ .projectInfoItem { display: flex; flex-direction: row; + flex-wrap: wrap; } .title { @@ -67,6 +67,7 @@ display: flex; flex-direction: column; gap: 1.5rem; + flex-wrap: wrap; } .preFancyCharacter { From 9b0aeae4336894ed0e9c2d0c7100ecb4a6de04eb Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 26 Nov 2024 20:34:07 +0100 Subject: [PATCH 2/3] changes consultant card and wrapping in project info container --- messages/no.json | 2 +- .../CustomerCaseEmployeeCard.tsx | 75 ++++++------------- .../customerCaseEmployeeCard.module.css | 44 +++++------ .../customerCaseProjectInfo.module.css | 1 + .../CustomerCaseConsultants.tsx | 2 +- src/components/text/text.module.css | 14 +++- src/styles/global.css | 2 +- 7 files changed, 57 insertions(+), 83 deletions(-) diff --git a/messages/no.json b/messages/no.json index cfb522435..31edc26ed 100644 --- a/messages/no.json +++ b/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", diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx index 14ec24d4c..bab24148b 100644 --- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx +++ b/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 =

{employee.name}

; - const t = useTranslations("custom_link"); - return ( employee.imageThumbUrl && employee.name && @@ -39,49 +29,32 @@ export default function CustomerCaseEmployeeCard({ />
- {employeePageSlug !== undefined ? ( - - {title} - - ) : ( - title - )} -
- {employee.competences.map((competence) => ( - - {competence} +
+ {employee.name} +
+ {employee.competences.map((competence) => ( + + {competence} + + ))} +
+
+
+ {employee.email && ( + + {employee.email} + + )} + {employee.telephone && ( + + {formatPhoneNumber(employee.telephone)} - ))} + )}
- {employee.email && ( -

{employee.email}

- )} - {employee.telephone && ( -

- {formatPhoneNumber(employee.telephone)} -

- )} - {employeePageSlug && ( - - )}
) diff --git a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css index fbab4355c..f75a07b81 100644 --- a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css +++ b/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%; -} - +.employeeRole{ + color: var(--text-tertiary); +} .employeeEmail, .employeeTelephone { - color: var(--text-primary); - font-size: 0.75rem; - font-weight: 400; - line-height: 120%; + color: var(--text-tertiary); } diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css index e1ef0369f..5df05baa3 100644 --- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -14,6 +14,7 @@ gap: 1.5rem; display: flex; flex-direction: column; + max-width: 50%; } .badgeWrapper { diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx index 0970b56c7..980150d1a 100644 --- a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx +++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx @@ -29,7 +29,7 @@ export default async function CustomerCaseConsultants({ return (
- {t("in_project")} + {t("in_project")}
{consultants.map((consultant) => ( Date: Tue, 26 Nov 2024 20:41:45 +0100 Subject: [PATCH 3/3] linting fixes --- .../customerCaseEmployeeCard.module.css | 12 ++++++------ src/components/text/text.module.css | 4 ++-- src/styles/global.css | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css index f75a07b81..f91cd203a 100644 --- a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css +++ b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css @@ -3,7 +3,7 @@ width: 100%; gap: 1rem; min-width: 400px; - width: fit-content; + width: fit-content; } .employeeImage { @@ -24,7 +24,7 @@ height: 100%; } -.employeeName{ +.employeeName { width: fit-content; display: flex; flex-direction: column; @@ -46,10 +46,10 @@ margin: 0; } -.employeeRole{ - color: var(--text-tertiary); -} +.employeeRole { + color: var(--text-tertiary); +} .employeeEmail, .employeeTelephone { - color: var(--text-tertiary); + color: var(--text-tertiary); } diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index f26b06b5d..3b181f971 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -1,5 +1,5 @@ :where(.desktopLink, .h1, .h2, .h3, .h4, .h5, .h6, .bodyXl) { - margin: 0; + margin: 0; font-family: var(--font-britti-sans); } @@ -100,7 +100,7 @@ font-weight: 400; line-height: 18px; letter-spacing: 0.14px; - + @media (max-width: 375px) { font-size: 12px; letter-spacing: 0.12px; diff --git a/src/styles/global.css b/src/styles/global.css index c7cfb64cc..9dae07c03 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -31,7 +31,7 @@ html { /* TODO: upgrade color-scheme with correct colors */ --secondary-red: #f0503f; --text-primary: #222424; - --text-tertiary: #5E5E5E; + --text-tertiary: #5e5e5e; --background-bg-light-secondary: #eaeaea;