Some design fixes (#252)

kiesraad · Aug 15, 2024 · e200f39 · e200f39
1 parent 1345063
commit e200f39
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 24 deletions.
diff --git a/frontend/app/module/input/page/InputHomePage.tsx b/frontend/app/module/input/page/InputHomePage.tsx
@@ -51,7 +51,7 @@ export function InputHomePage() {
         </Alert>
       )}
       <main>
-        <article>
+        <article id="polling-station-choice-form">
           <PollingStationChoiceForm />
         </article>
         <nav id="progress">

diff --git a/frontend/lib/icon/gen.tsx b/frontend/lib/icon/gen.tsx
@@ -12,7 +12,7 @@ export const IconArrowNarrowRight = () => (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4 12H20M20 12L14 6M20 12L14 18"
-      stroke="#113051"
+      stroke="#101828"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -126,6 +126,25 @@ export const IconMinus = () => (
     />
   </svg>
 );
+export const IconPencil = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="pencil" clipPath="url(#clip0_3151_21004)">
+      <path
+        id="Icon"
+        d="M12 6.66667L9.33331 4M1.66663 14.3333L3.92287 14.0826C4.19853 14.052 4.33636 14.0367 4.46519 13.995C4.57949 13.958 4.68826 13.9057 4.78855 13.8396C4.9016 13.765 4.99966 13.667 5.19578 13.4709L14 4.66667C14.7364 3.93029 14.7364 2.73638 14 2C13.2636 1.26362 12.0697 1.26362 11.3333 2L2.52911 10.8042C2.33299 11.0003 2.23493 11.0984 2.16038 11.2114C2.09425 11.3117 2.04197 11.4205 2.00497 11.5348C1.96326 11.6636 1.94795 11.8014 1.91732 12.0771L1.66663 14.3333Z"
+        stroke="#475467"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3151_21004">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
 export const IconThumbsUp = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path d="M17.4,23H4c-1.7,0-3-1.3-3-3v-7c0-1.7,1.3-3,3-3h2.4l3.5-7.9c.3-.7.9-1.1,1.7-1.1,1.9,0,3.5,1.6,3.5,3.5v3.5h3.5c1.2,0,2.3.5,3,1.4s1.1,2.1.9,3.2l-1.1,7c-.3,2-2,3.4-4,3.4ZM8,21h9.4c1,0,1.8-.7,2-1.7l1.1-7c0-.6,0-1.2-.5-1.6-.4-.4-.9-.7-1.5-.7h-3.5c-1.1,0-2-.9-2-2v-3.5c0-.8-.6-1.4-1.4-1.5l-3.5,7.8c0,.1-.1.2-.2.3v9.9ZM4,12c-.6,0-1,.4-1,1v7c0,.6.4,1,1,1h2v-9h-2Z" />

diff --git a/frontend/lib/icon/svg/arrowNarrowRight.svg b/frontend/lib/icon/svg/arrowNarrowRight.svg
diff --git a/frontend/lib/icon/svg/pencil.svg b/frontend/lib/icon/svg/pencil.svg
diff --git a/frontend/lib/ui/InputField/InputField.module.css b/frontend/lib/ui/InputField/InputField.module.css
@@ -23,7 +23,7 @@
     font-style: normal;
     line-height: 1.5rem;
     &:global(.label) {
-      color: var(--gray-900);
+      color: var(--text-color-header);
       font-weight: bold;
     }
     &:global(.subtext) {

diff --git a/frontend/lib/ui/ProgressList/ProgressList.module.css b/frontend/lib/ui/ProgressList/ProgressList.module.css
@@ -5,17 +5,22 @@
   width: 19.5rem;
 
   li {
-    padding: 0.625rem 0.75rem;
     height: 2.75rem;
     border-radius: 0.5rem;
     display: flex;
     align-items: center;
+    gap: 0.5rem;
+    &:global(:hover) {
+      background-color: var(--color-hover);
+    }
 
     aside {
       display: flex;
       flex: 0 0 32px;
+      padding: 0.625rem 0 0.625rem 0.75rem;
+      width: 1.5rem;
       svg {
-        width: 24px;
+        width: 24px; /* needed for Safari to show the svg */
       }
     }
 
@@ -25,11 +30,17 @@
       overflow: hidden;
       white-space: nowrap;
       line-height: 1.5rem;
+      margin-left: -2.5rem;
     }
 
     &:global(.active) {
       background-color: var(--color-hover);
-      font-weight: 500;
+      font-weight: bold;
+      aside {
+        svg {
+          fill: var(--menu-active);
+        }
+      }
     }
 
     &:global(.updates) {
@@ -63,11 +74,21 @@
         }
       }
     }
