Make iron-autogrow-textarea have a white background in sshEditor & gpgEditor

Fixes an issue where the background was grey. This was incorrect
behaviour and we fix this by setting the background to white.

Release-Notes: Make iron-autogrow-textarea have a white background in sshEditor & gpgEditor
Change-Id: I6e131fb8a625915e9bac27335bf093c414e6a0f8

2 files changed, 13 insertions, 12 deletions

diff --git a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
index 3c54c59440..9780494633 100644
--- a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
-import '../../../styles/gr-form-styles';
 import '../../shared/gr-button/gr-button';
 import '../../shared/gr-copy-clipboard/gr-copy-clipboard';
 import '../../shared/gr-overlay/gr-overlay';
@@ -26,8 +25,8 @@ import {IronAutogrowTextareaElement} from '@polymer/iron-autogrow-textarea';
 import {getAppContext} from '../../../services/app-context';
 import {css, html, LitElement} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators';
-import {sharedStyles} from '../../../styles/shared-styles';
 import {formStyles} from '../../../styles/gr-form-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
 import {assertIsDefined} from '../../../utils/common-util';
 import {BindValueChangeEvent} from '../../../types/events';
 import {fire} from '../../../utils/event-util';
@@ -63,8 +62,8 @@ export class GrGpgEditor extends LitElement {
   private readonly restApiService = getAppContext().restApiService;
 
   static override styles = [
-    sharedStyles,
     formStyles,
+    sharedStyles,
     css`
       .keyHeader {
         width: 9em;
@@ -84,6 +83,9 @@ export class GrGpgEditor extends LitElement {
       #existing {
         margin-bottom: var(--spacing-l);
       }
+      iron-autogrow-textarea {
+        background-color: var(--view-background-color);
+      }
     `,
   ];
 
diff --git a/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.ts b/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.ts
index 72c87b26b2..daed7d2850 100644
--- a/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.ts
@@ -15,25 +15,21 @@
  * limitations under the License.
  */
 import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
-import '../../../styles/gr-form-styles';
 import '../../shared/gr-button/gr-button';
 import '../../shared/gr-copy-clipboard/gr-copy-clipboard';
 import '../../shared/gr-overlay/gr-overlay';
-import '../../../styles/shared-styles';
 import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom';
 import {SshKeyInfo} from '../../../types/common';
 import {GrButton} from '../../shared/gr-button/gr-button';
 import {IronAutogrowTextareaElement} from '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
 import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
 import {getAppContext} from '../../../services/app-context';
-import {LitElement, html} from 'lit';
+import {LitElement, css, html, PropertyValues} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators';
+import {formStyles} from '../../../styles/gr-form-styles';
 import {sharedStyles} from '../../../styles/shared-styles';
-import {css} from 'lit';
-import {BindValueChangeEvent} from '../../../types/events';
 import {fire} from '../../../utils/event-util';
-import {PropertyValues} from 'lit';
-import {formStyles} from '../../../styles/gr-form-styles';
+import {BindValueChangeEvent} from '../../../types/events';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -69,8 +65,8 @@ export class GrSshEditor extends LitElement {
 
   static override get styles() {
     return [
-      sharedStyles,
       formStyles,
+      sharedStyles,
       css`
         .statusHeader {
           width: 4em;
@@ -102,6 +98,9 @@ export class GrSshEditor extends LitElement {
           min-width: 27em;
           width: auto;
         }
+        iron-autogrow-textarea {
+          background-color: var(--view-background-color);
+        }
       `,
     ];
   }
@@ -170,8 +169,8 @@ export class GrSshEditor extends LitElement {
               <iron-autogrow-textarea
                 id="newKey"
                 autocomplete="on"
-                .bindValue=${this.newKey}
                 placeholder="New SSH Key"
+                .bindValue=${this.newKey}
                 @bind-value-changed=${(e: BindValueChangeEvent) => {
                   this.newKey = e.detail.value;
                 }}