Minor UI fixes for Issue page in dark mode

Details:

1. Add bg and text color for input element to override usersagent
stylesheet. I think not needed if we use `prefers-color-scheme`,
but for now this is opt in preference we need to override it
2. Fix bg color overflowing on comment form
3. Fix card header color
4. Fix Upload design text color

app/assets/stylesheets/components/design_management/design.scss

@@ -151,6 +151,7 @@
 .design-dropzone-card {
   transition: border $general-hover-transition-duration $general-hover-transition-curve;
+  color: $gl-text-color;
   &:focus,
   &:active {

app/assets/stylesheets/framework/forms.scss

@@ -4,6 +4,8 @@ textarea {
 input {
   border-radius: $border-radius-base;
+  color: $gl-text-color;
+  background-color: $input-bg;
 }
 input[type='text'].danger {

app/assets/stylesheets/framework/timeline.scss

@@ -27,7 +27,13 @@
 .timeline-entry {
   color: $gl-text-color;
-  background-color: $white;
+
+  // [dark-theme]: only give background color to actual notes
+  // in the timeline, the note form textarea has a background
+  // of it's own
+  &:not(.note-form) {
+    background-color: $white;
+  }
   .timeline-entry-inner {
     position: relative;

app/assets/stylesheets/framework/variables.scss

@@ -479,9 +479,9 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 $added: #63c363;
 $deleted: #f77;
 $line-added: #ecfdf0;
-$line-added-dark: #c7f0d2;
+$line-added-dark: #c7f0d2 !default;
 $line-removed: #fbe9eb;
-$line-removed-dark: #fac5cd;
+$line-removed-dark: #fac5cd !default;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;

app/assets/stylesheets/framework/variables_overrides.scss

@@ -14,7 +14,7 @@ $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
 $table-border-color: $gray-200;
 $card-border-color: $border-color;
-$card-cap-bg: $gray-light;
+$card-cap-bg: $gray-light !default;
 $success: $green-500;
 $info: $blue-500;
 $warning: $orange-500;

app/assets/stylesheets/pages/note_form.scss

@@ -62,7 +62,8 @@
     background-color: $white;
     &.is-focused {
-      @extend .form-control:focus;
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-box-shadow;
       .comment-toolbar,
       .nav-links {

app/assets/stylesheets/themes/_dark.scss

@@ -103,6 +103,8 @@ $input-focus-bg: $gray-100;
 $input-color: $gray-900;
 $input-group-addon-bg: $gray-900;
+$card-cap-bg: $gray-50;
+
 $tooltip-bg: $gray-800;
 $tooltip-color: $gray-10;
@@ -118,6 +120,11 @@ $issues-today-border: #333a40;
 $yiq-text-dark: $gray-50;
 $yiq-text-light: $gray-950;
+// Commit Diff Colors
+$line-added-dark: $green-200;
+$line-removed-dark: $red-200;
+
+// Misc component overrides that should live elsewhere
 .gl-label {
   filter: brightness(0.9) contrast(1.1);
 }

changelogs/unreleased/psi-dark-mode-issue-fixes.yml

+---
+title: Minor UI fixes for Issue page in dark mode
+merge_request: 35395
+author:
+type: fixed