From 71ca8dc2d7440432bc64907db2361da3d7bee4c5 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 18 Oct 2024 21:56:43 +0300
Subject: [PATCH] Update the text area colors (#5034)

* Update the text area colors

* Add disabled styles
---
 frontend/src/components/VButton.vue                | 14 ++++++++++++++
 .../components/VContentReport/VReportDescForm.vue  |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index e102ed4af07..c7990ec7fb2 100644
--- 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
index cb09984ac0f..5ecd81dc340 100644
--- 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"