From a4c10bc3b338396d993d84c7a6e8f339a54773fc Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Thu, 27 Oct 2022 17:58:42 +0100
Subject: [PATCH] fix: UX improvements to custom backgrounds

---
 .../scss/settings/modules/tabs/_order.scss    |  8 +++++-
 .../settings/sections/background/Custom.jsx   | 27 ++++++++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
index efc6e28d..11cda224 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
@@ -52,12 +52,13 @@
   @include themed() {
     div {
       border-radius: t($borderRadius);
-      border: 5px t($modal-sidebar) solid;
+      // border: 5px t($modal-sidebar) solid;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-flow: column;
       gap: 5px;
+      position: relative;
       img {
         width: 100%;
         height: 200px;
@@ -72,6 +73,11 @@
           background: t($modal-sidebarActive);
         }
       }
+      .tooltip {
+        position: absolute !important;
+        top: 5px !important;
+        right: 5px !important;
+      }
     }
     .iconButton {
       width: calc(100% - 22px);
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index 82aac278..4cd50c0f 100644
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -15,6 +15,8 @@ import { videoCheck } from 'modules/helpers/background/widget';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
+import Tooltip from '../../../../../helpers/tooltip/Tooltip'
+
 
 import Modal from 'react-modal';
 
@@ -180,8 +182,16 @@ export default class CustomSettings extends PureComponent {
             <div>
               <MdAddPhotoAlternate />
               <div>
-                <span className="title">{variables.getMessage('modals.main.settings.sections.background.source.custom_title')}</span>
-                <span className="subtitle">{variables.getMessage('modals.main.settings.sections.background.source.custom_description')}</span>
+                <span className="title">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.background.source.custom_title',
+                  )}
+                </span>
+                <span className="subtitle">
+                  {variables.getMessage(
+                    'modals.main.settings.sections.background.source.custom_description',
+                  )}
+                </span>
               </div>
             </div>
             <div className="topbarbuttons">
@@ -206,10 +216,15 @@ export default class CustomSettings extends PureComponent {
                     />
                     {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
                     {this.state.customBackground.length > 0 ? (
-                      <button onClick={() => this.modifyCustomBackground('remove', index)}>
-                        {variables.getMessage('modals.main.settings.sections.background.source.remove')}{' '}
-                        <MdCancel />
-                      </button>
+                      <Tooltip
+                        title={variables.getMessage(
+                          'modals.main.settings.sections.background.source.remove',
+                        )}
+                      >
+                        <button onClick={() => this.modifyCustomBackground('remove', index)}>
+                          <MdCancel />
+                        </button>
+                      </Tooltip>
                     ) : null}
                   </div>
                 ))}