🌙 feat: Implement comprehensive dark mode support across the application

This update introduces a major feature: dark mode support throughout the application. It includes updates in various components such as `AudioSources`, `CameraSources`, `Loading`, `NavBar`, and more, to ensure a consistent dark theme. Additionally, the commit includes other refinements such as updating the `package.json` version, adding new SVG assets, and improving user interface elements to enhance the overall user experience. This significant enhancement aims to provide a more comfortable and customizable visual experience for users preferring dark mode.

Author: mangledbottles

electron/main.ts

@@ -18,7 +18,6 @@ const deviceCodeFilePath = path.join(sessionDataPath, 'deviceCode.txt');
 const userAccountFilePath = path.join(sessionDataPath, 'userAccount.txt');
 const userPreferencesFilePath = path.join(sessionDataPath, 'userPreferences.txt');
 
-
 autoUpdater.logger = logger
 Sentry.init({
   dsn: 'https://d9c49d59e5554239ac977e3a7c409cda@glitchtip.dermot.email/2'
@@ -132,7 +131,7 @@ ipcMain.handle('get-desktop-capturer-sources', async () => {
       if (!sourceMatched) return;
       const sourceThumbnail = sourceMatched?.thumbnail.toDataURL() ?? '';
       const sourceId = sourceMatched?.id ?? '';
-      if (!sourceThumbnail || !sourceId || !window.ownerName) return;
+      if (!sourceThumbnail || !sourceId || !window.ownerName || window.ownerName === 'ScreenLink') return;
 
       return {
         id: sourceId,
@@ -142,7 +141,7 @@ ipcMain.handle('get-desktop-capturer-sources', async () => {
           height: window.height,
         },
         ...window,
-        name: `[${window.ownerName}] - ${window.name}`,
+        name: window.name,
         applicationName: window.ownerName,
       };
     }).filter(source => source !== undefined); // Filter out undefined entries
@@ -400,8 +399,6 @@ ipcMain.handle('upload-video', async (_, uploadFile, uploadLink: string) => {
 
       // When the upload is complete, send a message to the renderer process to update the UI
       mainWindow?.webContents.send('set-window', 'main');
-      webcamWindow?.hide();
-      floatingWindow?.hide();
 
     }).catch((err) => {
       console.log(JSON.stringify({ e: "failed to upload video", err, uploadLink }))
@@ -468,6 +465,8 @@ const toggleCameraWindow = (show: boolean) => {
 
 const verifyDeviceCode = async (deviceCode: string) => {
   try {
+    if (!deviceCode || deviceCode === "{}") return null;
+
     const url = `${baseUrl}/api/devices/verify`;
     const response = await axios.post(url, { deviceCode });
     if (response.status !== 200) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "screenlink-desktop",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Screenlink",
   "description": "Screenlink Desktop",
   "scripts": {
@@ -22,6 +22,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@sentry/electron": "^4.15.1",

src/App.tsx

@@ -61,7 +61,6 @@ function App() {
         email: account?.user?.email,
         name: account?.user?.name,
         id: account?.id,
-
       });
     };
     getAccount();
@@ -176,8 +175,9 @@ function App() {
         />
       </div>
       <p className="read-the-docs mb-4">
-        Screenlink is an open-source video capture tool that lets you record
-        your screen and camera to share your ideas with your anyone.
+        Screenlink is an open-source Loom alternative. Easily record your
+        screen, camera, and microphone; then get an instant shareable link for
+        your recording.
       </p>
     </>
   );

src/assets/screenlink-dark.svg

@@ -33,14 +33,14 @@ export default function AudioSources({
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="inline-flex w-full justify-between rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+        <Menu.Button className="inline-flex w-full justify-between rounded-md bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
           <span className="h-5 w-5 opacity-0 pointer-events-none">
             <ChevronDown />
           </span>
           <span className="text-center flex-grow">
             {audioSource ? audioSource.label : "Select Audio"}
           </span>
-          <ChevronDown className="h-5 w-5 text-gray-400" />
+          <ChevronDown className="h-5 w-5 text-gray-400 dark:text-gray-200" />
         </Menu.Button>
       </div>
 
@@ -53,20 +53,20 @@ export default function AudioSources({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 dark:divide-gray-700 rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="py-1">
             {devices.map((device) => (
               <Menu.Item key={device.deviceId}>
                 {({ active }) => (
                   <a
                     className={`${
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700"
+                      active ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white" : "text-gray-700 dark:text-gray-200"
                     } group flex items-center px-4 py-2 text-sm cursor-pointer`}
                     onClick={() => setAudioSource(device)}
                   >
                     <span className="flex-shrink-0">
                       <Mic
-                        className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                        className="h-5 w-5 text-gray-400 dark:text-gray-200 group-hover:text-gray-500 dark:group-hover:text-gray-300"
                         aria-hidden="true"
                       />
                     </span>
@@ -81,16 +81,16 @@ export default function AudioSources({
               {({ active }) => (
                 <a
                   className={`${
-                    active ? "bg-gray-100 text-gray-900" : "text-gray-700"
-                  } group flex items-center px-4 py-2 text-sm`}
+                    active ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white" : "text-gray-700 dark:text-gray-200"
+                  } group flex items-center px-4 py-2 text-sm cursor-pointer`}
                   onClick={() => {
                     setAudioSource(null);
                   }}
                   id="no-camera"
                 >
                   <span className="flex-shrink-0">
                     <MicOff
-                      className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                      className="h-5 w-5 text-gray-400 dark:text-gray-200 group-hover:text-gray-500 dark:group-hover:text-gray-300"
                       aria-hidden="true"
                     />
                   </span>

src/assets/screenlink.png

@@ -38,14 +38,14 @@ export default function CameraSources({
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="inline-flex w-full justify-between rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+        <Menu.Button className="inline-flex w-full justify-between rounded-md bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
           <span className="h-5 w-5 opacity-0 pointer-events-none">
             <ChevronDown />
           </span>
           <span className="text-center flex-grow">
             {cameraSource ? cameraSource.label : "Select Camera"}
           </span>
-          <ChevronDown className="h-5 w-5 text-gray-400" />
+          <ChevronDown className="h-5 w-5 text-gray-400 dark:text-gray-200" />
         </Menu.Button>
       </div>
 
@@ -58,20 +58,20 @@ export default function CameraSources({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           <div className="py-1">
             {devices.map((device) => (
               <Menu.Item key={device.deviceId}>
                 {({ active }) => (
                   <a
                     className={`${
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700"
+                      active ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white" : "text-gray-700 dark:text-gray-200"
                     } group flex items-center px-4 py-2 text-sm cursor-pointer`}
                     onClick={() => setCameraSource(device)}
                   >
                     <span className="flex-shrink-0">
                       <Camera
-                        className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                        className="h-5 w-5 text-gray-400 dark:text-gray-200 group-hover:text-gray-500 dark:group-hover:text-gray-300"
                         aria-hidden="true"
                       />
                     </span>
@@ -86,16 +86,16 @@ export default function CameraSources({
               {({ active }) => (
                 <a
                   className={`${
-                    active ? "bg-gray-100 text-gray-900" : "text-gray-700"
-                  } group flex items-center px-4 py-2 text-sm`}
+                    active ? "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white" : "text-gray-700 dark:text-gray-200"
+                  } group flex items-center px-4 py-2 text-sm cursor-pointer`}
                   onClick={() => {
                     setCameraSource(null);
                   }}
                   id="no-camera"
                 >
                   <span className="flex-shrink-0">
                     <CameraOff
-                      className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                      className="h-5 w-5 text-gray-400 dark:text-gray-200 group-hover:text-gray-500 dark:group-hover:text-gray-300"
                       aria-hidden="true"
                     />
                   </span>

src/components/AudioSources.tsx

@@ -57,19 +57,13 @@ export const Floating = () => {
     let interval: NodeJS.Timeout | null = null;
 
     if (isRecording) {
-      // alert("Recording started");
       interval = setInterval(() => {
-        //   alert(`Timer: ${timer} seconds`);
         setTimer((prevTimer) => prevTimer + 1);
       }, 1000);
     } else if (!isRecording && timer !== 0) {
       clearInterval(interval!);
     }
 
-    // } else if (!isRecording && timer !== 0) {
-    //   clearInterval(interval!);
-    // }
-
     return () => {
       if (interval) {
         clearInterval(interval);
@@ -102,7 +96,9 @@ export const Floating = () => {
           <span className="flex items-center justify-center px-6 py-4 text-sm font-medium">
             <span
               className={`text-sm font-medium ${
-                timer >= 60 * 5 ? "text-red-600 dark:text-red-400" : "text-gray-900 dark:text-gray-200"
+                timer >= 60 * 5
+                  ? "text-red-600 dark:text-red-400"
+                  : "text-gray-900 dark:text-gray-200"
               }`}
             >
               {timer < 60 && timer}

src/components/CameraSources.tsx

@@ -1,16 +1,20 @@
 import screenlinkLogo from "../assets/screenlink.svg";
+import { useTheme } from "./theme-provider";
+import screenlinkLogoDark from "../assets/screenlink-dark.svg";
+
 export const Loading = ({
   loadingMessage,
 }: {
   loadingMessage?: string | null;
 }) => {
+  const { theme } = useTheme();
   return (
     <div className="card items-center justify-center min-h-screen w-screen">
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <img
             className="mx-auto h-16 w-auto mb-4 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110"
-            src={screenlinkLogo}
+            src={theme === "dark" ? screenlinkLogoDark : screenlinkLogo}
             alt="ScreenLink"
             onClick={() => {
               window.electron.openInBrowser("https://screenlink.io/app");