From fe9cad5697cfd52538d41adfa27ce5533cc508d6 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Mon, 4 Sep 2023 11:00:37 +0300
Subject: [PATCH] Move clone button to the left

---
 .../Indexer/Info/IndexerInfoModalContent.css  | 13 ++++++++
 .../Info/IndexerInfoModalContent.css.d.ts     |  1 +
 .../Indexer/Info/IndexerInfoModalContent.tsx  | 30 +++++++++++--------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.css b/frontend/src/Indexer/Info/IndexerInfoModalContent.css
index 622d74035..e94b4c52c 100644
--- a/frontend/src/Indexer/Info/IndexerInfoModalContent.css
+++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.css
@@ -40,3 +40,16 @@
 .tabContent {
   margin-top: 20px;
 }
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts b/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts
index 320b52d71..c9f832fd9 100644
--- a/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts
+++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts
@@ -3,6 +3,7 @@
 interface CssExports {
   'deleteButton': string;
   'description': string;
+  'modalFooter': string;
   'selectedTab': string;
   'tab': string;
   'tabContent': string;
diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx
index 6a7134600..28c9a58ee 100644
--- a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx
+++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx
@@ -348,19 +348,23 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
           </TabPanel>
         </Tabs>
       </ModalBody>
-      <ModalFooter>
-        <Button
-          className={styles.deleteButton}
-          kind={kinds.DANGER}
-          onPress={onDeleteIndexerPress}
-        >
-          {translate('Delete')}
-        </Button>
-        <Button onPress={onCloneIndexerPressWrapper}>
-          {translate('Clone')}
-        </Button>
-        <Button onPress={onEditIndexerPress}>{translate('Edit')}</Button>
-        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      <ModalFooter className={styles.modalFooter}>
+        <div>
+          <Button
+            className={styles.deleteButton}
+            kind={kinds.DANGER}
+            onPress={onDeleteIndexerPress}
+          >
+            {translate('Delete')}
+          </Button>
+          <Button onPress={onCloneIndexerPressWrapper}>
+            {translate('Clone')}
+          </Button>
+        </div>
+        <div>
+          <Button onPress={onEditIndexerPress}>{translate('Edit')}</Button>
+          <Button onPress={onModalClose}>{translate('Close')}</Button>
+        </div>
       </ModalFooter>
 
       <EditIndexerModalConnector