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

Port e09f9f885e3d2859f495d5e5e6107bba9bde3b5a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/styles/components.scss      | 16 +++++++++-------
 .../glitch/styles/mastodon-light/diff.scss      | 17 +++++++----------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 70f950f3ca..e450b2c5c3 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -4098,7 +4098,7 @@ input.glitch-setting-text {
 
   &__wrapper {
     background: $white;
-    border: 1px solid $ui-secondary-color;
+    border: 1px solid var(--background-border-color);
     margin-bottom: 10px;
     border-radius: 4px;
 
@@ -6747,9 +6747,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;
@@ -6806,6 +6807,7 @@ a.status-card {
 .report-modal {
   width: 90vw;
   max-width: 700px;
+  border: 1px solid var(--background-border-color);
 }
 
 .report-dialog-modal {
@@ -7029,7 +7031,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;
@@ -7087,7 +7089,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 {
@@ -7098,7 +7100,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;
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 73f3689066..850a67dd2c 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/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;
 }