Remove design-system dependency

src/scss/button.scss

@@ -0,0 +1,37 @@
+.button {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  border: 0;
+  border-radius: 0em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-align: left;
+}
+.button--primary {
+  color: $offwhite;
+  background-color: $default;
+}
+.button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 2px inset;
+}
+.button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+  margin: 0.6em 0.3em 0 0;
+}
+.button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
+
+.no-hover {
+  cursor: auto !important;
+}

src/scss/card.scss

@@ -1,31 +1,35 @@
 .event-card {
   box-sizing: border-box;
-  margin: 1px 0 0 0;
+  margin: 2px 0;
   padding: 15px;
-  border: 1px solid $black;
   transition: 0.2 ease;
   background: $midwhite;
+  opacity: 0.92;
   color: $darkgrey;
-  box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  list-style-type: none;
   font-size: $large;
   line-height: $xxlarge;
-  height: auto;
-  opacity: 0.9;
+  // height: auto;
+  // opacity: 0.9;
   transition: background-color 0.4s;
+  text-align: left;
+  overflow-y: scroll;
+  height: 100%;
+  max-width: 400px;
 
   &:hover {
     background: $lightwhite;
     transition: background-color 0.4s;
-    cursor: pointer;
+    // cursor: pointer;
   }
 
   h4 {
     margin-bottom: 0;
     margin-right: 5px;
     text-transform: uppercase;
-    font-size: $xsmall;
+    font-size: $small;
     color: $darkwhite;
-    font-weight: 100;
+    font-weight: 800;
 
     &:first-child {
       margin-top: 0;
@@ -36,27 +40,23 @@
     margin: 0;
   }
 
-  .material-icons {
-    font-size: $normal;
-    color: $darkwhite;
-    margin-right: 5px;
+  .card-row,
+  .card-col,
+  .card-cell {
+    margin: 5px 3px 5px 0px;
+    &.m0 {
+      margin: 0;
+    }
   }
 
   .card-row,
   .card-col {
     display: flex;
     flex-direction: row;
-    margin: 5px 0 10px 0;
-    padding-bottom: 10px;
 
     .card-cell {
       flex: 1;
     }
-
-    h4 {
-      min-width: 80px;
-      max-width: 80px;
-    }
   }
 
   .card-col {
@@ -72,23 +72,19 @@
       display: flex;
       flex-direction: row;
       align-items: flex-start;
-      padding: 8px 15px;
-      border-left: 5px solid $darkgrey;
+      padding: 5px 10px;
+      border-left: 3px solid $darkgrey;
       background: linear-gradient(to right, $darkgrey 50%, transparent 50%);
       background-size: 200% 100%;
       background-position: right bottom;
-      margin-left: -16px;
-      margin-right: -16px;
 
       &:hover {
         background-color: $darkgrey;
         color: white;
         cursor: pointer;
-        .material-icons {
-          color: white;
-        }
+
         background-position: left bottom;
-        transition: all 2s ease;
+        transition: all 1s ease-in;
       }
     }
 
@@ -98,6 +94,13 @@
       font-size: 24px;
       margin-right: 15px;
     }
+
+    .source-type {
+      display: inline-block;
+      margin-right: 5px;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
   }
 
   .card-cell {
@@ -177,6 +180,57 @@
     }
   }
 
+  .media {
+    display: flex;
+    max-height: 350px;
+    // justify-content: center;
+    flex-direction: column;
+    cursor: pointer;
+
+    .img-wrapper {
+      width: 100%;
+      display: flex;
+      img {
+        // width: auto;
+        // height: 100%;
+
+        max-width: 100%;
+        height: auto;
+        object-fit: cover;
+        // width: 100%;
+        // height: 250px;
+      }
+    }
+
+    video {
+      width: 100%;
+      padding-bottom: 10px;
+      user-select: none;
+      &:focus {
+        outline: 0 !important;
+      }
+    }
+
+    video::-webkit-media-controls-panel {
+      // remove Chrome's gradient
+      background-image: none !important;
+      filter: brightness(0.9);
+      display: flex;
+      align-self: flex-end;
+      // flex-basis: 35px;
+      background-color: rgba($red, 0.6);
+    }
+
+    /* Could Use thise as well for Individual Controls */
+    video::-webkit-media-controls-play-button {
+      align-self: center;
+    }
+
+    video::-webkit-media-controls-timeline {
+      display: none;
+    }
+  }
+
   .category {
     margin-bottom: 5px;
 

src/scss/cardstack.scss

@@ -1,11 +1,11 @@
 // @import 'burger';
-// @import 'card';
+@import "card";
 
 .card-stack {
   position: absolute;
   top: $card-right;
   right: $card-right;
-  max-height: calc(100% - 180px);
+  max-height: calc(100% - 260px);
   height: auto;
   width: $card-width;
   overflow-y: scroll;