Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Britti #553

Merged
merged 3 commits into from
Dec 12, 2024
Merged

Britti #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73fa92b
start on rebrand
MariaBonde Dec 10, 2024
ceb2e78
background
MariaBonde Dec 12, 2024
29e373a
britti transformation
MariaBonde Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontend/public/fonts/britti-sans-variable.woff2
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion frontend/src/app/[organisation]/kunder/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default async function Kunder({
<th colSpan={2}>
<div className="flex flex-row gap-3 pb-4 items-center">
<p className="normal-medium ">{title}</p>
<p className="text-primary small-medium rounded-full bg-primary/5 px-2 py-1">
<p className="text-primary small-medium rounded-full bg-secondary/30 px-2 py-1">
{customers?.length}
</p>
</div>
Expand Down
46 changes: 32 additions & 14 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@
src: url(../../public/fonts/Graphik-Bold-Web.woff2) format("truetype");
}

@font-face {
font-family: "BrittiSans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url(../../public/fonts/britti-sans-variable.woff2) format("woff2");
}

@layer base {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
Expand All @@ -46,62 +54,72 @@
}

h1 {
font-size: 1.625rem;
font-family: "Graphik-Regular", sans-serif;
font-size: 2rem;
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 500;
line-height: 2.5rem;
}

h2 {
font-size: 1.25rem;
font-family: "Graphik-Regular", sans-serif;
font-size: 1.5rem;
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 400;
line-height: 1.5rem;
}

.normal {
font-size: 0.875rem;
font-family: "Graphik-Regular";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 400;
line-height: 1rem;
}

.normal-medium {
font-size: 0.875rem;
font-family: "Graphik-Medium";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 500;
line-height: 1rem;
}

.normal-semibold {
font-size: 0.875rem;
font-family: "Graphik-SemiBold";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 600;
line-height: 1rem;
}

.small {
font-size: 0.75rem;
font-family: "Graphik-Regular";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 400;
line-height: 1rem;
}

.small-medium {
font-size: 0.75rem;
font-family: "Graphik-Medium";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 500;
line-height: 1rem;
}

.xsmall {
font-size: 0.625rem;
font-family: "Graphik-Regular";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 400;
line-height: 1rem;
}

.large {
font-size: 1rem;
font-family: "Graphik-Regular";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 400;
line-height: 1.25rem;
}

.large-medium {
font-size: 1rem;
font-family: "Graphik-Medium";
font-family: "BrittiSans", sans-serif;
font-variation-settings: "wght" 500;
line-height: 1.25rem;
}

Expand Down Expand Up @@ -246,7 +264,7 @@
}

.checkBoxWithCustomCheckmark:checked {
background-color: #423d89;
background-color: #242424;
}

