minor details

packages/desktop/src/components/User/basicUserDetailsRow.tsx

@@ -22,7 +22,7 @@ export default function BasicUserRow({
         shape="square"
         src={user.picture}
         size="default"
-        className="shadow-lg mx-5"
+        className="shadow-lg mr-2"
       />
 
       <span className="flex flex-col items-start">

packages/desktop/src/components/header/index.tsx

@@ -155,7 +155,7 @@ export default function NirvanaHeader({
               mediaSettings.mode === "audio" && (
                 <Avatar
                   key={`userHeaderProfilePicture`}
-                  className="mr-1 shadow-md"
+                  className="shadow-md"
                   alt={userDetailsRes?.user?.givenName}
                   src={userDetailsRes?.user?.picture}
                   shape="square"

packages/desktop/src/components/lines/lineIcon/index.tsx

@@ -20,6 +20,7 @@ export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
           src={avatarSrc}
           shape="square"
           size={"default"}
+          className={"grayscale"}
         />
       ))}
     </Avatar.Group>

packages/desktop/src/pages/terminal/index.tsx

@@ -46,11 +46,11 @@ export default function NirvanaTerminal({
       {/* tuned in lines block */}
       <div className="bg-gray-100 flex flex-col shadow-lg">
         {/* tuned in header + general controls */}
-        <div className="flex flex-row items-center p-3 pb-0">
+        <div className="flex flex-row items-center py-3 px-4 pb-0">
-          <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
+          <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
             <FiActivity className="text-sm" />
 
-            <h2 className="text-inherit font-semibold text-sm">Tuned In</h2>
+            <h2 className="text-inherit text-sm">Tuned In</h2>
 
             <p className="text-slate-300 text-xs">3/5</p>
           </span>

packages/desktop/src/pages/terminal/newLine/index.tsx

@@ -164,41 +164,47 @@ export default function NewLineModal({
             </span>
 
             {/* search results */}
-            <div className="flex flex-col border border-gray-200 shadow-md max-h-[500px] w-full overflow-y-auto">
+            {searchRes?.users?.length > 0 && (
-              {searchRes?.users?.map((searchedUser) => (
+              <div className="flex flex-col border border-gray-200 shadow-md max-h-[500px] w-full overflow-y-auto">
-                <BasicUserRow
+                {searchRes?.users?.map((searchedUser) => (
-                  key={`searchResUser-${searchedUser.googleId}`}
+                  <BasicUserRow
-                  user={searchedUser}
+                    key={`searchResUser-${searchedUser.googleId}`}
-                  rightJsx={
+                    user={searchedUser}
-                    <button onClick={() => selectUser(searchedUser)}>
+                    rightJsx={
-                      Add
+                      <button onClick={() => selectUser(searchedUser)}>
-                    </button>
+                        Add
-                  }
+                      </button>
-                />
+                    }
-              ))}
+                  />
-            </div>
+                ))}
+              </div>
+            )}
           </div>
 
           {/* selected people */}
-          <div className="flex flex-col gap-2 mb-5">
+          {selectedPeople?.length > 0 && (
-            <p className="text-gray-300 text-sm">Selected People</p>
+            <div className="flex flex-col gap-2 mb-5">
+              <p className="text-gray-300 text-sm">Selected People</p>
 
-            <div className="flex flex-col w-full">
+              <div className="flex flex-col w-full">
-              {selectedPeople.map((selectedUser) => (
+                {selectedPeople.map((selectedUser) => (
-                <BasicUserRow
+                  <BasicUserRow
-                  key={`selectedUser-${selectedUser.googleId}`}
+                    key={`selectedUser-${selectedUser.googleId}`}
-                  user={selectedUser}
+                    user={selectedUser}
-                  rightJsx={
+                    rightJsx={
-                    <button
+                      <button
-                      onClick={() => unSelectUser(selectedUser._id.toString())}
+                        onClick={() =>
-                    >
+                          unSelectUser(selectedUser._id.toString())
-                      Remove
+                        }
-                    </button>
+                      >
-                  }
+                        Remove
-                />
+                      </button>
-              ))}
+                    }
+                  />
+                ))}
+              </div>
             </div>
-          </div>
+          )}
 
           <div className="flex flex-col gap-2">
             <p className="text-gray-300 text-sm">Line Name (optional)</p>