add UI improvements, more helpful links, about ide version number tweaks

Author: terryzfeng

index.html

@@ -192,13 +192,16 @@
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1 1 4 4 4-4"/>
                   </svg>
                 </button>
-                <div id="helpDropdown" class="hidden dropdown w-48">
+                <div id="helpDropdown" class="hidden dropdown w-52">
                   <ul class="py-2 text-base text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
                     <li>
-                      <a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="dropdownItem">ChucK Reference</a>
+                      <a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="dropdownItem">ChucK API Reference</a>
                     </li>
                     <li>
-                      <a href="https://chuck.stanford.edu/doc" target="_blank" class="dropdownItem">Documentation</a>
+                      <a href="https://chuck.stanford.edu/webchuck/docs/" target="_blank" class="dropdownItem">WebChucK Docs</a>
+                    </li>
+                    <li>
+                      <a href="https://discord.gg/ENr3nurrx8" target="_blank" class="dropdownItem">Discord Community</a>
                     </li>
 
                     <li class="divider dark:border-t-gray-400" data-content="GITHUB"></li>
@@ -209,13 +212,10 @@
                       <a href="https://github.com/ccrma/webchuck-ide/issues/new" target="_blank" class="dropdownItem">Report an Issue</a>
                     </li>
 
-                    <li class="divider dark:border-t-gray-400" data-content="MORE"></li>
+                    <li class="divider dark:border-t-gray-400" data-content="ABOUT"></li>
                     <li>
                       <a href="https://chuck.stanford.edu/webchuck" target="_blank" class="dropdownItem">Learn WebChucK</a>
                     </li>
-                    <li>
-                      <a href="https://discord.gg/ENr3nurrx8" target="_blank" class="dropdownItem">Discord Community</a>
-                    </li>
                     <li>
                       <button id="about-ide" class="dropdownItem">About IDE</button>
                     </li>
@@ -287,7 +287,7 @@
         <!-- Left -->
         <div id="app-left">
           <div id="fileExplorerPanel" class="h-full flex flex-col justify-start">
-            <div id="fileExplorerHeader" class="header h-8 justify-start flex-none border-b border-dark-d drop-shadow-sm font-bold overflow-hidden whitespace-nowrap">
+            <div id="fileExplorerHeader" class="header h-8 justify-start flex-none border-b border-dark-d dark:border-dark-a drop-shadow-sm font-bold overflow-hidden whitespace-nowrap">
               <div class="px-2">File Explorer</div>
             </div>
             <div id="fileExplorerContainer">
@@ -353,7 +353,7 @@
           <!-- VM Monitor -->
           <div id="vmMonitor" class="relative">
             <table id="shredTable" class="w-full table-auto absolute text-left overflow-auto">
-              <thead class="h-8 align-middle font-medium border-b border-dark-d drop-shadow-sm">
+              <thead class="h-8 align-middle font-medium border-b border-dark-d dark:border-dark-a drop-shadow-sm">
                 <tr>
                   <th scope="col">Shred</th>
                   <th scope="col">Code</th>
@@ -372,7 +372,7 @@
               <button id="consoleTab"    type="button" class="header-item text-orange underline transition">CONSOLE</button>
               <button id="visualizerTab" type="button" class="header-item text-dark-5">VISUALIZER</button>
             </div>
-            <div id="consoleContainer" style="height: calc(100% - 1.75rem)" class="border-b border-sky-blue">
+            <div id="consoleContainer" style="height: calc(100% - 1.75rem)" class="border-b border-sky-blue dark:border-dark-4">
               <div id="console" class="bg-white dark:bg-dark-2 h-full"></div>
             </div>
             <div id="visualizerContainer" class="flex-1 bg-white dark:bg-dark-2 hidden">

src/components/gui/gui.ts

@@ -152,9 +152,6 @@ export default class GUI {
         guiButton.classList.add(
             "button",
             "secondary",
-            "border",
-            "border-orange",
-            "dark:border-white",
             "text-sm",
             "absolute",
             "bottom-2",
@@ -164,7 +161,7 @@ export default class GUI {
         // TODO: factor this out for clean util
         const isWindows = navigator.userAgent.includes("Windows");
         const metaKey = isWindows ? "Ctrl" : "⌘";
-        guiButton.title = `Save and Generate GUI [${metaKey} + S]`;
+        guiButton.title = `Generate GUI [${metaKey} + S]`;
 
         guiButton.addEventListener("click", () => GUI.generateGUI());
         parent.appendChild(guiButton);

src/components/navbar/navbar.ts

@@ -109,7 +109,7 @@ export default class NavBar {
             document.querySelector<HTMLButtonElement>("#about-ide")!;
         NavBar.aboutButton.addEventListener("click", () => {
             Console.print("|========================================|");
-            Console.print(`|             WebChucK IDE 2             |`);
+            Console.print(`|          WebChucK IDE v${version}           |`);
             Console.print("|========================================|");
             Console.print("| authors: terry feng & chuck team       |");
             Console.print("| date: 2023 - present                   |");

src/styles/index.css

@@ -275,7 +275,7 @@ table thead tr th {
 }
 
 table tbody tr td {
-    @apply py-3 px-4 border-b border-sky-blue-700;
+    @apply py-3 px-4 border-b border-sky-blue-700 dark:border-dark-5;
 }
 
 td:nth-child(3) {
@@ -304,7 +304,7 @@ td:nth-child(4) {
 
 /* HID CONTAINER */
 #hidLog {
-    @apply m-2 p-1 pt-0 w-72 h-32 overflow-hidden border border-gray-300 rounded-lg bg-white dark:bg-dark dark:border-gray-700;
+    @apply m-2 p-1 pt-0 w-72 h-32 overflow-hidden border border-dark-d rounded-lg bg-white dark:bg-dark dark:border-dark-4;
     width: 280px;
     height: 120px;
 }
@@ -323,7 +323,7 @@ td:nth-child(4) {
 }
 
 .button.secondary {
-    @apply hover:text-orange-light px-3 py-1.5 rounded-lg text-orange transition;
+    @apply text-orange hover:text-orange-light border border-orange hover:border-orange-light px-3 py-1.5 rounded-lg transition;
 }
 
 dialog {

tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
         "orange": {
           DEFAULT: "#FF8833",
           dark: "#D2691E",
-          light: "#FFAA33",
+          light: "#ffa64d",
           peach: "#FFE5C4",
         },
         "sky-blue": {