Update the text area colors (#5034)

* Update the text area colors * Add disabled styles
WordPress · Oct 18, 2024 · 71ca8dc · 71ca8dc
1 parent 9c22fce
commit 71ca8dc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
@@ -306,6 +306,20 @@ a.button {
   @apply border-tx bg-tertiary text-over-dark hover:border-hover;
 }
 
+.filled-pink-8[aria-disabled="true"],
+.filled-gray[aria-disabled="true"],
+.filled-dark[aria-disabled="true"] {
+  @apply bg-disabled;
+}
+.filled-pink-8[aria-disabled="true"],
+.filled-dark[aria-disabled="true"] {
+  @apply text-over-negative;
+}
+.filled-gray[aria-disabled="true"],
+.filled-white[aria-disabled="true"] {
+  @apply text-disabled;
+}
+
 .icon-only {
   @apply flex-none;
 }

diff --git a/frontend/src/components/VContentReport/VReportDescForm.vue b/frontend/src/components/VContentReport/VReportDescForm.vue
@@ -40,7 +40,7 @@ const isRequired = computed(() => props.reason === OTHER)
     <textarea
       id="description"
       v-model="text"
-      class="mt-2 h-20 w-full border border-default p-2 placeholder-gray-8"
+      class="placeholder-text-secondary mt-2 h-20 w-full rounded-sm border border-tertiary bg-default p-2 text-default focus-visible:border-focus disabled:bg-surface"
       :placeholder="$t(`mediaDetails.contentReport.form.${reason}.placeholder`)"
       :required="isRequired"
       :minlength="isRequired ? 20 : 0"