DiscordColorways v6.5.0, Colorway CSS (CCSS) version 1.21, new theme …

…preset
DaBluLite · Sep 5, 2024 · 500a49e · 500a49e
1 parent 379859a
commit 500a49e
Show file tree

Hide file tree

Showing 12 changed files with 739 additions and 651 deletions.
diff --git a/components/AutoColorwaySelector.tsx b/components/AutoColorwaySelector.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { DataStore, useState, useEffect } from "../";
+import { DataStore, useEffect, useState } from "../";
 import { getAutoPresets } from "../css";
 import { ModalProps } from "../types";
 

diff --git a/components/ColorwaysButton.tsx b/components/ColorwaysButton.tsx
@@ -4,14 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { PalleteIcon } from "./Icons";
-
+import { DataStore, FluxDispatcher, FluxEvents, openModal, PluginProps, useEffect, useState } from "..";
 import { getAutoPresets } from "../css";
 import { ColorwayObject } from "../types";
-import Selector from "./MainModal";
-import { DataStore, useEffect, useState, FluxDispatcher, FluxEvents, openModal, PluginProps, useRef } from "..";
-import Tooltip from "./Tooltip";
+import { PalleteIcon } from "./Icons";
 import ListItem from "./ListItem";
+import Selector from "./MainModal";
 
 export default function () {
     const [activeColorway, setActiveColorway] = useState<string>("None");
@@ -36,21 +34,21 @@ export default function () {
             <>
                 <span>Colorways</span>
                 <span style={{ color: "var(--text-muted)", fontWeight: 500, fontSize: 12 }}>{"Active Colorway: " + activeColorway}</span>
-                {activeColorway === "Auto" ? <span style={{ color: "var(--text-muted)", fontWeight: 500, fontSize: 12 }}>{"Auto Preset: " + (getAutoPresets()[autoPreset].name || "None")}</span> : <></>}
+                {activeColorway === "Auto" ? <span style={{ color: "var(--text-muted)", fontWeight: 500, fontSize: 12 }}>{"Auto Preset: " + (autoPreset ? getAutoPresets()[autoPreset].name : "None")}</span> : <></>}
             </>
         }>
         {({ onMouseEnter, onMouseLeave, isActive, onClick }) => {
             return <div
                 className="ColorwaySelectorBtn"
-                onMouseEnter={async (e) => {
+                onMouseEnter={async e => {
                     onMouseEnter(e);
                     setActiveColorway((await DataStore.get("activeColorwayObject") as ColorwayObject).id || "None");
                     setAutoPreset(await DataStore.get("activeAutoPreset") as string);
                 }}
-                onMouseLeave={(e) => {
+                onMouseLeave={e => {
                     onMouseLeave(e);
                 }}
-                onClick={(e) => {
+                onClick={e => {
                     onClick(e);
                     isActive(false);
                     openModal((props: any) => <Selector modalProps={props} />);

diff --git a/components/MainModal.tsx b/components/MainModal.tsx
@@ -4,24 +4,23 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-/* eslint-disable arrow-parens */
+import { MouseEvent, MouseEventHandler } from "react";
 
-import SourceManager from "./SettingsTabs/SourceManager";
-import Store from "./SettingsTabs/Store";
-import Selector from "./Selector";
-import { useState, useEffect, DataStore, useRef, FluxDispatcher, FluxEvents } from "../";
-import SettingsPage from "./SettingsTabs/SettingsPage";
+import { DataStore, FluxDispatcher, FluxEvents, useEffect, useRef, useState } from "../";
 import { ModalProps } from "../types";
-import { MouseEvent, MouseEventHandler } from "react";
 import { restartWS, updateRemoteSources, wsOpen } from "../wsClient";
 import { boundKey as bk } from "../wsClient";
+import Selector from "./Selector";
+import SettingsPage from "./SettingsTabs/SettingsPage";
+import SourceManager from "./SettingsTabs/SourceManager";
+import Store from "./SettingsTabs/Store";
 
 export default function ({
     modalProps
 }: {
     modalProps: ModalProps;
 }): JSX.Element | any {
-    const [activeTab, setActiveTab] = useState<"selector" | "settings" | "sources" | "store" | "ws_connection">("selector");
+    const [activeTab, setActiveTab] = useState<"selector" | "settings" | "sources" | "discover" | "ws_connection">("selector");
     const [theme, setTheme] = useState("discord");
     const [pos, setPos] = useState({ x: 0, y: 0 });
     const [showMenu, setShowMenu] = useState(false);
@@ -46,7 +45,7 @@ export default function ({
         };
     }, []);
 
-    function SidebarTab({ id, title, icon, bottom }: { id: "selector" | "settings" | "sources" | "store" | "ws_connection", title: string, icon: JSX.Element, bottom?: boolean; }) {
+    function SidebarTab({ id, title, icon, bottom }: { id: "selector" | "settings" | "sources" | "discover" | "ws_connection", title: string, icon: JSX.Element, bottom?: boolean; }) {
         return <div className={"colorwaySelectorSidebar-tab" + (id == activeTab ? " active" : "")} style={bottom ? { marginTop: "auto" } : {}} onClick={!bottom ? ((() => setActiveTab(id)) as unknown as MouseEventHandler<HTMLDivElement>) : rightClickContextMenu}>{icon}</div>;
     }
 
@@ -74,17 +73,17 @@ export default function ({
         <>
             <div className={`colorwaySelectorModal ${modalProps.transitionState == 2 ? "closing" : ""} ${modalProps.transitionState == 4 ? "hidden" : ""}`} data-theme={theme} {...modalProps}>
                 <div className="colorwaySelectorSidebar">
-                    <SidebarTab icon={<>&#xF30D;</>} id="selector" title="Change Colorway" />
-                    <SidebarTab icon={<>&#xF3E3;</>} id="settings" title="Settings" />
-                    <SidebarTab icon={<>&#xF2C6;</>} id="sources" title="Sources" />
-                    <SidebarTab icon={<>&#xF543;</>} id="store" title="Store" />
-                    <SidebarTab bottom icon={<>&#xF3EE;</>} id="ws_connection" title="Manager Connection" />
+                    <SidebarTab icon={<>&#xF4B0;</>} id="selector" title="Change Colorway" />
+                    <SidebarTab icon={<></>} id="settings" title="Settings" />
+                    <SidebarTab icon={<>&#xF61C;</>} id="sources" title="Sources" />
+                    <SidebarTab icon={<>&#xF2D0;</>} id="discover" title="Discover" />
+                    <SidebarTab bottom icon={<>&#xF61C;</>} id="ws_connection" title="Manager Connection" />
                 </div>
                 <div className="colorwayModalContent">
-                    {activeTab === "selector" && <Selector />}
+                    {activeTab === "selector" && <div className="colorwayInnerTab" style={{ height: "100%" }}><Selector /></div>}
                     {activeTab == "sources" && <SourceManager />}
-                    {activeTab == "store" && <Store />}
-                    {activeTab == "settings" && <div style={{ padding: "16px" }}><SettingsPage /></div>}
+                    {activeTab == "discover" && <Store />}
+                    {activeTab == "settings" && <SettingsPage />}
                 </div>
                 <div ref={menuProps} className={`colorwaysManagerConnectionMenu ${showMenu ? "visible" : ""}`} style={{
                     position: "fixed",