From 9b0aeae4336894ed0e9c2d0c7100ecb4a6de04eb Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 26 Nov 2024 20:34:07 +0100 Subject: [PATCH] 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) => (