Merge pull request #2335 from MahtabBukhari/edit_node_UI_looks_not_go…

…od_in_large_size_and_not_according_to_figma [Edit Node] - UI looks not good in large size and not according to figma
stakwork · Oct 17, 2024 · e2a4195 · e2a4195
2 parents 65a96c5 + 6d9326c
commit e2a4195
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -1,5 +1,5 @@
 import { Button, Skeleton } from '@mui/material'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
@@ -125,17 +125,21 @@ export const Body = () => {
         ) : (
           <TitleEditor />
         )}
-        <Flex direction="row" mt={18}>
-          <DeleteButton
-            color="secondary"
-            disabled={topicIsLoading || !node}
-            onClick={handleDelete}
-            size="large"
-            variant="contained"
-          >
-            Delete
-          </DeleteButton>
-          <SaveButton
+
+        <Flex direction="row" justify="space-between" mt={20}>
+          <Flex direction="column">
+            <DeleteButton
+              color="secondary"
+              disabled={topicIsLoading || !node}
+              onClick={handleDelete}
+              size="large"
+              variant="contained"
+            >
+              Delete
+            </DeleteButton>
+          </Flex>
+
+          <CustomButton
             color="secondary"
             disabled={shouldDisableSave}
             onClick={handleSave}
@@ -148,7 +152,7 @@ export const Body = () => {
                 <ClipLoader color={colors.lightGray} size={12} />
               </ClipLoaderWrapper>
             )}
-          </SaveButton>
+          </CustomButton>
         </Flex>
       </FormProvider>
     </Wrapper>
@@ -175,12 +179,11 @@ const DeleteButton = styled(Button)`
   }
 `
 
-const SaveButton = styled(Button)`
-  && {
-    flex: 1;
-  }
+const ClipLoaderWrapper = styled.span`
+  margin-top: 4px;
 `
 
-const ClipLoaderWrapper = styled.span`
-  margin-top: 3px;
+const CustomButton = styled(Button)`
+  width: 80% !important;
+  margin: 0 auto !important;
 `
diff --git a/src/components/ModalsContainer/EditNodeNameModal/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/index.tsx
@@ -10,7 +10,7 @@ export const EditNodeNameModal = () => {
   const { close } = useModal('editNodeName')
 
   return (
-    <BaseModal id="editNodeName" kind="large" onClose={close} preventOutsideClose>
+    <BaseModal id="editNodeName" kind="regular" onClose={close} preventOutsideClose>
       <Body />
     </BaseModal>
   )