Merge branch 'feat/datacenter' into feat/style-workspaces

2024-11-30 04:05:07 +03:00 · 2023-01-22 16:57:27 +08:00 · 2023-01-22 16:57:27 +08:00 · f67d0011d2
commit f67d0011d2
parent b39acf42e6 ab73745ec0
18 changed files with 286 additions and 148 deletions
--- a/packages/app/src/components/header/Header.tsx
+++ b/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());
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/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>
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/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', {
-                workspaceName: workspace.name ?? 'Affine',
-              })}
+              <WorkspaceUnitAvatar
+                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>
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/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 Input from '@/ui/input';
+import { Button } from '@/ui/button';
 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
-          width={327}
+        <StyledInput
+          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' }}
          >
-            ✔️
-          </TextButton>
+            <DoneIcon />
+          </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);
              }}
--- 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 = ({
    <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>
--- 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',
  };
 });

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

--- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/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',
-  paddingLeft: '24px',
-  marginTop: '32px',
+  height: '102px',
+  margin: '32px 0',
  textAlign: 'center',
 });

--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/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"
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/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',
  };
 });
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/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 {
-    paddingLeft: '48px',
-  };
+  return {};
 });

 export const StyledSetting = styled('div')(({ theme }) => {
@ -60,14 +58,26 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
    {
      return {
        display: 'flex',
-        marginBottom: '12px',
-        padding: '0 24px',
-        height: '32px',
+        position: 'relative',
+        margin: '0 48px 8px 0',
+        height: '34px',
        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
-        fontWeight: '400',
-        fontSize: '16px',
-        lineHeight: '32px',
+        fontWeight: '500',
+        fontSize: theme.font.base,
+        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',
-      lineHeight: '26px',
+      fontSize: theme.font.base,
+      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',
-    alignItems: 'center',
+    flexDirection: 'column',
+    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',
  };
 });

--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/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) {
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/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',
-    icon: <EditIcon />,
+    name: 'General',
    panelRender: workspace => <GeneralPage workspace={workspace} />,
  },
  {
-    name: 'members',
-    icon: <CloudInsyncIcon />,
-    panelRender: workspace => <MembersPage workspace={workspace} />,
-  },
-  {
-    name: 'publish',
-    icon: <UsersIcon />,
-    panelRender: workspace => <PublishPage workspace={workspace} />,
-  },
-  {
-    name: 'sync',
-    icon: <PublishIcon />,
+    name: 'Sync',
    panelRender: workspace => <SyncPage workspace={workspace} />,
  },
  {
-    name: 'export',
-    icon: <PublishIcon />,
+    name: 'Collaboration',
+    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',
-        icon: <EditIcon />,
+        name: 'General',
        panelRender: workspace => <GeneralPage workspace={workspace} />,
      },
    ];
  }
  return (
-    <StyledSettingContainer>
-      <StyledSettingSidebar>
-        <StyledSettingSidebarHeader>
-          {t('Workspace Settings')}
-        </StyledSettingSidebarHeader>
-        <StyledSettingTabContainer>
-          {tableArr.map(({ icon, name }) => {
-            return (
-              <WorkspaceSettingTagItem
-                key={name}
-                isActive={activeTab === name}
-                onClick={() => {
-                  handleTabChange(name);
-                }}
-              >
-                <StyledSettingTagIconContainer>
-                  {icon}
-                </StyledSettingTagIconContainer>
-                {name}
-              </WorkspaceSettingTagItem>
-            );
-          })}
-        </StyledSettingTabContainer>
-      </StyledSettingSidebar>
+    <>
+      <StyledSettingContainer>
+        <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
+        <StyledSettingSidebar>
+          <StyledSettingTabContainer>
+            {tableArr.map(({ name }) => {
+              return (
+                <WorkspaceSettingTagItem
+                  key={name}
+                  isActive={activeTab === name}
+                  onClick={() => {
+                    handleTabChange(name);
+                  }}
+                >
+                  {name}
+                </WorkspaceSettingTagItem>
+              );
+            })}
+          </StyledSettingTabContainer>
+        </StyledSettingSidebar>

-      <StyledSettingContent>
-        {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
-      </StyledSettingContent>
-    </StyledSettingContainer>
+        <StyledSettingContent>
+          {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
+        </StyledSettingContent>
+      </StyledSettingContainer>
+    </>
  );
 };
 WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {
--- a/packages/app/src/ui/button/styles.ts
+++ b/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
--- a/packages/app/src/ui/confirm/Confirm.tsx
+++ b/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>
-
-        <StyledButtonWrapper>
-          <Button
-            shape="round"
-            bold={true}
-            onClick={() => {
-              setOpen(false);
-              onCancel?.();
-            }}
-            style={{ marginRight: '24px' }}
-          >
-            {cancelText === 'Cancel' ? t('Cancel') : cancelText}
-          </Button>
-          <Button
-            type={confirmType}
-            shape="round"
-            bold={true}
-            onClick={() => {
-              setOpen(false);
-              onConfirm?.();
-            }}
-          >
-            {confirmText}
-          </Button>
-        </StyledButtonWrapper>
+        {buttonDirection === 'row' ? (
+          <StyledRowButtonWrapper>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{ marginRight: '24px' }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+            >
+              {confirmText}
+            </Button>
+          </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>
  );
--- a/packages/app/src/ui/confirm/styles.ts
+++ b/packages/app/src/ui/confirm/styles.ts
@ -3,8 +3,10 @@ import { ModalWrapper } from '@/ui/modal';

 export const StyledModalWrapper = styled(ModalWrapper)(() => {
  return {
-    width: '460px',
-    padding: '46px 60px 32px',
+    minWidth: '460px',
+    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',
  };
 });
--- a/packages/app/src/ui/input/Input.tsx
+++ b/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>
  );
 };
--- a/packages/app/src/ui/input/style.ts
+++ b/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,