fix: styled password show hide correctly

ts/components/icon/Icons.tsx

@@ -28,6 +28,7 @@ export type SessionIconType =
   | 'emoji'
   | 'error'
   | 'eye'
+  | 'eyeDisabled'
   | 'exit'
   | 'file'
   | 'fullscreen'
@@ -264,10 +265,16 @@ export const icons: Record<string, IconProps> = {
   },
   eye: {
     path:
-      'M12,3 C15.3798024,3 18.3386923,4.63249094 20.8545372,7.31605887 C21.7188737,8.23801779 22.4694995,9.22244509 23.1056644,10.2074746 C23.4900327,10.8026256 23.7538591,11.2716502 23.8944272,11.5527864 C24.0351909,11.8343139 24.0351909,12.1656861 23.8944272,12.4472136 C23.7538591,12.7283498 23.4900327,13.1973744 23.1056644,13.7925254 C22.4694995,14.7775549 21.7188737,15.7619822 20.8545372,16.6839411 C18.3386923,19.3675091 15.3798024,21 12,21 C8.62019756,21 5.66130774,19.3675091 3.1454628,16.6839411 C2.28112631,15.7619822 1.5305005,14.7775549 0.894335622,13.7925254 C0.50996726,13.1973744 0.246140906,12.7283498 0.105572809,12.4472136 C-0.0351909363,12.1656861 -0.0351909363,11.8343139 0.105572809,11.5527864 C0.246140906,11.2716502 0.50996726,10.8026256 0.894335622,10.2074746 C1.5305005,9.22244509 2.28112631,8.23801779 3.1454628,7.31605887 C5.66130774,4.63249094 8.62019756,3 12,3 Z M12,5 C9.25480244,5 6.77619226,6.36750906 4.6045372,8.68394113 C3.82824869,9.51198221 3.149187,10.4025549 2.57441438,11.2925254 C2.41127724,11.5451249 2.26658862,11.7823697 2.14071218,12 C2.26658862,12.2176303 2.41127724,12.4548751 2.57441438,12.7074746 C3.149187,13.5974451 3.82824869,14.4880178 4.6045372,15.3160589 C6.77619226,17.6324909 9.25480244,19 12,19 C14.7451976,19 17.2238077,17.6324909 19.3954628,15.3160589 C20.1717513,14.4880178 20.850813,13.5974451 21.4255856,12.7074746 C21.5887228,12.4548751 21.7334114,12.2176303 21.8592878,12 C21.7334114,11.7823697 21.5887228,11.5451249 21.4255856,11.2925254 C20.850813,10.4025549 20.1717513,9.51198221 19.3954628,8.68394113 C17.2238077,6.36750906 14.7451976,5 12,5 Z M12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 Z M12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10',
-    viewBox: '0 3 24 18',
+      'M11.4395 14.2829C18.0701 14.2829 22.5477 8.93795 22.5477 7.28377C22.5477 5.62593 18.0634 0.287598 11.4395 0.287598C4.90528 0.287598 0.326172 5.62593 0.326172 7.28377C0.326172 8.93795 4.89865 14.2829 11.4395 14.2829ZM11.4395 12.7315C6.26586 12.7315 2.15774 8.41098 2.15774 7.28377C2.15774 6.33889 6.26586 1.83902 11.4395 1.83902C16.5933 1.83902 20.7162 6.33889 20.7162 7.28377C20.7162 8.41098 16.5933 12.7315 11.4395 12.7315ZM11.441 11.6438C13.8644 11.6438 15.8061 9.65724 15.8061 7.28377C15.8061 4.8515 13.8644 2.92821 11.441 2.92821C9.00727 2.92821 7.05597 4.85005 7.0626 7.28377C7.07587 9.65724 9.00727 11.6438 11.441 11.6438ZM11.4381 8.69627C10.6523 8.69627 10.0181 8.05627 10.0181 7.28377C10.0181 6.50468 10.6523 5.8742 11.4381 5.8742C12.2216 5.8742 12.8572 6.50468 12.8572 7.28377C12.8572 8.05627 12.2216 8.69627 11.4381 8.69627Z',
+    viewBox: '0 0 23 15',
     ratio: 1,
   },
