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

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

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

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,