fixes

wireapp · Jun 15, 2022 · f98b5b8 · f98b5b8
1 parent 61d55b9
commit f98b5b8
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "@wireapp/antiscroll-2": "1.3.1",
     "@wireapp/avs": "8.1.8",
     "@wireapp/core": "25.1.0",
-    "@wireapp/react-ui-kit": "8.0.0",
+    "@wireapp/react-ui-kit": "8.2.0",
     "@wireapp/store-engine-dexie": "1.6.9",
     "@wireapp/store-engine-sqleet": "1.7.14",
     "@wireapp/webapp-events": "0.13.0",

diff --git a/src/script/auth/component/LoginForm.tsx b/src/script/auth/component/LoginForm.tsx
@@ -24,7 +24,7 @@ import {
   Input,
   Link,
   Loading,
-  COLOR,
+  COLOR_V2,
   InputSubmitCombo,
   RoundIconButton,
   ShowIcon,
@@ -50,7 +50,7 @@ const inputContainer = css`
   flex-direction: column;
 
   &:focus-within label {
-    color: ${COLOR.BLUE};
+    color: ${COLOR_V2.BLUE};
   }
 
   label {
@@ -152,7 +152,7 @@ const LoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
           />
 
           <RoundIconButton type="button" onClick={toggleIsPasswordVisible} style={{backgroundColor: 'transparent'}}>
-            {isPasswordVisible ? <HideIcon color={COLOR.BLACK} /> : <ShowIcon color={COLOR.BLACK} />}
+            {isPasswordVisible ? <HideIcon color={COLOR_V2.BLACK} /> : <ShowIcon color={COLOR_V2.BLACK} />}
           </RoundIconButton>
         </InputSubmitCombo>
 
@@ -165,7 +165,7 @@ const LoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
           target="_blank"
           fontSize="16px"
           bold={false}
-          color={COLOR.BLUE}
+          color={COLOR_V2.BLUE}
           style={{marginTop: '8px', textDecoration: 'underline'}}
           data-uie-name="go-forgot-password"
           textTransform="none"

diff --git a/src/script/auth/component/PhoneLoginForm.tsx b/src/script/auth/component/PhoneLoginForm.tsx
@@ -47,73 +47,78 @@ const PhoneLoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
   };
 
   return (
-    <InputBlock>
-      <Select
-        style={{height: 57, marginBottom: 0}}
-        value={country}
-        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-          const {value} = event.target;
-          setCountry(value);
-          setCountryCode((getCountryCode(value) || 'X2').toString(10));
-        }}
-      >
-        <option value="X0" style={{display: 'none'}}>
-          {_(phoneLoginStrings.accountCountryCode)}
-        </option>
-        <option value="X1" style={{display: 'none'}}>
-          {_(phoneLoginStrings.errorCountryCodeInvalid)}
-        </option>
-        {COUNTRY_CODES.map(({iso, name}) => (
-          <option key={iso} value={iso}>
-            {name}
-          </option>
-        ))}
-      </Select>
-      <InputSubmitCombo style={{background: 'none', boxShadow: 'inset 16px 16px 0 #fff, inset -100px -16px 0 #fff'}}>
-        <Input
-          style={{marginRight: 1, width: 80}}
-          ref={countryCodeInput}
-          value={`+${countryCode}`}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+    <>
+      <InputBlock>
+        <Select
+          style={{marginBottom: 0}}
+          value={country}
+          onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
             const {value} = event.target;
-            const codeNumbers = value.replace(/\D/g, '');
-            setCountryCode(codeNumbers);
-            setCountry(codeNumbers ? getCountryByCode(codeNumbers) || 'X1' : 'X0');
-          }}
-          data-uie-name="enter-country-code"
-        />
-        <Input
-          name="phone-login"
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            setPhoneNumber(event.target.value);
-            setValidInput(true);
+            setCountry(value);
+            setCountryCode((getCountryCode(value) || 'X2').toString(10));
           }}
-          ref={phoneInput}
-          markInvalid={!validInput}
-          value={phoneNumber}
-          autoComplete="section-login phone"
-          pattern={'.{1,1024}'}
-          type="tel"
-          required
-          placeholder="phone number"
-          data-uie-name="enter-phone"
-        />
-        {isFetching ? (
-          <Loading size={32} />
-        ) : (
-          <RoundIconButton
-            style={{marginLeft: 16}}
-            disabled={!phoneNumber}
-            type="submit"
-            formNoValidate
-            onClick={handleSubmit}
-            data-uie-name="do-sign-in-phone"
-          >
-            <ArrowIcon />
-          </RoundIconButton>
-        )}
-      </InputSubmitCombo>
-    </InputBlock>
+        >
+          <option value="X0" style={{display: 'none'}}>
+            {_(phoneLoginStrings.accountCountryCode)}
+          </option>
+          <option value="X1" style={{display: 'none'}}>
+            {_(phoneLoginStrings.errorCountryCodeInvalid)}
+          </option>
+          {COUNTRY_CODES.map(({iso, name}) => (
+            <option key={iso} value={iso}>
+              {name}
+            </option>
+          ))}
+        </Select>
+      </InputBlock>
+
+      <InputBlock>
+        <InputSubmitCombo style={{background: 'none', boxShadow: 'inset 16px 16px 0 #fff, inset -100px -16px 0 #fff'}}>
+          <Input
+            style={{marginRight: 1, width: 80}}
+            ref={countryCodeInput}
+            value={`+${countryCode}`}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              const {value} = event.target;
+              const codeNumbers = value.replace(/\D/g, '');
+              setCountryCode(codeNumbers);
+              setCountry(codeNumbers ? getCountryByCode(codeNumbers) || 'X1' : 'X0');
+            }}
+            data-uie-name="enter-country-code"
+          />
+          <Input
+            name="phone-login"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              setPhoneNumber(event.target.value);
+              setValidInput(true);
+            }}
+            ref={phoneInput}
+            markInvalid={!validInput}
+            value={phoneNumber}
+            autoComplete="section-login phone"
+            pattern={'.{1,1024}'}
+            type="tel"
+            required
+            placeholder="phone number"
+            data-uie-name="enter-phone"
+          />
+          {isFetching ? (
+            <Loading size={32} />
+          ) : (
+            <RoundIconButton
+              style={{marginLeft: 16}}
+              disabled={!phoneNumber}
+              type="submit"
+              formNoValidate
+              onClick={handleSubmit}
+              data-uie-name="do-sign-in-phone"
+            >
+              <ArrowIcon />
+            </RoundIconButton>
+          )}
+        </InputSubmitCombo>
+      </InputBlock>
+    </>
   );
 };
 export default PhoneLoginForm;
diff --git a/src/script/auth/page/HistoryInfo.tsx b/src/script/auth/page/HistoryInfo.tsx
@@ -18,7 +18,7 @@
  */
 
 import {ClientType} from '@wireapp/api-client/src/client';
-import {Button, ContainerXS, H1, Link, Paragraph, COLOR} from '@wireapp/react-ui-kit';
+import {Button, ContainerXS, H1, Link, Paragraph, COLOR_V2} from '@wireapp/react-ui-kit';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {connect} from 'react-redux';
@@ -78,6 +78,7 @@ const HistoryInfo = ({hasHistory, clients, currentSelfClient, isNewCurrentSelfCl
           type="button"
           onClick={onContinue}
           data-uie-name="do-history-confirm"
+          backgroundColor={COLOR_V2.BLUE}
           onKeyDown={(event: React.KeyboardEvent) => {
             if (event.key === KEY.ENTER) {
               onContinue();
@@ -96,7 +97,7 @@ const HistoryInfo = ({hasHistory, clients, currentSelfClient, isNewCurrentSelfCl
               textTransform="none"
               bold={false}
               style={{fontSize: '16px', textDecoration: 'underline'}}
-              color={COLOR.BLUE}
+              color={COLOR_V2.BLUE_LIGHT_600}
             >
               {_(historyInfoStrings.learnMore)}
             </Link>

diff --git a/src/script/auth/page/Index.tsx b/src/script/auth/page/Index.tsx
@@ -93,19 +93,12 @@ const Index = ({defaultSSOCode}: Props & ConnectedProps & DispatchProps) => {
               type="button"
               onClick={() => history.push(ROUTE.SET_ACCOUNT_TYPE)}
               block
-              style={{borderRadius: '16px'}}
               data-uie-name="go-set-account-type"
             >
               {_(indexStrings.createAccount)}
             </Button>
 
-            <Button
-              type="button"
-              onClick={() => history.push(ROUTE.LOGIN)}
-              block
-              style={{borderRadius: '16px'}}
-              data-uie-name="go-login"
-            >
+            <Button type="button" onClick={() => history.push(ROUTE.LOGIN)} block data-uie-name="go-login">
               {_(indexStrings.logIn)}
             </Button>
 
@@ -123,10 +116,9 @@ const Index = ({defaultSSOCode}: Props & ConnectedProps & DispatchProps) => {
             {(Config.getConfig().FEATURE.ENABLE_SSO || Config.getConfig().FEATURE.ENABLE_DOMAIN_DISCOVERY) && (
               <Button
                 type="button"
+                variant="secondary"
                 onClick={() => history.push(ROUTE.SSO)}
                 block
-                color={COLOR.TEXT}
-                backgroundColor={COLOR.WHITE}
                 style={{border: '1px solid #DCE0E3', borderRadius: '16px', marginTop: '82px'}}
                 data-uie-name="go-sso-login"
               >

diff --git a/src/script/auth/page/Login.tsx b/src/script/auth/page/Login.tsx
@@ -22,6 +22,7 @@ import {ClientType} from '@wireapp/api-client/src/client/index';
 import {
   ArrowIcon,
   COLOR,
+  COLOR_V2,
   Checkbox,
   CheckboxLabel,
   CodeInput,
@@ -361,7 +362,7 @@ const Login = ({
                             data-uie-name="go-sign-in-phone"
                             fontSize="16px"
                             bold={false}
-                            color={COLOR.BLACK}
+                            color={COLOR_V2.BLUE}
                             style={{textDecoration: 'underline'}}
                             textTransform="none"
                           >

diff --git a/src/script/auth/page/PhoneLogin.tsx b/src/script/auth/page/PhoneLogin.tsx
@@ -105,30 +105,36 @@ const PhoneLogin = ({
       <IsMobile>
         <div style={{margin: 16}}>{backArrow}</div>
       </IsMobile>
+
       <Container centerText verticalCenter style={{width: '100%'}}>
         <AppAlreadyOpen />
+
         <Columns>
           <IsMobile not>
             <Column style={{display: 'flex'}}>
               <div style={{margin: 'auto'}}>{backArrow}</div>
             </Column>
           </IsMobile>
+
           <Column style={{flexBasis: 384, flexGrow: 0, padding: 0}}>
             <ContainerXS
               centerText
               style={{display: 'flex', flexDirection: 'column', height: 428, justifyContent: 'space-between'}}
             >
               <div>
                 <H1 center>{_(phoneLoginStrings.loginHead)}</H1>
+
                 <Form style={{marginTop: 30}} data-uie-name="login">
                   <PhoneLoginForm isFetching={isFetching} onSubmit={handleSubmit} />
+
                   {!error ? (
                     <div style={{marginTop: '4px'}}>&nbsp;</div>
                   ) : isValidationError(error) ? (
                     parseValidationErrors(error)
                   ) : (
                     parseError(error)
                   )}
+
                   {!Runtime.isDesktopApp() && (
                     <Checkbox
                       onChange={(event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/yarn.lock b/yarn.lock
@@ -3153,10 +3153,10 @@
   dependencies:
     protobufjs "6.10.2"
 
-"@wireapp/react-ui-kit@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@wireapp/react-ui-kit/-/react-ui-kit-8.0.0.tgz#f0b7d2be9fb3c5a91168759c4676f78a5320ef53"
-  integrity sha512-u2Lya4JY9Klz5M1VOzULlbt7RoLw5LkvHQ2qHwTJCPFv8r4skoDVIol3LA6esDy0mIRj2QIT+KyRldLk3c0x0g==
+"@wireapp/react-ui-kit@8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@wireapp/react-ui-kit/-/react-ui-kit-8.2.0.tgz#96e5fc2650bd74c01d3b8f2c4e1a2b6fe522c53b"
+  integrity sha512-fxGjWIQ3COvrkKBsIt2XxJosxS802zPONerQnY/1C0XIDRDvxcaLokfe90ztyVdJxX/tc/d5augXkg4otMfP5Q==
   dependencies:
     "@emotion/react" "11.9.0"
     "@types/color" "3.0.2"