IIIF #3 - Adding margins to SimpleEditPage save/cancel buttons

performant-software · Jul 1, 2022 · 7ebce65 · 7ebce65
1 parent 621512d
commit 7ebce65
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/client/src/components/SimpleEditPage.js b/client/src/components/SimpleEditPage.js
@@ -1,6 +1,9 @@
 // @flow
 
+import { Toaster } from '@performant-software/semantic-components';
 import { Element } from '@performant-software/shared-components';
+import type { EditContainerProps } from '@performant-software/shared-components/types';
+import cx from 'classnames';
 import React, {
   useCallback,
   useEffect,
@@ -19,9 +22,8 @@ import {
   Ref,
   Sticky
 } from 'semantic-ui-react';
-import { Toaster } from '@performant-software/semantic-components';
+import styles from './SimpleEditPage.module.css';
 import { useLocation, useNavigate } from 'react-router-dom';
-import type { EditContainerProps } from '@performant-software/shared-components/types';
 import type { Translateable } from '../types/Translateable';
 
 type Props = EditContainerProps & Translateable & {
@@ -63,6 +65,7 @@ const SimpleEditPage: ComponentType<any> = (props: Props) => {
   const renderTabs = useCallback(() => {
     const menu = (
       <Menu
+        className={styles.menu}
         pointing
         secondary
       >
@@ -77,16 +80,18 @@ const SimpleEditPage: ComponentType<any> = (props: Props) => {
         <Menu.Menu
           position='right'
         >
-          <Menu.Item>
+          <Menu.Item
+            className={cx(styles.item, styles.buttonContainer)}
+          >
             <Button
+              className={styles.button}
               content={props.t('Common.buttons.save')}
               onClick={props.onSave}
               primary
             />
-          </Menu.Item>
-          <Menu.Item>
             <Button
               basic
+              className={styles.button}
               content={props.t('Common.buttons.cancel')}
               onClick={() => navigate(-1)}
             />
@@ -129,7 +134,9 @@ const SimpleEditPage: ComponentType<any> = (props: Props) => {
   }, []);
 
   return (
-    <Grid>
+    <Grid
+      className={styles.simpleEditPage}
+    >
       <Grid.Row>
         <Grid.Column>
           { renderTabs() }

diff --git a/client/src/components/SimpleEditPage.module.css b/client/src/components/SimpleEditPage.module.css
@@ -0,0 +1,3 @@
+.simpleEditPage .menu .item.buttonContainer > .button {
+  margin-right: 0.25em;
+}