feat: update mute/unmute button styling

Eyevinn · Apr 16, 2024 · be10388 · be10388
1 parent 15c1a96
commit be10388
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx
@@ -3,8 +3,9 @@ import MicMute from "./mic_off.svg";
 import MicUnmute from "./mic_on.svg";
 
 const Icon = styled.img`
-  width: 8rem;
-  padding-right: 1em;
+  width: 100%;
+  height: auto;
+  display: block;
 `;
 
 export const MicMuted = () => <Icon src={MicMute} alt="off-microphone" />;

diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -36,9 +36,17 @@ const ButtonWrapper = styled.span`
   margin: 0 2rem 0 0;
 `;
 
-const UserControlBtn = styled.button`
-  background-color: transparent;
-  border-color: transparent;
+const ButtonIcon = styled.div`
+  width: 2.5rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.5rem 0 0;
+`;
+
+const UserControlBtn = styled(ActionButton)`
+  line-height: 2;
+  min-width: 12rem;
+  text-align: left;
 `;
 
 export const ProductionLine: FC = () => {
@@ -194,7 +202,10 @@ export const ProductionLine: FC = () => {
                   type="button"
                   onClick={() => setMicMute(!micMute)}
                 >
-                  {micMute ? <MicMuted /> : <MicUnmuted />}
+                  <ButtonIcon>
+                    {micMute ? <MicMuted /> : <MicUnmuted />}
+                  </ButtonIcon>
+                  {micMute ? "Muted" : "Unmuted"}
                 </UserControlBtn>
               </TempDiv>