fix(ui): ui improvements after version bump (#1707)

* fix(deps): upping node version requirement * fix(ui): set topnavigationitem to darker color for contrast * fix(ui): make icons filled for contrast * fix(ui): make icons filled for contrast
entur · Oct 31, 2024 · 26bd83b · 26bd83b
1 parent bf2cc1d
commit 26bd83b
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 14 deletions.
diff --git a/tavla/app/(admin)/components/HorizontalNavBar.tsx b/tavla/app/(admin)/components/HorizontalNavBar.tsx
@@ -19,13 +19,15 @@ function HorizontalNavBar({ loggedIn }: { loggedIn: boolean }) {
                 active={pathname?.includes('/boards')}
                 as={Link}
                 href="/boards"
+                className="!text-primary"
             >
                 Tavler
             </TopNavigationItem>
             <TopNavigationItem
                 active={pathname?.includes('/organizations')}
                 as={Link}
                 href="/organizations"
+                className="!text-primary"
             >
                 Organisasjoner
             </TopNavigationItem>

diff --git a/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx b/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useToast } from '@entur/alert'
 import { Switch, TextField } from '@entur/form'
-import { ValidationInfoIcon } from '@entur/icons'
+import { ValidationInfoFilledIcon } from '@entur/icons'
 import { Heading3 } from '@entur/typography'
 import { Tooltip } from 'app/(admin)/components/Tooltip'
 import { SubmitButton } from 'components/Form/SubmitButton'
@@ -42,7 +42,7 @@ function Footer({
                     content="Skriv en kort tekst som skal vises nederst i tavlen."
                     placement="top"
                 >
-                    <ValidationInfoIcon className="mb-3" size={20} />
+                    <ValidationInfoFilledIcon className="mb-3" size={20} />
                 </Tooltip>
             </div>
             <div className="h-full">

diff --git a/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx b/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx
@@ -1,6 +1,6 @@
 import { useToast } from '@entur/alert'
 import { SearchableDropdown } from '@entur/dropdown'
-import { ValidationInfoIcon } from '@entur/icons'
+import { ValidationInfoFilledIcon } from '@entur/icons'
 import { Heading3 } from '@entur/typography'
 import { Tooltip } from 'app/(admin)/components/Tooltip'
 import { saveLocation } from 'app/(admin)/edit/[id]/components/MetaSettings/actions'
@@ -37,7 +37,10 @@ function Address({ bid, location }: { bid: TBoardID; location?: TLocation }) {
                     content="Under innstillingene til hvert stoppested kan du velge om gåavstanden, fra tavlens adresse til selve stoppestedet, skal vises"
                     placement="top"
                 >
-                    <ValidationInfoIcon className="md:mb-2 mb-3" size={20} />
+                    <ValidationInfoFilledIcon
+                        className="md:mb-2 mb-3"
+                        size={20}
+                    />
                 </Tooltip>
             </div>
             <div className="h-full">

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -15,7 +15,7 @@ import {
     DeleteIcon,
     DownwardIcon,
     EditIcon,
-    QuestionIcon,
+    QuestionFilledIcon,
     UpwardIcon,
 } from '@entur/icons'
 import { Modal } from '@entur/modal'
@@ -367,8 +367,8 @@ function TileCard({
                                 )}
                         </div>
 
-                        <div className="flex flex-row items-baseline gap-1">
-                            <Heading4>Kolonner</Heading4>
+                        <div className="flex flex-row items-center gap-1 mt-6">
+                            <Heading4 margin="none">Kolonner</Heading4>
                             <Tooltip
                                 aria-hidden
                                 placement="top"
@@ -378,12 +378,13 @@ function TileCard({
                                     type="button"
                                     aria-label="Vis forklaring på kolonner"
                                     onClick={() => setIsColumnModalOpen(true)}
+                                    className="!p-0"
                                 >
-                                    <QuestionIcon />
+                                    <QuestionFilledIcon size="20" />
                                 </IconButton>
                             </Tooltip>
                         </div>
-                        <div className="flex flex-row items-center gap-2">
+                        <div className="flex flex-row items-start gap-2">
                             <SubParagraph>
                                 Her bestemmer du hvilke kolonner som skal vises
                                 i tavlen.

diff --git a/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx b/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
@@ -16,7 +16,7 @@ import { useFormState } from 'react-dom'
 import { saveColumns } from './actions'
 import { Tooltip } from '@entur/tooltip'
 import { IconButton } from '@entur/button'
-import { QuestionIcon } from '@entur/icons'
+import { QuestionFilledIcon } from '@entur/icons'
 import { ColumnModal } from './ColumnModal'
 
 function DefaultColumns({
@@ -51,15 +51,16 @@ function DefaultColumns({
 
     return (
         <div className="box flex flex-col gap-1">
-            <div className="flex flex-row items-baseline">
-                <Heading2>Kolonner</Heading2>
+            <div className="flex flex-row items-center gap-2">
+                <Heading2 margin="none">Kolonner</Heading2>
                 <Tooltip aria-hidden placement="top" content="Vis forklaring">
                     <IconButton
                         type="button"
                         aria-label="Vis forklaring på kolonner"
                         onClick={() => setIsOpen(true)}
+                        className="!p-0"
                     >
-                        <QuestionIcon size={24} />
+                        <QuestionFilledIcon size={24} />
                     </IconButton>
                 </Tooltip>
             </div>

diff --git a/tavla/package.json b/tavla/package.json
@@ -87,6 +87,6 @@
     },
     "packageManager": "[email protected]",
     "engines": {
-        "node": "16"
+        "node": "18"
     }
 }