fixed button styling

src/components/Button/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './button.scss'
 
 export enum ButtonType {
@@ -7,18 +6,28 @@ export enum ButtonType {
 }
 
 interface IButton {
-  label: string
+  label?: string
   onClick?: () => void
   buttonType: ButtonType
-  Icon: JSX.Element
+  Icon?: JSX.Element
 }
 
 const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
+  const getIconClassName = (): '' | ' with-icon' => {
+    return Icon ? ' with-icon' : ''
+  }
+
+  const getLabelClassName = (): '' | ' with-label' => {
+    return label ? ' with-label' : ''
+  }
+
+  const getPrimaryClassName = (): string => {
+    return ButtonType[buttonType ? buttonType : ButtonType.Primary]
+  }
+
   return (
     <button
-      className={`n-button${Icon ? ' with-icon' : ''} ${
-        ButtonType[buttonType ? buttonType : ButtonType.Primary]
-      }`}
+      className={`n-button${getIconClassName()}${getLabelClassName()} ${getPrimaryClassName()}`}
       onClick={onClick}
     >
       {Icon && Icon}

src/components/Button/button.scss

@@ -1,18 +1,19 @@
 @import '../../static/sass/abstracts/functions';
 
 .n-button {
-  top: 40rem;
   cursor: pointer;
-  font-size: 1.6rem;
   outline: none;
   border: none;
-  font-weight: 700;
-  border-radius: 5px;
-  padding-left: 3.5rem;
-  padding-right: 3.5rem;
-  margin-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  border-radius: 4px;
+  padding: 0.8rem;
+  opacity: 1;
+  user-select: none;
+  will-change: background-color, color;
+  word-break: break-word;
+  white-space: nowrap;
+  font-size: 1.2vw;
+  font-weight: 500;
+  line-height: 2.4rem;
 
   @include responsive(phone) {
     top: 24rem;
@@ -20,26 +21,45 @@
 
   &.with-icon {
     fill: #fff;
-    margin-right: 1rem;
     display: flex;
+    padding-left: 2rem;
+    padding-right: 2.4rem;
 
     & > * {
-      width: 15px;
-      height: 15px;
+      width: 25px;
+      height: 25px;
       fill: #fff;
       margin-right: 1rem;
     }
   }
 
+  &.with-label {
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+  }
+
   &.Primary {
     color: #000;
     background-color: #fff;
-    transition: all 0.2s;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 
     & > * {
       fill: #000;
     }
+
+    &:not(:disabled):hover {
+      background-color: rgba(255, 255, 255, 0.75);
+    }
+
+    &:not(:disabled):active {
+      background-color: rgba(255, 255, 255, 0.5);
+      color: rgba(0, 0, 0, 0.7);
+    }
+
+    &:not(:disabled):focus {
+      border: 2px solid white;
+      border-radius: 8px;
+    }
   }
 
   &.Secondary {

src/components/Header.tsx

@@ -32,14 +32,10 @@ const Header = ({ name, overview }: IHeader) => {
       <Button
         Icon={<PlayLogo />}
         buttonType={ButtonType.Primary}
-        onClick={() => alert('not a movie!')}
+        onClick={() => console.log('not a movie!')}
         label={'Play'}
       />
-      <Button
-        label={'My List'}
-        Icon={<AddLogo />}
-        buttonType={ButtonType.Secondary}
-      />
+      <Button label={'My List'} buttonType={ButtonType.Secondary} />
       {isMuted ? (
         <MuteIcon
           onClick={() => setIsMuted(false)}