Merge pull request #743 from toeverything/feat/datacenter-settings-style

feat:add datacenter settings style

packages/app/src/components/header/Header.tsx

@@ -44,7 +44,7 @@ const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
 };
 
 export const Header = ({
-  rightItems = ['syncUser'],
+  rightItems = ['syncUser', 'themeModeSwitch'],
   children,
 }: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => {
   const [showWarning, setShowWarning] = useState(shouldShowWarning());

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -4,6 +4,7 @@ import {
   StyledPublishCopyContainer,
   StyledPublishExplanation,
   StyledSettingH2,
+  StyledStopPublishContainer,
 } from './style';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
@@ -42,7 +43,9 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 <StyledPublishExplanation>
                   {t('Publishing')}
                 </StyledPublishExplanation>
-                <StyledSettingH2>{t('Share with link')}</StyledSettingH2>
+                <StyledSettingH2 marginTop={48}>
+                  {t('Share with link')}
+                </StyledSettingH2>
                 <StyledPublishCopyContainer>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
@@ -54,24 +57,27 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               </>
             ) : (
               <StyledPublishExplanation>
-                {'Publishing Description'}
+                {t('Publishing Description')}
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
-          <StyledPublishCopyContainer>
+
-            {workspace.published ? (
+          {workspace.published ? (
+            <StyledStopPublishContainer>
               <Button
                 onClick={async () => {
                   setLoaded(false);
                   await togglePublic(false);
                   setLoaded(true);
                 }}
-                type="primary"
+                type="danger"
                 shape="circle"
               >
                 {t('Stop publishing')}
               </Button>
-            ) : (
+            </StyledStopPublishContainer>
+          ) : (
+            <StyledPublishCopyContainer>
               <Button
                 onClick={async () => {
                   setLoaded(false);
@@ -83,8 +89,8 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               >
                 {t('Publish to web')}
               </Button>
-            )}
+            </StyledPublishCopyContainer>
-          </StyledPublishCopyContainer>
+          )}
         </div>
       ) : (
         <StyledPublishContent>

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -2,6 +2,8 @@ import {
   StyledPublishContent,
   StyledPublishCopyContainer,
   StyledPublishExplanation,
+  StyledWorkspaceName,
+  StyledWorkspaceType,
 } from './style';
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
@@ -9,6 +11,7 @@ import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Trans, useTranslation } from '@affine/i18n';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { enableWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
@@ -18,11 +21,20 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         {workspace.provider === 'local' ? (
           <>
             <StyledPublishExplanation>
-              {t('Sync Description', {
+              <WorkspaceUnitAvatar
-                workspaceName: workspace.name ?? 'Affine',
+                size={32}
-              })}
+                name={workspace.name}
+                workspaceUnit={workspace}
+              />
+              <StyledWorkspaceName>
+                &nbsp;{workspace.name}&nbsp;
+              </StyledWorkspaceName>
+              <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
             </StyledPublishExplanation>
-
+            <StyledWorkspaceType>
+              All data is stored on the current device. You can enable AFFiNE
+              Cloud for this workspace to keep data in sync with the cloud.
+            </StyledWorkspaceType>
             <StyledPublishCopyContainer>
               <Button
                 onClick={async () => {
@@ -30,6 +42,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 }}
                 type="primary"
                 shape="circle"
+                style={{ fontWeight: '500' }}
               >
                 {t('Enable AFFiNE Cloud')}
               </Button>

packages/app/src/components/workspace-setting/general/General.tsx

@@ -3,15 +3,17 @@ import {
   // StyledSettingAvatar,
   StyledSettingAvatarContent,
   StyledSettingInputContainer,
+  StyledDoneButtonContainer,
+  StyledInput,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
 import { useState } from 'react';
-import { Button, TextButton } from '@/ui/button';
+import { Button } from '@/ui/button';
-import Input from '@/ui/input';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
+import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
@@ -44,7 +46,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   return workspace ? (
     <div>
-      <StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
       <StyledSettingAvatarContent>
         <div
           style={{
@@ -69,29 +71,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       </StyledSettingAvatarContent>
       <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <Input
+        <StyledInput
-          width={327}
+          width={284}
+          height={32}
           value={workspaceName}
           placeholder={t('Workspace Name')}
           maxLength={14}
           minLength={1}
           disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
-        ></Input>
+        ></StyledInput>
         {isOwner ? (
-          <TextButton
+          <StyledDoneButtonContainer
             onClick={() => {
               handleUpdateWorkspaceName();
             }}
-            style={{ marginLeft: '0px' }}
           >
-            ✔️
+            <DoneIcon />
-          </TextButton>
+          </StyledDoneButtonContainer>
         ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <code>{workspace.provider} </code>
+        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
+        Local workspace
       </StyledSettingInputContainer>
       <StyledDeleteButtonContainer>
         {isOwner ? (
@@ -99,6 +102,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <Button
               type="danger"
               shape="circle"
+              style={{ borderRadius: '40px' }}
               onClick={() => {
                 setShowDelete(true);
               }}

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,
   };
 });
 

packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -122,6 +122,7 @@ export const InviteMemberModal = ({
             <Button
               shape="circle"
               type="primary"
+              style={{ width: '364px', height: '38px', borderRadius: '40px' }}
               onClick={async () => {
                 await inviteMember(email);
                 onInviteSuccess();
@@ -143,10 +144,8 @@ const Header = styled('div')({
 
 const Content = styled('div')({
   display: 'flex',
-  padding: '0 48px',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: '16px',
 });
 
 const ContentTitle = styled('h1')({
@@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
 });
 
 const Footer = styled('div')({
-  height: '70px',
+  height: '102px',
-  paddingLeft: '24px',
+  margin: '32px 0',
-  marginTop: '32px',
   textAlign: 'center',
 });
 

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -159,7 +159,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   return (
     <StyledMemberWarp>
-      <>{t('Collaboration Description')}</>
+      {t('Collaboration Description')}
       <StyledPublishExplanation>
         <Button
           type="primary"

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

@@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '402px',
+    flex: 2,
   };
 });
 
@@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '222px',
+    flex: 1,
   };
 });
 
@@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
   return {
     marginTop: '15px',
     overflowY: 'scroll',
+    width: '100%',
+    maxHeight: 'calc(100vh - 300px)',
   };
 });
 
@@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
     display: 'flex',
     alignItems: 'center',
     height: '72px',
+    width: '100%',
   };
 });
 
@@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
 
 export const StyledMemberButtonContainer = styled('div')(() => {
   return {
-    marginTop: '14px',
+    position: 'absolute',
+    bottom: '0',
+    marginBottom: '20px',
   };
 });
 
@@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
     width: '24px',
     height: '24px',
     cursor: 'pointer',
+    paddingRight: '48px',
   };
 });
 
@@ -101,6 +109,8 @@ export const StyledMemberWarp = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    padding: '40px 0',
+    padding: '48px 0',
+    fontWeight: '500',
+    fontSize: '18px',
   };
 });

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

@@ -1,11 +1,11 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
-    padding: '50px',
     flexDirection: 'column',
-    height: '100vh',
+    marginTop: '24px',
+    marginLeft: '48px',
     overflow: 'auto',
   };
 });
