Move button

idena-network · Apr 1, 2024 · b95454f · b95454f
1 parent 2d19b2c
commit b95454f
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 67 deletions.
diff --git a/renderer/pages/flips/edit.js b/renderer/pages/flips/edit.js
@@ -1,6 +1,13 @@
 import React, {useEffect, useState} from 'react'
 import {useRouter} from 'next/router'
-import {Box, Flex, useToast, Divider, useDisclosure} from '@chakra-ui/react'
+import {
+  Box,
+  Flex,
+  useToast,
+  Divider,
+  useDisclosure,
+  Stack,
+} from '@chakra-ui/react'
 import {useTranslation} from 'react-i18next'
 import {useMachine} from '@xstate/react'
 import {
@@ -402,36 +409,9 @@ export default function EditFlipPage() {
             </FlipMaster>
           )}
         </Flex>
-        <FlipMasterFooter>
-          {not('keywords') && (
-            <SecondaryButton
-              isDisabled={
-                is('images.painting') ||
-                is('protect.protecting') ||
-                is('protect.shuffling') ||
-                is('protect.preparing')
-              }
-              onClick={() => send('PREV')}
-            >
-              {t('Previous step')}
-            </SecondaryButton>
-          )}
-          {not('submit') && (
-            <PrimaryButton
-              isDisabled={
-                is('images.painting') ||
-                is('protect.protecting') ||
-                is('protect.shuffling') ||
-                is('protect.preparing') ||
-                is('keywords.loading')
-              }
-              onClick={() => send('NEXT')}
-            >
-              {t('Next step')}
-            </PrimaryButton>
-          )}
-          {is('submit') && (
-            <>
+        <FlipMasterFooter justify="space-between">
+          <Flex isInline spacing={2} ml={16}>
+            {is('submit') && (
               <SecondaryButton
                 onClick={async () =>
                   (await writeTextToClipboard(
@@ -451,6 +431,37 @@ export default function EditFlipPage() {
               >
                 {t('Copy to clipboard')}
               </SecondaryButton>
+            )}
+          </Flex>
+          <Flex isInline spacing={2}>
+            {not('keywords') && (
+              <SecondaryButton
+                isDisabled={
+                  is('images.painting') ||
+                  is('protect.protecting') ||
+                  is('protect.shuffling') ||
+                  is('protect.preparing')
+                }
+                onClick={() => send('PREV')}
+              >
+                {t('Previous step')}
+              </SecondaryButton>
+            )}
+            {not('submit') && (
+              <PrimaryButton
+                isDisabled={
+                  is('images.painting') ||
+                  is('protect.protecting') ||
+                  is('protect.shuffling') ||
+                  is('protect.preparing') ||
+                  is('keywords.loading')
+                }
+                onClick={() => send('NEXT')}
+              >
+                {t('Next step')}
+              </PrimaryButton>
+            )}
+            {is('submit') && (
               <PrimaryButton
                 isDisabled={is('submit.submitting')}
                 isLoading={is('submit.submitting')}
@@ -469,8 +480,8 @@ export default function EditFlipPage() {
               >
                 {t('Submit')}
               </PrimaryButton>
-            </>
-          )}
+            )}
+          </Flex>
         </FlipMasterFooter>
 
         <BadFlipDialog

diff --git a/renderer/pages/flips/new.js b/renderer/pages/flips/new.js
@@ -1,6 +1,13 @@
 import React, {useEffect, useState} from 'react'
 import {useRouter} from 'next/router'
-import {Box, Flex, useToast, Divider, useDisclosure} from '@chakra-ui/react'
+import {
+  Box,
+  Flex,
+  useToast,
+  Divider,
+  useDisclosure,
+  Stack,
+} from '@chakra-ui/react'
 import {useTranslation} from 'react-i18next'
 import {useMachine} from '@xstate/react'
 import {
@@ -36,7 +43,6 @@ import {
   protectFlip,
   prepareAdversarialImages,
   shuffleAdversarial,
-  shufflePics,
 } from '../../screens/flips/utils'
 import {Step} from '../../screens/flips/types'
 import {
@@ -415,36 +421,9 @@ export default function NewFlipPage() {
             </FlipMaster>
           )}
         </Flex>
-        <FlipMasterFooter>
-          {not('keywords') && (
-            <SecondaryButton
-              isDisabled={
-                is('images.painting') ||
-                is('protect.protecting') ||
-                is('protect.shuffling') ||
-                is('protect.preparing')
-              }
-              onClick={() => send('PREV')}
-            >
-              {t('Previous step')}
-            </SecondaryButton>
-          )}
-          {not('submit') && (
-            <PrimaryButton
-              isDisabled={
-                is('images.painting') ||
-                is('protect.protecting') ||
-                is('protect.shuffling') ||
-                is('protect.preparing') ||
-                is('keywords.loading')
-              }
-              onClick={() => send('NEXT')}
-            >
-              {t('Next step')}
-            </PrimaryButton>
-          )}
-          {is('submit') && (
-            <>
+        <FlipMasterFooter justify="space-between">
+          <Stack isInline spacing={2} ml={16}>
+            {is('submit') && (
               <SecondaryButton
                 onClick={async () =>
                   (await writeTextToClipboard(
@@ -464,6 +443,37 @@ export default function NewFlipPage() {
               >
                 {t('Copy to clipboard')}
               </SecondaryButton>
+            )}
+          </Stack>
+          <Stack isInline spacing={2}>
+            {not('keywords') && (
+              <SecondaryButton
+                isDisabled={
+                  is('images.painting') ||
+                  is('protect.protecting') ||
+                  is('protect.shuffling') ||
+                  is('protect.preparing')
+                }
+                onClick={() => send('PREV')}
+              >
+                {t('Previous step')}
+              </SecondaryButton>
+            )}
+            {not('submit') && (
+              <PrimaryButton
+                isDisabled={
+                  is('images.painting') ||
+                  is('protect.protecting') ||
+                  is('protect.shuffling') ||
+                  is('protect.preparing') ||
+                  is('keywords.loading')
+                }
+                onClick={() => send('NEXT')}
+              >
+                {t('Next step')}
+              </PrimaryButton>
+            )}
+            {is('submit') && (
               <PrimaryButton
                 isDisabled={is('submit.submitting')}
                 isLoading={is('submit.submitting')}
@@ -482,8 +492,8 @@ export default function NewFlipPage() {
               >
                 {t('Submit')}
               </PrimaryButton>
-            </>
-          )}
+            )}
+          </Stack>
         </FlipMasterFooter>
 
         <BadFlipDialog