Add screenshare button styling

src/Room.jsx

@@ -22,6 +22,7 @@ import {
   MicButton,
   VideoButton,
   LayoutToggleButton,
+  ScreenshareButton,
 } from "./RoomButton";
 import { Header, LeftNav, RightNav, CenterNav } from "./Header";
 import { Button, ErrorMessage } from "./Input";
@@ -301,7 +302,10 @@ function InRoomView({
           enabled={localVideoMuted}
           onClick={toggleLocalVideoMuted}
         />
-        <VideoButton enabled={isScreensharing} onClick={toggleScreensharing} />
+        <ScreenshareButton
+          enabled={isScreensharing}
+          onClick={toggleScreensharing}
+        />
         <HangupButton onClick={onLeave} />
       </div>
     </>

src/RoomButton.jsx

@@ -9,6 +9,7 @@ import { ReactComponent as HangupIcon } from "./icons/Hangup.svg";
 import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
 import { ReactComponent as GridIcon } from "./icons/Grid.svg";
 import { ReactComponent as SpeakerIcon } from "./icons/Speaker.svg";
+import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
 
 export function RoomButton({ on, className, children, ...rest }) {
   return (
@@ -37,6 +38,18 @@ export function VideoButton({ enabled, ...rest }) {
   );
 }
 
+export function ScreenshareButton({ enabled, className, ...rest }) {
+  return (
+    <RoomButton
+      className={classNames(styles.screenshareButton, className)}
+      {...rest}
+      on={enabled}
+    >
+      <ScreenshareIcon />
+    </RoomButton>
+  );
+}
+
 export function HangupButton({ className, ...rest }) {
   return (
     <RoomButton

src/RoomButton.module.css

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.roomButton, .headerButton {
+.roomButton,
+.headerButton {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -32,11 +33,10 @@ limitations under the License.
 }
 
 .roomButton:hover {
-  background-color: #8D97A5;
+  background-color: #8d97a5;
 }
 
 .roomButton:active {
-  
 }
 
 .roomButton.on {
@@ -50,11 +50,11 @@ limitations under the License.
 }
 
 .headerButton svg * {
-  fill: #8E99A4;
+  fill: #8e99a4;
 }
 
 .headerButton:hover {
-  background-color: #8D97A5;
+  background-color: #8d97a5;
 }
 
 .headerButton:hover svg * {
@@ -62,9 +62,14 @@ limitations under the License.
 }
 
 .headerButton.on svg * {
-  fill: #0DBD8B
+  fill: #0dbd8b;
 }
 
-.hangupButton, .hangupButton:hover {
+.hangupButton,
-  background-color: #FF5B55;
+.hangupButton:hover {
+  background-color: #ff5b55;
+}
+
+.screenshareButton.on svg * {
+  fill: #0dbd8b;
 }

src/icons/Screenshare.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 0.5C2.09315 0.5 0.75 1.84314 0.75 3.5V13.5713C0.75 15.2282 2.09315 16.5713 3.75 16.5713H20.2499C21.9067 16.5713 23.2499 15.2282 23.2499 13.5713V3.5C23.2499 1.84315 21.9067 0.5 20.2499 0.5H3.75ZM12.7998 11.9106C12.7998 12.3524 12.4416 12.7106 11.9998 12.7106C11.558 12.7106 11.1998 12.3524 11.1998 11.9106L11.1998 7.09206L9.43158 8.86029C9.11916 9.17271 8.61263 9.17271 8.30021 8.86029C7.98779 8.54787 7.98779 8.04134 8.30021 7.72892L11.4341 4.59501C11.7465 4.28259 12.2531 4.28259 12.5655 4.59501L15.6994 7.72892C16.0118 8.04134 16.0118 8.54787 15.6994 8.86029C15.387 9.17271 14.8805 9.17271 14.568 8.86029L12.7998 7.09206L12.7998 11.9106Z" fill="white"/>
+</svg>