@antscorp/antsomi-ui 1.3.5-beta.667 → 1.3.5-beta.669

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -380,7 +380,7 @@ export const AdvancedPicker = props => {
         return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
             !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
             React.createElement("span", { className: "date-picker__title--view-mode" }, selectedDateTitle)));
-    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
+    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: onlyShowFixed ? undefined : ref },
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
         isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
             React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -11,13 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Popover } from 'antd';
-import { Input, Icon } from '../../atoms';
+import { Icon } from '../../atoms';
 import './styles.scss';
 import clsx from 'clsx';
+import { StyledInput } from './styled';
 export const SearchPopover = (props) => {
     const { inputSearchProps = {} } = props, popoverProps = __rest(props, ["inputSearchProps"]);
     const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
     return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
-            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
+            React.createElement(StyledInput, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
             content) }), children));
 };

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -9,16 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { renderIconField } from '../../utils';
 import { PopoverSelect } from '../PopoverSelect';
+import { Typography } from 'antd';
 export const PopoverAddField = (props) => {
     const { fields, onSearchPredicate, className } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className"]);
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
-    const options = useMemo(() => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
-            field.dataType && renderIconField(field.dataType),
-            field.label)) }))), [fields]);
     const handleOnSearchPredicate = (field) => {
         const originalField = originalFieldByKey.get(field.key);
         if (!originalField)
@@ -28,5 +26,14 @@ export const PopoverAddField = (props) => {
         }
         return true;
     };
+    const options = useCallback((params) => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
+            field.dataType && renderIconField(field.dataType),
+            typeof field.label === 'string' && (React.createElement(Typography.Text, { ellipsis: {
+                    tooltip: true,
+                } }, field.label)),
+            typeof field.label === 'function' &&
+                field.label({
+                    selected: params.selected.includes(field.key),
+                }))) }))), [fields]);
     return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') })));
 };

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -12,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { SearchPopover } from '../../SearchPopover';
-import { Button, Checkbox, Menu } from 'antd';
 import './styles.scss';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
