(feat): update ui styles and layout

src-tauri/tauri.conf.json

@@ -44,12 +44,12 @@
     "windows": [
       {
         "title": "KlectrRadio",
-        "width": 1200,
+        "width": 800,
         "height": 600,
         "decorations": false,
         "resizable": true,
-        "min-width": 800,
+        "minWidth": 800,
-        "min-height": 600
+        "minHeight": 600
       }
     ],
     "security": {

src/App.tsx

@@ -13,15 +13,17 @@ export function App() {
   }, [])
 
   return (
-    <div className="flex flex-row min-h-screen gap-2 px-2">
+    <div className="flex flex-row gap-2 px-2 mt-[30px]">
-      <div className="pt-10 min-h-screen max-h-screen min-w-[250px] flex flex-col gap-4 ">
+
+      {/* Left Section __________*/}
+      <div className="pt-2 min-h-[95vh] max-h-[95vh] min-w-[150px] flex flex-col gap-4 justify-start">
         <div className="w-full flex justify-center">
           <input type="text" className="rounded-md border p-1 w-full" placeholder="Search" />
         </div>
         <div>
           <h2 className="text-gray-500 text-sm">Music</h2>
           <ul>
-            <li className="flex gap-2 hover:bg-gray-200 rounded-md p-1 cursor-pointer">
+            <li className="flex gap-2 hover:bg-blue-100 rounded-md p-1 cursor-pointer hover:text-blue-500">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-radio-tower w-[15px]">
                 <path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9" />
                 <path d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5" />
@@ -35,27 +37,62 @@ export function App() {
             </li>
           </ul>
         </div>
-        <div className="flex justify-center">
+        <button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button>
-          <button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100">Create New +</button>
-        </div>
       </div>
 
 
       {/* Right Section __________*/}
-      <div className="flex-1 h-full min-h-screen max-h-screen flex h-0 p-2">
+      <div className="flex-1 min-h-[95vh] max-h-[95vh] flex h-0 p-2">
         <div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
-          <div id="top" className=" p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px]">
+
-            <p>Music Player</p>
+          {/* Music Player __________*/}
+          <div id="top" className="justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] flex gap-2 items-center">
+            <div className="flex gap-2 items-center">
+              <img className="rounded-xl" src="https://www.thispersondoesnotexist.com" width={80} height={'auto'} alt="station art" />
+              <div className="flex flex-col">
+                <p>Camden to Chinatown</p>
+                <p>Loafy Building, Raimu</p>
               </div>
-          <div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col">
+            </div>
+
+            <div >
+              <div className="flex gap-1 justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-play">
+                  <polygon points="6 3 20 12 6 21 6 3" />
+                </svg>
+              </div>
+
+              <div className="flex gap-1">
+                <p>0:40</p>
+                <input type="range" />
+                <p>1:44</p>
+              </div>
+            </div>
+
+            <div className="flex gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-volume-1">
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+              </svg>
+              <input type="range" />
+            </div>
+          </div>
+
+          {/* Popular Section __________*/}
+          <div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]">
             <div id="middle-main" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
               <h2>Popular</h2>
             </div>
           </div>
+
+          {/* Bottom Section __________*/}
           <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4">
+            {/* Local Radio __________*/}
             <div id="bottom-l" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
               <h2>Local Radio</h2>
             </div>
+
+            {/* Recommended Radio __________*/}
             <div id="bottom-r" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
               <h2>Recommended For You</h2>
             </div>

src/styles.css

@@ -26,7 +26,7 @@ body {
 }
 
 .titlebar {
-  height: 20px;
+  height: 30px;
   user-select: none;
   display: flex;
   justify-content: flex-start;
@@ -35,7 +35,8 @@ body {
   top: 0;
   left: 0;
   right: 0;
-  padding: 10px;
+  padding: 5px;
+  cursor: grab;
 }
 .titlebar-button {
   display: inline-flex;