+
+    &:global(.unsaved) {
+      aside {
+        svg {
+          fill: var(--menu-unsaved);
+        }
+      }
+    }
+
     a {
       color: inherit;
       display: inline-block;
       width: 100%;
       height: 100%;
+      padding: 0.625rem 0.75rem 0.625rem 2.5rem;
       vertical-align: middle;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -77,6 +98,9 @@
         text-decoration: none;
       }
     }
+    span {
+      padding: 0.625rem 0.75rem 0.625rem 2.5rem;
+    }
   }
 
   li:global(.ruler) {

diff --git a/frontend/lib/ui/ProgressList/ProgressList.tsx b/frontend/lib/ui/ProgressList/ProgressList.tsx
@@ -5,6 +5,7 @@ import {
   IconAsterisk,
   IconCheckmark,
   IconMinus,
+  IconPencil,
   IconWarning,
 } from "@kiesraad/icon";
 import { cn } from "@kiesraad/util";
@@ -30,31 +31,31 @@ export type ProgressListItemProps = {
 };
 
 ProgressList.Item = function ({ active, status, children }: ProgressListItemProps) {
-  let title = undefined;
-  let icon = <IconArrowNarrowRight />;
-  if (!active) {
-    [title, icon] = renderStatusIcon(status);
-  }
+  const icon = renderStatusIcon(active ? "active" : status);
 
   return (
     <li className={cn(active ? "active" : "idle", status)} aria-current={active ? "step" : false}>
-      <aside title={title || undefined}>{icon}</aside>
+      <aside>{icon}</aside>
       <label>{children}</label>
     </li>
   );
 };
 
-function renderStatusIcon(status: MenuStatus): [string | undefined, React.JSX.Element] {
+function renderStatusIcon(status: MenuStatus): React.JSX.Element {
   switch (status) {
+    case "active":
+      return <IconArrowNarrowRight />; // "Actief"
     case "accept":
-      return ["Ingevoerd", <IconCheckmark />];
+      return <IconCheckmark />; // "Ingevoerd"
     case "warning":
-      return ["Ingevoerd, met openstaande waarschuwingen", <IconWarning />];
+      return <IconWarning />; // "Ingevoerd, met openstaande waarschuwingen"
     case "empty":
-      return ["Geen invoer gedaan", <IconMinus />];
+      return <IconMinus />; // "Geen invoer gedaan"
     case "updates":
-      return ["Updates", <IconAsterisk />];
+      return <IconAsterisk />; // "Updates"
+    case "unsaved":
+      return <IconPencil />; // "Niet opgeslagen wijzigingen"
     default:
-      return [undefined, <></>];
+      return <></>;
   }
 }
diff --git a/frontend/lib/ui/style/layout.css b/frontend/lib/ui/style/layout.css
@@ -100,6 +100,10 @@
   }
 }
 
+article#polling-station-choice-form {
+  padding-right: 0;
+}
+
 nav#progress {
   width: 26.5rem;
   padding: 2.5rem 5rem;

diff --git a/frontend/lib/ui/style/typography.css b/frontend/lib/ui/style/typography.css
@@ -20,7 +20,7 @@ h6 {
   color: var(--text-color-header);
   font-size: 1rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: normal;
   letter-spacing: -0.72px;
 }
 
@@ -37,7 +37,7 @@ h2 {
 h3 {
   font-size: 1.125em;
   margin-bottom: 0.4rem;
-  font-weight: 600;
+  font-weight: bold;
 }
 h4 {
   font-size: 1.25rem;

diff --git a/frontend/lib/ui/style/variables.css b/frontend/lib/ui/style/variables.css
@@ -106,8 +106,8 @@
 
   --gray-200: #eaecf0;
   --menu-empty: #667085;
-  --gray-600: #475467;
-  --gray-900: #101828;
+  --menu-unsaved: #475467;
+  --menu-active: #101828;
 
   --green-100: #d3f8df;
   --menu-accept: #16b364;

diff --git a/frontend/lib/ui/ui.types.d.ts b/frontend/lib/ui/ui.types.d.ts
@@ -1,4 +1,4 @@
 export type Size = "xs" | "sm" | "md" | "lg" | "xl";
 export type Variant = "default" | "secondary" | "ghost" | "alert";
 export type AlertType = "error" | "warning" | "notify" | "success" | "info";
-export type MenuStatus = "accept" | "warning" | "updates" | "empty" | "idle";
+export type MenuStatus = "active" | "accept" | "warning" | "updates" | "empty" | "unsaved" | "idle";