Britti (#553)

varianter · Dec 12, 2024 · bd7fb84 · bd7fb84
1 parent d820849
commit bd7fb84
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 55 deletions.
diff --git a/frontend/public/fonts/britti-sans-variable.woff2 b/frontend/public/fonts/britti-sans-variable.woff2
diff --git a/frontend/src/app/[organisation]/kunder/page.tsx b/frontend/src/app/[organisation]/kunder/page.tsx
@@ -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>

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -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 {
@@ -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;
   }
 
@@ -246,7 +264,7 @@
   }
 
   .checkBoxWithCustomCheckmark:checked {
-    background-color: #423d89;
+    background-color: #242424;
   }
 
   .checkBoxWithCustomCheckmark:checked::before {
@@ -267,6 +285,6 @@
     color: white;
     border-radius: 5px;
     padding: 0.3rem 0.7rem;
-    background-color: #423d89;
+    background-color: #242424;
   }
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -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>

diff --git a/frontend/src/components/ActiveFilters.tsx b/frontend/src/components/ActiveFilters.tsx
@@ -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>
   );

diff --git a/frontend/src/components/Agreement/components/EditInput.tsx b/frontend/src/components/Agreement/components/EditInput.tsx
@@ -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}

diff --git a/frontend/src/components/Buttons/ActionButton.tsx b/frontend/src/components/Buttons/ActionButton.tsx
@@ -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 ${

diff --git a/frontend/src/components/ExperienceFilter.tsx b/frontend/src/components/ExperienceFilter.tsx
@@ -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"
             } `}
@@ -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"
             } `}

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
@@ -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>

diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
@@ -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"
             } `}
           >
@@ -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}

diff --git a/frontend/src/components/Staffing/ConsultantRow.tsx b/frontend/src/components/Staffing/ConsultantRow.tsx
@@ -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 ">

diff --git a/frontend/src/components/Staffing/DetailedBookingRows.tsx b/frontend/src/components/Staffing/DetailedBookingRows.tsx
@@ -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}>

diff --git a/frontend/src/components/StaffingSidebar.tsx b/frontend/src/components/StaffingSidebar.tsx
@@ -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

diff --git a/frontend/src/components/consultants/ConsultantsContent.tsx b/frontend/src/components/consultants/ConsultantsContent.tsx
@@ -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);
@@ -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]">

diff --git a/frontend/src/components/consultants/FilteredConsultantsComp.tsx b/frontend/src/components/consultants/FilteredConsultantsComp.tsx
@@ -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);
@@ -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>
@@ -152,7 +153,7 @@ export default function FilteredConsultantsComp({
         </tr>
       </thead>
 
-      <tbody ref={listRef}>
+      <tbody ref={listRef} onMouseLeave={() => setHoveredRowIndex(null)}>
         {editableConsultants
           .filter(
             (e) =>
@@ -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);
@@ -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
@@ -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>
@@ -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>
@@ -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);
@@ -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>
-Original file 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 @@