#1 - done design

Next - connect the button progress to the real progress

src/components/button-progress.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 export interface IButtonProgressProps {
   text: string;
+  onClick: () => void;
 }
 
 export interface IButtonProgressState {
@@ -46,6 +47,8 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
       setTimeout(() => {
         makeProgress()
       }, Math.random()*500);
+
+      this.props.onClick();
     }
 
     makeProgress();
@@ -64,7 +67,7 @@ export class ButtonProgress extends React.Component<IButtonProgressProps, IButto
     const { progress } = this.state;
 
     return (
-      <button className={`progress-button ${this.buttonCssState}`} onClick={this.onClick} data-style="rotate-side-down" data-perspective="" data-horizontal="">
+      <button className={`button-progress ${this.buttonCssState}`} onClick={this.onClick} data-style="rotate-side-down" data-perspective="" data-horizontal="">
         <span className="progress-wrap">
           <span className="content">{text}</span>
           <span className="progress">

src/components/main.tsx

@@ -8,6 +8,7 @@ import { Video } from './video';
 import { IVideoTask } from 'youtube-mp3-downloader';
 import { installFfmpeg, isFFMpegInstalled } from '../services/ffmpeg-installer';
 import { Form } from './form';
+import { ButtonProgress } from './button-progress';
 
 interface IMainState {
   playlistUrl: string;
@@ -130,22 +131,22 @@ class Main extends React.Component<any, IMainState> {
   }
 
   public render() {
-    const { playlistUrl, videos, process, downloadProgress } = this.state;
+    const { videos, downloadProgress } = this.state;
     return (
-      <div>
+      <div className="main">
         <div className={isFFMpegInstalled() ? '' : 'hidden'}>
           <Form
             hasResult={!!videos.length}
             onSubmit={this.fetchVideosClick}
             onClear={() => this.setState({videos: []})}
           >
-            <div>
-            {videos.length ?
-              <button onClick={this.downloadAll}>Download All</button> : ''
+            {videos.length &&
+              <ButtonProgress text="Download All" onClick={this.downloadAll} />
             }
-            {videos.map(video => (
-              <Video key={video.id} video={video} onVideoStartClick={this.downloadVideo} />
-            ))}
+            <div className="videos">
+              {videos.map(video => (
+                <Video key={video.id} video={video} onVideoStartClick={this.downloadVideo} />
+              ))}
             </div>
           </Form>
         </div>

src/components/video.tsx

@@ -37,7 +37,7 @@ export class Video extends React.Component<IVideoProps, any> {
             {video.name}
           </div>
           <div className="button">
-            <ButtonProgress text="Download" />
+            <ButtonProgress text="Download" onClick={() => console.warn('not yet implemented')} />
           </div>
         </div>
       </div>

src/styles/colors.scss

@@ -0,0 +1 @@
+$dark-green: #148544;

src/styles/components/button-progress.scss

@@ -1,4 +1,5 @@
-.progress-button {
+/* https://tympanus.net/Development/ProgressButtonStyles/ */
+.button-progress {
   position: relative;
   display: inline-block;
   padding: 0;
@@ -11,7 +12,7 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 1em;
-  line-height: 4;
+  line-height: 2;
 
   .progress-wrap {
     transform-style: preserve-3d;
@@ -28,15 +29,15 @@
   }
 
   .content {
-    padding: 0 60px;
+    padding: 0 30px;
     background: #1d9650;
     position: relative;
     display: block;
 
     &::before,
     &::after {
       position: absolute;
-      right: 20px;
+      right: 5px;
       color: #0e7138;
       font-family: "icomoon";
       opacity: 0;