-import { Icon } from '../../../../atoms';
-import Scrollbars from 'react-custom-scrollbars';
+import { Button, Checkbox, Icon } from '../../../../atoms';
+import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
+import { List } from 'antd';
 export const PopoverSelect = (props) => {
     var _a, _b;
-    const { open: openProp, selected, options = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
+    const { open: openProp, selected, options: optionsProp = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
     const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
     const refOnSearchPredicate = useRef(onSearchPredicate);
     useEffect(() => {
@@ -30,6 +30,9 @@ export const PopoverSelect = (props) => {
     const [search, setSearch] = useState('');
     const [showSelected, setShowSelected] = useState(false);
     const applyDisabled = selectedKeys.size === 0;
+    const options = useMemo(() => typeof optionsProp === 'function'
+        ? optionsProp({ selected: [...selectedKeys] })
+        : optionsProp, [optionsProp, selectedKeys]);
     useEffect(() => {
         if (openProp !== undefined) {
             setOpen(openProp);
@@ -114,15 +117,13 @@ export const PopoverSelect = (props) => {
         return option.label;
     };
     return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
-            !!options.length && (React.createElement("div", { className: "actions" },
+            !!optionsProp.length && (React.createElement(StyledAction, null,
                 React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
-                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
-            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
-                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(option => ({
-                        key: option.key,
-                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option))),
-                    })) }))),
-            React.createElement("div", { className: "footer" },
+                selectedKeys.size === optionsProp.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
+            !!filteredField.length && (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(List, { bordered: false, dataSource: filteredField, renderItem: option => (React.createElement(List.Item, null,
+                        React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option)))) }))),
+            React.createElement(StyledFooter, null,
                 React.createElement(Button, { onClick: handleCancel }, "Cancel"),
                 React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
             '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,

package/es/components/molecules/SearchPopover/components/PopoverSelect/styled.d.ts

@@ -0,0 +1,4 @@
+import Scrollbars from 'react-custom-scrollbars';
+export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<typeof Scrollbars, any, {}, never>;

package/es/components/molecules/SearchPopover/components/PopoverSelect/styled.js

@@ -0,0 +1,53 @@
+var _a, _b;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import Scrollbars from 'react-custom-scrollbars';
+import styled from 'styled-components';
+export const StyledFooter = styled.div `
+  gap: 10px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+export const StyledAction = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 0px;
+
+  > button {
+    height: 30px;
+    padding: 0 10px;
+  }
+`;
+export const StyledListFieldsWrapper = styled(Scrollbars) `
+  .antsomi-list-items {
+    border-bottom: 1px solid var(--divider-1);
+
+    > .antsomi-list-item {
+      padding: 0;
+      border-bottom: 0;
+      height: ${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemHeight) || 35}px;
+
+      > .antsomi-checkbox-wrapper {
+        padding: 0 var(--item-padding);
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+
+        span:nth-child(2) {
+          > i {
+            min-width: 20px;
+            text-align: center;
+          }
+
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+      }
+    }
+  }
+`;

package/es/components/molecules/SearchPopover/components/PopoverSelect/styles.scss

@@ -2,58 +2,6 @@
   &.antsomi-popover {
     .antsomi-popover-inner {
       min-width: 300px;
-
-      .antsomi-popover-inner-content {
-        .antsomi-menu.list-fields {
-          border-bottom: 1px solid var(--divider-1);
-
-          > .antsomi-menu-item {
-            padding: 0;
-
-            > .antsomi-menu-title-content {
-              > .antsomi-checkbox-wrapper {
-                padding: 0 var(--item-padding);
-                display: flex;
-                align-items: center;
-                width: 100%;
-                height: 100%;
-
-                span:nth-child(2) {
-                  > i {
-                    min-width: 20px;
-                    text-align: center;
-                  }
-
-                  display: flex;
-                  align-items: center;
-                  gap: 6px;
-                }
-              }
-            }
-          }
-        }
-
-        > .actions {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: 10px;
-          padding: 5px 0px;
-
-          > button {
-            height: 30px;
-            padding: 0 10px;
-          }
-        }
-
-        > .footer {
-          gap: 10px;
-          padding: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-        }
-      }
     }
   }
 }

package/es/components/molecules/SearchPopover/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;

package/es/components/molecules/SearchPopover/styled.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Input } from '../../atoms';
+export const StyledInput = styled(Input) `
+  &.antsomi-input-group-wrapper {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--divider-1);
+
+    .antsomi-input {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .antsomi-input-group-addon {
+      border: none;
+      background: transparent;
+      font-size: 20px;
+      padding: 0;
+      min-width: 25px;
+
+      > i {
+        font-size: 24px;
+        color: #595959;
+        cursor: pointer;
+      }
+    }
+  }
+`;

package/es/components/molecules/SearchPopover/styles.scss

@@ -2,30 +2,6 @@
   &.antsomi-popover {
     .antsomi-popover-inner {
       padding: 0;
-
-      .antsomi-input-group-wrapper {
-        padding: 8px 10px;
-        border-bottom: 1px solid var(--divider-1);
-
-        .antsomi-input {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        .antsomi-input-group-addon {
-          border: none;
-          background: transparent;
-          font-size: 20px;
-          padding: 0;
-          min-width: 25px;
-
-          > i {
-            font-size: 24px;
-            color: #595959;
-            cursor: pointer;
-          }
-        }
-      }
     }
   }
 }

package/es/components/molecules/SearchPopover/types.d.ts

@@ -14,7 +14,9 @@ export type Field = Option & {
     dataType?: string | number;
 };
 export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverProps & Partial<{
-    options: TOption[];
+    options: TOption[] | ((info: {
+        selected: string[];
+    }) => TOption[]);
     selected: string[];
     onCancel: () => void;
     onApply: (selected: string[]) => void;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -21,5 +21,5 @@ export const Item = memo((props) => {
             'item-disabled': item === null || item === void 0 ? void 0 : item.disabled,
         }, className), style: style, onClick: handleOnClick },
         React.createElement("div", { className: "item-label" }, renderLabel()),
-        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "sub-menu-arrow" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
+        !!((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "item-actions" }, expandIcon || React.createElement(Icon, { type: "icon-ants-expand-more" })))));
 });

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -96,8 +96,17 @@ export const MenuInline = (props) => {
         const itemStyle = Object.assign(Object.assign({}, style), { paddingLeft: indentSize + inlinePadding, paddingRight: inlinePadding, top: Number(style.top) + itemSpacing, height: Number(style.height) - itemSpacing });
         return (React.createElement(Item, { className: clsx({
                 'item-selected': selectedKeys.has(item.key),
+                'item-expanded': openKeys.has(item.key),
             }, item.className), onClick: handleClickItem(item, index), style: itemStyle, item: item }));
-    }, [flattenItems, handleClickItem, inlinePadding, inlineIndent, itemSpacing, selectedKeys]);
+    }, [
+        flattenItems,
+        handleClickItem,
+        inlinePadding,
+        inlineIndent,
+        itemSpacing,
+        selectedKeys,
+        openKeys,
+    ]);
     // console.log('render');
