From e09f9f885e3d2859f495d5e5e6107bba9bde3b5a Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 10 Sep 2024 12:33:55 -0500
Subject: [PATCH] Fix alt text modal styling (#31844)

---
 app/javascript/styles/mastodon-light/diff.scss | 17 +++++++----------
 app/javascript/styles/mastodon/components.scss | 16 +++++++++-------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 1df556b42a4..c0cabf837c4 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -159,8 +159,8 @@
 .error-modal,
 .onboarding-modal,
 .compare-history-modal,
-.report-modal__comment .setting-text__wrapper,
-.report-modal__comment .setting-text,
+.report-modal__comment,
+.report-modal__comment,
 .announcements,
 .picture-in-picture__header,
 .picture-in-picture__footer,
@@ -169,6 +169,11 @@
   border: 1px solid var(--background-border-color);
 }
 
+.setting-text__wrapper,
+.setting-text {
+  border: 1px solid var(--background-border-color);
+}
+
 .reactions-bar__item:hover,
 .reactions-bar__item:focus,
 .reactions-bar__item:active {
@@ -198,14 +203,6 @@
   color: $white;
 }
 
-.report-modal__comment {
-  border-right-color: lighten($ui-base-color, 8%);
-}
-
-.report-modal__container {
-  border-top-color: lighten($ui-base-color, 8%);
-}
-
 .column-settings__hashtags .column-select__option {
   color: $white;
 }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 570c006faa8..382491eb743 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3911,7 +3911,7 @@ $ui-header-logo-wordmark-width: 99px;
 
   &__wrapper {
     background: $white;
-    border: 1px solid $ui-secondary-color;
+    border: 1px solid var(--background-border-color);
     margin-bottom: 10px;
     border-radius: 4px;
 
@@ -6298,9 +6298,10 @@ a.status-card {
 .report-modal,
 .actions-modal,
 .compare-history-modal {
-  background: lighten($ui-secondary-color, 8%);
-  color: $inverted-text-color;
-  border-radius: 8px;
+  background: var(--background-color);
+  color: $primary-text-color;
+  border-radius: 4px;
+  border: 1px solid var(--background-border-color);
   overflow: hidden;
   max-width: 90vw;
   width: 480px;
@@ -6344,6 +6345,7 @@ a.status-card {
 .report-modal {
   width: 90vw;
   max-width: 700px;
+  border: 1px solid var(--background-border-color);
 }
 
 .report-dialog-modal {
@@ -6567,7 +6569,7 @@ a.status-card {
 
 .report-modal__container {
   display: flex;
-  border-top: 1px solid $ui-secondary-color;
+  border-top: 1px solid var(--background-border-color);
 
   @media screen and (width <= 480px) {
     flex-wrap: wrap;
@@ -6625,7 +6627,7 @@ a.status-card {
 
 .report-modal__comment {
   padding: 20px;
-  border-inline-end: 1px solid $ui-secondary-color;
+  border-inline-end: 1px solid var(--background-border-color);
   max-width: 320px;
 
   p {
@@ -6636,7 +6638,7 @@ a.status-card {
 
   .setting-text-label {
     display: block;
-    color: $inverted-text-color;
+    color: $secondary-text-color;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 10px;