Merge pull request #3 from PetrIvan/feature/ui-consistency

UI Consistency

src/app/globals.css

@@ -30,12 +30,15 @@ body {
 .range-slider::-webkit-slider-thumb {
   background: #5b21b6;
   border: none;
+  height: 1dvw;
+  width: 1dvw;
 }
 
 .range-slider::-moz-range-thumb {
   background: #5b21b6;
   border: none;
-  height: 100%;
+  height: 1dvw;
+  width: 1dvw;
 }
 
 /* For search bar label */

src/app/page.tsx

@@ -5,14 +5,19 @@ export default function Home() {
     <div>
       <div className="relative flex flex-col bg-[url('/background.jpg')] bg-scroll bg-center bg-cover">
         <header className="w-full flex flew-row justify-start items-center backdrop-blur-md p-2 cursor-default">
-          <img src="/app-icon.svg" alt="Logo" className="h-15 w-15 mr-1" />
-          <h1 className="text-3xl text-white">ChordSeqAI</h1>
+          <h1>
+            <img
+              src="/logo.svg"
+              alt="Compose with ChordSeqAI: Your AI Chord Progression Assistant"
+              className="h-15 w-15 mr-1"
+            />
+          </h1>
         </header>
         <div className="flex-grow flex flex-col items-center justify-center text-center p-4 space-y-5 backdrop-blur-[0.1dvw] py-20 pb-36 z-20">
           <h2 className="text-3xl md:text-5xl text-white font-semibold mb-5 max-w-xl">
             Your AI-powered chord progression copilot
           </h2>
-          <p className="text-lg md:text-xl text-gray-300 max-w-2xl pb-5">
+          <p className="text-lg md:text-xl text-zinc-300 max-w-2xl pb-5">
             Compose beautiful chord progressions in your browser, with the help
             of AI, for free. Open-source project, code available on GitHub.
           </p>
@@ -27,7 +32,7 @@ export default function Home() {
               <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
                 Add a chord and get the next one suggested
               </h3>
-              <p className="text-lg md:text-xl text-gray-300 pb-5">
+              <p className="text-lg md:text-xl text-zinc-300 pb-5">
                 ChordSeqAI uses neural networks to predict the next chord in a
                 progression. It was trained on a large dataset of chord
                 sequences from popular music.
@@ -49,7 +54,7 @@ export default function Home() {
               <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
                 Specify the style of your chord progression
               </h3>
-              <p className="text-lg md:text-xl text-gray-300 pb-5">
+              <p className="text-lg md:text-xl text-zinc-300 pb-5">
                 You can specify the genre and the musical period with
                 conditional models.
               </p>
@@ -70,7 +75,7 @@ export default function Home() {
               <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
                 Integrate with your favorite DAW
               </h3>
-              <p className="text-lg md:text-xl text-gray-300 pb-5">
+              <p className="text-lg md:text-xl text-zinc-300 pb-5">
                 You can export your chord progressions as MIDI files and import
                 them into FL Studio, Ableton Live, Logic Pro, or any other DAW.
               </p>
@@ -92,7 +97,7 @@ export default function Home() {
             <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
               Model Overview
             </h3>
-            <ul className="flex flex-col items-start space-y-2 text-justify text-lg md:text-xl text-gray-200 pb-5">
+            <ul className="flex flex-col items-start space-y-2 text-justify text-lg md:text-xl text-zinc-300 pb-5">
               <li>
                 <b>Recurrent Network.</b> A simple network for low-end devices.
               </li>
@@ -116,7 +121,7 @@ export default function Home() {
             <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
               Learn more
             </h3>
-            <ul className="flex flex-col items-start space-y-2 text-justify text-lg md:text-xl text-gray-200 pb-5">
+            <ul className="flex flex-col items-start space-y-2 text-justify text-lg md:text-xl text-zinc-300 pb-5">
               <li>
                 <b>Documentation.</b> You can view all of the available features{" "}
                 <a
@@ -157,7 +162,7 @@ export default function Home() {
             <h3 className="text-2xl md:text-3xl text-white font-semibold mb-5">
               Contact Us
             </h3>
-            <p className="text-lg md:text-xl text-gray-200 pb-5">
+            <p className="text-lg md:text-xl text-zinc-300 pb-5">
               To report bugs or request features, use either{" "}
               <a
                 className="text-blue-400 hover:underline"

src/components/landing_page/quick_buttons.tsx

@@ -19,7 +19,7 @@ export default function QuickButtons() {
       }`}
     >
       {isMobile && (
-        <p className="text-lg md:text-xl text-gray-300 px-5">
+        <p className="text-lg md:text-xl text-zinc-300 px-5">
           Currently available only on desktop devices.
         </p>
       )}
@@ -36,7 +36,7 @@ export default function QuickButtons() {
 
       {!isMobile && (
         <a
-          className="flex items-center justify-center py-7 px-6 rounded-full shadow-md border-2 text-xl md:text-2xl font-medium w-48 h-12 border-zinc-200 text-zinc-200 bg-gradient-to-bl from-[#8C205C] to-[#5C51A6] transition duration-300 ease-in-out hover:brightness-90"
+          className="flex items-center justify-center py-7 px-6 rounded-full shadow-md border-2 text-xl md:text-2xl font-medium w-48 h-12 border-white text-white bg-gradient-to-bl from-[#8C205C] to-[#5C51A6] transition duration-300 ease-in-out hover:brightness-90"
           href="/app"
         >
           Launch App

src/components/model_selection/model_selection.tsx

@@ -131,7 +131,7 @@ export default function ModelSelection() {
       </button>
       {models[selectedModel][0].includes("Conditional") && (
         <>
-          <div className="border-r-[0.2dvw] border-zinc-100 self-stretch" />
+          <div className="border-r-[0.2dvw] border-white self-stretch" />
           {style()}
         </>
       )}

src/components/playhead.tsx

@@ -31,11 +31,11 @@ export default function Playhead({ timelineStart }: Props) {
         transform: `translateX(-50%) translateX(${timelinePosition}px)`,
       }}
     >
-      <svg viewBox="0 0 27 24" className="fill-sky-600 h-[1dvw] w-[1dvw]">
+      <svg viewBox="0 0 27 24" className="fill-blue-400 h-[1dvw] w-[1dvw]">
         <path d="M13.5 24L0.0 0L27.0 0L13.5 24Z" />
       </svg>
-      <div className="border-r-[0.2dvw] border-sky-600 h-full" />
-      <svg viewBox="0 0 27 24" className="fill-sky-600 h-[1dvw] w-[1dvw]">
+      <div className="border-r-[0.2dvw] border-blue-400 h-full" />
+      <svg viewBox="0 0 27 24" className="fill-blue-400 h-[1dvw] w-[1dvw]">
         <path d="M13.5 0L27.0 24H0.0L13.5 0Z" />
       </svg>
     </div>

src/components/suggestions/decay.tsx

@@ -24,12 +24,12 @@ export default function Decay() {
 
   return (
     <div className="flex flex-col items-center justify-center">
-      <label htmlFor="decay" className="text-white text-[1.2dvw] mb-[0.5dvw]">
+      <label htmlFor="decay" className="text-white text-[2.5dvh] mb-[0.5dvw]">
         Decay
       </label>
       <input
         id="decay"
-        className="w-[8dvw] h-[1dvw] bg-zinc-800 rounded-[1dvw] appearance-none cursor-pointer accent-violet-800 range-slider"
+        className="w-[8dvw] h-[1dvw] bg-zinc-800 rounded-full appearance-none cursor-pointer accent-violet-800 range-slider"
         type="range"
         style={{
           background: `linear-gradient(to right, #5b21b6 50%, #27272a 50%)`,

src/components/suggestions/search_bar.tsx

@@ -70,7 +70,7 @@ export default function SearchBar() {
         </label>
         <input
           id="search"
-          className="flex-1 h-full bg-zinc-800 text-white text-[1.2dvw] rounded-[1dvw] placeholder-zinc-500 placeholder-opacity-50 border-transparent focus:border-transparent focus:ring-0"
+          className="flex-1 h-full bg-zinc-800 text-white text-[2.5dvh] rounded-[1dvw] placeholder-zinc-500 placeholder-opacity-50 border-transparent focus:border-transparent focus:ring-0"
           type="text"
           placeholder="Search a chord..."
           autoComplete="off"
@@ -141,7 +141,7 @@ export default function SearchBar() {
         </button>
         {isPianoOpen && (
           <div
-            className="absolute top-[100%] bg-zinc-950 p-[1dvw] pb-[2dvw] rounded-[1dvw] flex flex-row items-center justify-center"
+            className="absolute top-[100%] bg-zinc-950 p-[1dvw] pb-[2dvw] rounded-[0.5dvw] flex flex-row items-center justify-center"
             ref={pianoRef}
           >
             <Piano

src/components/suggestions/suggestions.tsx

@@ -402,17 +402,30 @@ const MemoizedSuggestions = React.memo(function MemoizedSuggestions({
       </div>
     );
   } else {
-    content = (
-      <div
-        className="grid gap-[1dvw] overflow-y-auto"
-        style={{
-          gridTemplateColumns: "repeat(auto-fit, minmax(10dvw, 1fr))",
-          minHeight: "0",
-        }}
-      >
-        {getChordsList()}
-      </div>
-    );
+    const chordList = getChordsList();
+
+    if (chordList.length === 0) {
+      content = (
+        <div className="h-full flex flex-col items-center justify-center">
+          <p className="text-zinc-500 text-center text-[2dvw] max-w-[50%]">
+            Haven't found what you're looking for? Try enabling variants or
+            changing the search query.
+          </p>
+        </div>
+      );
+    } else {
+      content = (
+        <div
+          className="grid gap-[1dvw] overflow-y-auto"
+          style={{
+            gridTemplateColumns: "repeat(auto-fit, minmax(10dvw, 1fr))",
+            minHeight: "0",
+          }}
+        >
+          {chordList}
+        </div>
+      );
+    }
   }
 
   return (

src/components/ticks.tsx

@@ -46,7 +46,7 @@ export default function Ticks({ top, availableSpace, timelineStart }: Props) {
         style={tickStyle}
       >
         {/* To make the tick width not influence the distribution while being visible */}
-        <div className="absolute h-full w-full border-r-[0.15dvw] border-zinc-100" />
+        <div className="absolute h-full w-full border-r-[0.15dvw] border-white" />
       </div>
     );
   };

src/components/timeline/chord.tsx

@@ -232,10 +232,10 @@ export default function Chord({ index, token, duration, variant }: Props) {
           token === -1
             ? selectedChord === index
               ? "bg-zinc-700 text-white"
-              : "bg-zinc-800 text-zinc-200"
+              : "bg-zinc-800 text-zinc-100"
             : selectedChord === index
             ? "bg-violet-500 text-white"
-            : "bg-violet-700 text-zinc-200"
+            : "bg-violet-700 text-zinc-100"
         } ${
           resizingAnyChord ? "" : "hover:filter hover:brightness-110"
         } flex justify-center items-center py-[2dvh] rounded-[0.5dvw] overflow-hidden outline-none h-full min-h-0 min-w-0 whitespace-nowrap`}
@@ -248,9 +248,9 @@ export default function Chord({ index, token, duration, variant }: Props) {
               }
         }
         ref={chordElementRef}
-        title={`${
-          selectedChord === index ? "Des" : "S"
-        }elect this chord/right click to open variants`}
+        title={`${selectedChord === index ? "Des" : "S"}elect this chord${
+          token === -1 ? "" : "/right click to open variants"
+        }`}
       >
         <p className="select-none overflow-hidden">
           {token === -1 ? "?" : tokenToChord[token][variant]}

src/components/timeline/settings_dropdown.tsx

@@ -28,10 +28,10 @@ export default function SettingsDropdown({ dropdownRef }: Props) {
       className="absolute z-[15] top-full mt-[0.5dvw] bg-zinc-950 rounded-[0.5dvw] flex flex-row items-center justify-between p-[1dvw] shadow-lg shadow-zinc-950"
       ref={dropdownRef}
     >
-      <label className="select-none text-[1.2dvw] mr-[1dvw]">BPM:</label>
+      <label className="select-none text-[2.5dvh] mr-[1dvw]">BPM:</label>
       <input
         type="number"
-        className="w-[5dvw] h-[3dvw] bg-zinc-800 rounded-[0.5dvw] text-[1.2dvw]"
+        className="w-[5dvw] h-[3dvw] bg-zinc-800 rounded-[0.5dvw] text-[2.5dvh]"
         value={localBpm}
         onChange={handleNumeratorChange}
       />

src/components/timeline/timeline_controls.tsx

@@ -288,7 +288,7 @@ export default function TimelineControls({
         </button>
         <button
           className="grow select-none filter active:brightness-90 flex flex-col justify-center items-center"
-          title="Settings"
+          title="Playback settings"
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           ref={openDropdownButtonRef}
         >