-    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.scaledHeight, width: autoSize.scaledWidth, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
+    return (React.createElement(AutoSizer, null, autoSize => (React.createElement(VirtualizedMenuContainer, { className: clsx(`menu-${MODE.Inline}`, className), itemSize: () => itemSize + itemSpacing, itemCount: flattenItems.length, height: autoSize.height, width: autoSize.width, innerElementType: innerElementType, useIsScrolling: true }, renderItem))));
 };

package/es/components/molecules/VirtualizedMenu/styled.js

@@ -35,7 +35,7 @@ export const MenuItemRoot = styled.div `
     overflow: hidden;
   }
 
-  > .sub-menu-arrow {
+  > .item-actions {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,15 +50,20 @@ export const MenuItemRoot = styled.div `
     background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Menu) === null || _f === void 0 ? void 0 : _f.itemActiveBg};
   }
 
+  &.item-expanded {
+    > .item-actions {
+      > i[type='icon-ants-expand-more'] {
+        rotate: 180deg;
+        transition: rotate 2s;
+      }
+    }
+  }
+
   &:hover:not(.item-disabled, .item-selected) {
     background-color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Menu) === null || _h === void 0 ? void 0 : _h.itemHoverBg};
   }
 `;
 export const VirtualizedMenuContainer = styled(VariableSizeList) `
   font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSize}px;
-  overflow: hidden !important;
-
-  &:hover {
-    overflow: auto !important;
-  }
+  scrollbar-gutter: stable;
 `;

package/es/components/organism/Login/Login.js

@@ -694,7 +694,7 @@ export const Login = props => {
         }
     };
     return (React.createElement(CookiesProvider, null,
-        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start' },
-            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef }, renderMain()),
+        React.createElement(LoginMain, { justify: isMobile ? 'center' : 'start', id: "login_container" },
+            React.createElement(WrapperLogin, { isMobile: isMobile, vertical: true, align: "center", gap: 40, flex: 1, ref: loginRef, id: "login_main" }, renderMain()),
             !isMobile && React.createElement(LoginBannerZone, { className: "login-banner-zone", id: "login_banner_zone" }))));
 };

package/es/components/organism/Login/components/ForgotPassword/ForgotPassword.js

@@ -177,16 +177,16 @@ const ForgotPassword = props => {
                                 });
                                 errorRef.current.email = false;
                                 setLoginError('');
-                            } }),
+                            }, status: errorRef.current.email && state.errors.email ? 'error' : undefined }),
                         errorRef.current.email && state.errors.email ? (React.createElement(Text, { type: "danger", style: { marginTop: 5 } }, state.errors.email)) : null,
                         state.loginError && (React.createElement(Text, { type: "danger", style: { marginTop: 5 } }, state.loginError))),
-                    React.createElement(Flex, { vertical: true, gap: 15 },
+                    React.createElement(Flex, { vertical: true, gap: 5 },
                         React.createElement(Flex, { justify: "center", style: {
                                 transform: isMobile ? 'scale(1)' : `scale(${scaleCaptcha})`,
                                 transformOrigin: !isMobile ? '' : '0 0',
                             } },
                             React.createElement(ReCAPTCHA, { sitekey: reCaptchaKey, onChange: onCaptchaChange, onExpired: onExpiredCaptcha, size: "normal" })),
-                        state.errors.captcha && (React.createElement(Text, { type: "danger", style: { marginTop: 10 } }, "Please verify you are human"))),
+                        state.errors.captcha && React.createElement(Text, { type: "danger" }, "Please verify you are human")),
                     React.createElement(Flex, { vertical: true, gap: isMobile ? 30 : 15, style: { paddingBottom: 40 } },
                         React.createElement(StyleButton, { isMobile: isMobile, onClick: signIn, type: "primary" }, "Continue"),
                         React.createElement(StyleButton, { isMobile: isMobile, type: "text", onClick: handleBack }, "Back to login"))))), isShowLogo: false, footer: null }));

package/es/components/organism/Login/components/LoginSelectPortal/Item/styled.js

@@ -19,8 +19,8 @@ export const WrapperItem = styled.div `
     object-fit: contain;
   }
 
-  :hover {
-    background-color: #f2f9ff;
+  &:hover {
+    background-color: #f2f9ff !important;
   }
 
   .antsomi-typography {

package/es/components/organism/Login/components/LoginStep2/LoginStep2.js

@@ -125,14 +125,15 @@ export const LoginStep2 = props => {
                             React.createElement(Text, { isMobile: isMobile },
                                 "Open Google Authenticator and enter the code from ",
                                 React.createElement("b", null, "antsomi.com"))) })),
