feat: updated participants-list styling

Eyevinn · Apr 26, 2024 · e8b559f · e8b559f
1 parent 3139369
commit e8b559f
Showing 1 changed file with 71 additions and 23 deletions.
diff --git a/src/components/production-line/user-list.tsx b/src/components/production-line/user-list.tsx
@@ -1,28 +1,51 @@
 import styled from "@emotion/styled";
 import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
 import { TParticipant } from "./types.ts";
+import { UserIcon } from "../../assets/icons/icon.tsx";
 
-const ListWrapper = styled.div``;
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ListWrapper = styled.div`
+  border-radius: 1rem;
+  border: 0.2rem solid #434343;
+`;
 
 type TUserProps = {
+  firstPerson: boolean;
+  lastPerson: boolean;
+  onlyPerson: boolean;
   isYou: boolean;
-  isActive: boolean;
   isTalking: boolean;
 };
 
+type TIndicatorProps = {
+  isActive: boolean;
+};
+
 const User = styled.div<TUserProps>`
-  margin: 0 0 1rem;
+  display: flex;
+  align-items: center;
   background: #1a1a1a;
   padding: 1rem;
   color: #ddd;
-  max-width: 32rem;
-  border-radius: 0.5rem;
-  border: 0.1rem solid #1a1a1a;
+  border: transparent;
 
-  ${({ isYou }) => (isYou ? `background: #353434;` : "")}
+  ${({ firstPerson }) => (firstPerson ? `border-radius: 1rem 1rem 0 0;` : "")}
+
+  ${({ lastPerson }) => (lastPerson ? `border-radius: 0 0 1rem 1rem;` : "")}
 
-  ${({ isActive }) =>
-    `border-left: 1rem solid ${isActive ? "#7be27b;" : "#ebca6a;"}`}
+${({ lastPerson, onlyPerson }) =>
+    lastPerson || onlyPerson
+      ? `border-bottom: 0;`
+      : `border-bottom: 0.1rem solid #464646;`}
+
+  ${({ onlyPerson }) => (onlyPerson ? `border-radius: 1rem;` : "")}
+
+  ${({ isYou }) => (isYou ? `background: #353434;` : "")}
 
   ${({ isTalking }) =>
     `border-bottom: 0.5rem solid ${isTalking ? "#7be27b;" : "#353434;"}`}
@@ -37,6 +60,22 @@ const User = styled.div<TUserProps>`
       : ""}
 `;
 
+const OnlineIndicator = styled.div<TIndicatorProps>`
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 5rem;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ isActive }) => `background: ${isActive ? "#7be27b;" : "#ebca6a;"}`}
+`;
+
+const IconWrapper = styled.div`
+  width: 2rem;
+`;
+
 type TUserListOptions = {
   participants: TParticipant[];
   sessionid: string | null;
@@ -53,20 +92,29 @@ export const UserList = ({
   if (!participants) return null;
 
   return (
-    <ListWrapper>
+    <Container>
       <DisplayContainerHeader>Participants</DisplayContainerHeader>
-      {participants.map((p) => (
-        <User
-          key={p.sessionid}
-          isYou={p.sessionid === sessionid}
-          isActive={p.isActive}
-          isTalking={
-            audioLevelAboveThreshold && p.endpointid === dominantSpeaker
-          }
-        >
-          {p.name} {p.isActive ? "" : "(inactive)"}
-        </User>
-      ))}
-    </ListWrapper>
+      <ListWrapper>
+        {participants.map((p, i) => (
+          <User
+            key={p.sessionid}
+            firstPerson={i === 0 && i !== participants.length - 1}
+            lastPerson={i !== 0 && i === participants.length - 1}
+            onlyPerson={i === 0 && i === participants.length - 1}
+            isYou={p.sessionid === sessionid}
+            isTalking={
+              audioLevelAboveThreshold && p.endpointid === dominantSpeaker
+            }
+          >
+            <OnlineIndicator isActive={p.isActive}>
+              <IconWrapper>
+                <UserIcon />
+              </IconWrapper>
+            </OnlineIndicator>
+            {p.name} {p.isActive ? "" : "(inactive)"}
+          </User>
+        ))}
+      </ListWrapper>
+    </Container>
   );
 };