Sorin/yoext 1600/dark theme uat

packages/yoroi-extension/app/components/common/NumericInputRP.js

@@ -527,8 +527,9 @@ class AmountInputRevamp extends Component<AmountInputProps> {
             fontSize: '24px',
             lineHeight: '32px',
             marginTop: '-16px',
+            color: 'ds.text_gray_medium',
           },
-          '& input::placeholder': { color: 'grayscale.600' },
+          '& input::placeholder': { color: 'ds.text_gray_medium' },
         }}
       >
         <NumericInputRP {...this.props} />

packages/yoroi-extension/app/components/common/TextField.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import type { ElementRef, Node } from 'react';
 import { IconButton, InputAdornment, TextField as TextFieldBase, useTheme, styled } from '@mui/material';
-import { ReactComponent as ErrorIcon } from '../../assets/images/forms/error.inline.svg';
 import { ReactComponent as DoneIcon } from '../../assets/images/forms/done.inline.svg';
 import { ReactComponent as EyeIcon } from '../../assets/images/forms/password-eye-close.inline.svg';
 import { ReactComponent as CloseEyeIcon } from '../../assets/images/forms/password-eye.inline.svg';
@@ -121,7 +120,7 @@ function TextField({
           </InputAdornment>
         ) : type === 'password' ? (
           <InputAdornment position="end" sx={{ minWidth: '52px', display: 'flex', justifyContent: 'flex-end' }}>
-            {Boolean(error) === true && !isRevampTheme ? <ErrorIcon /> : done === true && !isRevampTheme ? <DoneIcon /> : null}
+            {done === true && !isRevampTheme ? <DoneIcon /> : null}
             <SIconButton
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
@@ -137,16 +136,14 @@ function TextField({
           </InputAdornment>
         ) : QRHandler ? (
           <InputAdornment position="end" sx={{ minWidth: '52px', display: 'flex', justifyContent: 'flex-end' }}>
-            {Boolean(error) === true && !isRevampTheme ? <ErrorIcon /> : done === true && !isRevampTheme ? <DoneIcon /> : null}
+            {done === true && !isRevampTheme ? <DoneIcon /> : null}
             <SIconButton aria-label="QR Code Scanner" onClick={QRHandler} edge="end">
               <QRLogo />
             </SIconButton>
           </InputAdornment>
         ) : (
           <InputAdornment position="end">
-            {Boolean(error) === true && !isRevampTheme ? (
-              <ErrorIcon id="input-error-icon" />
-            ) : (done === true && !isRevampTheme) || greenCheck ? (
+            {(done === true && !isRevampTheme) || greenCheck ? (
               <DoneIcon id="input-done-icon" />
             ) : null}
           </InputAdornment>

packages/yoroi-extension/app/components/profile/terms-of-use/OptForAnalyticsForm.js

@@ -11,7 +11,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { ReactComponent as AnalyticsIllustration } from '../../../assets/images/analytics-illustration.inline.svg';
 import { ReactComponent as YesIcon } from '../../../assets/images/yes.inline.svg';
 import { ReactComponent as NoIcon } from '../../../assets/images/no.inline.svg';
-import { Box, Typography } from '@mui/material';
+import { Box, Link, Typography } from '@mui/material';
 import { RevampSwitch } from '../../widgets/Switch';
 import environment from '../../../environment';
 
@@ -180,14 +180,13 @@ export default class OptForAnalyticsForm extends Component<Props, State> {
               marginTop: '15px',
             }}
           >
-            <a
+            <Link
               target="_blank"
               rel="noreferrer"
               href={environment.externalPrivacyPolicyURL()}
-              className={styles.learnMore}
             >
               {intl.formatMessage(messages.privacyNotice)}
-            </a>
+            </Link>
           </Box>
         </Box>
       ) : null}
@@ -201,14 +200,13 @@ export default class OptForAnalyticsForm extends Component<Props, State> {
               justifyContent: isStartupScreen ? 'center' : 'flex-start',
             }}
           >
-            <a
+            <Link
               target="_blank"
               rel="noreferrer"
               href="https://emurgohelpdesk.zendesk.com/hc/en-us/articles/7594394140303-What-s-user-insights-"
-              className={styles.learnMore}
             >
               {intl.formatMessage(messages.learnMore)}
-            </a>
+            </Link>
           </Box>
 
           {isSettingsScreen ? (

packages/yoroi-extension/app/components/profile/terms-of-use/OptForAnalyticsForm.scss

@@ -12,11 +12,6 @@
     letter-spacing: 0px;
   }
 
-  .learnMore {
-    color: #4b6dde;
-    text-decoration: none;
-  }
-
   .skip {
     text-align: center;
     cursor: pointer;

packages/yoroi-extension/app/components/settings/categories/SupportSettings.js

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import type { Node, ComponentType } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Link, Typography } from '@mui/material';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { withLayout } from '../../../styles/context/layout';
@@ -66,23 +66,23 @@ class SupportSettings extends Component<Props & InjectedProps> {
     const { intl } = this.context;
 
     const faqLink = (
-      <a
+      <Link
         href={intl.formatMessage(globalMessages.faqLinkUrl)}
         onClick={event => onExternalLinkClick(event)}
         id="settings:support-faq-link"
       >
         {intl.formatMessage(messages.faqLink)}
-      </a>
+      </Link>
     );
 
     const supportRequestLink = (
-      <a
+      <Link
         href="https://emurgohelpdesk.zendesk.com/hc/en-us/requests/new?ticket_form_id=360013330335"
         onClick={event => onExternalLinkClick(event)}
         id="settings:support-requestSupport-link"
       >
         {intl.formatMessage(messages.supportRequestLink)}
-      </a>
+      </Link>
     );
 
     const downloadLogsLink = (
@@ -135,12 +135,6 @@ class SupportSettings extends Component<Props & InjectedProps> {
                 </Typography>
                 <Typography
                   component="div"
-                  sx={{
-                    '& a': {
-                      color: 'ds.primary_500',
-                      textDecoration: isRevampLayout ? 'none' : 'underline',
-                    },
-                  }}
                   color="ds.text_gray_medium"
                   variant={isRevampLayout ? 'body1' : 'body2'}
                 >

packages/yoroi-extension/app/components/topbar/SidebarRevamp.js

@@ -81,9 +81,13 @@ export default class SidebarRevamp extends Component<Props> {
           target="_blank"
           rel="noreferrer"
           sx={{
-            color: 'grayscale.50',
-            bgcolor: 'primary.700',
-            '&:hover': { bgcolor: 'primary.800' },
+            color: 'ds.bg_color_contrast_high',
+            bgcolor: 'ds.el_primary_max',
+            '&:hover': {
+              bgcolor: 'ds.primary_800',
+              color: 'ds.bg_color_contrast_min',
+              textDecoration: 'none',
+            },
           }}
         >
           {intl.formatMessage(globalMessages.sidebarFaq)}