style: upload dialog improvement

src/app/components/playlist-uploader/playlist-uploader.component.css

@@ -1,8 +1,7 @@
 .drop-container {
-    /*width: 400px;*/
-    height: 100px;
-    border: 1px dashed #ccc;
-    border-radius: 10px;
+    height: 200px;
+    border: 2px dashed #ccc;
+    border-radius: 3px;
     margin: 0 auto;
     padding: 10px;
     text-align: center;
@@ -14,3 +13,40 @@ input {
     border: 1px solid #ccc;
     padding: 5px;
 }
+
+.upload-title {
+    font-size: 1.25em;
+}
+
+.inputfile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.inputfile + label {
+    font-size: 1.25em;
+    font-weight: 700;
+    color: white;
+    background-color: black;
+    display: inline-block;
+}
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: red;
+}
+
+.inputfile + label {
+    cursor: pointer;
+    line-height: 35px;
+    padding: 3px 10px;
+}
+
+.upload-icon {
+    font-size: 80px;
+    width: 80px;
+}

src/app/components/playlist-uploader/playlist-uploader.component.html

@@ -2,15 +2,18 @@
     <mat-card-subtitle>Add playlist</mat-card-subtitle>
     <div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)"
         [uploadInput]="uploadInput">
-        <p>
-            Drag files here or
-            <label class="upload-button">
-                <input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)"
-                    [uploadInput]="uploadInput" multiple>
-                browse
-            </label>
-            to upload.
+        <div>
+            <mat-icon class="upload-icon">save_alt</mat-icon>
+        </div>
+        <p class="upload-title">
+            Drag & drop files here
         </p>
+        <p>or</p>
+        <input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" class="inputfile"
+            name="file" id="file" [uploadInput]="uploadInput" multiple>
+        <label for="file">
+            Choose a file
+        </label>
     </div>
 </mat-card>
 <br>
@@ -22,4 +25,4 @@
             </app-recent-playlists>
         </mat-card-content>
     </mat-card>
-</ng-container>
+</ng-container>

src/styles.scss

@@ -5,6 +5,11 @@ $material-icons-font-path: '~material-icons/iconfont/';
 
 @import '~material-icons/iconfont/material-icons.scss';
 
-body,html {
-  background: #eee;
+body,
+html {
+    background: #eee;
+}
+
+.mat-toolbar.mat-primary {
+    background: #000000;
 }