Design refactor (#279)

varianter · Nov 14, 2023 · 399009a · 399009a
1 parent d00d9ba
commit 399009a
Show file tree

Hide file tree

Showing 22 changed files with 111 additions and 151 deletions.
diff --git a/frontend/public/fonts/recoleta-medium.woff b/frontend/public/fonts/recoleta-medium.woff
diff --git a/frontend/public/fonts/recoleta-regular.woff b/frontend/public/fonts/recoleta-regular.woff
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -2,16 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: "Recoleta-Regular";
-  src: url(../../public/fonts/recoleta-regular.woff) format("truetype");
-}
-
-@font-face {
-  font-family: "Recoleta-Medium";
-  src: url(../../public/fonts/recoleta-medium.woff) format("truetype");
-}
-
 @font-face {
   font-family: "Graphik-Regular";
   src: url(../../public/fonts/Graphik-Regular-Web.woff2) format("truetype");
@@ -44,61 +34,60 @@
   }
 
   h1 {
-    font-size: 2rem;
+    font-size: 1.625rem;
     font-family: "Graphik-Regular", sans-serif;
-    font-weight: normal;
     line-height: 2.5rem;
   }
 
   h2 {
-    font-size: 1.625rem;
+    font-size: 1.25rem;
     font-family: "Graphik-Regular", sans-serif;
-    line-height: 2.5rem;
+    line-height: 1.5rem;
   }
 
