Skip to content

Commit dac05a3

Browse files
johnwagejohnwage
committed
Basic styling for video meeting section and buttons
1 parent ba4a218 commit dac05a3

File tree

3 files changed

+68
-45
lines changed

3 files changed

+68
-45
lines changed

‎app/src/components/bottom/VideoMeeting.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,20 @@ const Videomeeting = (props): JSX.Element => {
3434
return (
3535
<div
3636
style={{
37-
background: 'transparent',
38-
height: '200px',
37+
border: '1px solid #31343A',
38+
borderRadius: '15px',
39+
backgroundColor: '#1B1B1B',
40+
height: '170px',
3941
width: '300px',
4042
display: 'flex',
4143
justifyContent: 'center',
4244
alignItems: 'center',
45+
margin: '29px 0 15px 0',
4346
paddingLeft: '10px',
4447
paddingRight: '10px'
4548
}}
4649
>
47-
<AccountCircleIcon style={{ fontSize: 100, color: 'white' }} />
50+
<AccountCircleIcon style={{ fontSize: 100, color: '#9C9D9F' }} />
4851
</div>
4952
);
5053
};
@@ -56,7 +59,7 @@ const Videomeeting = (props): JSX.Element => {
5659
};
5760

5861
const handleUserInfoStyle = (isLocalParticipant: boolean) => {
59-
if (isLocalParticipant) return { color: '#FC00BD' };
62+
if (isLocalParticipant) return { color: '#0671E3', alignSelf: 'center' };
6063
else return { color: 'white' };
6164
};
6265

@@ -101,13 +104,13 @@ const Videomeeting = (props): JSX.Element => {
101104
justifyContent: 'center',
102105
alignItems: 'center',
103106
display: 'column',
104-
paddingLeft: '10px',
105-
paddingRight: '10px'
107+
paddingLeft: '5px',
108+
paddingRight: '5px'
106109
}}
107110
>
108111
<p style={handleUserInfoStyle(isLocalParticipant)}>
109112
Participant: {isLocalParticipant ? 'You' : displayName} |
110-
Webcam: {webcamOn ? 'ON' : 'OFF'} | Mic: {micOn ? 'ON' : 'OFF'}
113+
Video: {webcamOn ? 'ON' : 'OFF'} | Mic: {micOn ? 'ON' : 'OFF'}
111114
</p>
112115
<audio ref={micRef} autoPlay muted={isLocal} />
113116
{!webcamOn && <TurnOffCameraDisplay />}
@@ -181,7 +184,7 @@ const Videomeeting = (props): JSX.Element => {
181184
overflow: 'auto'
182185
}}
183186
>
184-
<div style={{ overflow: 'auto' }}>
187+
<div className="video-scrollable" style={{ overflow: 'auto' }}>
185188
<VideoMeetingControl
186189
userJoinMeetingStatus={userJoinMeetingStatus}
187190
useWebcam={useWebcam}

