converted mute/un-mute button to use Button component

src/components/Button/Button.tsx

@@ -9,13 +9,20 @@ export enum ButtonType {
 }
 
 interface IButton {
+  buttonType: ButtonType
   label?: string
   onClick?: () => void
-  buttonType: ButtonType
   Icon?: JSX.Element
+  customClassName?: string
 }
 
-const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
+const Button = ({
+  label,
+  onClick,
+  buttonType,
+  Icon,
+  customClassName,
+}: IButton) => {
   const getIconClassName = (): '' | ' with-icon' => {
     return Icon ? ' with-icon' : ''
   }
@@ -28,9 +35,13 @@ const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
     return ButtonType[buttonType ? buttonType : ButtonType.Primary]
   }
 
+  const getCustomClassName = (): string => {
+    return customClassName ? ` ${customClassName}` : ''
+  }
+
   return (
     <button
-      className={`n-button${getIconClassName()}${getLabelClassName()} ${getPrimaryClassName()}`}
+      className={`n-button${getIconClassName()}${getLabelClassName()}${getCustomClassName()} ${getPrimaryClassName()}`}
       onClick={onClick}
     >
       {Icon && Icon}

src/components/Header.tsx

@@ -40,20 +40,14 @@ const Header = ({ name, overview }: IHeader) => {
         buttonType={ButtonType.Secondary}
         label={'More Info'}
       />
-
+      <Button
-      {isMuted ? (
+        Icon={isMuted ? <MuteIcon /> : <UnmuteIcon />}
-        <MuteIcon
+        buttonType={ButtonType.IconRound}
-          onClick={() => setIsMuted(false)}
+        onClick={() => setIsMuted(!isMuted)}
-          className='header__container-btnVolume'
+        customClassName={'header__container-btnVolume'}
       />
-      ) : (
-        <UnmuteIcon
-          onClick={() => setIsMuted(true)}
-          className='header__container-btnVolume'
-        />
-      )}
       <p className='header__container-overview'>{overview}</p>
-      <div className='header__container--fadeBottom'></div>
+      <div className='header__container--fadeBottom' />
     </header>
   )
 }

src/static/images/mute.svg

@@ -1,3 +1,3 @@
 <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="#000" stroke-width="2" d="M1,8 L1,16 L6.09901951,16 L12,21 L12,3 L6,8 L1,8 Z M15,9 L21,15 M21,9 L15,15"/>
+  <path fill="none" stroke="#fff" stroke-width="2" d="M1,8 L1,16 L6.09901951,16 L12,21 L12,3 L6,8 L1,8 Z M15,9 L21,15 M21,9 L15,15"/>
 </svg>

src/static/images/unmute.svg

@@ -1,3 +1,3 @@
 <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" stroke="#000" stroke-width="2" d="M15,16 C17.209,16 19,14.209 19,12 C19,9.791 17.209,8 15,8 M15,20 C20,20 23,16.411 23,12 C23,7.589 19.411,4 15,4 M1,12 L1,8 L6,8 L12,3 L12,21 L6,16 L1,16 L1,12"/>
+  <path fill="none" stroke="#fff" stroke-width="2" d="M15,16 C17.209,16 19,14.209 19,12 C19,9.791 17.209,8 15,8 M15,20 C20,20 23,16.411 23,12 C23,7.589 19.411,4 15,4 M1,12 L1,8 L6,8 L12,3 L12,21 L6,16 L1,16 L1,12"/>
 </svg>

src/static/sass/layout/_header.scss

@@ -60,13 +60,8 @@
       position: absolute;
       height: 3rem;
       width: 3rem;
-      top: 45rem;
+      top: 40rem;
       right: 14rem;
-      cursor: pointer;
-      border-radius: 50%;
-      padding: 1rem;
-      border: #fff solid 1px;
-      transition: all 0.3s;
 
       @include responsive(tab_medium) {
         top: 30rem;
@@ -75,16 +70,6 @@
         top: 20rem;
         right: 8rem;
       }
-
-      & > * {
-        stroke: #fff;
-        stroke-width: 1;
-      }
-
-      &:hover {
-        background-color: rgba(211, 211, 211, 0.178);
-        transition: all 0.3s;
-      }
     }
 
     &-overview {