Namespaced CSS (#14)

* Namespaced CSS

* Remove ids

* Fix typo

* Fix

* Fix

* Fix

* Fix

* Run linter

* Remove global tag rules

* Small review changes

---------

Co-authored-by: Greg <[email protected]>

Author: martinRenou

src/components/Avatar.tsx

@@ -5,7 +5,7 @@ type AvatarProps = {
 };
 
 const Avatar = ({ children }: AvatarProps) => {
-  return <div className="avatar">{children}</div>;
+  return <div className="jlab-gather-avatar">{children}</div>;
 };
 
 export default Avatar;

src/components/ControlBar.tsx

@@ -33,12 +33,12 @@ const ControlBar = () => {
   };
 
   return (
-    <div id="control-bar" className="control-bar">
-      <button className="btn-control" onClick={toggleAudio}>
+    <div id="jlab-gather-control-bar" className="jlab-gather-control-bar">
+      <button className="jlab-gather-btn-control" onClick={toggleAudio}>
         {isLocalAudioEnabled ? 'Mute' : 'Unmute'}
       </button>
 
-      <button className="btn-control" onClick={toggleVideo}>
+      <button className="jlab-gather-btn-control" onClick={toggleVideo}>
         {isLocalVideoEnabled ? 'Hide' : 'Unhide'}
       </button>
 
@@ -50,8 +50,7 @@ const ControlBar = () => {
       <SettingsButton />
 
       <button
-        id="leave-btn"
-        className="btn-common btn-danger"
+        className="jlab-gather-btn-common jlab-gather-btn-danger"
         onClick={handleLeave}
       >
         Leave Room

src/components/DeviceSettings.tsx

@@ -60,7 +60,11 @@ const Select = ({
     <div>
       <span>{title}:</span>
       {list?.length ? (
-        <select onChange={onChange} value={value}>
+        <select
+          className="jlab-gather-select"
+          onChange={onChange}
+          value={value}
+        >
           {list.map((device: any) => (
             <option value={device.deviceId} key={device.deviceId}>
               {device.label}

src/components/ModelListItem.tsx

@@ -12,7 +12,7 @@ const ModelListItem = ({ model, handleClick, className }: IModelListItem) => {
   return (
     <Button
       minimal
-      className={`${className} model-list-item`}
+      className={`${className} jlab-gather-model-list-item`}
       onClick={() => handleClick(model)}
     >
       {model.name}

src/components/Peer.tsx

@@ -29,24 +29,24 @@ const Peer = ({ peer, className, dimension }: IPeer) => {
   };
 
   return (
-    <div className={'peer-tile'}>
+    <div className={'jlab-gather-peer-tile'}>
       {peer.isHandRaised ? (
-        <Icons.raisedHand className="peer-hand-raised-icon" />
+        <Icons.raisedHand className="jlab-gather-peer-hand-raised-icon" />
       ) : (
         ''
       )}
       {isLocalVideoEnabled ? (
         <>
           <video
             ref={videoRef}
-            className={`${className} ${peer.isHandRaised ? 'peer-hand-raised' : ''}`}
+            className={`${className} ${peer.isHandRaised ? 'jlab-gather-peer-hand-raised' : ''}`}
             autoPlay
             muted
             playsInline
             height={dimension}
             width={dimension}
           />
-          <div className="peer-name">{peer.name}</div>
+          <div className="jlab-gather-peer-name">{peer.name}</div>
         </>
       ) : (
         <Avatar>{getInitials(peer.name)}</Avatar>

src/components/PeerSidePane.tsx

@@ -8,12 +8,12 @@ interface IPeerSidePane {
 
 const PeerSidePane = ({ peers }: IPeerSidePane) => {
   return (
-    <div className="peer-sidepane-list">
+    <div className="jlab-gather-peer-sidepane-list">
       {peers.map(peer => (
         <Peer
           key={peer.id}
           peer={peer}
-          className="peer-video"
+          className="jlab-gather-peer-video"
           dimension={128}
         />
       ))}

src/components/buttons/PluginButton.tsx

@@ -71,7 +71,7 @@ const PluginButton = () => {
 
   return (
     <button
-      className="btn-control"
+      className="jlab-gather-btn-control"
       onClick={togglePlugin}
       disabled={isDisabled}
     >

src/components/buttons/RaiseHandButton.tsx

@@ -21,9 +21,9 @@ const RaiseHandButton = () => {
   }, [hmsActions, isHandRaised]);
 
   return (
-    <button className="btn-control" onClick={toggleRaiseHand}>
+    <button className="jlab-gather-btn-control" onClick={toggleRaiseHand}>
       <Icons.raisedHand
-        className={`icon ${isHandRaised ? 'icon-breathe' : ''}`}
+        className={`jlab-gather-icon ${isHandRaised ? 'jlab-gather-icon-breathe' : ''}`}
       />
     </button>
   );

src/components/buttons/ScreenShareButton.tsx

@@ -26,7 +26,7 @@ const ScreenShareButton = () => {
   };
 
   return (
-    <button className="btn-control" onClick={toggleScreenShare}>
+    <button className="jlab-gather-btn-control" onClick={toggleScreenShare}>
       {isScreenShared ? 'Stop Sharing' : 'Share Screen'}
     </button>
   );

src/components/buttons/SettingsButton.tsx

@@ -15,8 +15,11 @@ const SettingsButton = () => {
 
   return (
     <>
-      <button className="btn-control" onClick={handleOpenDeviceSettingsModal}>
-        <Icons.settings className="icon" />
+      <button
+        className="jlab-gather-btn-control"
+        onClick={handleOpenDeviceSettingsModal}
+      >
+        <Icons.settings className="jlab-gather-icon" />
       </button>
       <DeviceSettingModal
         isOpen={isDeviceSettingsModalOpen}