CB-5640-update-fileds-ui-for-dark-and-light-themes (#2985)

* CB-5640 adds colors to inputs according to design (disabled, readonly) * CB-5640 merges disable logic into readonly * CB-5640 adds aria-disabled prop and styles to input * CB-5640 adds more styles for input * CB-5640 pr fixes * CB-5640 reverts logic * CB-5640 fixes styles * CB-5640 fixes styles * CB-5640 merges disable logic into readonly for all of the inputs all over the app * CB-5640 reverts form-controls styles * CB-5640 reverts form-controls styles * CB-5640 makes disabled design according to the figma * CB-5640 makes checkbox dissapear * CB-5640 cleanup --------- Co-authored-by: Evgenia <[email protected]>
dbeaver · Oct 10, 2024 · 1a51928 · 1a51928
1 parent 3a85f1a
commit 1a51928
Show file tree

Hide file tree

Showing 19 changed files with 45 additions and 64 deletions.
diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
@@ -116,7 +116,7 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
         autoComplete="off"
         className={s(styles, { inputField: true })}
         placeholder={placeholder}
-        disabled={disabled}
+        readOnly={disabled}
         name={name}
         value={value}
         onChange={handleChange}

diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css
@@ -47,10 +47,8 @@
   align-items: center;
   justify-content: center;
 }
-
 .input[disabled] + .iconContainer {
   cursor: auto;
-  opacity: 0.8;
 }
 .input:not(:only-child) {
   padding-right: 32px !important;

diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -221,8 +221,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         placeholder={passwordSavedMessage}
         name={property.id!}
         value={value}
-        disabled={disabled}
-        readOnly={readOnly}
+        readOnly={readOnly || disabled}
         className={className}
       >
         {property.displayName ?? ''}
@@ -243,8 +242,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         autoHide={autoHide}
         description={property.hint}
         placeholder={passwordSavedMessage}
-        disabled={disabled}
-        readOnly={readOnly}
+        readOnly={readOnly || disabled}
         autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
         className={className}
         canShowPassword={canShowPassword}
@@ -266,8 +264,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
       defaultValue={defaultValue}
       description={property.hint}
       placeholder={passwordSavedMessage}
-      disabled={disabled}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
       className={className}
       canShowPassword={canShowPassword}

diff --git a/webapp/packages/core-theming/src/styles/_checkbox.scss b/webapp/packages/core-theming/src/styles/_checkbox.scss
@@ -19,7 +19,7 @@ $mdc-checkbox-icon-size: 16px;
     @extend .mdc-checkbox__native-control;
 
     &:disabled {
-      opacity: 0;
+      opacity: 0 !important;
     }
   }
   .theme-checkbox__background {

diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -73,26 +73,19 @@
       @include mdc-theme-prop(border-color, primary, false);
     }
 
