feat(edit): styled floating buttons (#1113)

* chore(edit): removed unused imports * fix(edit): made floating button have same font-size and font-weight * fix(edit): added aria label to save button
entur · Jul 11, 2023 · 0cb4ad7 · 0cb4ad7
1 parent 7d92cbe
commit 0cb4ad7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/next-tavla/src/Admin/components/StyledLink/styles.module.css b/next-tavla/src/Admin/components/StyledLink/styles.module.css
@@ -3,8 +3,8 @@
     justify-content: center;
     gap: 0.5rem;
     color: var(--main-background-color);
-    background-color: var(--primary-button-color);
-    border-radius: 0.25rem;
+    background-color: var(--colors-brand-white);
+    border-radius: 1.5rem;
     width: max-content;
     padding: 1rem;
     text-decoration: none;

diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
@@ -10,7 +10,7 @@ import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from './reducer'
 import { ToastProvider } from '@entur/alert'
 import { CopyText } from 'Admin/components/CopyText'
-import { PrimaryButton } from '@entur/button'
+import { FloatingButton } from '@entur/button'
 import { StyledLink } from 'Admin/components/StyledLink'
 
 function Edit({
@@ -32,14 +32,16 @@ function Edit({
                     <TilesSettings tiles={settings.tiles} />
                     <CopyText text={linkUrl} toastText="Kopiert lenke" />
                     <div className={classes.floatingButtonWrapper}>
-                        <PrimaryButton
+                        <FloatingButton
                             className={classes.saveButton}
+                            size="medium"
+                            aria-label={'Lagre instillinger'}
                             onClick={() => {
                                 setBoardSettings(documentId, settings)
                             }}
                         >
-                            Lagre instillinger
-                        </PrimaryButton>
+                            Lagre innstillinger
+                        </FloatingButton>
                         <StyledLink
                             linkUrl={'/' + documentId}
                             text="Se avgangstavla"

diff --git a/next-tavla/src/Admin/scenarios/Edit/styles.module.css b/next-tavla/src/Admin/scenarios/Edit/styles.module.css
@@ -9,10 +9,11 @@
     flex-direction: row;
     gap: 1em;
     position: fixed;
-    bottom: 10px;
-    right: 10px;
+    bottom: 1em;
+    right: 1em;
 }
 
 .saveButton {
-    width: max-content;
+    font-size: 1em;
+    font-weight: 400;
 }