fix(playlist): button improvements

- prevent size change
- active contrast color
- remove animation when active

src/components/Button/Button.module.scss

@@ -1,85 +1,101 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
-@use "../../styles/mixins/responsive";
+@use '../../styles/mixins/responsive';
+
+$medium-button-height: 36px;
+$large-button-height: 40px;
 
 .button {
   position: relative;
   display: inline-flex;
   justify-content: inherit;
   align-items: center;
-  min-height: 38px;
+  height: $medium-button-height;
   padding: 0 16px;
 
-  font-size: 16px;
   font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  font-size: 16px;
   line-height: 18px;
   text-align: center;
   text-decoration: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
-  > svg {
-    height: 18px;
-    width: 18px;
-  }
-  &:hover,
-  &:focus {
-    transform: scale(1.1);
+  &.large {
+    height: $large-button-height;
   }
 
   &.default {
     color: theme.$btn-default-color;
     background-color: theme.$btn-default-bg;
   }
+
   &.primary {
     color: var(--highlight-contrast-color, white);
     background-color: var(--highlight-color, black);
   }
 
   &.outlined {
     border: 1px solid rgba(255, 255, 255, 0.3);
+
     &.active,
     &:focus {
       background-color: var(--highlight-color, black);
-      border: none;
-      &:hover {
-        transform: none;
-      }
+      color: var(--highlight-contrast-color, white);
+      border-color: var(--highlight-color);
     }
   }
+
   &.text {
-    opacity: 0.7;
     background: none;
+    opacity: 0.7;
+
+    &.active {
+      opacity: 1;
+    }
+
     &:hover {
       background: theme.$btn-default-bg;
-      opacity: 1;
       transform: scale(1.1);
-    }
-    &.active {
       opacity: 1;
     }
   }
 
   &.fullWidth {
     width: 100%;
+
     &:hover {
       transform: scale(1.04);
     }
   }
+
+  > svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  &:hover,
+  &:focus {
+    transform: scale(1.1);
+  }
 }
+
 .startIcon {
-  margin-right: 11px;
-  height: 100%;
   display: flex;
   align-items: center;
+  height: 100%;
+  margin-right: 11px;
+
   > svg {
-    height: 20px;
-    width: 20px;
-    fill: currentColor;
     @include responsive.tablet-only() {
       width: 18px;
       height: 18px;
     }
+
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
   }
 }

src/components/Button/Button.tsx

@@ -17,6 +17,7 @@ type Props = {
   variant?: Variant;
   onClick?: () => void;
   tabIndex?: number;
+  size?: 'medium' | 'large',
   to?: string;
   role?: string;
 } & React.AriaAttributes;
@@ -28,13 +29,15 @@ const Button: React.FC<Props> = ({
   fullWidth = false,
   active = false,
   variant = 'outlined',
+  size = 'medium',
   to,
   onClick,
   ...rest
 }: Props) => {
   const className = classNames(styles.button, [styles[color]], [styles[variant]], {
     [styles.active]: active,
     [styles.fullWidth]: fullWidth,
+    [styles.large]: size === 'large',
   });
 
   const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;

src/components/Video/Video.tsx

@@ -119,6 +119,7 @@ const Video: React.FC<Props> = ({
             <Button
               color="primary"
               variant="contained"
+              size="large"
               label={t('video:start_watching')}
               startIcon={<Play />}
               onClick={startPlay}

src/components/Video/__snapshots__/Video.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
           class="playButton"
         >
           <button
-            class="button primary active fullWidth"
+            class="button primary active fullWidth large"
           >
             <div
               class="startIcon"