From 6e62f894e375f8c9b490912bcc5d7f70993ae053 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 4 Apr 2022 16:51:29 -0400
Subject: [PATCH] Fix sensitive content bugs

---
 app/soapbox/components/media_gallery.js             | 10 +++++-----
 app/soapbox/components/ui/button/useButtonStyles.ts |  3 ++-
 app/styles/components/spoiler-button.scss           |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 2164031a8..42feafa02 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -16,7 +16,6 @@ import { truncateFilename } from 'soapbox/utils/media';
 import { isIOS } from '../is_mobile';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 
-import IconButton from './icon_button';
 import { Button, Text } from './ui';
 
 const ATTACHMENT_LIMIT = 4;
@@ -594,11 +593,12 @@ class MediaGallery extends React.PureComponent {
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible || compact })}>
           {sensitive && (
             (visible || compact) ? (
-              <IconButton
-                title={intl.formatMessage(messages.toggle_visible)}
-                src={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
-                overlay
+              <Button
+                text={intl.formatMessage(messages.toggle_visible)}
+                icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
                 onClick={this.handleOpen}
+                theme='transparent'
+                size='sm'
               />
             ) : (
               <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 674c3dab5..15a6f87cc 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger'
+type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'transparent'
 type ButtonSizes = 'sm' | 'md' | 'lg'
 
 type IButtonStyles = {
@@ -24,6 +24,7 @@ const useButtonStyles = ({
     ghost: 'shadow-none border-gray-200 text-gray-700 bg-white focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
     accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
     danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
+    transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
   };
 
   const sizes = {
diff --git a/app/styles/components/spoiler-button.scss b/app/styles/components/spoiler-button.scss
index df938d4b5..5c6a77ae0 100644
--- a/app/styles/components/spoiler-button.scss
+++ b/app/styles/components/spoiler-button.scss
@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 100;
+  z-index: 40;
 
   &--minified {
     display: block;