Remove margin from button css and re-add where necessary

webkom · May 9, 2024 · b8cfb47 · b8cfb47
1 parent 7388ad4
commit b8cfb47
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 37 deletions.
diff --git a/app/routes/admin/email/components/RestrictedMailEditor.tsx b/app/routes/admin/email/components/RestrictedMailEditor.tsx
@@ -1,4 +1,4 @@
-import { Icon, LinkButton } from '@webkom/lego-bricks';
+import { Flex, Icon, LinkButton } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -218,6 +218,7 @@ const RestrictedMailEditor = () => {
           />
 
           <SubmissionError />
+
           {isNew && <SubmitButton>Lag flaskepost</SubmitButton>}
           {!isNew && restrictedMailId && restrictedMail && (
             <LinkButton

diff --git a/app/routes/articles/components/ArticleEditor.tsx b/app/routes/articles/components/ArticleEditor.tsx
@@ -234,7 +234,7 @@ const ArticleEditor = () => {
               component={EditorField.Field}
             />
 
-            <Flex wrap>
+            <Flex wrap gap="var(--spacing-md)">
               <LinkButton flat href={`/articles/${isNew ? '' : articleId}`}>
                 Avbryt
               </LinkButton>

diff --git a/app/routes/events/components/EventEditor/index.tsx b/app/routes/events/components/EventEditor/index.tsx
@@ -408,7 +408,7 @@ const EventEditor = () => {
               />
             )}
 
-            <Flex wrap>
+            <Flex wrap gap="var(--spacing-md)">
               {isEditPage && (
                 <LinkButton flat href={`/events/${event.slug}`}>
                   Avbryt

diff --git a/app/routes/forum/components/ForumEditor.tsx b/app/routes/forum/components/ForumEditor.tsx
@@ -96,7 +96,7 @@ const ForumEditor = () => {
               id="forum-description"
             />
             {/* Action buttons */}
-            <Flex wrap>
+            <Flex wrap gap="var(--spacing-md)">
               <Button
                 flat
                 onPress={() =>

diff --git a/app/routes/forum/components/ThreadEditor.tsx b/app/routes/forum/components/ThreadEditor.tsx
@@ -105,7 +105,7 @@ const ThreadEditor = () => {
               component={EditorField.Field}
             />
 
-            <Flex wrap>
+            <Flex wrap gap="var(--spacing-md)">
               <Button
                 flat
                 onPress={() =>

diff --git a/app/routes/joblistings/components/JoblistingEditor.tsx b/app/routes/joblistings/components/JoblistingEditor.tsx
@@ -340,7 +340,7 @@ const JoblistingEditor = () => {
               required
             />
             <SubmissionError />
-            <Flex wrap>
+            <Flex wrap gap="var(--spacing-md)">
               <LinkButton href={`/joblistings/${isNew ? '' : joblistingId}`}>
                 Avbryt
               </LinkButton>

diff --git a/app/routes/meetings/components/MeetingEditor.tsx b/app/routes/meetings/components/MeetingEditor.tsx
@@ -426,7 +426,7 @@ const MeetingEditor = () => {
               )}
 
               <SubmissionError />
-              <Flex wrap>
+              <Flex wrap gap="var(--spacing-md)">
                 <Button
                   flat
                   onPress={() =>

diff --git a/app/routes/pages/components/PageEditor.tsx b/app/routes/pages/components/PageEditor.tsx
@@ -174,25 +174,6 @@ const PageEditor = () => {
                 placeholder="Velg kategori"
                 options={categoryOptions}
               />
-
-              <Flex margin="0 0 0 10px">
-                {!isNew && (
-                  <ConfirmModal
-                    title="Slett side"
-                    message="Er du sikker på at du vil slette denne infosiden?"
-                    onConfirm={onDelete}
-                  >
-                    {({ openConfirmModal }) => (
-                      <Button onPress={openConfirmModal} danger>
-                        <Icon name="trash" size={19} />
-                        Slett
-                      </Button>
-                    )}
-                  </ConfirmModal>
-                )}
-
-                <SubmitButton>{isNew ? 'Opprett' : 'Lagre'}</SubmitButton>
-              </Flex>
             </Flex>
 
             <Fields
@@ -211,6 +192,25 @@ const PageEditor = () => {
               component={EditorField.Field}
               uploadFile={uploadFile}
             />
+
+            <Flex wrap gap="var(--spacing-md)">
+              {!isNew && (
+                <ConfirmModal
+                  title="Slett side"
+                  message="Er du sikker på at du vil slette denne infosiden?"
+                  onConfirm={onDelete}
+                >
+                  {({ openConfirmModal }) => (
+                    <Button onPress={openConfirmModal} danger>
+                      <Icon name="trash" size={19} />
+                      Slett
+                    </Button>
+                  )}
+                </ConfirmModal>
+              )}
+
+              <SubmitButton>{isNew ? 'Opprett' : 'Lagre'}</SubmitButton>
+            </Flex>
           </Form>
         )}
       </TypedLegoForm>

diff --git a/app/routes/photos/components/GalleryEditor.tsx b/app/routes/photos/components/GalleryEditor.tsx
@@ -344,7 +344,7 @@ const GalleryEditor = () => {
               component={ObjectPermissions}
             />
 
-            <Flex className={styles.buttonRow} justifyContent="flex-end">
+            <Flex className={styles.buttonRow} wrap gap="var(--spacing-md)">
               <LinkButton flat href={`/photos/${gallery?.id ?? ''}`}>
                 Avbryt
               </LinkButton>

diff --git a/app/routes/photos/components/GalleryEditorActions.tsx b/app/routes/photos/components/GalleryEditorActions.tsx
@@ -25,7 +25,7 @@ const GalleryEditorActions = ({
         <span>
           <b>{selectedCount}</b> valgt
         </span>
-        <Flex justifyContent="flex-end" wrap>
+        <Flex wrap gap="var(--spacing-md)">
           <Button flat onPress={onDeselect}>
             Avbryt
           </Button>

diff --git a/app/routes/photos/components/GalleryPictureEditModal.tsx b/app/routes/photos/components/GalleryPictureEditModal.tsx
@@ -149,7 +149,7 @@ const GalleryPictureEditModal = () => {
                 component={SelectInput.AutocompleteField}
                 isMulti
               />
-              <Flex justifyContent="flex-end">
+              <Flex wrap gap="var(--spacing-md)">
                 <Button
                   flat
                   onPress={() => {

diff --git a/app/routes/polls/components/PollEditor.tsx b/app/routes/polls/components/PollEditor.tsx
@@ -189,7 +189,7 @@ const PollEditor = ({
             />
 
             <SubmissionError />
-            <Flex className={styles.actionButtons}>
+            <Flex className={styles.actionButtons} wrap gap="var(--spacing-md)">
               <SubmitButton>
                 {editing ? 'Lagre endringer' : 'Lag ny avstemning'}
               </SubmitButton>

diff --git a/app/routes/users/components/RemovePicture.tsx b/app/routes/users/components/RemovePicture.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon } from '@webkom/lego-bricks';
+import { Button, Flex, Icon } from '@webkom/lego-bricks';
 import { useState } from 'react';
 import { removePicture } from 'app/actions/UserActions';
 import { useAppDispatch } from 'app/store/hooks';
@@ -22,7 +22,7 @@ const RemovePicture = (props: Props) => {
   const toggleSelected = () => setSelected(!selected);
 
   return (
-    <div>
+    <Flex wrap gap="var(--spacing-md)">
       {selected ? (
         <Button onPress={toggleSelected}>Avbryt</Button>
       ) : (
@@ -36,7 +36,7 @@ const RemovePicture = (props: Props) => {
           Bekreft
         </Button>
       )}
-    </div>
+    </Flex>
   );
 };
 

diff --git a/packages/lego-bricks/src/components/Button/Button.module.css b/packages/lego-bricks/src/components/Button/Button.module.css
@@ -64,10 +64,6 @@
     opacity: 0.5;
   }
 
-  + .button {
-    margin-left: 16px;
-  }
-
   > a {
     color: var(--color-gray-8);
   }