-  h3 {
-    font-size: 1.25rem;
+  .normal {
+    font-size: 0.875rem;
     font-family: "Graphik-Regular";
-    line-height: 2.5rem;
+    line-height: 1rem;
   }
 
-  .body {
-    font-size: 0.9rem;
-    font-family: "Graphik-Regular";
+  .normal-medium {
+    font-size: 0.875rem;
+    font-family: "Graphik-Medium";
     line-height: 1rem;
   }
 
-  .body-bold {
-    font-size: 0.9rem;
-    font-family: "Graphik-Medium";
+  .normal-semibold {
+    font-size: 0.875rem;
+    font-family: "Graphik-SemiBold";
     line-height: 1rem;
   }
 
-  .body-small {
+  .small {
     font-size: 0.75rem;
     font-family: "Graphik-Regular";
     line-height: 1rem;
   }
 
-  .body-small-bold {
+  .small-medium {
     font-size: 0.75rem;
     font-family: "Graphik-Medium";
     line-height: 1rem;
   }
 
-  .detail {
+  .xsmall {
     font-size: 0.625rem;
     font-family: "Graphik-Regular";
     line-height: 1rem;
   }
 
-  .body-large {
+  .large {
     font-size: 1rem;
     font-family: "Graphik-Regular";
     line-height: 1.25rem;
   }
 
-  .body-large-bold {
+  .large-medium {
     font-size: 1rem;
     font-family: "Graphik-Medium";
     line-height: 1.25rem;
@@ -113,24 +102,6 @@
     font-weight: normal;
   }
 
-  .interaction-chip {
-    font-size: 0.75rem;
-    font-family: "Graphik-SemiBold";
-    line-height: 0.875rem;
-  }
-
-  .interaction-button {
-    font-size: 0.9rem;
-    font-family: "Graphik-SemiBold";
-    line-height: 1rem;
-  }
-
-  .detail-pill-text {
-    font-size: 0.652rem;
-    font-family: "Graphik-Regular";
-    line-height: 1rem;
-  }
-
   .layout-grid {
     display: grid;
     grid-template-columns: auto 1fr;

diff --git a/frontend/src/components/ActiveFilters.tsx b/frontend/src/components/ActiveFilters.tsx
@@ -31,7 +31,7 @@ export default function ActiveFilters() {
       {filterSummaryText != "" && (
         <div className="flex flex-row gap-[5px] text-primary_default items-center">
           <Filter size="12" />{" "}
-          <p className="body-small-bold"> {filterSummaryText} </p>
+          <p className="small-medium"> {filterSummaryText} </p>
         </div>
       )}
     </div>

diff --git a/frontend/src/components/AvailabilityFilter.tsx b/frontend/src/components/AvailabilityFilter.tsx
@@ -8,7 +8,7 @@ export default function AvailabilityFilter() {
 
   return (
     <div className="flex flex-col gap-2">
-      <p className="body-small">Status</p>
+      <p className="small">Status</p>
       <FilterButton
         label={"Ledig tid"}
         onClick={() => toggleAvailabilityFilter()}

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
@@ -42,31 +42,31 @@ export default function ConsultantRows({
         <td
           className={`border-l-2 ${
             isListElementVisible
-              ? "border-l-secondary_default"
+              ? "border-l-secondary"
               : isRowHovered
-              ? "border-l-primary_default"
-              : "border-l-primary_l4"
+              ? "border-l-primary"
+              : "border-l-primary/5"
           } `}
         >
           <button
-            className={`p-2 rounded-lg ml-2 hover:bg-primary_default hover:bg-opacity-10 ${
+            className={`p-2 rounded-lg ml-2 hover:bg-primary hover:bg-opacity-10 ${
               isListElementVisible && "rotate-180"
             }`}
             onClick={toggleListElementVisibility}
           >
-            <ChevronDown className={`text-primary_default w-6 h-6`} />
+            <ChevronDown className={`text-primary w-6 h-6`} />
           </button>
         </td>
         <td>
           <div className="flex flex-col gap-1 ">
             <p
               className={`text-black text-start ${
-                isListElementVisible ? "body-bold" : "body"
+                isListElementVisible ? "normal-medium" : "normal"
               }`}
             >
               {consultant.name}
             </p>
-            <p className="detail text-neutral_l1 text-start">
+            <p className="xsmall text-black/75 text-start">
               {`${consultant.yearsOfExperience} års erfaring`}
             </p>
           </div>
@@ -95,11 +95,11 @@ export default function ConsultantRows({
         ))}
       {isListElementVisible && (
         <tr>
-          <td className={`${"border-l-secondary_default border-l-2"}`}></td>
+          <td className={`${"border-l-secondary border-l-2"}`}></td>
           <td>
             <button
               disabled
-              className="detail text-neutral_l1 text-sm font-semibold leading-none"
+              className="xsmall text-black/75 text-sm font-semibold leading-none"
             >
               + Legg til bemanning
             </button>
@@ -114,13 +114,13 @@ export default function ConsultantRows({
 function getColorByStaffingType(type: BookingType): string {
   switch (type) {
     case BookingType.Offer:
-      return "bg-offer_light";
+      return "bg-offer";
     case BookingType.Booking:
-      return "bg-primary_l5";
+      return "bg-primary/[3%]";
     case BookingType.Vacation:
-      return "bg-vacation_light";
+      return "bg-vacation";
     case BookingType.PlannedAbsence:
-      return "bg-absence_light";
+      return "bg-absence";
     default:
       return "";
   }
@@ -129,13 +129,13 @@ function getColorByStaffingType(type: BookingType): string {
 function getIconByBookingType(type: BookingType): ReactElement {
   switch (type) {
     case BookingType.Offer:
-      return <FileText size={16} className="text-offer_dark" />;
+      return <FileText size={16} className="text-primary_darker" />;
     case BookingType.Booking:
       return <Briefcase size={16} className="text-black" />;
     case BookingType.Vacation:
-      return <Sun size={16} className="text-vacation_dark" />;
+      return <Sun size={16} className="text-vacation_darker" />;
     case BookingType.PlannedAbsence:
-      return <Moon size={16} className="text-absence_dark" />;
+      return <Moon size={16} className="text-absence_darker" />;
     default:
       return <></>;
   }
@@ -183,8 +183,8 @@ function WeekCell(props: {
           bookedHoursPerWeek.bookingModel.totalOverbooking > 0
             ? `bg-black text-white`
             : bookedHoursPerWeek.bookingModel.totalSellableTime > 0
-            ? `bg-semantic_4_l1`
-            : `bg-primary_l5`
+            ? `bg-available/50`
+            : `bg-primary/[3%]`
         }`}
         onMouseEnter={() => setHoveredRowWeek(bookedHoursPerWeek.weekNumber)}
         onMouseLeave={() => setHoveredRowWeek(-1)}
@@ -198,7 +198,7 @@ function WeekCell(props: {
           {bookedHoursPerWeek.bookingModel.totalOffered > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOffered.toFixed(1)}
-              colors="bg-offer_light text-offer_dark border-offer_dark"
+              colors="bg-offer text-primary_darker border-primary_darker"
               icon={<FileText size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -209,7 +209,7 @@ function WeekCell(props: {
                 text={bookedHoursPerWeek.bookingModel.totalSellableTime.toFixed(
                   1,
                 )}
-                colors="bg-free_light text-free_dark border-free_dark"
+                colors="bg-available text-available_darker border-available_darker"
                 icon={<Coffee size="12" />}
                 variant={getInfopillVariantByColumnCount(columnCount)}
               />
@@ -219,23 +219,23 @@ function WeekCell(props: {
               text={bookedHoursPerWeek.bookingModel.totalVacationHours.toFixed(
                 1,
               )}
-              colors="bg-vacation_light text-vacation_dark border-vacation_dark"
+              colors="bg-vacation text-vacation_darker border-vacation_darker"
               icon={<Sun size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
           )}
           {bookedHoursPerWeek.bookingModel.totalOverbooking > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOverbooking.toFixed(1)}
-              colors="bg-overbooking_dark text-overbooking_light border-overbooking_light"
+              colors="bg-overbooked_darker text-white border-white"
               icon={<AlertTriangle size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
           )}
         </div>
         <p
           className={`text-right ${
-            isListElementVisible ? "body-bold" : "body"
+            isListElementVisible ? "normal-medium" : "normal"
           }`}
         >
           {bookedHoursPerWeek.bookingModel.totalBillable}
@@ -283,7 +283,7 @@ function HoveredWeek(props: {
                             hour.week % 100 == bookedHoursPerWeek.weekNumber,
                         )?.hours != 0,
                     ).length -
-                      1 && "border-b pb-2 border-hover_background"
+                      1 && "border-b pb-2 border-black/10"
                 }`}
               >
                 <div className="flex flex-row gap-2 items-center">
@@ -328,9 +328,7 @@ function DetailedBookingRows(props: {
       className="h-fit"
     >
       <td
-        className={`${
-          isListElementVisible && "border-l-secondary_default border-l-2"
-        }`}
+        className={`${isListElementVisible && "border-l-secondary border-l-2"}`}
       ></td>
       <td className="flex flex-row gap-2 justify-start h-8">
         <div
@@ -341,10 +339,10 @@ function DetailedBookingRows(props: {
           {getIconByBookingType(detailedBooking.bookingDetails.type)}
         </div>
         <div className="flex flex-col justify-between items-start">
-          <p className="detail text-neutral_l1 text-right">
+          <p className="xsmall text-black/75 text-right">
             {detailedBooking.bookingDetails.type}
           </p>
-          <p className="text-black text-start body-small">
+          <p className="text-black text-start small">
             {detailedBooking.bookingDetails.name}
           </p>
         </div>
@@ -357,7 +355,7 @@ function DetailedBookingRows(props: {
             className="h-8 p-0.5"
           >
             <p
-              className={`text-right body-small-bold px-2 py-1 rounded h-full
+              className={`text-right small-medium px-2 py-1 rounded h-full
      ${getColorByStaffingType(
        detailedBooking.bookingDetails.type ?? BookingType.Offer,
      )}`}

diff --git a/frontend/src/components/DepartmentFilter.tsx b/frontend/src/components/DepartmentFilter.tsx
@@ -19,7 +19,7 @@ export default function DepartmentFilter() {
 
     return (
       <div className="flex flex-col gap-2">
-        <p className="body-small">Avdeling</p>
+        <p className="small">Avdeling</p>
         <div className="flex flex-col gap-2 w-52">
           {departments?.map((department, index) => (
             <FilterButton

diff --git a/frontend/src/components/DropDown.tsx b/frontend/src/components/DropDown.tsx
@@ -18,18 +18,16 @@ export default function DropDown({
   return (
     <div className="relative">
       <button
-        className={`w-[120px] py-2 px-3 flex flex-row justify-between items-center rounded-lg hover:bg-primary_default hover:bg-opacity-10 border hover:border-primary_default ${
-          isDropDownOpen ? "border-primary_default" : "border-primary_l1"
+        className={`w-[120px] py-2 px-3 flex flex-row justify-between items-center rounded-lg hover:bg-primary hover:bg-opacity-10 border hover:border-primary ${
+          isDropDownOpen ? "border-primary" : "border-primary/50"
         }`}
         onClick={() => setIsDropDownOpen(!isDropDownOpen)}
       >
-        <p className="text-primary_default interaction-button">
-          {chosenOption}
-        </p>
+        <p className="text-primary normal-semibold">{chosenOption}</p>
         {isDropDownOpen ? (
-          <ChevronUp className="text-primary_default w-6 h-6" />
+          <ChevronUp className="text-primary w-6 h-6" />
         ) : (
-          <ChevronDown className="text-primary_default w-6 h-6" />
+          <ChevronDown className="text-primary w-6 h-6" />
         )}
       </button>
       <div
@@ -45,13 +43,13 @@ export default function DropDown({
               setIsDropDownOpen(false);
               setChosenOption(option);
             }}
-            className="hover:bg-primary_default px-3 py-2 rounded-md hover:bg-opacity-10 flex flex-row justify-between items-center"
+            className="hover:bg-primary px-3 py-2 rounded-md hover:bg-opacity-10 flex flex-row justify-between items-center"
           >
-            <p className="h-6 flex items-center interaction-button text-primary_default">
+            <p className="h-6 flex items-center normal-semibold text-primary">
               {option}
             </p>
             {option == chosenOption && (
-              <Check className="h-6 w-6 text-primary_default" />
+              <Check className="h-6 w-6 text-primary" />
             )}
           </button>
         ))}

diff --git a/frontend/src/components/ExperienceFilter.tsx b/frontend/src/components/ExperienceFilter.tsx
@@ -17,7 +17,7 @@ export default function ExperienceFilter() {
   if (yearRanges.length > 0) {
     return (
       <div className="flex flex-col gap-2">
-        <p className="body-small">Erfaring</p>
+        <p className="small">Erfaring</p>
         <div className="flex flex-col gap-2 w-52">
           {yearRanges?.map((range, index) => (
             <FilterButton