refactor: begin redesign of tab errors

2026-07-22 00:07:23 +02:00 · 2024-08-17 23:50:13 +01:00
parent 7178983a36
commit bf64f56f7c
15 changed files with 98 additions and 81 deletions
--- 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>
--- 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;
--- 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();
--- 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;

--- 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;
--- 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 {
--- 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}
--- 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 };
+export { Row, Content, Action };
--- 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>
--- 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 (
--- 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,
    });
--- 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}
      >
--- 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>
    )
  );
--- 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 }}