From 0d9ebd247c46b48353d2456ff1ef401ca7655b8e Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Tue, 11 Aug 2020 00:59:36 -0700
Subject: [PATCH] Combine Button/ToggleButton components

---
 src/web/control.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/web/control.js b/src/web/control.js
index cb44456..a7a0d85 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -520,13 +520,13 @@ function StreamDelayBox({ delayState, setStreamCensored }) {
         {delayState.isConnected && (
           <>
             <span>delay: {delayState.delaySeconds}s</span>
-            <StyledToggleButton
+            <StyledButton
               isActive={delayState.isCensored}
               onClick={handleToggleStreamCensored}
               tabIndex={1}
             >
               {buttonText}
-            </StyledToggleButton>
+            </StyledButton>
           </>
         )}
       </StyledStreamDelayBox>
@@ -662,20 +662,20 @@ function GridInput({
         </StyledGridButtons>
       )}
       <StyledGridButtons side="right">
-        <StyledToggleButton
+        <StyledButton
           isActive={isBlurred}
           onClick={handleBlurClick}
           tabIndex={1}
         >
           <NoVideoIcon />
-        </StyledToggleButton>
-        <StyledToggleButton
+        </StyledButton>
+        <StyledButton
           isActive={isListening}
           onClick={handleListeningClick}
           tabIndex={1}
         >
           <SoundIcon />
-        </StyledToggleButton>
+        </StyledButton>
       </StyledGridButtons>
       <StyledGridInput
         value={editingValue || spaceValue || ''}
@@ -760,6 +760,13 @@ const StyledButton = styled.button`
   background: #ccc;
   border-radius: 5px;
 
+  ${({ isActive }) =>
+    isActive &&
+    `
+      border-color: red;
+      background: #c77;
+    `};
+
   &:focus {
     outline: none;
     box-shadow: 0 0 10px orange inset;
@@ -778,15 +785,6 @@ const StyledSmallButton = styled(StyledButton)`
   }
 `
 
-const StyledToggleButton = styled(StyledButton)`
-  ${({ isActive }) =>
-    isActive &&
-    `
-      border-color: red;
-      background: #c77;
-    `};
-`
-
 const StyledGridContainer = styled.div`
   position: relative;
 `