From 4e68a2c8816a61115d4bdf415957e251ad0fe687 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Tue, 12 Jul 2022 22:18:41 +0100
Subject: [PATCH] fix: overflow of custom images + visual

---
 .../scss/settings/modules/tabs/_order.scss    | 22 +++++++++++++------
 .../modals/main/settings/sections/Stats.jsx   |  2 ++
 .../settings/sections/background/Custom.jsx   |  4 ++--
 3 files changed, 19 insertions(+), 9 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 96b68825..7a046987 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
@@ -47,23 +47,31 @@
 .images-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  height: 250px;
   padding: 20px;
   grid-gap: 20px;
   @include themed() {
     div {
-      background: t($modal-sidebar);
-      padding: 10px;
-      box-shadow: 0 0 0 4px t($modal-sidebarActive);
       border-radius: t($borderRadius);
-      gap: 10px;
+      border: 5px t($modal-sidebar) solid;
       display: flex;
+      align-items: center;
       justify-content: center;
+      flex-flow: column;
+      gap: 5px;
       img {
-        width: auto;
-        height: 100px;
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
         border-radius: t($borderRadius);
       }
+      button {
+        padding: 0 30px 0 30px;
+        background: t($modal-background);
+        border: none !important;
+        &:hover {
+          background: t($modal-sidebarActive);
+        }
+      }
     }
     .iconButton {
       width: calc(100% - 22px);
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index 32f9fdac..fa0da2a4 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@@ -84,6 +84,8 @@ export default class Stats extends PureComponent {
         <div className="statsGrid">
           <div className="statSection leftPanel">
             <span className="title">{getMessage('modals.main.settings.sections.stats.achievements')}</span>
+            <br />
+            <span className='subtitle'>1/5 Unlocked</span>
             <div className="achievements">
               {this.state.stats['tabs-opened'] >= 10 && achievement('10/10 IGN', 'Opened 10 tabs')}
               {this.state.stats['tabs-opened'] >= 39 && achievement('Thank you', 'Opened 39 tabs')}
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index 79f063c9..8a5a9caf 100644
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -253,11 +253,11 @@ export default class CustomSettings extends PureComponent {
                     {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
                     {this.state.customBackground.length > 0 ? (
                       <button
-                        className="iconButton"
                         onClick={() => this.modifyCustomBackground('remove', index)}
                       >
+                        Remove Image
                         <MdCancel />
-                      </button>
+                    </button>
                     ) : null}
                   </div>
                 ))}