FIRE-804 edit room buttons

src/components/room/controlSidebar/ControlSidebar.tsx

@@ -30,4 +30,9 @@ const Container = styled.div<{ backgroundColor: string }>`
   background-color: ${({ backgroundColor }) => backgroundColor};
   cursor: pointer;
   box-shadow: 0px 4px 59px rgba(50, 50, 71, 0.3);
+  &:hover {
+    svg {
+      opacity: 0.7;
+    }
+  }
 `;

src/components/room/header/Header.tsx

@@ -81,4 +81,7 @@ const Button = styled.button`
   padding: 1rem 2rem;
   font-size: 1.7rem;
   min-width: 11.7rem;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 `;

src/components/room/header/Settings.tsx

@@ -74,4 +74,7 @@ const Component = styled.div`
 
 const Button = styled.button`
   cursor: pointer;
+  &:hover {
+    opacity: 0.7;
+  }
 `;

src/components/room/header/Theme.tsx

@@ -119,6 +119,11 @@ const VolumeControl = styled.div<{ volume: number; youtubeModal: boolean }>`
 const Volume = styled.button<{ youtubeModal: boolean }>`
   cursor: ${(props) => (props.youtubeModal ? 'default' : 'pointer')};
   margin-left: 1.4rem;
+  &:hover {
+    svg {
+      opacity: 0.7;
+    }
+  }
 `;
 
 const Container = styled.div`

src/components/room/sideBar/Information.tsx

@@ -72,6 +72,9 @@ const ControlSidebar = styled.div`
   gap: 0.9rem;
   cursor: pointer;
   z-index: 999;
+  &:hover {
+    opacity: 0.7;
+  }
 `;
 
 const RoomTitle = styled.div`

src/components/room/sideProfileModal/SideProfileModalHeader.tsx

@@ -30,4 +30,7 @@ const Container = styled.div`
 
 const Close = styled.button`
   cursor: pointer;
+  &:hover {
+    opacity: 0.7;
+  }
 `;

src/components/room/sideProfileModal/UserInfo.tsx

@@ -59,10 +59,13 @@ const Container = styled.div`
   height: 4.8rem;
   display: flex;
   align-items: center;
+  width: fit-content;
   gap: 1.2rem;
-  width: 100%;
   font-weight: 500;
   font-size: 2.4rem;
   line-height: 3.6rem;
   color: #f9fafb;
+  &:hover {
+    text-decoration: underline;
+  }
 `;