From 79261a6ab459ef0218c80fbd6cd87119a8fc802c Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Fri, 22 Sep 2023 17:07:52 +0100
Subject: [PATCH] chore: simplify and standardise added UI

---
 .../main/marketplace/sections/Added.jsx       | 56 +++++++++----------
 .../modals/main/scss/marketplace/_main.scss   | 14 ++---
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 992db415..9038f8db 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -193,10 +193,8 @@ export default class Added extends PureComponent {
     if (this.state.installed.length === 0) {
       return (
         <>
-          <div className="flexTopMarketplace">
+          <div className="flexTopMarketplace topAddons">
             <span className="mainTitle">{variables.getMessage('modals.main.navbar.addons')}</span>
-          </div>
-          <div className="filter">
             {sideLoadBackendElements()}
             <button
               className="sideload"
@@ -234,33 +232,35 @@ export default class Added extends PureComponent {
 
     return (
       <>
-        <span className="mainTitle">{variables.getMessage('modals.main.addons.added')}</span>
-        <div className="filter">
-          {sideLoadBackendElements()}
-          <div className="buttonSection">
-            <button
-              className="sideload"
-              onClick={() => document.getElementById('file-input').click()}
-            >
-              {variables.getMessage('modals.main.addons.sideload.title')}
-              <MdCode />
-            </button>
-            <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
-              <MdUpdate />
-              {variables.getMessage('modals.main.addons.check_updates')}
-            </button>
+        <div className="flexTopMarketplace topAddons">
+          <span className="mainTitle">{variables.getMessage('modals.main.addons.added')}</span>
+          <div className="filter">
+            {sideLoadBackendElements()}
+            <div className="buttonSection">
+              <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
+                <MdUpdate />
+                {variables.getMessage('modals.main.addons.check_updates')}
+              </button>
+              <button
+                className="sideload"
+                onClick={() => document.getElementById('file-input').click()}
+              >
+                {variables.getMessage('modals.main.addons.sideload.title')}
+                <MdCode />
+              </button>
+            </div>
           </div>
-          <Dropdown
-            label={variables.getMessage('modals.main.addons.sort.title')}
-            name="sortAddons"
-            onChange={(value) => this.sortAddons(value)}
-          >
-            <option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option>
-            <option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option>
-            <option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
-            <option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
-          </Dropdown>
         </div>
+        <Dropdown
+          label={variables.getMessage('modals.main.addons.sort.title')}
+          name="sortAddons"
+          onChange={(value) => this.sortAddons(value)}
+        >
+          <option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option>
+          <option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option>
+          <option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
+          <option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
+        </Dropdown>
         <Items
           items={this.state.installed}
           filter=""
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index f2763b5e..6d800f2e 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -378,17 +378,9 @@ p.author {
 .filter {
   display: flex;
   flex-flow: row;
-  padding: 15px;
   gap: 15px;
   justify-content: space-between;
   align-items: center;
-  margin-top: 15px;
-
-  @include themed {
-    background: t($modal-sidebar);
-    border-radius: t($borderRadius);
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
-  }
 
   .MuiFormControl-root {
     margin-bottom: 10px;
@@ -614,3 +606,9 @@ a.collectionButton {
     font-size: 30px;
   }
 }
+
+.topAddons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}