-                React.createElement(Flex, { vertical: true, gap: isMobile ? 20 : 5 },
-                    React.createElement(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
-                            setState(draft => {
-                                draft.code = e.target.value;
-                            });
-                            errorRef.current = true;
-                        } }),
-                    errorRef.current && state.codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null,
+                React.createElement(Flex, { vertical: true, gap: isMobile ? 20 : 11 },
+                    React.createElement(Flex, { vertical: true, gap: 10 },
+                        React.createElement(StyleInput, { isMobile: isMobile, maxLength: 6, placeholder: "Input your code", value: state.code, onChange: e => {
+                                setState(draft => {
+                                    draft.code = e.target.value;
+                                });
+                                errorRef.current = true;
+                            }, status: errorRef.current && state.codeError ? 'error' : undefined }),
+                        errorRef.current && state.codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null),
                     React.createElement(Checkbox, { checked: state.isTrust, onChange: e => {
                             setState(draft => {
                                 draft.isTrust = e.target.checked;

package/es/components/organism/Login/components/SetupGGAuthenticator/SetupGGAuthenticator.js

@@ -114,7 +114,7 @@ const SetupGGAuthenticator = props => {
                         if (e.target.value.trim().length) {
                             setCodeError(false);
                         }
-                    } }),
+                    }, status: errorRef.current && codeError ? 'error' : '' }),
                 errorRef.current && codeError ? (React.createElement(TextAntsomiUI, { type: "danger" }, "Invalid code, please try again")) : null)), footer: React.createElement(Flex, { vertical: true, gap: 92 },
             React.createElement(Flex, { vertical: true, gap: isMobile ? 30 : 15 },
                 React.createElement(StyleButton, { isMobile: isMobile, loading: isLoading, type: "primary", onClick: updateG2FA }, "Complete"),

package/es/components/organism/Login/components/SignIn/SignIn.js

@@ -86,7 +86,7 @@ export const SignIn = props => {
                         } })) : (React.createElement(Icon, { type: "icon-ants-invisible", style: {
                             color: '#595959',
                         } })) })),
-            loginError && React.createElement("span", { style: { color: 'red' } }, "Email or password is invalid"),
+            loginError && (React.createElement("span", { style: { color: 'red', fontSize: 11 } }, "Email or password is invalid")),
             React.createElement(Flex, { style: { width: '100%', marginTop: '40px' }, vertical: true, className: "" },
                 React.createElement(Form.Item, null,
                     React.createElement(StyleButton, { isMobile: isMobile, type: "primary", htmlType: "submit", style: { width: '100%', marginBottom: isMobile ? 15 : 0 }, loading: isLoading }, "Sign in")),

package/es/components/organism/Login/styled.js

@@ -2,21 +2,31 @@ import { Button, Flex, Form, Input } from 'antd';
 import styled from 'styled-components';
 export const LoginMain = styled(Flex) `
   background: #eaf1fb;
+
   height: 100vh;
+  max-height: 100vh;
+
   width: 100%;
+
+  overflow: hidden;
 `;
 export const LoginBannerZone = styled.div `
   display: flex;
   flex: 2;
+  z-index: 1;
+
+  min-width: calc(100vw - 404px);
+  max-width: calc(100vw - 300px);
 `;
 export const WrapperLogin = styled(Flex) `
   height: 100%;
   overflow-y: auto;
   background-color: white;
+  z-index: 5;
 
   width: ${props => (props.isMobile ? '100%' : '')};
   min-width: ${props => (props.isMobile ? '100%' : '300px')};
-  max-width: ${props => (props.isMobile ? '100%' : '400px')};
+  max-width: ${props => (props.isMobile ? '100%' : '404px')};
 
   ${(props) => !props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : ''}
 `;
@@ -63,8 +73,8 @@ export const AvatarImage = styled.img `
 `;
 export const StyledForm = styled(Form) `
   input {
-    height: ${(props) => (props.isMobile ? ' 44px' : '30px')};
-    font-size: ${(props) => (props.isMobile ? ' 16px !important' : '12px')};
+    height: ${(props) => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
   }
 
   input:-webkit-autofill,
@@ -76,12 +86,12 @@ export const StyledForm = styled(Form) `
   }
 
   .antsomi-input-password-icon {
-    font-size: ${(props) => (props.isMobile ? ' 24px' : '15px')};
+    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
   }
 
   .antsomi-input-affix-wrapper {
     padding: 0 10px !important;
-    font-size: ${(props) => (props.isMobile ? ' 16px !important' : '12px')};
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
   }
 
   .antsomi-form-item-explain-error {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.667",
+  "version": "1.3.5-beta.669",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",