chore: Create a resuable component for selecting a channel (#6241)

app/javascript/dashboard/assets/scss/_woot.scss

@@ -37,7 +37,6 @@
 @include foundation-prototype-sizing;
 @include foundation-prototype-spacing;
 
-
 @import 'typography';
 @import 'layout';
 @import 'animations';
@@ -61,7 +60,6 @@
 @import 'widgets/woot-tables';
 
 @import 'views/settings/inbox';
-@import 'views/settings/channel';
 @import 'views/settings/integrations';
 
 @import 'plugins/multiselect';

app/javascript/dashboard/assets/scss/views/settings/channel.scss

@@ -1,52 +0,0 @@
-$channel-hover-color: rgba(0, 0, 0, 0.1);
-
-.channels {
-  margin-top: $space-medium;
-
-  .inactive {
-    filter: grayscale(100%);
-  }
-
-  .channel {
-    @include flex;
-    @include background-white;
-    @include border-light;
-
-    cursor: pointer;
-    flex-direction: column;
-    margin: -1px;
-    padding: $space-normal $zero;
-    transition: all 0.2s ease-in;
-
-    &:last-child {
-      @include border-light;
-    }
-
-    &:hover {
-      border: 1px solid $primary-color;
-      box-shadow: 0 2px 8px $channel-hover-color;
-      z-index: 999;
-    }
-
-    &.disabled {
-      opacity: 0.6;
-    }
-
-    img {
-      margin: $space-normal auto;
-      width: 50%;
-    }
-
-    .channel__title {
-      color: $color-body;
-      font-size: var(--font-size-default);
-      text-align: center;
-      text-transform: capitalize;
-    }
-
-    p {
-      color: $medium-gray;
-      width: 100%;
-    }
-  }
-}