Merge Theme Editor and Wallpaper Selector (#210)

* Merge Theme Editor and Wallpaper Selector

* Set cursor to pointer in wallpaper & style

* Remove ThemeEditor.js from index.html

* unfuck scrolling

* nicer tabs in wallpaper and style

* add fade-in to color header buttons

* update exploreapp to reflect merging of wallpaper and themes

public/index.html

@@ -63,10 +63,10 @@
 
         <script type="text/javascript" src="lib/coreapps/XAppStub.js"></script>
         <script type="text/javascript" src="lib/coreapps/XFrogApp.js"></script>
-        <script
+        <!-- <script
             type="text/javascript"
             src="lib/coreapps/ThemeEditor.js"
-        ></script>
+        ></script> -->
         <script
             type="text/javascript"
             src="lib/coreapps/ExploreApp.js"

src/Boot.tsx

@@ -483,8 +483,8 @@ document.addEventListener("anura-login-completed", async () => {
     const wallpaper = new WallpaperSelector();
     anura.registerApp(wallpaper);
 
-    const themeEditor = new ThemeEditor();
-    anura.registerApp(themeEditor);
+    // const themeEditor = new ThemeEditor();
+    // anura.registerApp(themeEditor);
 
     const explore = new ExploreApp();
     anura.registerApp(explore);
@@ -636,12 +636,12 @@ document.addEventListener("anura-login-completed", async () => {
     const desktopCtx = new ContextMenu(true); // we are init'ing before anura so this is needed
 
     desktopCtx.addItem(
-        "Set wallpaper",
+        "Set wallpaper & style",
         () => {
             // this however will execute after anura is init'ed
             anura.apps["anura.wallpaper"].open();
         },
-        "wallpaper",
+        "brush",
     );
 
     document.addEventListener("contextmenu", function (e) {

src/anura.css

@@ -116,7 +116,8 @@ nav li {
     position: absolute;
     background-color: var(--theme-secondary-bg);
     padding: 5px 0;
-    width: 150px;
+    min-width: 150px;
+    max-width: 250px;
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
 
     z-index: 10000;
@@ -128,7 +129,8 @@ nav li {
 
 .custom-menu.large {
     padding: 5px 0;
-    width: 170px;
+    min-width: 170px;
+    max-width: 300px;
     background-color: color-mix(in srgb, var(--theme-dark-bg) 85%, transparent);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);

src/coreapps/ExploreApp.tsx

@@ -142,15 +142,16 @@ class ExploreApp extends App {
             <h1>What's new in AnuraOS {anura.version.pretty}?</h1>
             <h2>Themes</h2>
             <p>
-                You can now completely customize how Anura looks! Just open the{" "}
+                You can now completely customize how Anura looks! Just open{" "}
                 <span>
                     <a href="javascript:anura.apps['anura.ui.themeeditor'].open();">
                         <img
-                            src="/assets/icons/theme.png"
-                            alt="Theme Editor Icon"
+                            src="/assets/icons/wallpaper.png"
+                            alt="Wallpaper Selector Icon"
                         />
-                        Theme Editor
+                        Wallpaper &amp; Style
                     </a>
+                    .
                 </span>
             </p>
             <h2>Support for more platforms</h2>
@@ -202,7 +203,7 @@ class ExploreApp extends App {
                             <img
                                 src="/assets/icons/settings.png"
                                 alt="Settings icon"
-                            />{" "}
+                            />
                             <a href="javascript:anura.apps['anura.settings'].open();">
                                 Settings
                             </a>
@@ -274,7 +275,7 @@ class ExploreApp extends App {
                     <img
                         src="/apps/marketplace.app/playstore.webp"
                         alt="Marketplace Icon"
-                    />{" "}
+                    />
                     <a href="javascript:anura.apps['anura.store'].open();">
                         Marketplace
                     </a>
@@ -284,24 +285,14 @@ class ExploreApp extends App {
             <h2>Customize your experience</h2>
             <p>
                 AnuraOS has robust customization features. You can change the
-                wallpaper using{" "}
+                wallpaper and system colors using{" "}
                 <span>
                     <a href="javascript:anura.apps['anura.wallpaper'].open();">
                         <img
                             src="/assets/icons/wallpaper.png"
                             alt="Wallpaper Selector Icon"
                         />
-                        Wallpaper Selector
-                    </a>
-                </span>
-                , and change the system colors using{" "}
-                <span>
-                    <a href="javascript:anura.apps['anura.ui.themeeditor'].open();">
-                        <img
-                            src="/assets/icons/theme.png"
-                            alt="Theme Editor Icon"
-                        />
-                        Theme Editor
+                        Wallpaper &amp; Style
                     </a>
                 </span>
                 .