style: radical modal redesign

2026-07-02 20:53:17 +02:00 · 2024-06-12 22:02:52 +01:00
parent ed1b1a2f6d
commit ea7343513d
9 changed files with 171 additions and 56 deletions
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@@ -36,25 +36,16 @@ function MainModal({ modalClose }) {
  const renderTab = () => {
    switch (currentTab) {
      case 'addons':
-        return <Addons changeTab={changeTab} />;
+        return <Addons modalClose={modalClose} changeTab={changeTab} />;
      case 'marketplace':
-        return <Marketplace changeTab={changeTab} />;
+        return <Marketplace modalClose={modalClose} changeTab={changeTab} />;
      default:
-        return <Settings changeTab={changeTab} />;
+        return <Settings modalClose={modalClose} changeTab={changeTab} />;
    }
  };

  return (
    <div className="frame">
-      <Tooltip
-        style={{ position: 'absolute', top: '1rem', right: '1rem' }}
-        title={variables.getMessage('modals.welcome.buttons.close')}
-        key="closeTooltip"
-      >
-        <span className="closeModal" onClick={modalClose}>
-          <MdClose />
-        </span>
-      </Tooltip>
      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
    </div>
  );
--- a/src/components/Elements/MainModal/backend/Tab.jsx
+++ b/src/components/Elements/MainModal/backend/Tab.jsx
@@ -93,11 +93,11 @@ function Tab({ label, currentTab, onClick, navbarTab }) {

  return (
    <>
-      {mue && <span className="mainTitle">Mue</span>}
+      {/*{mue && <span className="mainTitle">Mue</span>}*/}
      <button className={className} onClick={() => onClick(label)}>
        {icon} <span>{label}</span>
      </button>
-      {divider && <hr />}
+      {/*{divider && <hr />}*/}
    </>
  );
 }
--- a/src/components/Elements/MainModal/backend/Tabs.jsx
+++ b/src/components/Elements/MainModal/backend/Tabs.jsx
@@ -8,7 +8,7 @@ import {
  MdClose,
 } from 'react-icons/md';
 import Tab from './Tab';
-import { Button } from 'components/Elements';
+import { Button, Tooltip } from 'components/Elements';
 import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';

 const Tabs = (props) => {
@@ -65,42 +65,171 @@ const Tabs = (props) => {
    </div>
  );

+  const navbarLogo = (
+    <svg
+      width="123"
+      height="123"
+      viewBox="0 0 123 123"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+    >
+      <g filter="url(#filter0_d_2473_27)">
+        <circle cx="61.5" cy="61.5" r="50.5" fill="url(#paint0_linear_2473_27)" />
+        <path
+          d="M68.2969 43.1796V48.5603H79.9348V60.1055H85.3638V43.1796H68.2969Z"
+          fill="url(#paint1_linear_2473_27)"
+        />
+        <path
+          d="M72.1542 61.0483H67.344V65.8527H62.9056V61.0483H58.0919V56.6185H62.9056V51.8175H67.344V56.6185H72.1542V61.0483ZM78.6447 49.6043H67.034V45.5766H47.5625V72.0938H82.6836V61.1961H78.6447V49.6043Z"
+          fill="url(#paint2_linear_2473_27)"
+        />
+        <path
+          d="M46.358 50.518H42.6289V77.0352H77.75V73.3029H46.358V50.518Z"
+          fill="url(#paint3_linear_2473_27)"
+        />
+        <path
+          d="M41.4205 55.4516H37.6914V81.9688H72.8125V78.2365H41.4205V55.4516Z"
+          fill="url(#paint4_linear_2473_27)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_2473_27"
+          x="0.3"
+          y="0.3"
+          width="122.4"
+          height="122.4"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="5.35" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2473_27" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2473_27"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_2473_27"
+          x1="104.324"
+          y1="35.24"
+          x2="16.959"
+          y2="88.366"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FF5C25" />
+          <stop offset="0.484375" stop-color="#D21A11" />
+          <stop offset="1" stop-color="#FF456E" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2473_27"
+          x1="76.8303"
+          y1="60.1055"
+          x2="76.8303"
+          y2="43.1796"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F18D91" />
+          <stop offset="1" stop-color="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2473_27"
+          x1="65.123"
+          y1="72.0938"
+          x2="65.123"
+          y2="45.5766"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F18D91" />
+          <stop offset="1" stop-color="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_2473_27"
+          x1="60.1895"
+          y1="77.0352"
+          x2="60.1895"
+          y2="50.518"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F18D91" />
+          <stop offset="1" stop-color="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_2473_27"
+          x1="55.252"
+          y1="81.9688"
+          x2="55.252"
+          y2="55.4516"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F18D91" />
+          <stop offset="1" stop-color="#FBD3C6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+
  return (
-    <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-      <div className="modalSidebar">
-        {props.children.map((tab, index) => (
-          <Tab
-            currentTab={currentTab}
-            key={index}
-            label={tab.props.label}
-            onClick={(nextTab) => onClick(nextTab, tab.props.name)}
-            navbarTab={props.navbar || false}
+    <div className="flex flex-col w-[100%] min-w-[100%]">
+      <div className="flex flex-row gap-5 p-5">
+        {navbarLogo}
+        {navbarButtons.map(({ tab, icon }, index) => (
+          <Button
+            type="navigation"
+            onClick={() => props.changeTab(tab)}
+            icon={icon}
+            label={variables.getMessage(`modals.main.navbar.${tab}`)}
+            active={props.current === tab}
+            key={`${tab}-${index}`}
          />
        ))}
-        {reminderInfo}
+        <Tooltip
+          style={{ marginLeft: 'auto', justifSelf: 'flex-end' }}
+          title={variables.getMessage('modals.welcome.buttons.close')}
+          key="closeTooltip"
+        >
+          <span className="closeModal" onClick={props.modalClose}>
+            <MdClose />
+          </span>
+        </Tooltip>
      </div>
-      <div className="modalTabContent">
-        <div className="modalNavbar">
-          {navbarButtons.map(({ tab, icon }, index) => (
-            <Button
-              type="navigation"
-              onClick={() => props.changeTab(tab)}
-              icon={icon}
-              label={variables.getMessage(`modals.main.navbar.${tab}`)}
-              active={props.current === tab}
-              key={`${tab}-${index}`}
+      <div className="flex w-[100%] min-w-[100%]">
+        <div className="modalSidebar">
+          {props.children.map((tab, index) => (
+            <Tab
+              currentTab={currentTab}
+              key={index}
+              label={tab.props.label}
+              onClick={(nextTab) => onClick(nextTab, tab.props.name)}
+              navbarTab={props.navbar || false}
            />
          ))}
+          {reminderInfo}
        </div>
-        {props.children.map((tab, index) => {
-          if (tab.props.label !== currentTab) {
-            return undefined;
-          }
+        <div className="modalTabContent">
+          {props.children.map((tab, index) => {
+            if (tab.props.label !== currentTab) {
+              return undefined;
+            }

-          return (
-            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
-          );
-        })}
+            return (
+              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+            );
+          })}
+        </div>
      </div>
    </div>
  );
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -50,10 +50,12 @@
 .closeModal {
  display: grid;
  place-items: center;
-  padding: 0.5em;
+  height: 40px;
+  width: 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.5s;
+  align-self: flex-end;

  svg {
    font-size: 2em;
@@ -87,7 +89,7 @@
  width: clamp(60vw, 1400px, 90vw);

  @include themed {
-    background-color: t($modal-background);
+    background-color: t($modal-sidebar);
  }
 }

--- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
+++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
@@ -2,7 +2,7 @@

 .modalTabContent {
  width: 100% !important;
-
+  border-radius: 15px;
  /* button {
    @include modal-button(standard);
  } */
--- a/src/components/Elements/MainModal/scss/modules/_navbar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_navbar.scss
@@ -3,10 +3,3 @@
  align-items: flex-start;
  justify-content: flex-start;
 }
-
-.modalNavbar {
-  display: flex;
-  flex-flow: row;
-  gap: 25px;
-  margin-bottom: 1rem;
-}
--- a/src/features/misc/views/Addons.jsx
+++ b/src/features/misc/views/Addons.jsx
@@ -7,7 +7,7 @@ import Create from '../../marketplace/views/Create';

 function Addons(props) {
  return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="addons">
+    <Tabs changeTab={(type) => props.changeTab(type)} current="addons" modalClose={props.modalClose}>
      <div label={variables.getMessage('modals.main.addons.added')} name="added">
        <Added />
      </div>
--- a/src/features/misc/views/Marketplace.jsx
+++ b/src/features/misc/views/Marketplace.jsx
@@ -6,7 +6,7 @@ import MarketplaceTab from '../../marketplace/views/Browse';

 function Marketplace(props) {
  return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="marketplace">
+    <Tabs changeTab={(type) => props.changeTab(type)} current="marketplace" modalClose={props.modalClose}>
      <div label={variables.getMessage('modals.main.marketplace.all')} name="all">
        <MarketplaceTab type="all" />
      </div>
--- a/src/features/misc/views/Settings.jsx
+++ b/src/features/misc/views/Settings.jsx
@@ -90,7 +90,7 @@ const sections = [

 function Settings(props) {
  return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="settings">
+    <Tabs changeTab={(type) => props.changeTab(type)} current="settings" modalClose={props.modalClose}>
      {sections.map(({ label, name, component: Component }) => (
        <div key={name} label={variables.getMessage(label)} name={name}>
          <Component />