Skip to content

Commit

Permalink
v3 - customer case styling fixes (#911)
Browse files Browse the repository at this point in the history
* fix styling on prijectinfo section

* changes consultant card and wrapping in project info container

* linting fixes
  • Loading branch information
anemne authored Nov 27, 2024
1 parent 693642a commit 8fb369c
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 83 deletions.
2 changes: 1 addition & 1 deletion messages/no.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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 &&
Expand All @@ -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>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
display: flex;
width: 100%;
gap: 1rem;
min-width: 400px;
width: fit-content;
}

.employeeImage {
Expand All @@ -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 {
Expand All @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
flex-direction: column;
align-self: center;
width: 100%;
max-width: 960px;
}

.sectionsWrapper {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
gap: 1.5rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: 50%;
}

.badgeWrapper {
Expand All @@ -38,10 +38,10 @@
}

.varianter {
max-width: 537px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 80%;
}

.dotSeperatorVarianter::after {
Expand All @@ -57,6 +57,7 @@
.projectInfoItem {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.title {
Expand All @@ -67,6 +68,7 @@
display: flex;
flex-direction: column;
gap: 1.5rem;
flex-wrap: wrap;
}

.preFancyCharacter {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 12 additions & 2 deletions src/components/text/text.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
:where(.desktopLink, .h1, .h2, .h3, .h4, .h5, .h6, .bodyXl) {
margin: 0;
font-family: var(--font-britti-sans);
}

Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 8fb369c

Please sign in to comment.