window ui redesign

dist-electron/main.js

@@ -13,6 +13,14 @@ let win;
 function createWindow() {
   win = new BrowserWindow({
     icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
+    width: 360,
+    height: 64,
+    frame: false,
+    transparent: true,
+    resizable: false,
+    alwaysOnTop: true,
+    hasShadow: false,
+    vibrancy: "sidebar",
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs")
     }

electron/main.ts

@@ -29,6 +29,14 @@ let win: BrowserWindow | null
 function createWindow() {
   win = new BrowserWindow({
     icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
+    width: 360,
+    height: 64,
+    frame: false,
+    transparent: true,
+    resizable: false,
+    alwaysOnTop: true,
+    hasShadow: false,
+    vibrancy: 'sidebar',
     webPreferences: {
       preload: path.join(__dirname, 'preload.mjs'),
     },

src/App.tsx

@@ -1,18 +1,36 @@
-import "./App.css";
-import { Button } from "@/components/ui/button"
 import { useScreenRecorder } from "./hooks/useScreenRecorder";
+import { Button } from "@/components/ui/button";
+import { BsRecordCircle } from "react-icons/bs";
+import { FaRegStopCircle } from "react-icons/fa";
+import { MdClose } from "react-icons/md";
 
-function App() {
+export default function App() {
   const { recording, toggleRecording } = useScreenRecorder();
 
   return (
-    <>
-       <Button variant="outline" onClick={toggleRecording}>
-         {recording ? "Stop Recording" : "Start Recording"}
-       </Button>
-        
-    </>
+    <div className="w-full h-full flex flex-row items-center backdrop-blur-md px-4 gap-2">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-8 h-8 rounded-full text-white hover:bg-transparent"
+        title="Close"
+        onClick={() => window.close()}
+      >
+        <MdClose size={18} className="text-white"/>
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={toggleRecording}
+        title={recording ? "Stop Recording" : "Start Recording"}
+        className="rounded-full flex items-center justify-center hover:bg-transparent"
+      >
+        {recording ? (
+          <FaRegStopCircle size={16} className="text-red-500" />
+        ) : (
+          <BsRecordCircle size={16} className="text-white" />
+        )}
+      </Button>
+    </div>
   );
 }
-
-export default App;

src/index.css

@@ -1,3 +1,6 @@
+body {
+  background: transparent !important;
+}
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -50,9 +53,6 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -73,7 +73,7 @@ button:focus-visible {
 
 
 
-@layer base {
+@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 20 14.3% 4.1%;
@@ -100,7 +100,7 @@ button:focus-visible {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-  }
+  }
   .dark {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
@@ -130,12 +130,11 @@ button:focus-visible {
 }
 
 
-
-@layer base {
-  * {
+@layer base {
+  * {
     @apply border-border;
-  }
-  body {
+  }
+  body {
     @apply bg-background text-foreground;
   }
 }