diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx index c6db311e2e..3fcab8c158 100644 --- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx +++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx @@ -46,7 +46,7 @@ export const WorkspaceDelete = ({ - {t('Delete Workspace')} + {t('Delete Workspace')}? {workspace.provider === 'local' ? ( @@ -75,6 +75,8 @@ export const WorkspaceDelete = ({ onChange={handlerInputChange} placeholder={t('Delete Workspace placeholder')} value={deleteStr} + width={284} + height={42} > diff --git a/packages/app/src/components/workspace-setting/general/delete/style.ts b/packages/app/src/components/workspace-setting/general/delete/style.ts index 939ba638bc..d029d54fea 100644 --- a/packages/app/src/components/workspace-setting/general/delete/style.ts +++ b/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', - paddingLeft: '20px', + textAlign: 'center', 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', }; }); diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index 739ec24aec..c46f9706c9 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/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, }; });