mirror of
https://github.com/mue/mue.git
synced 2026-07-17 14:04:09 +02:00
refactor: Move main modal to components
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
@@ -2,7 +2,7 @@ import variables from 'config/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import Main from './main/Main';
|
||||
import { MainModal } from 'components/Elements';
|
||||
import Navbar from '../../navbar/Navbar';
|
||||
import Preview from '../../helpers/preview/Preview';
|
||||
|
||||
@@ -90,7 +90,7 @@ export default class Modals extends PureComponent {
|
||||
overlayClassName="Overlay"
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<Main modalClose={() => this.toggleModal('mainModal', false)} />
|
||||
<MainModal modalClose={() => this.toggleModal('mainModal', false)} />
|
||||
</Modal>
|
||||
<Modal
|
||||
closeTimeoutMS={300}
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
import variables from 'config/variables';
|
||||
import { Suspense, lazy, useState, memo } from 'react';
|
||||
import { MdClose } from 'react-icons/md';
|
||||
|
||||
import './scss/index.scss';
|
||||
import { Tooltip } from 'components/Elements';
|
||||
const Settings = lazy(() => import('./tabs/Settings'));
|
||||
const Addons = lazy(() => import('./tabs/Addons'));
|
||||
const Marketplace = lazy(() => import('./tabs/Marketplace'));
|
||||
|
||||
const renderLoader = () => (
|
||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||
<div className="modalSidebar">
|
||||
<span className="mainTitle">Mue</span>
|
||||
</div>
|
||||
<div className="modalTabContent">
|
||||
<div className="emptyItems">
|
||||
<div className="emptyMessage">
|
||||
<div className="loaderHolder">
|
||||
<div id="loader"></div>
|
||||
<span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function MainModal({ modalClose }) {
|
||||
const [currentTab, setCurrentTab] = useState('settings');
|
||||
|
||||
const changeTab = (type) => {
|
||||
setCurrentTab(type);
|
||||
};
|
||||
|
||||
const renderTab = () => {
|
||||
switch (currentTab) {
|
||||
case 'addons':
|
||||
return <Addons changeTab={changeTab} />;
|
||||
case 'marketplace':
|
||||
return <Marketplace changeTab={changeTab} />;
|
||||
default:
|
||||
return <Settings 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(MainModal);
|
||||
@@ -1,390 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
@import 'modules/sidebar';
|
||||
@import 'modules/navbar';
|
||||
@import 'modules/modalTabContent';
|
||||
@import 'modules/links';
|
||||
@import 'modules/scrollbars';
|
||||
@import 'settings/main';
|
||||
@import 'marketplace/main';
|
||||
|
||||
.Overlay {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.Modal {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
|
||||
opacity: 1;
|
||||
z-index: -2;
|
||||
transition-timing-function: ease-in;
|
||||
border-radius: map-get($modal, 'border-radius');
|
||||
user-select: none;
|
||||
overflow-y: auto;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.closePositioning {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
right: 3rem;
|
||||
}
|
||||
|
||||
.closeModal {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0.5em;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgb(121 121 121 / 22.6%);
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Html--open,
|
||||
.ReactModal__Body--open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* modal transition */
|
||||
.ReactModal__Content--after-open {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ReactModal__Content--before-close {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
#modal {
|
||||
height: 80vh;
|
||||
width: clamp(60vw, 1200px, 90vw);
|
||||
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* fixes for font size on extension */
|
||||
label,
|
||||
p,
|
||||
span.modalLink {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.loaderHolder {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
@include themed {
|
||||
border: 3px solid t($modal-sidebar);
|
||||
border-radius: 50%;
|
||||
border-top-color: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.headerExtras {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: -1px;
|
||||
padding: 10px 0;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.marketplaceCondition {
|
||||
display: flex;
|
||||
flex-flow: row !important;
|
||||
gap: -1px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.languageSettings {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.MuiFormGroup-root {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.MuiFormControl-root {
|
||||
width: 100% !important;
|
||||
gap: 15px;
|
||||
|
||||
.MuiFormControlLabel-root {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
padding: 5px 5px 5px 20px;
|
||||
transition: 0.3s;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sliderTitle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.moreSettings {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
padding: 25px;
|
||||
margin-top: 20px;
|
||||
transition: 0.5s;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
svg {
|
||||
@include themed() {
|
||||
background-image: t($slightGradient);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
padding: 15px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.reminder-info {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
|
||||
@include themed {
|
||||
background-color: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
border: 1px solid t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
button {
|
||||
@include basicIconButton(5px, 5px, modal);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@extend %tabText;
|
||||
}
|
||||
|
||||
.quoteSkeleton {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.skeletonAuthor {
|
||||
font-size: smaller;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
padding: 0 20px 0 5px;
|
||||
|
||||
svg {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebar);
|
||||
padding: 10px;
|
||||
border-radius: t($borderRadius);
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: medium !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: smaller !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quickLinksSkeleton {
|
||||
.circles {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 5px;
|
||||
|
||||
div {
|
||||
margin-top: 10px;
|
||||
padding: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clockSkeleton {
|
||||
font-size: 30px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,480 +0,0 @@
|
||||
// this file is too long
|
||||
@import 'modules/item';
|
||||
@import 'modules/buttons';
|
||||
@import 'modules/lightbox';
|
||||
@import 'scss/variables';
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-gap: 1.5rem;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 15px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
@include themed {
|
||||
background-color: t($modal-secondaryColour);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
||||
&:hover {
|
||||
background-color: t($modal-sidebarActive);
|
||||
|
||||
img {
|
||||
background-color: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.item-back {
|
||||
filter: blur(60px) saturate(180%) brightness(90%);
|
||||
position: absolute;
|
||||
object-fit: cover !important;
|
||||
height: 90px !important;
|
||||
width: 100px !important;
|
||||
border-radius: 100px;
|
||||
transition: 0.5s;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
object-fit: cover !important;
|
||||
height: 60px !important;
|
||||
width: 60px !important;
|
||||
border-radius: 12px;
|
||||
transition: 0.5s;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
padding: 10px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 14px;
|
||||
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
.card-type {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bolder;
|
||||
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
border-radius: 150px;
|
||||
padding: 2px 8px;
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemPage {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.itemShowcase {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 25px;
|
||||
width: 60%;
|
||||
max-width: 650px;
|
||||
|
||||
.description {
|
||||
max-lines: 3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-width: 650px !important;
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 15px;
|
||||
width: 25%;
|
||||
max-height: 450px;
|
||||
|
||||
.front {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
box-sizing: border-box !important;
|
||||
border-radius: 12px 12px 0 0;
|
||||
backdrop-filter: blur(40px) saturate(150%) brightness(75%);
|
||||
|
||||
@include themed {
|
||||
background-image: linear-gradient(to bottom, transparent, t($modal-background));
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 25px black;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-transform: uppercase;
|
||||
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
.iconButtons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-gap: 20px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emptyItems {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.emptyMessage {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
grid-gap: 5px;
|
||||
padding: 50px;
|
||||
|
||||
.title,
|
||||
svg {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
.sideloadIcon {
|
||||
font-size: 50px;
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
}
|
||||
|
||||
.emptyNewMessage {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 70px;
|
||||
|
||||
/* background: -webkit-linear-gradient(90deg,rgba(255,92,39,.7) 37%,rgba(255,70,110,.67) 60%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; */
|
||||
}
|
||||
|
||||
button {
|
||||
svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonsRow {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
p.author {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#item > img,
|
||||
.updateImage,
|
||||
.updateChangelog > p > img {
|
||||
border-radius: 12px;
|
||||
height: 200px;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.returnButton {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgb(121 121 121 / 22.6%);
|
||||
}
|
||||
}
|
||||
|
||||
.flexTopMarketplace {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.tooltip {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.MuiFormControl-root {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.buttonSection {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.collectionPage {
|
||||
// height: 200px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
.nice-tag {
|
||||
border-radius: 150px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
text-shadow: #000 0 0 15px;
|
||||
|
||||
.mainTitle {
|
||||
justify-content: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #ccc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 36px 48px;
|
||||
margin: 15px 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
|
||||
@include themed {
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 15px;
|
||||
max-width: 250px;
|
||||
text-shadow: #000 0 0 15px;
|
||||
|
||||
.title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #ccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.marketplaceRefresh {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.marketplaceSearch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
|
||||
@include themed {
|
||||
box-shadow: 0 0 0 3px t($modal-sidebarActive);
|
||||
background: t($modal-sidebar);
|
||||
}
|
||||
|
||||
input {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
&:focus-within {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: t($modal-sidebarActive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inCollection {
|
||||
background-image: linear-gradient(to left, transparent, #000),
|
||||
url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
|
||||
@include themed {
|
||||
box-shadow: 0 0 0 4px t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.createYourOwn {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
|
||||
svg {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.topAddons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.tooltip {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
.updateCheck {
|
||||
flex-flow: row !important;
|
||||
}
|
||||
|
||||
.btn-settings {
|
||||
@include modal-button(standard);
|
||||
display: inline;
|
||||
margin-top: 0;
|
||||
float: none !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.btn-navigation {
|
||||
@include modal-button(standard);
|
||||
padding: 0 15px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour) !important;
|
||||
border-radius: t($borderRadius) !important;
|
||||
box-shadow: t($boxShadow) !important;
|
||||
border: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
background: var(--tab-active);
|
||||
}
|
||||
|
||||
color: var(--modal-text);
|
||||
}
|
||||
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 1.2em !important;
|
||||
color: var(--photo-info);
|
||||
}
|
||||
}
|
||||
|
||||
/* safari fix */
|
||||
@supports (-webkit-hyphens: none) {
|
||||
.btn-navigation {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navigation-active {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-collection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
|
||||
border-radius: 12px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(17 25 40 / 20%);
|
||||
border: 1px solid rgb(255 255 255 / 12.5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include themed() {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include themed() {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include themed() {
|
||||
background: t($modal-sidebarActive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-collection {
|
||||
height: 40px;
|
||||
text-decoration: none;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.flowReverse {
|
||||
flex-flow: row-reverse !important;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@include modal-button(standard);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.side {
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
p.description {
|
||||
margin-top: 0;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.moreInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: calc(100% - 30px);
|
||||
gap: 25px;
|
||||
|
||||
.items {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1 0 40% !important;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: t(boxshadow);
|
||||
border-radius: t($borderRadius);
|
||||
padding: 15px;
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex: 1 0 44%;
|
||||
|
||||
svg {
|
||||
font-size: 25px;
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
text-transform: uppercase;
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
span {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showMoreItems {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.lightBoxModal {
|
||||
margin: auto;
|
||||
max-width: 60%;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.closeModal {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 20px rgb(0 0 0 / 30%);
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
.resetLink {
|
||||
color: var(--modal-link);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
color: var(--modal-link);
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.modalLink {
|
||||
color: var(--modal-link);
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
@@ -1,204 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
|
||||
.modalTabContent {
|
||||
width: 100% !important;
|
||||
|
||||
/* button {
|
||||
@include modal-button(standard);
|
||||
}*/
|
||||
|
||||
@include themed {
|
||||
padding: 1rem 3rem 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: t($modal-background);
|
||||
|
||||
@extend %tabText;
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
background: rgb(196 196 196 / 74%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.settingsRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100px;
|
||||
justify-content: space-between;
|
||||
transition: 0.4s ease-in-out;
|
||||
|
||||
/* border-top: 1px solid #ccc; */
|
||||
border-bottom: 1px solid #676767;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&.settingsNoBorder {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-end;
|
||||
width: 300px;
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
width: 283px;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activityButtons {
|
||||
place-content: space-between space-between !important;
|
||||
align-items: flex-end !important;
|
||||
flex-flow: row wrap !important;
|
||||
|
||||
button:not(:first-child) {
|
||||
width: 40% !important;
|
||||
height: 99px !important;
|
||||
flex-flow: column-reverse !important;
|
||||
}
|
||||
|
||||
button {
|
||||
@include modal-button(standard);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
margin-top: 20px;
|
||||
|
||||
tr:first-child {
|
||||
background: t($modal-sidebarActive);
|
||||
|
||||
th {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
tr {
|
||||
th:last-child {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
tr:not(:first-child) {
|
||||
background: t($modal-sidebar);
|
||||
|
||||
textarea {
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donateButton {
|
||||
@include modal-button(standard);
|
||||
|
||||
flex-flow: row !important;
|
||||
text-decoration: none;
|
||||
height: auto !important;
|
||||
|
||||
svg {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flexGrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.messageMap {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
padding: 25px;
|
||||
justify-content: space-between;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 15px;
|
||||
font-size: 25px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
.messageText {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 3;
|
||||
|
||||
textarea {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageAction {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.messagesContainer {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 25px;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
#modal {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.modalNavbar {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 12px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
border-radius: 12px;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
|
||||
.modalSidebar {
|
||||
@include themed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: sticky;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
background: t($modal-sidebar);
|
||||
border-radius: 12px 0 0 12px;
|
||||
overflow: hidden auto;
|
||||
height: 80vh;
|
||||
min-width: 250px;
|
||||
|
||||
.mainTitle {
|
||||
text-align: center;
|
||||
font-size: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
color: t($subColor);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
margin: 0 1.75rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: t($color);
|
||||
font-size: 18px;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.2rem;
|
||||
padding: 0.5rem;
|
||||
transition: 0.5s;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
min-width: calc(100% - 1.2em);
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 0.5px t($color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 0.5px t($color);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.css-j204z7-MuiFormControlLabel-root {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
@import 'modules/material-ui';
|
||||
@import 'modules/tabs/about';
|
||||
@import 'modules/tabs/changelog';
|
||||
@import 'modules/tabs/order';
|
||||
@import 'modules/tabs/stats';
|
||||
|
||||
input {
|
||||
/* colour picker */
|
||||
&[type='color'] {
|
||||
border-radius: 100%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
|
||||
@include themed {
|
||||
border: t($modal-sidebarActive) 1px solid;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* firefox fixes for colour picker (using "," didn't work) */
|
||||
&[type='color']::-moz-color-swatch {
|
||||
border-radius: 100%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* date picker */
|
||||
&[type='date'] {
|
||||
width: 260px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
padding: 15px 20px;
|
||||
border-radius: 4px;
|
||||
display: flex !important;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* dark theme date picker fix */
|
||||
.dark {
|
||||
::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photosEmpty {
|
||||
height: 400px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
button {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.imagesTopBar {
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
svg {
|
||||
font-size: 30px;
|
||||
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.topbarbuttons {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.customcss textarea {
|
||||
font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
|
||||
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
|
||||
'Courier New', Courier, monospace !important;
|
||||
}
|
||||
|
||||
.preferences {
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.preferencesInactive {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
@@ -1,181 +0,0 @@
|
||||
/* these are overrides for the material ui default styles */
|
||||
|
||||
@import 'scss/variables';
|
||||
|
||||
.MuiCheckbox-colorPrimary.Mui-checked,
|
||||
.MuiSwitch-colorPrimary.Mui-checked,
|
||||
.MuIconButton-colorPrimary.Mui-checked,
|
||||
.MuiSwitch-thumb,
|
||||
.MuiRadio-colorSecondary.Mui-checked,
|
||||
.PrivateSwitchBase-input-4,
|
||||
.MuiRadio-root,
|
||||
.aboutLink,
|
||||
.MuiSlider-colorPrimary,
|
||||
legend {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-labelPlacementStart {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
|
||||
@include themed {
|
||||
background-color: t($subColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiSwitch-track {
|
||||
@include themed {
|
||||
background-color: t($subColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiIconButton-label > svg.MuiSvgIcon-root {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiTouchRipple-root {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.MuiFormControl-root {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.checkbox svg {
|
||||
@include themed {
|
||||
fill: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.17rem;
|
||||
}
|
||||
|
||||
.radio-title-small {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.MuiSlider-root {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.MuiOutlinedInput-notchedOutline {
|
||||
@include themed {
|
||||
border-color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiFormLabel-root-MuiInputLabel-root {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiInputLabel-root,
|
||||
.MuiSlider-markLabel,
|
||||
.MuiInputLabel-root,
|
||||
.MuiSelect-icon,
|
||||
.MuiSelect-select,
|
||||
.Mui-focused,
|
||||
legend,
|
||||
.MuiOutlinedInput-input {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiMenu-list {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Mui-selected {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiTextField-root,
|
||||
.MuiFormControl-root,
|
||||
.MuiSlider-root {
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.Mui-disabled {
|
||||
color: #818181 !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
.checkbox svg {
|
||||
fill: #818181 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiPaper-root {
|
||||
@include themed {
|
||||
background-color: t($modal-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiSlider-valueLabel {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-labelPlacementStart {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.settingsRow {
|
||||
.MuiFormControlLabel-root {
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-root {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.css-w66kx-MuiChip-root {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
border: 1px solid t($modal-sidebarActive);
|
||||
background: t($modal-sidebar) !important;
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.MuiChip-root {
|
||||
text-transform: capitalize;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.aboutLink {
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutLogo {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
margin: calc(1rem - 15px) 0 1rem 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.aboutContact {
|
||||
flex-flow: row;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
a {
|
||||
@include basicIconButton(11px, 1.2rem, modal);
|
||||
}
|
||||
}
|
||||
|
||||
.contributorImages {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle-photographers {
|
||||
font-size: 16px;
|
||||
|
||||
@include themed {
|
||||
color: t($color);
|
||||
|
||||
span {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aboutText {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.updateChangelog {
|
||||
max-width: 75%;
|
||||
white-space: pre-wrap;
|
||||
|
||||
li {
|
||||
cursor: initial;
|
||||
font-size: 1rem;
|
||||
list-style-type: disc;
|
||||
padding: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--modal-link);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.changelogtab {
|
||||
h1 {
|
||||
max-width: 85%;
|
||||
font-size: 2rem;
|
||||
margin-bottom: -10px !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
@import 'scss/variables';
|
||||
|
||||
.sortableItem {
|
||||
@include themed {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.325rem;
|
||||
color: t($color) !important;
|
||||
cursor: move;
|
||||
width: 200px;
|
||||
z-index: 999 !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
|
||||
svg {
|
||||
font-size: 1.3rem;
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
> label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sortablecontainer {
|
||||
-webkit-padding-start: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.images-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
padding: 20px;
|
||||
grid-gap: 20px;
|
||||
|
||||
@include themed {
|
||||
div {
|
||||
border-radius: t($borderRadius);
|
||||
|
||||
// border: 5px t($modal-sidebar) solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 30px;
|
||||
background: t($modal-background);
|
||||
border: none !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: calc(100% - 22px);
|
||||
margin-top: 10px;
|
||||
|
||||
@include basicIconButton(11px, 1.3rem, modal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overviewGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-gap: 30px;
|
||||
}
|
||||
|
||||
.tabPreview {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
|
||||
.previewItem {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
.quotediv .quote {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.quotediv .author-holder .author .author-content .title {
|
||||
font-size: 1em !important;
|
||||
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overviewNews {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-top: 16px;
|
||||
padding: 25px;
|
||||
|
||||
.title {
|
||||
font-size: 36px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px !important;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px 20px 0;
|
||||
}
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
|
||||
.rightPanel {
|
||||
.statIcon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.statGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-gap: 10px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.achievements {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
flex-flow: row !important;
|
||||
align-items: center;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border: 1px solid t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20px !important;
|
||||
padding: 15px;
|
||||
border-radius: 100%;
|
||||
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statSection.rightPanel {
|
||||
padding: 25px;
|
||||
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
background: t($modal-secondaryColour);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
||||
svg {
|
||||
font-size: 50px;
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.achievementContent {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 2px;
|
||||
|
||||
span:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.statsTopBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-bottom: 15px;
|
||||
flex-flow: row !important;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import variables from 'config/variables';
|
||||
import { memo, useState, useEffect } from 'react';
|
||||
import {
|
||||
MdSettings as Settings,
|
||||
MdWidgets as Addons,
|
||||
MdShoppingBasket as Marketplace,
|
||||
MdMenu as Navbar,
|
||||
MdEmojiPeople as Greeting,
|
||||
MdAccessAlarm as Time,
|
||||
MdOutlineFormatQuote as Quote,
|
||||
MdLink as QuickLinks,
|
||||
MdDateRange as Date,
|
||||
MdOutlineTextsms as Message,
|
||||
MdOutlinePhoto as Background,
|
||||
MdSearch,
|
||||
MdCloudQueue as Weather,
|
||||
MdFormatPaint as Appearance,
|
||||
MdTranslate as Language,
|
||||
MdOutlineSettings as Advanced,
|
||||
MdBugReport as Experimental,
|
||||
MdOutlineAssessment as Stats,
|
||||
MdOutlineNewReleases as Changelog,
|
||||
MdInfoOutline as About,
|
||||
MdOutlineExtension as Added,
|
||||
MdAddCircleOutline as Create,
|
||||
MdViewAgenda as Overview,
|
||||
MdCollectionsBookmark as Collections,
|
||||
} from 'react-icons/md';
|
||||
|
||||
const iconMapping = {
|
||||
[variables.getMessage('modals.main.marketplace.product.overview')]: <Overview />,
|
||||
[variables.getMessage('modals.main.navbar.settings')]: <Settings />,
|
||||
[variables.getMessage('modals.main.navbar.addons')]: <Addons />,
|
||||
[variables.getMessage('modals.main.navbar.marketplace')]: <Marketplace />,
|
||||
[variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: <Navbar />,
|
||||
[variables.getMessage('modals.main.settings.sections.greeting.title')]: <Greeting />,
|
||||
[variables.getMessage('modals.main.settings.sections.time.title')]: <Time />,
|
||||
[variables.getMessage('modals.main.settings.sections.quicklinks.title')]: <QuickLinks />,
|
||||
[variables.getMessage('modals.main.settings.sections.quote.title')]: <Quote />,
|
||||
[variables.getMessage('modals.main.settings.sections.date.title')]: <Date />,
|
||||
[variables.getMessage('modals.main.settings.sections.message.title')]: <Message />,
|
||||
[variables.getMessage('modals.main.settings.sections.background.title')]: <Background />,
|
||||
[variables.getMessage('modals.main.settings.sections.search.title')]: <MdSearch />,
|
||||
[variables.getMessage('modals.main.settings.sections.weather.title')]: <Weather />,
|
||||
[variables.getMessage('modals.main.settings.sections.appearance.title')]: <Appearance />,
|
||||
[variables.getMessage('modals.main.settings.sections.language.title')]: <Language />,
|
||||
[variables.getMessage('modals.main.settings.sections.advanced.title')]: <Advanced />,
|
||||
[variables.getMessage('modals.main.settings.sections.stats.title')]: <Stats />,
|
||||
[variables.getMessage('modals.main.settings.sections.experimental.title')]: <Experimental />,
|
||||
[variables.getMessage('modals.main.settings.sections.changelog.title')]: <Changelog />,
|
||||
[variables.getMessage('modals.main.settings.sections.about.title')]: <About />,
|
||||
[variables.getMessage('modals.main.addons.added')]: <Added />,
|
||||
[variables.getMessage('modals.main.addons.create.title')]: <Create />,
|
||||
[variables.getMessage('modals.main.marketplace.all')]: <Addons />,
|
||||
[variables.getMessage('modals.main.marketplace.photo_packs')]: <Background />,
|
||||
[variables.getMessage('modals.main.marketplace.quote_packs')]: <Quote />,
|
||||
[variables.getMessage('modals.main.marketplace.preset_settings')]: <Advanced />,
|
||||
[variables.getMessage('modals.main.marketplace.collections')]: <Collections />,
|
||||
};
|
||||
|
||||
function Tab({ label, currentTab, onClick, navbarTab }) {
|
||||
const [isExperimental, setIsExperimental] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setIsExperimental(localStorage.getItem('experimental') !== 'false');
|
||||
}, []);
|
||||
|
||||
let className = navbarTab ? 'navbar-item' : 'tab-list-item';
|
||||
if (currentTab === label) {
|
||||
className += navbarTab ? ' navbar-item-active' : ' tab-list-active';
|
||||
}
|
||||
|
||||
const icon = iconMapping[label];
|
||||
const divider = [
|
||||
variables.getMessage('modals.main.settings.sections.weather.title'),
|
||||
variables.getMessage('modals.main.settings.sections.language.title'),
|
||||
variables.getMessage('modals.main.marketplace.all'),
|
||||
variables.getMessage('modals.main.settings.sections.experimental.title'),
|
||||
].includes(label);
|
||||
const mue = [
|
||||
variables.getMessage('modals.main.marketplace.product.overview'),
|
||||
variables.getMessage('modals.main.addons.added'),
|
||||
variables.getMessage('modals.main.marketplace.all'),
|
||||
].includes(label);
|
||||
|
||||
if (
|
||||
label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
|
||||
!isExperimental
|
||||
) {
|
||||
return <hr />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{mue && <span className="mainTitle">Mue</span>}
|
||||
<button className={className} onClick={() => onClick(label)}>
|
||||
{icon} <span>{label}</span>
|
||||
</button>
|
||||
{divider && <hr />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Tab);
|
||||
@@ -1,121 +0,0 @@
|
||||
import variables from 'config/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import {
|
||||
MdSettings,
|
||||
MdOutlineShoppingBasket,
|
||||
MdOutlineExtension,
|
||||
MdRefresh,
|
||||
MdClose,
|
||||
} from 'react-icons/md';
|
||||
import Tab from './Tab';
|
||||
import { Button } from 'components/Elements';
|
||||
import ErrorBoundary from '../../../ErrorBoundary';
|
||||
|
||||
class Tabs extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentTab: this.props.children[0].props.label,
|
||||
currentName: this.props.children[0].props.name,
|
||||
};
|
||||
}
|
||||
|
||||
onClick = (tab, name) => {
|
||||
if (name !== this.state.currentName) {
|
||||
variables.stats.postEvent('tab', `Opened ${name}`);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
currentTab: tab,
|
||||
currentName: name,
|
||||
});
|
||||
};
|
||||
|
||||
hideReminder() {
|
||||
localStorage.setItem('showReminder', false);
|
||||
document.querySelector('.reminder-info').style.display = 'none';
|
||||
}
|
||||
|
||||
render() {
|
||||
const navbarButtons = [
|
||||
{
|
||||
tab: 'settings',
|
||||
icon: <MdSettings />,
|
||||
},
|
||||
{
|
||||
tab: 'addons',
|
||||
icon: <MdOutlineExtension />,
|
||||
},
|
||||
{
|
||||
tab: 'marketplace',
|
||||
icon: <MdOutlineShoppingBasket />,
|
||||
},
|
||||
];
|
||||
|
||||
const reminderInfo = (
|
||||
<div
|
||||
className="reminder-info"
|
||||
style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
|
||||
>
|
||||
<div className="shareHeader">
|
||||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.reminder.title')}
|
||||
</span>
|
||||
<span className="closeModal" onClick={() => this.hideReminder()}>
|
||||
<MdClose />
|
||||
</span>
|
||||
</div>
|
||||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.reminder.message')}
|
||||
</span>
|
||||
<button onClick={() => window.location.reload()}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.error_boundary.refresh')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
|
||||
<div className="modalSidebar">
|
||||
{this.props.children.map((tab, index) => (
|
||||
<Tab
|
||||
currentTab={this.state.currentTab}
|
||||
key={index}
|
||||
label={tab.props.label}
|
||||
onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
|
||||
navbarTab={this.props.navbar || false}
|
||||
/>
|
||||
))}
|
||||
{reminderInfo}
|
||||
</div>
|
||||
<div className="modalTabContent">
|
||||
<div className="modalNavbar">
|
||||
{navbarButtons.map(({ tab, icon }, index) => (
|
||||
<Button
|
||||
type="navigation"
|
||||
onClick={() => this.props.changeTab(tab)}
|
||||
icon={icon}
|
||||
label={variables.getMessage(`modals.main.navbar.${tab}`)}
|
||||
active={this.props.current === tab}
|
||||
key={`${tab}-${index}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{this.props.children.map((tab, index) => {
|
||||
if (tab.props.label !== this.state.currentTab) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Tabs;
|
||||
@@ -1,9 +1,9 @@
|
||||
import variables from 'config/variables';
|
||||
import { memo } from 'react';
|
||||
import Tabs from './backend/Tabs';
|
||||
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||
|
||||
import Added from '../../../../marketplace/views/Added';
|
||||
import Create from '../../../../marketplace/views/Create';
|
||||
import Added from '../../marketplace/views/Added';
|
||||
import Create from '../../marketplace/views/Create';
|
||||
|
||||
function Addons(props) {
|
||||
return (
|
||||
@@ -1,8 +1,8 @@
|
||||
import variables from 'config/variables';
|
||||
import { memo } from 'react';
|
||||
|
||||
import Tabs from './backend/Tabs';
|
||||
import MarketplaceTab from '../../../../marketplace/views/Browse';
|
||||
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||
import MarketplaceTab from '../../marketplace/views/Browse';
|
||||
|
||||
function Marketplace(props) {
|
||||
return (
|
||||
@@ -1,9 +1,9 @@
|
||||
import variables from 'config/variables';
|
||||
import { memo } from 'react';
|
||||
|
||||
import Tabs from './backend/Tabs';
|
||||
import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
|
||||
|
||||
import Overview from '../settings/sections/Overview';
|
||||
import Overview from '../modals/main/settings/sections/Overview';
|
||||
import { NavbarOptions } from 'features/navbar';
|
||||
import { GreetingOptions } from 'features/greeting';
|
||||
import { TimeOptions, DateOptions } from 'features/time';
|
||||
@@ -13,13 +13,13 @@ import { MessageOptions } from 'features/message';
|
||||
import { BackgroundOptions } from 'features/background';
|
||||
import { SearchOptions } from 'features/search';
|
||||
import { WeatherOptions } from 'features/weather';
|
||||
import Appearance from '../settings/sections/Appearance';
|
||||
import Language from '../settings/sections/Language';
|
||||
import Advanced from '../settings/sections/Advanced';
|
||||
import Stats from '../settings/sections/Stats';
|
||||
import Experimental from '../settings/sections/Experimental';
|
||||
import Changelog from '../settings/sections/Changelog';
|
||||
import About from '../settings/sections/About';
|
||||
import Appearance from '../modals/main/settings/sections/Appearance';
|
||||
import Language from '../modals/main/settings/sections/Language';
|
||||
import Advanced from '../modals/main/settings/sections/Advanced';
|
||||
import Stats from '../modals/main/settings/sections/Stats';
|
||||
import Experimental from '../modals/main/settings/sections/Experimental';
|
||||
import Changelog from '../modals/main/settings/sections/Changelog';
|
||||
import About from '../modals/main/settings/sections/About';
|
||||
|
||||
const sections = [
|
||||
{ label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },
|
||||
Reference in New Issue
Block a user