Add upload UI

src/assets/sass/components/buttons.scss

@@ -18,6 +18,10 @@
     background-color: $white;
     color: $background;
   }
+  &-grey {
+    background-color: $grey;
+    color: $white;
+  }
   &-primary {
     background-color: $pink;
   }

src/assets/sass/components/forms.scss

@@ -1,8 +1,17 @@
-input {
+input,
+textarea {
   background: transparent;
-  border: none;
+  border: 1px solid $grey !important;
+  width: 100% !important;
+  border-radius: calculateRem(5);
+  &::placeholder {
+    color: $grey;
+  }
 }
 
+textarea {
+  resize: none;
+}
 *:focus {
   outline: none;
 }

src/assets/sass/main.scss

@@ -20,7 +20,7 @@
 // @import "components/sub_header.scss";
 @import "components/search.scss";
 @import "components/buttons.scss";
-// @import "components/forms.scss";
+@import "components/forms.scss";
 // @import "components/alert.scss";
 // @import "components/track.scss";
 // @import "components/artists.scss";

src/components/Icon.vue

@@ -3,8 +3,8 @@
 </template>
 <script>
 export default {
-  name: 'icon',
-  props: ['name', 'classes'],
+  name: "icon",
+  props: ["name", "classes"],
   data() {
     return {
       logo: `<svg width="130" height="45" viewBox="0 0 130 45" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -89,133 +89,147 @@ export default {
                 <circle opacity="0.4" cx="18.5" cy="18.5" r="18" fill="black" stroke="white"/>
                 <path d="M17.75 26H14V10H17.75V26ZM24 10H20.25V26H24V10Z" />
               </svg>`,
+      progressupload: `
+            <svg width="90" height="90" viewBox="0 0 90 90" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <rect width="90" height="90" rx="3" fill="url(#paint0_linear)"/>
+              <path d="M53 52.5556H47.375V62H43.625V52.5556H38L45.5 45L53 52.5556ZM59.5231 41.396C59.1256 33.933 53.0112 28 45.5 28C37.9887 28 31.8744 33.933 31.4769 41.396C26.6581 42.2706 23 46.5073 23 51.6111C23 57.3477 27.6181 62 33.3125 62H39.875V58.2222H33.3125C29.6937 58.2222 26.75 55.2567 26.75 51.6111C26.75 46.3279 31.3981 44.371 35.0619 44.5844C34.7487 36.6171 39.2019 31.7778 45.5 31.7778C51.9744 31.7778 56.5456 37.061 55.9381 44.5844C59.21 44.4976 64.25 46.003 64.25 51.6111C64.25 55.2567 61.3063 58.2222 57.6875 58.2222H51.125V62H57.6875C63.3819 62 68 57.3477 68 51.6111C68 46.5073 64.3419 42.2706 59.5231 41.396Z" fill="white"/>
+              <defs>
+                  <linearGradient id="paint0_linear" x1="76" y1="5.36442e-07" x2="15" y2="90" gradientUnits="userSpaceOnUse">
+                      <stop stop-color="#E41C69"/>
+                      <stop offset="1" stop-color="#9B19BB"/>
+                  </linearGradient>
+              </defs>
+          </svg>
+`
     };
   },
   methods: {
     getSvg() {
       return this[this.name];
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="scss">
-  .icon-svg {
-    display: inline-block;
+.icon-svg {
+  display: inline-block;
+
+  path {
+    fill: #fff;
+  }
+
+  &.play {
+    circle {
+      fill: #000;
+      stroke: #fff;
+      opacity: 0.4;
+    }
 
     path {
       fill: #fff;
+      stroke: #fff;
     }
+  }
 
-    &.play {
-      circle {
-        fill: #000;
-        stroke: #fff;
-        opacity: 0.4;
-      }
-
-      path {
-        fill: #fff;
-        stroke: #fff;
-      }
+  &.imu {
+    svg {
+      width: 1.1rem;
+      height: auto;
     }
 
-    &.imu {
-      svg {
-        width: 1.1rem;
-        height: auto;
-      }
-
-      path {
-        fill: #fff;
-      }
+    path {
+      fill: #fff;
     }
+  }
 
-    &.facebook {
-      height: 2.25rem;
+  &.facebook {
+    height: 2.25rem;
 
-      svg {
-        width: 1rem;
-      }
+    svg {
+      width: 1rem;
     }
+  }
 
-    &.linkedin {
-      height: 2.25rem;
+  &.linkedin {
+    height: 2.25rem;
 
-      svg {
-        width: 2rem;
-      }
+    svg {
+      width: 2rem;
     }
+  }
 
-    &.soundcloud {
-      height: 2.4rem;
+  &.soundcloud {
+    height: 2.4rem;
 
-      svg {
-        width: 2.4rem;
-      }
+    svg {
+      width: 2.4rem;
     }
   }
+}
 
-  .thumb-button {
-    .thumb {
-      width: 1.4rem;
-      height: 1.6rem;
-    }
-
-    &:hover, &.voted_up {
-      path {
-        fill: #e41c69;
-      }
-    }
+.thumb-button {
+  .thumb {
+    width: 1.4rem;
+    height: 1.6rem;
   }
 
-  .sidebar {
+  &:hover,
+  &.voted_up {
     path {
-      fill: #9f9f9f;
+      fill: #e41c69;
     }
+  }
+}
+
+.sidebar {
+  path {
+    fill: #9f9f9f;
+  }
 
-    a:hover {
-      path {
-        fill: #fff;
-      }
+  a:hover {
+    path {
+      fill: #fff;
     }
-    a.router-link-exact-active {
-      path {
-        fill: #fff;
-      }
+  }
+  a.router-link-exact-active {
+    path {
+      fill: #fff;
     }
   }
+}
 
-  a.prev,
-  a.next {
-    display: block;
-    margin: 0 1rem;
+a.prev,
+a.next {
+  display: block;
+  margin: 0 1rem;
 
-    &:hover {
-      svg path {
-        fill: #e41c69;
-      }
+  &:hover {
+    svg path {
+      fill: #e41c69;
     }
   }
-
-  .spinner {
-    background: linear-gradient(180deg, #000, #ff4395, #9b19bb, #000);
-    background-size: 800% 800%;
-    animation: Spinner 1s ease-in-out infinite;
-    border-radius: 80rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+}
+
+.spinner {
+  background: linear-gradient(180deg, #000, #ff4395, #9b19bb, #000);
+  background-size: 800% 800%;
+  animation: Spinner 1s ease-in-out infinite;
+  border-radius: 80rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes Spinner {
+  0% {
+    background-position: 50% 0%;
   }
-
-  @keyframes Spinner {
-    0% {
-      background-position: 50% 0%;
-    }
-    50% {
-      background-position: 51% 100%;
-    }
-    100% {
-      background-position: 50% 0%;
-    }
+  50% {
+    background-position: 51% 100%;
+  }
+  100% {
+    background-position: 50% 0%;
   }
+}
 </style>

src/components/upload/Artwork.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="track-artwork">
+    <p>Album artwork</p>
+    <div class="track-cta">
+      <img src="../../assets/images/icons/artwork-placeholder.png" alt="imusify Album Artwork">
+      <button class="btn btn-grey uppercase">
+        <icon name="upload"/>Album Artwork
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import Icon from "@/components/Icon.vue";
+export default {
+  name: "track-artwork",
+  components: {
+    Icon
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../assets/sass/main.scss";
+
+.track-artwork {
+  grid-area: artwork;
+  display: grid;
+  grid-template-rows: 0fr 1fr 0fr;
+  p {
+    color: $grey;
+    font-size: calculateRem(20);
+  }
+  .track-cta {
+    img {
+      height: calculateRem(250);
+      background-size: cover;
+      cursor: pointer;
+      width: calculateRem(250);
+    }
+    button {
+      font-size: calculateRem(22);
+      margin-top: calculateRem(15);
+    }
+  }
+}
+</style>