@antscorp/antsomi-ui 2.0.1 → 2.0.2

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/LoginSelectPortal/LoginSelectPortal.js

@@ -178,8 +178,9 @@ export const LoginSelectPortal = props => {
                             color: '#595959',
                             fontSize: 11,
                         } }, "No portal matches your keyword"))) : (React.createElement(Scrollbars, { style: {
-                        height: 514,
+                        height: `calc(100vh - 410px)`,
                         width: '100%',
+                        minHeight: `145px`,
                     } },
                     React.createElement(WrapperList, null,
                         React.createElement(Row, { gutter: [20, 20] }, filterListNetworks.map((network) => (React.createElement(Col, { span: 12 },

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,12 @@ 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'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   input:-webkit-autofill,
@@ -76,12 +90,20 @@ export const StyledForm = styled(Form) `
   }
 
   .antsomi-input-password-icon {
-    font-size: ${(props) => (props.isMobile ? ' 24px' : '15px')};
+    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   .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'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
   }
 
   .antsomi-form-item-explain-error {
@@ -91,6 +113,10 @@ export const StyledForm = styled(Form) `
 export const StyleInput = styled(Input) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '36px !important'};
   font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+  &::placeholder {
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  }
 `;
 export const StyleButton = styled(Button) `
   height: ${(props) => props.isMobile ? ' 44px !important' : '40px !important'};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -246,4 +246,4 @@
     "react-dom": ">=16.9.0",
     "react-router-dom": ">= 5.1.0"
   }
-}
+}