chore: update General delete button style

packages/app/src/components/workspace-setting/general/delete/Delete.tsx

@@ -46,7 +46,7 @@ export const WorkspaceDelete = ({
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
         <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
+        <StyledModalHeader>{t('Delete Workspace')}?</StyledModalHeader>
         {workspace.provider === 'local' ? (
           <StyledTextContent>
             <Trans i18nKey="Delete Workspace Description">
@@ -75,6 +75,8 @@ export const WorkspaceDelete = ({
             onChange={handlerInputChange}
             placeholder={t('Delete Workspace placeholder')}
             value={deleteStr}
+            width={284}
+            height={42}
           ></Input>
         </StyledInputContent>
         <StyledButtonContent>

packages/app/src/components/workspace-setting/general/delete/style.ts

@@ -4,20 +4,20 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {
     position: 'relative',
     padding: '0px',
-    width: '460px',
+    width: '560px',
     background: theme.colors.popoverBackground,
     borderRadius: '12px',
+    height: '312px',
   };
 });
 
 export const StyledModalHeader = styled('div')(({ theme }) => {
   return {
     margin: '44px 0px 12px 0px',
-    width: '460px',
+    width: '560px',
     fontWeight: '600',
     fontSize: '20px;',
-    textAlign: 'left',
+    textAlign: 'center',
-    paddingLeft: '20px',
     color: theme.colors.popoverColor,
   };
 });
@@ -37,21 +37,25 @@ export const StyledTextContent = styled('div')(() => {
   };
 });
 
-export const StyledInputContent = styled('div')(() => {
+export const StyledInputContent = styled('div')(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    margin: '20px 0 24px 0',
+    margin: '32px 0',
+    fontSize: theme.font.base,
   };
 });
 
 export const StyledButtonContent = styled('div')(() => {
   return {
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    bottom: '32px',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    margin: '0px 0 32px 0',
   };
 });
 

packages/app/src/components/workspace-setting/general/style.ts

@@ -1,15 +1,42 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import MuiAvatar from '@mui/material/Avatar';
+import IconButton from '@/ui/button/IconButton';
+import Input from '@/ui/input';
 
 export const StyledSettingInputContainer = styled('div')(() => {
   return {
     marginTop: '12px',
+    width: '100%',
+    ...displayFlex('flex-start', 'center'),
   };
 });
 
 export const StyledDeleteButtonContainer = styled('div')(() => {
   return {
-    marginTop: '30px',
+    position: 'absolute',
+    bottom: '0',
+    left: '50%',
+    marginBottom: '20px',
+    transform: 'translateX(-50%)',
+  };
+});
+export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
+  return {
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: '10px',
+    height: '32px',
+    overflow: 'hidden',
+    marginLeft: '20px',
+    ':hover': {
+      borderColor: theme.colors.primaryColor,
+    },
+  };
+});
+export const StyledInput = styled(Input)(({ theme }) => {
+  return {
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: '10px',
+    fontSize: theme.font.sm,
   };
 });