nicer opacities and stuff to see what's active

packages/desktop/src/components/lineIcon.tsx

@@ -18,7 +18,11 @@ function LineIcon({
   return (
     <>
       {isMultiple ? (
-        <div className={`relative ${grayscale ? 'grayscale' : ''} h-[40px] w-[40px] flex-grow-0`}>
+        <div
+          className={`relative ${
+            grayscale ? 'grayscale opacity-40' : ''
+          } h-[40px] w-[40px] flex-grow-0`}
+        >
           {sourceImages.map((avatarSrc, index) => {
             if (index === 0) {
               return (
@@ -53,7 +57,7 @@ function LineIcon({
             src={avatarSrc}
             shape="square"
             size={'large'}
-            className={`${grayscale && 'grayscale'} shadow-lg`}
+            className={`${grayscale && 'grayscale opacity-40'} shadow-lg`}
           />
         ))
       )}

packages/desktop/src/tree/protected/terminal/line/LineRow.tsx

@@ -90,7 +90,7 @@ export default React.memo(function LineRow({
       );
 
     return (
-      <span className={`text-gray-400 ml-auto text-xs `}>
+      <span className={`text-gray-200 ml-auto text-xs `}>
         {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
       </span>
     );
@@ -124,13 +124,13 @@ export default React.memo(function LineRow({
       )}
 
       {/* channel name */}
-      <h2
-        className={`text-inherit text-md max-w-[180px] truncate text-slate-800 ${
-          line.currentUserMember.lastVisitDate ? 'font-semibold' : ''
+      <span
+        className={`text-md max-w-[180px] truncate text-gray-300 ${
+          line.currentUserMember.lastVisitDate ? 'font-semibold text-gray-800' : ''
         }`}
       >
         {line.lineDetails.name || line.otherUserObjects[0].givenName}
-      </h2>
+      </span>
 
       {index < maxToggleTunedChannelCount && (
         <span className="ml-2 text-gray-300 text-xs p-1 px-2 bg-gray-100">{`${index + 1}`}</span>

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -66,7 +66,7 @@ export default function SidePanel() {
         </button>
 
         {desktopMode === 'mainApp' && (
-          <span className="text-gray-800 font-semibold mx-auto">Channels</span>
+          <span className="text-gray-800 font-semibold mx-auto">Conversations</span>
         )}
 
         <button