From bf64f56f7c83cac0844f9175e13418ed1c84b730 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sat, 17 Aug 2024 23:50:13 +0100
Subject: [PATCH] refactor: begin redesign of tab errors

---
 src/components/Elements/MainModal/Main.jsx    |   2 +-
 .../Elements/MainModal/backend/Tabs.jsx       |   2 +-
 .../Elements/MainModal/backend/newTabs.jsx    | 100 ++++++++++--------
 .../Elements/MainModal/scss/index.scss        |   2 -
 .../MainModal/scss/marketplace/_main.scss     |   7 +-
 .../MainModal/scss/modules/_sidebar.scss      |   2 +-
 .../Layout/Settings/Header/Header.jsx         |  10 +-
 .../Layout/Settings/Item/SettingsItem.jsx     |  12 +--
 .../PreferencesWrapper/PreferencesWrapper.jsx |  18 ++--
 src/features/marketplace/views/ItemPage.jsx   |   4 +-
 .../marketplace/views/oldItemPage.jsx         |   4 +-
 src/features/misc/modals/Modals.jsx           |   2 +-
 src/features/misc/views/Addons.jsx            |   7 +-
 src/features/misc/views/Marketplace.jsx       |   2 +-
 tailwind.config.js                            |   5 +
 15 files changed, 98 insertions(+), 81 deletions(-)

diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx
index 0386d5c0..fe1970a7 100644
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@@ -69,7 +69,7 @@ const MainModalContent = ({ modalClose }) => {
           animate="center"
           exit="exit"
           transition={{ type: 'tween', duration: 0.8 }}
-          className="flex w-full min-w-full"
+          className="flex w-full min-w-full overflow-y-auto"
         >
           <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
         </motion.div>
diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx
index ddf8611b..4713add4 100644
--- a/src/components/Elements/MainModal/backend/Tabs.jsx
+++ b/src/components/Elements/MainModal/backend/Tabs.jsx
@@ -68,7 +68,7 @@ const Tabs = (props) => {
           {reminderInfo}
         </div>
       )}
