💄 Farger og knapper på rediger-siden

Author: olahjacobsen

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/DeleteTileButton.tsx

@@ -1,46 +1,31 @@
-import { NegativeButton } from '@entur/button'
+import { FloatingButton } from '@entur/button'
 import { DeleteIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
 
 function DeleteTileButton({
     isWideScreen,
     deleteTile,
 }: {
     isWideScreen: boolean
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
 }) {
-    const StyledNegativeButton = (
-        <NegativeButton
-            onClick={deleteTile}
-            aria-label="Fjern stoppested"
-            type="button"
-            width="fluid"
-            className={isWideScreen ? '!min-w-0' : ''}
-        >
-            <DeleteIcon />
-            {!isWideScreen && <>Fjern stoppested</>}
-        </NegativeButton>
-    )
-
     return (
         <>
             <div className={isWideScreen ? 'hidden sm:block' : 'sm:hidden'}>
-                {isWideScreen ? (
-                    <Tooltip
-                        placement="bottom"
-                        content="Fjern stoppested"
-                        id="tooltip-remove-tile"
+                <Tooltip
+                    placement="bottom"
+                    content="Fjern stoppested"
+                    id="tooltip-remove-tile"
+                >
+                    <FloatingButton
+                        size="small"
+                        onClick={deleteTile}
+                        aria-label="Fjern stoppested"
+                        type="button"
                     >
-                        {StyledNegativeButton}
-                    </Tooltip>
-                ) : (
-                    StyledNegativeButton
-                )}
+                        <DeleteIcon />
+                    </FloatingButton>
+                </Tooltip>
             </div>
         </>
     )

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/EditRemoveTileButtonGroup.tsx

@@ -1,9 +1,8 @@
-import { SecondarySquareButton } from '@entur/button'
+import { FloatingButton } from '@entur/button'
 import { CloseIcon, EditIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
 import { EventProps } from 'app/posthog/events'
 import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
 import { DeleteTileButton } from './DeleteTileButton'
 
 function EditRemoveTileButtonGroup({
@@ -18,11 +17,7 @@ function EditRemoveTileButtonGroup({
     hasTileChanged: boolean
     setIsTileOpen: (isOpen: boolean) => void
     setConfirmOpen: (isOpen: boolean) => void
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
     trackingLocation: EventProps<'stop_place_edit_cancelled'>['location']
 }) {
     const posthog = usePosthogTracking()
@@ -34,7 +29,8 @@ function EditRemoveTileButtonGroup({
                 content={isTileOpen ? 'Lukk' : 'Rediger stoppested'}
                 id="tooltip-edit-tile"
             >
-                <SecondarySquareButton
+                <FloatingButton
+                    size="small"
                     onClick={() => {
                         if (!isTileOpen) {
                             posthog.capture('stop_place_edit_started', {
@@ -53,7 +49,7 @@ function EditRemoveTileButtonGroup({
                     aria-label={isTileOpen ? 'Lukk' : 'Rediger stoppested'}
                 >
                     {isTileOpen ? <CloseIcon /> : <EditIcon />}
-                </SecondarySquareButton>
+                </FloatingButton>
             </Tooltip>
             <DeleteTileButton isWideScreen={true} deleteTile={deleteTile} />
         </div>

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/SaveCancelDeleteTileButtonGroup.tsx

@@ -11,7 +11,6 @@ import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
 import Goat from 'assets/illustrations/Goat.png'
 import Image from 'next/image'
 import { useNonNullContext } from 'src/hooks/useNonNullContext'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
 import { DeleteTileButton } from './DeleteTileButton'
 
 function SaveCancelDeleteTileButtonGroup({
@@ -29,11 +28,7 @@ function SaveCancelDeleteTileButtonGroup({
     resetTile: () => void
     setIsTileOpen: (isOpen: boolean) => void
     setConfirmOpen: (confirmOpen: boolean) => void
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
     validation?: TFormFeedback
     trackingLocation: EventProps<'stop_place_edit_interaction'>['location']
 }) {

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/index.tsx

@@ -135,7 +135,7 @@ function TileCard({
 
     if (!lines)
         return (
-            <div className="flex items-center justify-between rounded bg-blue20 p-4">
+            <div className="flex items-center justify-between rounded p-4">
                 Laster...
             </div>
         )
@@ -199,8 +199,8 @@ function TileCard({
             <TileContext.Provider value={tile}>
                 <div className="flex flex-row">
                     <div
-                        className={`flex w-full items-center justify-between bg-blue20 px-6 py-4 ${
-                            isOpen ? 'rounded-t' : 'rounded'
+                        className={`flex w-full items-center justify-between bg-white px-6 py-4 ${
+                            isOpen ? 'rounded-t border-b-2' : 'rounded'
                         }`}
                     >
                         <div className="flex flex-row items-center gap-4">
@@ -234,7 +234,7 @@ function TileCard({
 
                 <BaseExpand open={isOpen}>
                     <div
-                        className={`mr-14 bg-blue10 px-6 py-4 ${
+                        className={`mr-14 bg-white px-6 py-4 ${
                             totalTiles == 1 && 'w-full'
                         } rounded-b`}
                     >

tavla/app/(admin)/tavler/[id]/rediger/page.tsx

@@ -76,7 +76,7 @@ export default async function EditPage(props: TProps) {
     const boardLink = getBoardLinkServer(board.id, true)
 
     return (
-        <main id="main-content" className="bg-gray-50">
+        <main id="main-content">
             <div className="container flex flex-col gap-6 pb-20 pt-16">
                 {folder ? (
                     <BreadcrumbsNav
@@ -107,7 +107,7 @@ export default async function EditPage(props: TProps) {
 
                 <div
                     data-transport-palette={board.transportPalette}
-                    className="flex flex-col gap-4 rounded-md bg-background px-6 py-8"
+                    className="flex flex-col gap-4 rounded-md bg-[#f6f6f9] px-6 py-8"
                 >
                     <div>
                         <Heading2>Stoppesteder</Heading2>