@@ -20,9 +20,7 @@ export const StyledSettingSidebar = styled('div')(() => {
 });
 
 export const StyledSettingContent = styled('div')(() => {
-  return {
+  return {};
-    paddingLeft: '48px',
-  };
 });
 
 export const StyledSetting = styled('div')(({ theme }) => {
@@ -60,14 +58,26 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
     {
       return {
         display: 'flex',
-        marginBottom: '12px',
+        position: 'relative',
-        padding: '0 24px',
+        margin: '0 48px 8px 0',
-        height: '32px',
+        height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
-        fontWeight: '400',
+        fontWeight: '500',
-        fontSize: '16px',
+        fontSize: theme.font.base,
-        lineHeight: '32px',
+        lineHeight: theme.font.lineHeightBase,
         cursor: 'pointer',
+        transition: 'all 0.15s ease',
+        '::after': {
+          content: '""',
+          width: '100%',
+          height: '2px',
+          background: isActive ? theme.colors.primaryColor : 'transparent',
+          transition: 'all 0.15s ease',
+          position: 'absolute',
+          left: '0',
+          bottom: '0',
+        },
+        ':hover': { color: theme.colors.primaryColor },
       };
     }
   }
@@ -84,11 +94,11 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
 });
 
 export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
-  ({ marginTop }) => {
+  ({ marginTop, theme }) => {
     return {
       fontWeight: '500',
-      fontSize: '18px',
+      fontSize: theme.font.base,
-      lineHeight: '26px',
+      lineHeight: theme.font.lineHeightBase,
       marginTop: marginTop ? `${marginTop}px` : '0px',
     };
   }
@@ -96,12 +106,28 @@ export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
 
 export const StyledPublishExplanation = styled('div')(() => {
   return {
+    ...displayFlex('row', 'center', 'center'),
     paddingRight: '48px',
     fontWeight: '500',
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
     marginTop: '60px',
+    marginBottom: '22px',
+  };
+});
+export const StyledWorkspaceName = styled('div')(() => {
+  return {
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+  };
+});
+export const StyledWorkspaceType = styled('div')(() => {
+  return {
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
   };
 });
 
@@ -109,16 +135,26 @@ export const StyledPublishCopyContainer = styled('div')(() => {
   return {
     marginTop: '12px',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'start',
+    justifyContent: 'center',
     marginBottom: '20px',
     paddingTop: '20px',
   };
 });
+export const StyledStopPublishContainer = styled('div')(() => {
+  return {
+    position: 'absolute',
+    bottom: '0',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: '20px',
+  };
+});
 
 export const StyledCopyButtonContainer = styled('div')(() => {
   return {
-    marginLeft: '12px',
+    marginTop: '64px',
   };
 });
 

packages/app/src/hooks/use-workspace-helper.ts

@@ -42,6 +42,8 @@ export const useWorkspaceHelper = () => {
       content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
       confirmText: user ? 'Enable' : 'Sign in and Enable',
       cancelText: 'Skip',
+      confirmType: 'primary',
+      buttonDirection: 'column',
     }).then(async confirm => {
       if (confirm && currentWorkspace) {
         if (!user) {

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -2,17 +2,9 @@ import {
   StyledSettingContainer,
   StyledSettingContent,
   StyledSettingSidebar,
-  StyledSettingSidebarHeader,
   StyledSettingTabContainer,
-  StyledSettingTagIconContainer,
   WorkspaceSettingTagItem,
 } from '@/components/workspace-setting/style';
-import {
-  EditIcon,
-  UsersIcon,
-  PublishIcon,
-  CloudInsyncIcon,
-} from '@blocksuite/icons';
 import { ReactElement, ReactNode, useState } from 'react';
 import {
   GeneralPage,
@@ -21,41 +13,38 @@ import {
   ExportPage,
   SyncPage,
 } from '@/components/workspace-setting';
+import { SettingsIcon } from '@blocksuite/icons';
 import { useAppState } from '@/providers/app-state-provider';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
+import { PageListHeader } from '@/components/header';
 
-type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export';
+type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export';
 
 const tabMap: {
   name: TabNames;
-  icon: ReactNode;
   panelRender: (workspace: WorkspaceUnit) => ReactNode;
 }[] = [
   {
-    name: 'general',
+    name: 'General',
-    icon: <EditIcon />,
     panelRender: workspace => <GeneralPage workspace={workspace} />,
   },
   {
-    name: 'members',
+    name: 'Sync',
-    icon: <CloudInsyncIcon />,
-    panelRender: workspace => <MembersPage workspace={workspace} />,
-  },
-  {
-    name: 'publish',
-    icon: <UsersIcon />,
-    panelRender: workspace => <PublishPage workspace={workspace} />,
-  },
-  {
-    name: 'sync',
-    icon: <PublishIcon />,
     panelRender: workspace => <SyncPage workspace={workspace} />,
   },
   {
-    name: 'export',
+    name: 'Collaboration',
-    icon: <PublishIcon />,
+    panelRender: workspace => <MembersPage workspace={workspace} />,
+  },
+  {
+    name: 'Publish',
+    panelRender: workspace => <PublishPage workspace={workspace} />,
+  },
+
+  {
+    name: 'Export',
     panelRender: workspace => <ExportPage workspace={workspace} />,
   },
 ];
@@ -74,48 +63,43 @@ const WorkspaceSetting = () => {
   )?.panelRender;
   let tableArr: {
     name: TabNames;
-    icon: ReactNode;
     panelRender: (workspace: WorkspaceUnit) => ReactNode;
   }[] = tabMap;
   if (!isOwner) {
     tableArr = [
       {
-        name: 'general',
+        name: 'General',
-        icon: <EditIcon />,
         panelRender: workspace => <GeneralPage workspace={workspace} />,
       },
     ];
   }
   return (
-    <StyledSettingContainer>
+    <>
-      <StyledSettingSidebar>
+      <StyledSettingContainer>
-        <StyledSettingSidebarHeader>
+        <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
-          {t('Workspace Settings')}
+        <StyledSettingSidebar>
-        </StyledSettingSidebarHeader>
+          <StyledSettingTabContainer>
-        <StyledSettingTabContainer>
+            {tableArr.map(({ name }) => {
-          {tableArr.map(({ icon, name }) => {
+              return (
-            return (
+                <WorkspaceSettingTagItem
-              <WorkspaceSettingTagItem
+                  key={name}
-                key={name}
+                  isActive={activeTab === name}
-                isActive={activeTab === name}
+                  onClick={() => {
-                onClick={() => {
+                    handleTabChange(name);
-                  handleTabChange(name);
+                  }}
-                }}
+                >
-              >
+                  {name}
-                <StyledSettingTagIconContainer>
+                </WorkspaceSettingTagItem>
-                  {icon}
+              );
-                </StyledSettingTagIconContainer>
+            })}
-                {name}
+          </StyledSettingTabContainer>
-              </WorkspaceSettingTagItem>
+        </StyledSettingSidebar>
-            );
-          })}
-        </StyledSettingTabContainer>
-      </StyledSettingSidebar>
 
-      <StyledSettingContent>
+        <StyledSettingContent>
-        {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
+          {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
-      </StyledSettingContent>
+        </StyledSettingContent>
-    </StyledSettingContainer>
+      </StyledSettingContainer>
+    </>
   );
 };
 WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {

packages/app/src/ui/button/styles.ts

@@ -182,7 +182,7 @@ export const StyledButton = styled('button', {
       paddingLeft: padding,
       paddingRight: padding,
       border: '1px solid',
-      ...displayInlineFlex('flex-start', 'center'),
+      ...displayInlineFlex('center', 'center'),
       position: 'relative',
       // TODO: disabled color is not decided
       ...(disabled

packages/app/src/ui/confirm/Confirm.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Modal, ModalCloseButton, ModalProps } from '../modal';
 import {
-  StyledButtonWrapper,
+  StyledRowButtonWrapper,
+  StyledColumnButtonWrapper,
   StyledConfirmContent,
   StyledConfirmTitle,
   StyledModalWrapper,
@@ -15,6 +16,7 @@ export type ConfirmProps = {
   cancelText?: string;
   // TODO: Confirm button's color should depend on confirm type
   confirmType?: 'primary' | 'warning' | 'danger';
+  buttonDirection?: 'row' | 'column';
   onConfirm?: () => void;
   onCancel?: () => void;
 } & Omit<ModalProps, 'open' | 'children'>;
@@ -26,6 +28,7 @@ export const Confirm = ({
   confirmType,
   onConfirm,
   onCancel,
+  buttonDirection = 'row',
   cancelText = 'Cancel',
 }: ConfirmProps) => {
   const [open, setOpen] = useState(true);
@@ -41,31 +44,63 @@ export const Confirm = ({
         />
         <StyledConfirmTitle>{title}</StyledConfirmTitle>
         <StyledConfirmContent>{content}</StyledConfirmContent>
-
+        {buttonDirection === 'row' ? (
-        <StyledButtonWrapper>
+          <StyledRowButtonWrapper>
-          <Button
+            <Button
-            shape="round"
+              shape="round"
-            bold={true}
+              bold={true}
-            onClick={() => {
+              onClick={() => {
-              setOpen(false);
+                setOpen(false);
-              onCancel?.();
+                onCancel?.();
-            }}
+              }}
-            style={{ marginRight: '24px' }}
+              style={{ marginRight: '24px' }}
-          >
+            >
-            {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
-          </Button>
+            </Button>
-          <Button
+            <Button
-            type={confirmType}
+              type={confirmType}
-            shape="round"
+              shape="round"
-            bold={true}
+              bold={true}
-            onClick={() => {
+              onClick={() => {
-              setOpen(false);
+                setOpen(false);
-              onConfirm?.();
+                onConfirm?.();
-            }}
+              }}
-          >
+            >
-            {confirmText}
+              {confirmText}
-          </Button>
+            </Button>
-        </StyledButtonWrapper>
+          </StyledRowButtonWrapper>
+        ) : (
+          <StyledColumnButtonWrapper>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+              style={{ width: '284px', height: '38px', textAlign: 'center' }}
+            >
+              {confirmText}
+            </Button>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{
+                marginTop: '16px',
+                width: '284px',
+                height: '38px',
+                textAlign: 'center',
+              }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+          </StyledColumnButtonWrapper>
+        )}
       </StyledModalWrapper>
     </Modal>
   );

packages/app/src/ui/confirm/styles.ts

@@ -3,8 +3,10 @@ import { ModalWrapper } from '@/ui/modal';
 
 export const StyledModalWrapper = styled(ModalWrapper)(() => {
   return {
-    width: '460px',
+    minWidth: '460px',
-    padding: '46px 60px 32px',
+    maxWidth: '560px',
+    maxHeight: '292px',
+    padding: '44px 84px 32px 84px',
   };
 });
 
@@ -14,6 +16,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
     fontWeight: 600,
     textAlign: 'center',
     color: theme.colors.popoverColor,
+    lineHeight: '28px',
   };
 });
 
@@ -23,12 +26,21 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
     textAlign: 'center',
     marginTop: '12px',
     color: theme.colors.textColor,
+    lineHeight: '26px',
   };
 });
 
-export const StyledButtonWrapper = styled.div(() => {
+export const StyledColumnButtonWrapper = styled.div(() => {
   return {
     ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    marginTop: '32px',
+  };
+});
+export const StyledRowButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    flexDirection: 'row',
     marginTop: '32px',
   };
 });

packages/app/src/ui/input/Input.tsx

@@ -12,6 +12,7 @@ type inputProps = {
   placeholder?: string;
   disabled?: boolean;
   width?: number;
+  height?: number;
   maxLength?: number;
   minLength?: number;
   onChange?: (value: string) => void;
@@ -26,6 +27,7 @@ export const Input = (props: inputProps) => {
     placeholder,
     maxLength,
     minLength,
+    height,
     width = 260,
     onChange,
     onBlur,
@@ -62,6 +64,7 @@ export const Input = (props: inputProps) => {
       onChange={handleChange}
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
+      height={height}
     ></StyledInput>
   );
 };

packages/app/src/ui/input/style.ts

@@ -4,7 +4,8 @@ export const StyledInput = styled('input')<{
   disabled?: boolean;
   value?: string;
   width: number;
-}>(({ theme, width, disabled }) => {
+  height?: number;
+}>(({ theme, width, disabled, height }) => {
   const fontWeight = 400;
   const fontSize = '16px';
   return {
@@ -13,6 +14,7 @@ export const StyledInput = styled('input')<{
     padding: '8px 12px',
     fontWeight,
     fontSize,
+    height: height ? `${height}px` : 'auto',
     color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
     border: `1px solid`,
     borderColor: theme.colors.borderColor, // TODO: check out disableColor,