.checkBoxWithCustomCheckmark:checked::before {
Expand All @@ -267,6 +285,6 @@
color: white;
border-radius: 5px;
padding: 0.3rem 0.7rem;
background-color: #423d89;
background-color: #242424;
}
}
7 changes: 6 additions & 1 deletion frontend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@ export default function RootLayout({
</Head>
<body className="layout-grid">
<NavBar />
<NextTopLoader color="#F076A6" height={3} initialPosition={0.2} />
<NextTopLoader
showSpinner={false}
color="#FF87B7"
height={3}
initialPosition={0.2}
/>
{children}
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ActiveFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function ActiveFilters() {
return (
<div className="h-4">
{filterSummaryText != "" && (
<p className="small-medium"> {filterSummaryText} </p>
<p className="small-medium text-primary"> {filterSummaryText} </p>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Agreement/components/EditInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function EditInput({
) : (
<>
<h2
className="mr-10 pr-10 p-2 mt-1 block text-sm font-bold pl-2 text-gray-700 hover:cursor-pointer"
className="mr-10 pr-10 p-2 mt-1 block text-sm pl-2 text-gray-700 hover:cursor-pointer"
onClick={onClick}
>
{value}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Buttons/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function ActionButton({
}: ActionButtonProps) {
const variantClass =
{
primary: `bg-primary text-white ${
primary: `bg-primaryActionButton text-white ${
!disabled && "hover:bg-primary_darker"
}`,
secondary: `bg-white text-primary border border-primary/50 ${
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ExperienceFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ExperienceFilter() {
<div className={`flex flex-col gap-2`}>
<p className="small">Fra</p>
<div
className={`flex flex-row gap-2 border rounded-lg
className={`flex bg-white flex-row gap-2 border rounded-lg
px-3 py-2 hover:bg-primary/10 hover:border-primary ${
fromSearchIsActive ? "border-primary" : "border-primary/50"
} `}
Expand All @@ -42,7 +42,7 @@ export default function ExperienceFilter() {
<div className={`flex flex-col gap-2`}>
<p className="small">Til</p>
<div
className={`flex flex-row gap-2 border rounded-lg
className={`flex flex-row bg-white gap-2 border rounded-lg
px-3 py-2 hover:bg-primary/10 hover:border-primary ${
toSearchIsActive ? "border-primary" : "border-primary/50"
} `}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/FilteredConsultantsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function StaffingTable() {
<th colSpan={2} className="pt-3 pl-2 -left-2 relative bg-white">
<div className="flex flex-row gap-3 pb-4 items-center">
<p className="normal-medium ">Konsulenter</p>
<p className="text-primary small-medium rounded-full bg-primary/5 px-2 py-1">
<p className="text-primary small-medium rounded-full bg-secondary/30 px-2 py-1">
{filteredConsultants?.length}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SearchBarComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function SearchBarComponent({
<p className="small">Søk</p>
<div
className={`flex flex-row gap-2 border rounded-lg
px-3 py-2 w-full hover:bg-primary/10 hover:border-primary ${
px-3 py-2 w-full bg-white hover:bg-primary/10 hover:border-primary ${
searchIsActive ? "border-primary" : "border-primary/50"
} `}
>
Expand All @@ -60,7 +60,7 @@ export default function SearchBarComponent({
<input
placeholder="Søk etter konsulent"
id="consultantSearch"
className="input w-[131px] focus:outline-none small"
className="input w-[131px] bg-white focus:outline-none small"
onChange={(e) => setNameSearch(e.target.value)}
ref={inputRef}
value={activeNameSearch}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Staffing/ConsultantRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default function ConsultantRows({
height={32}
/>
) : (
<div className="w-8 h-8 rounded-md bg-primary"></div>
<div className="w-10 h-10 rounded-md bg-primary"></div>
)}
</div>
<div className="flex flex-col gap-1 w-7/12 ">
Expand Down
10 changes: 6 additions & 4 deletions frontend/src/components/Staffing/DetailedBookingRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,12 @@ export function DetailedBookingRows(props: {
<td className=" border-l-secondary border-l-2 w-full">
<div className="relative flex justify-center group items-center">
{alert && <alert.icon color={alert.color} />}
<div className="absolute left-full ml-2 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 w-max z-30">
{alert?.text}
<div className="absolute top-1/2 transform -translate-y-1/2 left-0 ml-[-8px] w-0 h-0 border-r-8 border-r-black border-y-8 border-y-transparent border-l-0"></div>
</div>
{alert?.text && (
<div className="absolute left-full ml-2 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 w-max z-30">
{alert?.text}
<div className="absolute top-1/2 transform -translate-y-1/2 left-0 ml-[-8px] w-0 h-0 border-r-8 border-r-black border-y-8 border-y-transparent border-l-0"></div>
</div>
)}
</div>
</td>
<td className="flex flex-row gap-2 justify-start relative" ref={menuRef}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/StaffingSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function StaffingSidebar({
return (
<>
{isSidebarOpen && (
<div className="sidebar z-10 bg-primary/5 h-full flex flex-col gap-6 p-4 w-[300px] overflow-y-auto">
<div className="sidebar z-10 bg-background_grey h-full flex flex-col gap-6 p-4 w-[300px] overflow-y-auto">
<div className="flex flex-row justify-between items-center">
<h1 className="">Filter</h1>
<button
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/consultants/ConsultantsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import AddNewConsultantModal from "./AddNewConsultantModal";
import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
import { ConsultantReadModel } from "@/api-types";
import { useSimpleConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
import ActionButton from "../Buttons/ActionButton";

export default function ConsultantContent() {
const [isSideBarOpen, setIsSidebarOpen] = useState<boolean>(false);
Expand All @@ -30,15 +31,16 @@ export default function ConsultantContent() {
<div className="w-full flex flex-row justify-between">
<h1>Konsulenter</h1>

<button
className="py-2 px-3 bg-primary text-white rounded-md flex flex-row items-center gap-2"
<ActionButton
variant="primary"
className="py-2 px-3 rounded-md flex flex-row items-center gap-2"
onClick={() => {
setIsDisabledHotkeys(true);
setToggleAddConsultant(true);
}}
>
<Plus size="20" /> Legg til konsulent
</button>
</ActionButton>
</div>

<div className="flex flex-row justify-between items-center pt-[12px]">
Expand Down
35 changes: 25 additions & 10 deletions frontend/src/components/consultants/FilteredConsultantsComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function FilteredConsultantsComp({

const [selectedEditConsultant, setSelectedEditConsultant] =
useState<ConsultantReadModel | null>(null);
const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);

const listRef = useRef<HTMLTableSectionElement>(null);
const { setIsDisabledHotkeys } = useContext(FilteredContext);
Expand Down Expand Up @@ -99,7 +100,7 @@ export default function FilteredConsultantsComp({
<th className="px-2 py-1 pt-3 bg-white w-1/6">
<div className="flex flex-row gap-1 items-center">
<p className="normal-medium ">Konsulenter</p>
<p className="text-primary small-medium rounded-full bg-primary/5 px-2 py-1">
<p className="text-primary small-medium rounded-full bg-secondary/30 px-2 py-1">
{editableConsultants.filter((e) => !e.endDate)?.length}
</p>
</div>
Expand Down Expand Up @@ -152,7 +153,7 @@ export default function FilteredConsultantsComp({
</tr>
</thead>

<tbody ref={listRef}>
<tbody ref={listRef} onMouseLeave={() => setHoveredRowIndex(null)}>
{editableConsultants
.filter(
(e) =>
Expand All @@ -161,10 +162,10 @@ export default function FilteredConsultantsComp({
new Date().setHours(0, 0, 0, 0),
)
.sort((a, b) => a.name.localeCompare(b.name))
.map((consultant) => (
.map((consultant, index) => (
<tr
key={consultant.id}
className="h-[52px] bg-background_light_purple hover:bg-background_light_purple_hover transition-all cursor-pointer rounded-md"
className="h-[52px] bg-background_light_purple outline-1 outline outline-transparent hover:outline-hoverBorder transition-all cursor-pointer rounded-md"
onDoubleClick={() => {
setSelectedEditConsultant(consultant);
setIsDisabledHotkeys(true);
Expand All @@ -179,8 +180,15 @@ export default function FilteredConsultantsComp({
setIsDisabledHotkeys(false);
}
}}
onMouseEnter={() => setHoveredRowIndex(index)}
>
<td className="px-2 py-1 rounded-l-md">
<td
className={`px-2 py-1 rounded-l-md border-l-2 ${
hoveredRowIndex === index
? "hover:border-l-primary"
: " border-l-primary/5"
}`}
>
<div className="flex flex-row align-center self-center gap-2">
{consultant.imageThumbUrl ? (
<Image
Expand Down Expand Up @@ -319,7 +327,14 @@ export default function FilteredConsultantsComp({
{selectedEditConsultant?.id === consultant.id ? (
<Check className="text-primary" size="24" />
) : (
<Edit3 className="text-primary" size="24" />
<Edit3
className={` ${
hoveredRowIndex === index
? "text-primary"
: "text-primary/50"
}`}
size="24"
/>
)}
</button>
</td>
Expand All @@ -332,7 +347,7 @@ export default function FilteredConsultantsComp({
<td className="py-4 font-bold text-">
<div className="flex flex-row gap-1 items-center">
<p className="normal-medium ">Inaktive konsulenter</p>
<p className="text-primary small-medium rounded-full bg-primary/5 px-2 py-1">
<p className="text-primary small-medium rounded-full bg-secondary/30 px-2 py-1">
{editableConsultants.filter((e) => e.endDate)?.length}
</p>
</div>
Expand All @@ -350,7 +365,7 @@ export default function FilteredConsultantsComp({
.map((consultant) => (
<tr
key={consultant.id}
className="h-[52px] bg-background_light_purple hover:bg-background_light_purple_hover transition-all cursor-pointer rounded-md"
className="h-[52px] bg-background_light_purple hover:border-hoverBorder hover:border transition-all cursor-pointer rounded-md"
onDoubleClick={() => {
setSelectedEditConsultant(consultant);
setIsDisabledHotkeys(true);
Expand Down Expand Up @@ -404,8 +419,8 @@ export default function FilteredConsultantsComp({
)}
</div>
{selectedEditConsultant?.id === consultant.id ? null : (
<p className="text-xs text-text_light_black">
Erfaring {consultant.yearsOfExperience} år
<p className="xsmall text-text_light_black">
{consultant.yearsOfExperience} års erfaring
</p>
)}
</div>
Expand Down
Loading
Loading