-    &:not([data-select='true'])[readonly] {
+    &:not([data-select='true'])[readonly],
+    &:not([data-select='true'])[disabled] {
       @include mdc-theme-prop(color, input-color-readonly, false);
       @include mdc-theme-prop(border-color, input-border-readonly, false);
       @include mdc-theme-prop(background-color, input-background-readonly, false);
       opacity: 1;
+      cursor: text;
+      pointer-events: all;
       &:-internal-autofill-selected,
       &:-internal-autofill-previewed {
         box-shadow: 0 0 0 50px $input-background-readonly inset;
       }
     }
-    &[disabled] {
-      @include mdc-theme-prop(color, input-color-disabled, false);
-      @include mdc-theme-prop(border-color, input-border-disabled, false);
-      @include mdc-theme-prop(background-color, input-background-disabled, false);
-      opacity: 1;
-      &:-internal-autofill-selected,
-      &:-internal-autofill-previewed {
-        box-shadow: 0 0 0 50px $input-background-disabled inset;
-      }
-    }
     &[data-embedded='true'] {
       &[disabled],
       &:not([data-select='true'])[readonly] {

diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss
@@ -34,9 +34,9 @@ $input-color-readonly: darken($input-color, 5%);
 $input-border: #585958;
 $input-border-disabled: darken($input-border, 10%);
 $input-border-readonly: darken($input-border, 5%);
-$input-background: $mdc-theme-secondary;
-$input-background-disabled: $input-background;
-$input-background-readonly: $input-background;
+$input-background: $mdc-theme-surface;
+$input-background-disabled: #3e3e3e;
+$input-background-readonly: #3e3e3e;
 
 $mdc-theme-text-colors: (
   dark: (

diff --git a/webapp/packages/core-theming/src/styles/main/color.pure.scss b/webapp/packages/core-theming/src/styles/main/color.pure.scss
@@ -6,7 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
-:disabled, [aria-disabled="true"] {
+:disabled,
+[aria-disabled='true'] {
   pointer-events: none;
   cursor: default;
   opacity: 0.5;

diff --git a/...ugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx b/...ugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx
@@ -23,13 +23,13 @@ export const TeamOptions: TabContainerPanelComponent<ITeamFormProps> = observer(
   return (
     <Container overflow>
       <Group small gap>
-        <InputField name="teamId" state={state.config} readOnly={state.readonly || edit} disabled={state.disabled} required tiny fill>
+        <InputField name="teamId" state={state.config} readOnly={state.readonly || edit || state.disabled} required tiny fill>
           {translate('administration_teams_team_id')}
         </InputField>
-        <InputField name="teamName" state={state.config} readOnly={state.readonly} disabled={state.disabled} tiny fill>
+        <InputField name="teamName" state={state.config} readOnly={state.readonly || state.disabled} tiny fill>
           {translate('administration_teams_team_name')}
         </InputField>
-        <Textarea name="description" state={state.config} readOnly={state.readonly} disabled={state.disabled} tiny fill>
+        <Textarea name="description" state={state.config} readOnly={state.readonly || state.disabled} tiny fill>
           {translate('administration_teams_team_description')}
         </Textarea>
       </Group>

diff --git a/...ication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx b/...ication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx
@@ -54,7 +54,7 @@ export const UserFormInfoCredentials = observer<Props>(function UserFormInfoCred
   return (
     <Container gap vertical>
       <GroupTitle keepSize>{translate('authentication_user_credentials')}</GroupTitle>
-      <InputField type="text" name="userId" state={tabState.state} readOnly={editing} disabled={disabled} keepSize tiny required>
+      <InputField type="text" name="userId" state={tabState.state} readOnly={editing || disabled} keepSize tiny required>
         {translate('authentication_user_name')}
       </InputField>
       {local && (
@@ -67,7 +67,7 @@ export const UserFormInfoCredentials = observer<Props>(function UserFormInfoCred
             autoComplete="new-password"
             placeholder={editing ? PASSWORD_PLACEHOLDER : ''}
             canShowPassword={tabState.state['password'] !== ''}
-            disabled={disabled}
+            readOnly={disabled}
             required={!editing}
             keepSize
             tiny
@@ -79,7 +79,7 @@ export const UserFormInfoCredentials = observer<Props>(function UserFormInfoCred
             type="password"
             name="passwordRepeat"
             placeholder={editing ? PASSWORD_PLACEHOLDER : ''}
-            disabled={disabled}
+            readOnly={disabled}
             required={!editing}
             canShowPassword
             keepSize

diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
@@ -51,7 +51,7 @@ export const AuthProviderForm = observer<Props>(function AuthProviderForm({ prov
               type={parameter.encryption === 'none' ? 'text' : 'password'}
               name={parameter.id}
               state={credentials.credentials}
-              disabled={authenticate}
+              readOnly={authenticate}
               canShowPassword={false}
               autoComplete={`section-authentication section-${provider.id} ${configuration?.id ?? ''} ${parameter.id}`}
             >

diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx
@@ -67,10 +67,10 @@ export const NetworkHandlerAuthForm = observer<Props>(function NetworkHandlerAut
       </GroupTitle>
       {ssh && (
         <>
-          <InputField type="text" name="userName" state={state} disabled={disabled}>
+          <InputField type="text" name="userName" state={state} readOnly={disabled}>
             {translate(`connections_network_handler_${id}_user`, 'connections_network_handler_default_user')}
           </InputField>
-          <InputField type="password" name="password" canShowPassword={false} state={state} disabled={disabled}>
+          <InputField type="password" name="password" canShowPassword={false} state={state} readOnly={disabled}>
             {passwordLabel}
           </InputField>
         </>

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx
@@ -35,8 +35,7 @@ export const AdvancedPropertiesForm = observer<Props>(function AdvancedPropertie
             min={0}
             max={MAX_KEEP_ALIVE_INTERVAL}
             name="keepAliveInterval"
-            disabled={disabled}
-            readOnly={readonly}
+            readOnly={readonly || disabled}
             title={translate('connections_connection_keep_alive_tooltip')}
             state={config}
             defaultState={DEFAULT_CONFIG}

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx
@@ -216,8 +216,7 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                 type="text"
                 name="url"
                 state={config}
-                disabled={disabled}
-                readOnly={readonly}
+                readOnly={readonly || disabled}
                 autoComplete={`section-${config.driverId || 'driver'} section-jdbc`}
               >
                 {translate('plugin_connections_connection_form_part_main_url_jdbc')}
@@ -245,7 +244,7 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
           </Group>
           <Group form gap>
             <Container wrap gap>
-              <InputField type="text" name="name" minLength={1} state={config} disabled={disabled} readOnly={readonly} required fill>
+              <InputField type="text" name="name" minLength={1} state={config} readOnly={readonly || disabled} required fill>
                 {translate('connections_connection_name')}
               </InputField>
               {!config.template && (
@@ -262,7 +261,6 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                   type="text"
                   name="folder"
                   state={config}
-                  disabled={disabled}
                   autoComplete={`section-${config.driverId || 'driver'} section-folder`}
                   autoHide
                   readOnly
@@ -273,7 +271,7 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                 </InputField>
               )}
             </Container>
-            <Textarea name="description" rows={3} state={config} disabled={disabled} readOnly={readonly}>
+            <Textarea name="description" rows={3} state={config} readOnly={readonly || disabled}>
               {translate('connections_connection_description')}
             </Textarea>
           </Group>

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx
@@ -26,19 +26,19 @@ export const ParametersForm = observer<Props>(function ParametersForm({ config,
     <Container gap>
       {!embedded && (
         <Container wrap gap>
-          <InputField type="text" name="host" state={config} disabled={disabled} readOnly={readOnly || !originLocal} small required>
+          <InputField type="text" name="host" state={config} readOnly={readOnly || !originLocal || disabled} small required>
             {translate('plugin_connections_connection_form_part_main_custom_host')}
           </InputField>
-          <InputField type="number" name="port" state={config} disabled={disabled} readOnly={readOnly || !originLocal} tiny>
+          <InputField type="number" name="port" state={config} readOnly={readOnly || !originLocal || disabled} tiny>
             {translate('plugin_connections_connection_form_part_main_custom_port')}
           </InputField>
         </Container>
       )}
-      <InputField type="text" name="databaseName" state={config} disabled={disabled} readOnly={readOnly}>
+      <InputField type="text" name="databaseName" state={config} readOnly={readOnly || disabled}>
         {translate('plugin_connections_connection_form_part_main_custom_database')}
       </InputField>
       {requiresServerName && (
-        <InputField type="text" name="serverName" state={config} disabled={disabled} readOnly={readOnly} required>
+        <InputField type="text" name="serverName" state={config} readOnly={readOnly || disabled} required>
           {translate('plugin_connections_connection_form_part_main_custom_server_name')}
         </InputField>
       )}

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
@@ -109,10 +109,10 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
             {translate('connections_network_handler_ssh_tunnel_auth_type')}
           </Combobox>
           <Container wrap gap>
-            <InputField type="text" name="host" state={handlerState.properties} disabled={disabled || !enabled} readOnly={readonly} required small>
+            <InputField type="text" name="host" state={handlerState.properties} readOnly={readonly || disabled || !enabled} required small>
               {translate('connections_network_handler_ssh_tunnel_host')}
             </InputField>
-            <InputField type="number" name="port" state={handlerState.properties} disabled={disabled || !enabled} readOnly={readonly} required tiny>
+            <InputField type="number" name="port" state={handlerState.properties} readOnly={readonly || disabled || !enabled} required tiny>
               {translate('connections_network_handler_ssh_tunnel_port')}
             </InputField>
           </Container>
@@ -121,8 +121,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               type="text"
               name="userName"
               state={handlerState}
-              disabled={disabled || !enabled}
-              readOnly={readonly}
+              readOnly={readonly || disabled || !enabled}
               required={handlerState.savePassword}
               tiny
               fill
@@ -134,8 +133,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               name="password"
               autoComplete={isSafari ? 'section-connection-ssh-authentication section-ssh password' : 'new-password'}
               state={handlerState}
-              disabled={disabled || !enabled}
-              readOnly={readonly}
+              readOnly={readonly || disabled || !enabled}
               required={!passwordSaved && !keyAuth && handlerState.savePassword}
               description={passwordSaved ? translate('ui_processing_saved') : undefined}
               tiny
@@ -171,8 +169,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
                   type="number"
                   name="aliveInterval"
                   state={handlerState.properties}
-                  disabled={disabled || !enabled}
-                  readOnly={readonly}
+                  readOnly={readonly || disabled || !enabled}
                   labelTooltip={aliveIntervalLabel}
                   tiny
                 >
@@ -182,8 +179,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
                   type="number"
                   name="sshConnectTimeout"
                   state={handlerState.properties}
-                  disabled={disabled || !enabled}
-                  readOnly={readonly}
+                  readOnly={readonly || disabled || !enabled}
                   labelTooltip={connectTimeoutLabel}
                   tiny
                 >

diff --git a/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx b/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx
@@ -115,7 +115,7 @@ export const SaveScriptDialog: DialogComponent<Payload, ISaveScriptDialogResult>
               name="name"
               state={state}
               error={!state.valid}
-              disabled={state.projectId === null}
+              readOnly={state.projectId === null}
               description={errorMessage}
               onChange={state.validate}
             >

diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx
@@ -130,8 +130,7 @@ export const Setting = observer<Props>(function Setting({ source, setting }) {
       labelTooltip={description}
       value={value}
       description={description}
-      disabled={disabled}
-      readOnly={readOnly}
+      readOnly={readOnly || disabled}
       small
       onChange={handleChange}
     >

diff --git a/...ackages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx b/...ackages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx
@@ -35,7 +35,7 @@ export const ChangePassword = observer<Props>(function ChangePassword({ state, d
           type="password"
           name="oldPassword"
           state={state}
-          disabled={disabled}
+          readOnly={disabled}
           mapValue={(value?: string) => value?.trim() ?? ''}
           small
           required
@@ -48,7 +48,7 @@ export const ChangePassword = observer<Props>(function ChangePassword({ state, d
           name="password"
           autoComplete="new-password"
           state={state}
-          disabled={disabled}
+          readOnly={disabled}
           mapValue={(value?: string) => value?.trim() ?? ''}
           small
           required
@@ -60,7 +60,7 @@ export const ChangePassword = observer<Props>(function ChangePassword({ state, d
           type="password"
           name="repeatedPassword"
           state={state}
-          disabled={disabled}
+          readOnly={disabled}
           mapValue={(value?: string) => value?.trim() ?? ''}
           small
           required

diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx
@@ -30,13 +30,13 @@ export const UserProfileFormInfo: TabContainerPanelComponent<UserProfileFormProp
         <Group form gap>
           <GroupTitle>{translate('plugin_user_profile_info')}</GroupTitle>
           <Container wrap gap>
-            <InputField type="text" name="userId" minLength={1} state={tabState.state} disabled={disabled} readOnly required tiny fill>
+            <InputField type="text" name="userId" minLength={1} state={tabState.state} readOnly required tiny fill>
               {translate('plugin_user_profile_info_id')}
             </InputField>
-            <InputField type="text" name="displayName" minLength={1} state={tabState.state} disabled={disabled} readOnly required tiny fill>
+            <InputField type="text" name="displayName" minLength={1} state={tabState.state} readOnly required tiny fill>
               {translate('plugin_user_profile_info_displayName')}
             </InputField>
-            <InputField type="text" name="authRole" state={tabState.state} disabled={disabled} autoHide readOnly tiny fill>
+            <InputField type="text" name="authRole" state={tabState.state} readOnly autoHide tiny fill>
               {translate('authentication_user_role')}
             </InputField>
           </Container>