From 55e949369e5016e0580b5e108748ca014c88aa8f Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Mon, 7 Nov 2022 10:34:18 +0100
Subject: [PATCH] Fix light theme issues with the favourite modal and some
 background colors (#1902)

* Fix favourite modal styling in glitch-soc light theme

* Fix unnecessary difference between glitch-soc's light theme and upstream's
---
 .../features/ui/components/favourite_modal.js       | 10 +++++-----
 .../flavours/glitch/styles/components/modal.scss    | 13 ++++---------
 .../flavours/glitch/styles/mastodon-light/diff.scss |  2 +-
 app/javascript/flavours/glitch/styles/rtl.scss      |  3 +--
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js
index 4d02be29b5..d7f671d581 100644
--- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js
@@ -58,11 +58,11 @@ class FavouriteModal extends ImmutablePureComponent {
     const { status, intl } = this.props;
 
     return (
-      <div className='modal-root__modal favourite-modal'>
-        <div className='favourite-modal__container'>
+      <div className='modal-root__modal boost-modal'>
+        <div className='boost-modal__container'>
           <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
-            <div className='favourite-modal__status-header'>
-              <div className='favourite-modal__status-time'>
+            <div className='boost-modal__status-header'>
+              <div className='boost-modal__status-time'>
                 <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
                   <VisibilityIcon visibility={status.get('visibility')} />
                   <RelativeTimestamp timestamp={status.get('created_at')} />
@@ -90,7 +90,7 @@ class FavouriteModal extends ImmutablePureComponent {
           </div>
         </div>
 
-        <div className='favourite-modal__action-bar'>
+        <div className='boost-modal__action-bar'>
           <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div>
           <Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
         </div>
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 711d4d5b29..ab86091700 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -416,7 +416,6 @@
 }
 
 .boost-modal,
-.favourite-modal,
 .confirmation-modal,
 .report-modal,
 .actions-modal,
@@ -461,7 +460,7 @@
   }
 }
 
-.favourite-modal .status-direct {
+.boost-modal .status-direct {
   background-color: inherit;
 }
 
@@ -478,8 +477,7 @@
   }
 }
 
-.boost-modal__container,
-.favourite-modal__container {
+.boost-modal__container {
   overflow-x: scroll;
   padding: 10px;
 
@@ -490,7 +488,6 @@
 }
 
 .boost-modal__action-bar,
-.favourite-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
 .block-modal__action-bar {
@@ -512,13 +509,11 @@
   }
 }
 
-.boost-modal__status-header,
-.favourite-modal__status-header {
+.boost-modal__status-header {
   font-size: 15px;
 }
 
-.boost-modal__status-time,
-.favourite-modal__status-time {
+.boost-modal__status-time {
   float: right;
   font-size: 14px;
 }
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index f0b8a320b6..37a49ce9f1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -382,7 +382,7 @@ html {
 .picture-in-picture__header,
 .picture-in-picture__footer,
 .reactions-bar__item {
-  background: $ui-base-color;
+  background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
 }
 
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index 2419691cd0..c14c07cb90 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -41,8 +41,7 @@ body.rtl {
     margin-left: 4px;
   }
 
-  .boost-modal__status-time,
-  .favourite-modal__status-time {
+  .boost-modal__status-time {
     float: left;
   }