+  eyeDisabled: {
+    path:
+      'M37.2311 55.2362C40.8837 55.2362 44.2307 54.59 47.2611 53.5356L44.7002 50.9801C42.3569 51.6978 39.8927 52.136 37.2311 52.136C24.3197 52.136 13.8553 41.2183 13.8553 38.4565C13.8553 37.0887 17.499 32.5222 23.281 29.0523L20.8325 26.634C14.2928 30.6731 10.4238 36.0871 10.4238 38.4565C10.4238 42.4409 21.5812 55.2362 37.2311 55.2362ZM37.2311 21.6767C33.8281 21.6767 30.7273 22.2606 27.8424 23.2155L30.4407 25.8041C32.5926 25.1486 34.8107 24.7684 37.2311 24.7684C50.1389 24.7684 60.5819 36.1262 60.5819 38.4565C60.5819 40.0482 57.1583 44.3119 51.7428 47.6281L54.1496 50.0299C60.3648 46.0158 64.0343 40.7635 64.0343 38.4565C64.0343 34.4512 53.0846 21.6767 37.2311 21.6767ZM37.2311 49.4163C38.9769 49.4163 40.5933 48.9908 42.034 48.2731L27.335 33.6096C26.5991 35.0638 26.1977 36.7017 26.1977 38.4565C26.227 44.4236 31.0844 49.4163 37.2311 49.4163ZM47.3017 42.7387C47.8961 41.4256 48.2437 39.9745 48.2437 38.4565C48.2437 32.3229 43.3358 27.4966 37.2311 27.4966C35.6848 27.4966 34.2471 27.8141 32.9355 28.3823L47.3017 42.7387ZM52.4995 55.4089C53.0906 56.0031 54.0194 56.0446 54.6314 55.4089C55.2728 54.7524 55.227 53.8715 54.6314 53.2815L21.8358 20.5724C21.2446 19.9866 20.2786 19.9782 19.6789 20.5724C19.1085 21.1458 19.1085 22.1305 19.6789 22.7039L52.4995 55.4089Z',
+    viewBox: '0 0 75 76',
+    ratio: 0.9868421053,
+  },
   exit: {
     path:
       'M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z',

ts/components/icon/SessionIcon.tsx

@@ -129,10 +129,9 @@ const Svg = memo(styled.svg<StyledSvgProps>`
   ${props => animation(props)};
   border-radius: ${props => props.borderRadius};
   background-color: ${props =>
-    props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'};
-  border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
+    props.backgroundColor ? props.backgroundColor : 'var(--button-icon-background-color)'};
   filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
-  fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')};
+  fill: ${props => (props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)')};
   padding: ${props => (props.iconPadding ? props.iconPadding : '')};
   transition: inherit;
 `);
@@ -145,7 +144,7 @@ const SessionSvg = (
     dataTestId?: string;
   }
 ) => {
-  const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
+  const colorSvg = props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)';
   const pathArray = props.path instanceof Array ? props.path : [props.path];
   const propsToPick = {
     width: props.width,

ts/components/icon/SessionIconButton.tsx

@@ -86,7 +86,7 @@ const SessionIconButtonInner = forwardRef<HTMLDivElement, SProps>((props, ref) =
       onClick={clickHandler}
       style={{ ...style, display: isHidden ? 'none' : 'flex', margin: margin || '' }}
       tabIndex={tabIndex}
-      onKeyPress={keyPressHandler}
+      onKeyDown={keyPressHandler}
       data-testid={dataTestId}
     >
       <SessionIcon

ts/components/inputs/SessionInput.tsx

@@ -67,14 +67,35 @@ const ErrorItem = (props: { id: string; error: string }) => {
   );
 };
 
-const ShowHideButton = (props: { toggleForceShow: Noop }) => {
+const ShowHideButton = (props: { forceShow: boolean; toggleForceShow: Noop }) => {
   const htmlDirection = useHTMLDirection();
   const position =
     htmlDirection === 'ltr' ? { right: 'var(--margins-md)' } : { left: 'var(--margins-md)' };
 
+  if (props.forceShow) {
+    return (
+      <SessionIconButton
+        iconType={'eyeDisabled'}
+        iconColor={'var(--text-primary-color)'}
+        iconSize="huge"
+        iconPadding="1.25px"
+        onClick={props.toggleForceShow}
+        style={{
+          marginTop: '-0.5px',
+          marginRight: '-5px',
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          ...position,
+        }}
+      />
+    );
+  }
+
   return (
     <SessionIconButton
-      iconType="eye"
+      iconType={'eye'}
+      iconColor={'var(--text-primary-color)'}
       iconSize="medium"
       onClick={props.toggleForceShow}
       style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', ...position }}
@@ -146,40 +167,42 @@ export const SessionInput = (props: Props) => {
       alignItems="center"
       error={Boolean(errorString)}
     >
-      <StyledInput
-        id={id}
-        type={correctType}
-        placeholder={placeholder}
-        value={value}
-        maxLength={maxLength}
-        autoFocus={autoFocus}
-        data-testid={inputDataTestId}
-        onChange={updateInputValue}
-        style={{ paddingInlineEnd: enableShowHide ? '30px' : undefined }}
-        // just in case onChange isn't triggered
-        onBlur={updateInputValue}
-        onKeyDown={event => {
-          if (event.key === 'Enter' && props.onEnterPressed) {
-            props.onEnterPressed(inputValue);
-            setErrorString('');
-          }
-        }}
-        initial={{
-          borderColor: errorString ? 'var(--input-border-color)' : undefined,
-        }}
-        animate={{
-          borderColor: errorString ? 'var(--danger-color)' : undefined,
-        }}
-        transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
-      />
-
-      {enableShowHide && (
-        <ShowHideButton
-          toggleForceShow={() => {
-            setForceShow(!forceShow);
+      <Flex container={true} width="100%" alignItems="center" style={{ position: 'relative' }}>
+        <StyledInput
+          id={id}
+          type={correctType}
+          placeholder={placeholder}
+          value={value}
+          maxLength={maxLength}
+          autoFocus={autoFocus}
+          data-testid={inputDataTestId}
+          onChange={updateInputValue}
+          style={{ paddingInlineEnd: enableShowHide ? '30px' : undefined }}
+          // just in case onChange isn't triggered
+          onBlur={updateInputValue}
+          onKeyDown={event => {
+            if (event.key === 'Enter' && props.onEnterPressed) {
+              props.onEnterPressed(inputValue);
+              setErrorString('');
+            }
+          }}
+          initial={{
+            borderColor: errorString ? 'var(--input-border-color)' : undefined,
+          }}
+          animate={{
+            borderColor: errorString ? 'var(--danger-color)' : undefined,
           }}
+          transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
         />
-      )}
+        {enableShowHide && (
+          <ShowHideButton
+            forceShow={forceShow}
+            toggleForceShow={() => {
+              setForceShow(!forceShow);
+            }}
+          />
+        )}
+      </Flex>
 
       {ctaButton || errorString ? <SpacerMD /> : null}
       {errorString ? <ErrorItem id={id} error={errorString} /> : null}