‎app/src/components/bottom/VideoMeetingControl.tsx

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -59,43 +59,18 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
5959
bottom: 5,
6060
left: '50%',
6161
right: 0,
62-
zIndex: 9999
62+
zIndex: 9999,
63+
width: '270px',
64+
border: '1px solid #31343A',
65+
borderRadius: '15px',
66+
backgroundColor: '#1B1B1B',
67+
padding: '5px'
6368
}}
6469
>
65-
{/* Call End Button */}
66-
<div
67-
style={{
68-
backgroundColor: callEndHovered ? '#dddddd' : 'transparent',
69-
transition: 'background-color 0.3s',
70-
borderRadius: '5px',
71-
padding: '5px'
72-
}}
73-
onMouseEnter={() => handleButtonHover(ButtonType.CALL_END, true)}
74-
onMouseLeave={() => handleButtonHover(ButtonType.CALL_END, false)}
75-
>
76-
<button
77-
style={{
78-
backgroundColor: 'transparent',
79-
border: 'none',
80-
cursor: 'pointer',
81-
padding: 0,
82-
margin: 0,
83-
outline: 'none'
84-
}}
85-
onClick={() => {
86-
leave();
87-
handleButtonHover(ButtonType.CALL_END, false);
88-
}}
89-
>
90-
<CallEndIcon
91-
style={{ fontSize: 36, color: 'red', margin: '0 15px' }}
92-
/>
93-
</button>
94-
</div>
9570
{/* Mic Button */}
9671
<div
9772
style={{
98-
backgroundColor: micHovered ? '#dddddd' : 'transparent',
73+
// backgroundColor: micHovered ? '#dddddd' : 'transparent',
9974
transition: 'background-color 0.3s',
10075
borderRadius: '5px',
10176
padding: '5px'
@@ -120,19 +95,19 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
12095
>
12196
{useMic ? (
12297
<MicIcon
123-
style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
98+
style={{ fontSize: 36, color: micHovered ? 'white' : '#0671E3', transition: 'color 0.3s', margin: '0 15px' }}
12499
/>
125100
) : (
126101
<MicOffIcon
127-
style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
102+
style={{ fontSize: 36, color: micHovered ? 'white' : '#9C9D9F', transition: 'color 0.3s', margin: '0 15px' }}
128103
/>
129104
)}
130105
</button>
131106
</div>
132107
{/* Webcam Button */}
133108
<div
134109
style={{
135-
backgroundColor: webcamHovered ? '#dddddd' : 'transparent',
110+
// backgroundColor: webcamHovered ? '#dddddd' : 'transparent',
136111
transition: 'background-color 0.3s',
137112
borderRadius: '5px',
138113
padding: '5px'
@@ -157,15 +132,45 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
157132
>
158133
{useWebcam ? (
159134
<VideocamIcon
160-
style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
135+
style={{ fontSize: 36, color: webcamHovered ? 'white' : '#0671E3', transition: 'color 0.3s', margin: '0 15px' }}
161136
/>
162137
) : (
163138
<VideocamOffIcon
164-
style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
139+
style={{ fontSize: 36, color: webcamHovered ? 'white' : '#9C9D9F', transition: 'color 0.3s', margin: '0 15px' }}
165140
/>
166141
)}
167142
</button>
168143
</div>
144+
{/* Call End Button */}
145+
<div
146+
style={{
147+
// backgroundColor: callEndHovered ? '#dddddd' : 'transparent',
148+
transition: 'background-color 0.3s',
149+
borderRadius: '5px',
150+
padding: '5px'
151+
}}
152+
onMouseEnter={() => handleButtonHover(ButtonType.CALL_END, true)}
153+
onMouseLeave={() => handleButtonHover(ButtonType.CALL_END, false)}
154+
>
155+
<button
156+
style={{
157+
backgroundColor: 'transparent',
158+
border: 'none',
159+
cursor: 'pointer',
160+
padding: 0,
161+
margin: 0,
162+
outline: 'none'
163+
}}
164+
onClick={() => {
165+
leave();
166+
handleButtonHover(ButtonType.CALL_END, false);
167+
}}
168+
>
169+
<CallEndIcon
170+
style={{ fontSize: 36, color: callEndHovered ? 'white' : '#E12D39', transition: 'color 0.3s', margin: '0 15px' }}
171+
/>
172+
</button>
173+
</div>
169174
</div>
170175
)
171176
);

‎app/src/public/styles/style.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,21 @@ BOTTOM PANEL
599599
outline: none;
600600
}
601601

602+
.video-scrollable::-webkit-scrollbar {
603+
width: 0.1rem;
604+
height: 0.1rem;
605+
}
606+
607+
.video-scrollable::-webkit-scrollbar-thumb {
608+
transition: 0.3s ease all;
609+
border-color: transparent;
610+
background-color: #1e2024;
611+
background-image: linear-gradient(180deg, #1e2024 15%, grey 15%, grey 85%, #1e2024 85%);
612+
border-radius: 10px;
613+
z-index: 40;
614+
overflow-y: hidden;
615+
}
616+
602617
/*
603618
//////////////////////////////////////////
604619
NAVBAR

0 commit comments

Comments
 (0)