-      <div className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col">
+      <div className="w-full rounded h-[calc(78vh-80px)] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col overflow-scroll">
         {props.children.map((tab, index) => {
           if (tab.props.label !== currentTab) {
             return null;
diff --git a/src/components/Elements/MainModal/backend/newTabs.jsx b/src/components/Elements/MainModal/backend/newTabs.jsx
index 9b039975..1c9418ed 100644
--- a/src/components/Elements/MainModal/backend/newTabs.jsx
+++ b/src/components/Elements/MainModal/backend/newTabs.jsx
@@ -2,7 +2,7 @@ import { useState, useCallback, memo, useMemo } from 'react';
 import variables from 'config/variables';
 import Tab from './Tab';
 import { useTab } from './TabContext';
-import { MdRefresh, MdClose } from 'react-icons/md';
+import { MdOutlineWarning, MdRefresh, MdClose } from 'react-icons/md';
 
 const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
   const { subTab, setSubTab, setSubSection } = useTab();
@@ -14,33 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
     [setSubTab, setSubSection],
   );
 
-  const hideReminder = () => {
-    localStorage.setItem('showReminder', false);
-    document.querySelector('.reminder-info').style.display = 'none';
-  };
-
-  const reminderInfo = useMemo(
-    () => (
-      <div
-        className="reminder-info"
-        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
-      >
-        <div className="shareHeader">
-          <span className="title">{variables.getMessage('settings:reminder.title')}</span>
-          <span className="closeModal" onClick={hideReminder}>
-            <MdClose />
-          </span>
-        </div>
-        <span className="subtitle">{variables.getMessage('settings:reminder.message')}</span>
-        <button onClick={() => window.location.reload()}>
-          <MdRefresh />
-          {variables.getMessage('modals.main.error_boundary.refresh')}
-        </button>
-      </div>
-    ),
-    [],
-  );
-
   return (
     <div className="modalSidebar">
       {sections.map((section, index) => (
@@ -52,28 +25,65 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
           navbarTab={section.navbar || false}
         />
       ))}
-      {reminderInfo}
     </div>
   );
 });
 
-const Content = memo(({ sections, currentTab }) => (
-  <>
-    {sections.map(
-      ({ label, name, component: Component }) =>
-        variables.getMessage(label) === currentTab && (
-          <div
-            className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col"
-            key={name}
-            label={variables.getMessage(label)}
-            name={name}
+const Content = memo(({ sections, currentTab }) => {
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
+  const reminderInfo = useMemo(
+    () => (
+      <div
+        className="bg-rose-800 border-rose-700 border-2 flex-row px-10 py-5 rounded items-center justify-between"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
+        <div className="flex flex-row items-center gap-5">
+          <MdOutlineWarning />
+          <span>{variables.getMessage('settings:reminder.message')}</span>
+        </div>
+        <div class="flex flex-row items-center gap-5">
+          <button
+            className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
+            onClick={() => window.location.reload()}
           >
-            <Component />
-          </div>
-        ),
-    )}
-  </>
-));
+            <MdRefresh /> {variables.getMessage('modals.main.error_boundary.refresh')}
+          </button>
+          <button
+            className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
+            onClick={hideReminder}
+          >
+            <MdClose />
+            Close
+          </button>
+        </div>
+      </div>
+    ),
+    [],
+  );
+
+  return (
+    <>
+      {sections.map(
+        ({ label, name, component: Component }) =>
+          variables.getMessage(label) === currentTab && (
+            <div
+              className="w-full rounded h-[calc(78vh-80px)] flex flex-col overflow-scroll pr-2 gap-3"
+              key={name}
+              label={variables.getMessage(label)}
+              name={name}
+            >
+              {reminderInfo}
+              <Component />
+            </div>
+          ),
+      )}
+    </>
+  );
+});
 
 const Tabs = ({ sections }) => {
   const { subTab, setSubTab, setSubSection } = useTab();
diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss
index dc8a78c0..0aef15e0 100644
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -258,8 +258,6 @@ h5 {
 .reminder-info {
   display: flex;
   flex-flow: column;
-  position: absolute;
-  bottom: 0;
   padding: 15px;
   gap: 15px;
 
diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss
index 027625d5..51b1fbd3 100644
--- a/src/components/Elements/MainModal/scss/marketplace/_main.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss
@@ -158,7 +158,7 @@
       width: 100%;
       height: auto;
       border-radius: 12px;
-      box-shadow: 0 5px 25px rgba(0, 0, 0, .75);
+      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.75);
       aspect-ratio: 1 / 1;
       object-fit: cover;
     }
@@ -259,9 +259,9 @@ p.author {
   margin-top: -5px;
 }
 
-#item>img,
+#item > img,
 .updateImage,
-.updateChangelog>p>img {
+.updateChangelog > p > img {
   border-radius: 12px;
   height: 200px;
   width: auto;
@@ -452,7 +452,6 @@ p.author {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 15px;
 
   .tooltip {
     margin-right: 25px;
diff --git a/src/components/Elements/MainModal/scss/modules/_sidebar.scss b/src/components/Elements/MainModal/scss/modules/_sidebar.scss
index d232ba1b..aae47c6d 100644
--- a/src/components/Elements/MainModal/scss/modules/_sidebar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_sidebar.scss
@@ -9,7 +9,7 @@
     padding: 0 5px;
     border-radius: 12px 0 0 12px;
     overflow: hidden auto;
-    height: 67vh;
+    height: calc(80vh - 80px);
     min-width: 250px;
 
     .mainTitle {
diff --git a/src/components/Layout/Settings/Header/Header.jsx b/src/components/Layout/Settings/Header/Header.jsx
index 123db588..b6357449 100644
--- a/src/components/Layout/Settings/Header/Header.jsx
+++ b/src/components/Layout/Settings/Header/Header.jsx
@@ -1,10 +1,6 @@
 import variables from 'config/variables';
 import { useState, useEffect } from 'react';
-import {
-  MdFlag,
-  MdOutlineVisibilityOff,
-  MdOutlineVisibility,
-} from 'react-icons/md';
+import { MdFlag, MdOutlineVisibilityOff, MdOutlineVisibility } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 import { Button } from 'components/Elements';
 
@@ -64,8 +60,8 @@ function Header(props) {
   };
 
   return (
-    <div className="modalHeader">
-      <div className="headerActions">
+    <div className="bg-modal-content-light dark:bg-modal-content-dark py-6 px-10 rounded">
+      <div className="flex flex-row gap-5">
         {props.visibilityToggle && <VisibilityToggle />}
         {props.report !== false && <ReportButton />}
         {props.children}
diff --git a/src/components/Layout/Settings/Item/SettingsItem.jsx b/src/components/Layout/Settings/Item/SettingsItem.jsx
index 20854636..b469e35c 100644
--- a/src/components/Layout/Settings/Item/SettingsItem.jsx
+++ b/src/components/Layout/Settings/Item/SettingsItem.jsx
@@ -1,19 +1,19 @@
 const Row = (props) => {
-  const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'opacity-50 pointer-events-none transition-400 ease-in-out' : ''}`;
+  const classes = `${props.final ? 'border-b-0' : 'border-b border-gray-500'} ${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
   return <div className={classes}>{props.children}</div>;
 };
 
 const Content = (props) => {
   return (
-    <div className="content">
-      <span className="title">{props.title}</span>
-      <span className="subtitle">{props.subtitle}</span>
+    <div className="flex flex-col max-w-[50%]">
+      <span className="text-2xl font-semibold">{props.title}</span>
+      <span className="text-neutral-800 dark:text-neutral-300 ">{props.subtitle}</span>
     </div>
   );
 };
 
 const Action = (props) => {
-  return <div className="action">{props.children}</div>;
+  return <div className="flex flex-col items-end w-[300px]">{props.children}</div>;
 };
 
-export { Row, Content, Action };
\ No newline at end of file
+export { Row, Content, Action };
diff --git a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
index 74c3e2e5..e28e13e5 100644
--- a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
+++ b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
@@ -7,8 +7,10 @@ import values from 'utils/data/slider_values.json';
 import EventBus from 'utils/eventbus';
 
 const PreferencesWrapper = ({ children, ...props }) => {
-  const [shown, setShown] = useState(localStorage.getItem(props.setting) === 'true' || props.default || false);
-  console.log(props.default)
+  const [shown, setShown] = useState(
+    localStorage.getItem(props.setting) === 'true' || props.default || false,
+  );
+  console.log(props.default);
 
   EventBus.on('toggle', (setting) => {
     if (setting === props.setting) {
@@ -17,13 +19,17 @@ const PreferencesWrapper = ({ children, ...props }) => {
   });
 
   return (
-    <div className={shown ? 'preferences' : 'opacity-50 pointer-events-none transition-400 ease-in-out'}>
+    <div
+      className={
+        shown
+          ? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
+          : 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
+      }
+    >
       {props.zoomSetting && (
         <Row>
           <Content
-            title={variables.getMessage(
-              'settings:sections.appearance.accessibility.widget_zoom',
-            )}
+            title={variables.getMessage('settings:sections.appearance.accessibility.widget_zoom')}
             subtitle={variables.getMessage('settings:sections.header.size')}
           />
           <Action>
diff --git a/src/features/marketplace/views/ItemPage.jsx b/src/features/marketplace/views/ItemPage.jsx
index 0b6fc766..32a35d4f 100644
--- a/src/features/marketplace/views/ItemPage.jsx
+++ b/src/features/marketplace/views/ItemPage.jsx
@@ -354,7 +354,9 @@ const ItemPage = () => {
   };
 
   useEffect(() => {
-    document.querySelector('#modal').scrollTop = 0;
+    if (document.querySelector('#modal')) {
+      document.querySelector('#modal').scrollTop = 0;
+    }
   });
 
   return (
diff --git a/src/features/marketplace/views/oldItemPage.jsx b/src/features/marketplace/views/oldItemPage.jsx
index c9d30417..9044c1be 100644
--- a/src/features/marketplace/views/oldItemPage.jsx
+++ b/src/features/marketplace/views/oldItemPage.jsx
@@ -72,7 +72,9 @@ class ItemPage extends PureComponent {
 
   componentDidMount() {
     this.getCurator(this.props.data.author);
-    document.querySelector('#modal').scrollTop = 0;
+    if (document.querySelector('#modal')) {
+      document.querySelector('#modal').scrollTop = 0;
+    }
     this.setState({
       button: this.props.data.local.installed ? this.buttons.uninstall : this.buttons.install,
     });
diff --git a/src/features/misc/modals/Modals.jsx b/src/features/misc/modals/Modals.jsx
index 1813a6aa..f5b8330a 100644
--- a/src/features/misc/modals/Modals.jsx
+++ b/src/features/misc/modals/Modals.jsx
@@ -57,7 +57,7 @@ function Modals() {
         onRequestClose={() => toggleModal('main', false)}
         isOpen={main}
         id="#modal"
-        className="z-[100] h-[80vh] w-modal border-3 border-modal ease-in-out duration-800 transition-all backdrop-blur-3xl bg-modal-light dark:bg-modal-dark text-black dark:text-white overflow-y-auto shadow-xl rounded"
+        className="overflow-y-hidden z-[100] h-[80vh] w-modal border-3 border-modal ease-in-out duration-800 transition-all backdrop-blur-3xl bg-modal-light dark:bg-modal-dark text-black dark:text-white shadow-xl rounded"
         overlayClassName="grid place-content-center absolute top-0 left-0 h-screen w-screen"
         ariaHideApp={false}
       >
diff --git a/src/features/misc/views/Addons.jsx b/src/features/misc/views/Addons.jsx
index a80bfde7..2d8032f1 100644
--- a/src/features/misc/views/Addons.jsx
+++ b/src/features/misc/views/Addons.jsx
@@ -1,8 +1,7 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 
-import Added from '../../marketplace/views/Library';
-import Create from '../../marketplace/views/Create';
+import Library from '../../marketplace/views/Library';
 
 function Addons(props) {
   return (
@@ -16,8 +15,8 @@ function Addons(props) {
     </Tabs>*/
     },
     (
-      <div className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col">
-        <Added />
+      <div className="w-full rounded h-[calc(78vh-80px)] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col overflow-scroll">
+        <Library />
       </div>
     )
   );
diff --git a/src/features/misc/views/Marketplace.jsx b/src/features/misc/views/Marketplace.jsx
index 44014082..829061ab 100644
--- a/src/features/misc/views/Marketplace.jsx
+++ b/src/features/misc/views/Marketplace.jsx
@@ -54,7 +54,7 @@ function Marketplace() {
   return (
     <AnimatePresence mode="wait">
       <motion.div
-        className="w-full rounded min-h-[69vh] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col"
+        className="w-full rounded h-[calc(78vh-80px)] bg-modal-content-light dark:bg-modal-content-dark p-10 flex flex-col overflow-scroll"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 6bcf1d55..f38122ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,11 @@ module.exports = {
           light: 'rgba(255, 255, 255, 0.7)',
           dark: 'rgba(0, 0, 0, 0.7)',
         },
+        brand: {
+          orange: '#FF5C25',
+          red: '#D21A11',
+          pink: '#FF456E',
+        },
       },
       width: {
         modal: 'clamp(60vw, 1400px, 90vw)',