Update packages for security vulnerabilities (#1193)

- update and remove unused packages
- remove circleci cache binstub (doesn't work)
- update stylesheets
- update gem graph

Author: andrewmcodes

.env-example

@@ -7,7 +7,6 @@ export BASE_ECPM=400
 export CAMO_HOST=
 export CAMO_KEY=
 export CAMPAIGN_DEMO_ID=395
-export CIRCLE_CI_TOKEN=
 export CLOUDFRONT_HOST=
 export CODEFUND_ANALYTICS_KEY=
 export DATABASE_URL=

Gemfile

@@ -11,7 +11,7 @@ gem "acts_as_commentable_with_threading", "~> 2.0.1"
 gem "aws-sdk-s3", "~> 1.61.1", require: false
 gem "barnes", "~> 0.0.7"
 gem "bootsnap", ">= 1.4.2", require: false
-gem "cable_ready", "~> 4.0.7"
+gem "cable_ready", "~> 4.0.9"
 gem "camo", "~> 0.1.0"
 gem "chroma", "~> 0.2.0"
 gem "chronic", "~> 0.10.2"

Gemfile.lock

@@ -597,7 +597,7 @@ DEPENDENCIES
   bootsnap (>= 1.4.2)
   bullet
   byebug
-  cable_ready (~> 4.0.7)
+  cable_ready (~> 4.0.9)
   camo (~> 0.1.0)
   capybara (>= 2.15)
   chroma (~> 0.2.0)

app/javascript/src/index.js

@@ -6,7 +6,6 @@ require('channels')
 import 'bootstrap'
 import 'select2'
 import 'moment'
-import 'trix'
 import 'bootstrap-daterangepicker'
 import '../events'
 import './prefetch'

app/javascript/themes/current/stylesheets/application.scss

@@ -3,8 +3,7 @@
 @import '~noty/src/noty';
 @import '~noty/src/themes/mint';
 @import '~bootstrap-daterangepicker/daterangepicker';
-@import '~trix/dist/trix';
-@import 'mixins';
+@import 'variables';
 @import 'theme';
 @import 'utilities';
 @import 'components';

app/javascript/themes/current/stylesheets/components.scss

@@ -1,6 +1,4 @@
-@import './components/accordians';
 @import './components/autocomplete';
-@import './components/cards';
 @import './components/checkbox_tree';
 @import './components/creative_preview';
 @import './components/dropdown';

app/javascript/themes/current/stylesheets/components/accordians.scss

@@ -4,7 +4,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    color: $primary;
+    color: $color-primary;
   }
 
   &__branch > i {

app/javascript/themes/current/stylesheets/components/cards.scss

@@ -1,6 +1,5 @@
 // =========== Base ===========
 th[scope='col'] a {
-  color: #1e2022;
   text-decoration: none;
 }
 
@@ -9,7 +8,11 @@ th[scope='col'] a {
   display: block;
   line-height: 0.7;
   cursor: pointer;
-  color: #bdc5d1;
+  color: $color-gray-500;
+
+  &:hover {
+    color: $color-gray-700;
+  }
 }
 
 // =========== Pagination ===========

app/javascript/themes/current/stylesheets/components/checkbox_tree.scss

@@ -1,5 +1,3 @@
-@import './theme_variables';
-
 // =========== Webpack ===========
 @import '~animate.css/animate';
 @import '~bootstrap-select/dist/css/bootstrap-select.min';
@@ -30,13 +28,13 @@ footer {
 }
 
 .app-header-dark {
-  background-color: #222230 !important;
+  background-color: $color-gray-800 !important;
 }
 
 li.menu-item.active {
   a.menu-link {
-    color: #222230;
-    background-color: #ffffff;
+    color: $color-gray-800;
+    background-color: $color-white;
   }
 }
 
@@ -71,15 +69,11 @@ button.layout-button {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: $color-white;
   background-clip: border-box;
-  border: 1px solid rgba(20, 20, 31, 0.12);
-  border-radius: 0.25rem;
 }
 
 .form-group {
-  $color-danger: rgb(183, 107, 163);
-  $color-danger-light: rgba(183, 107, 163, 0.15);
   .field_with_errors {
     label {
       color: $color-danger;
@@ -97,8 +91,14 @@ button.layout-button {
 
 .app-header,
 .auth-header {
-  background-color: #15003e !important;
+  background-color: $color-purple !important;
   background-image: url('../../../images/patterns/pattern2.svg');
   background-size: initial;
   background-repeat: repeat;
 }
+
+.dashboard-grid-wrapper {
+  display: grid;
+  grid-gap: 10px 20px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}

app/javascript/themes/current/stylesheets/components/tables.scss

@@ -1,3 +1,15 @@
+// =========== Mixins ===========
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
 // =========== Opacity ===========
 .opacity-0 {
   opacity: 0 !important;
@@ -52,13 +64,9 @@
   }
 }
 
-.text-sm {
-  font-size: 0.825rem;
-}
-
 .code {
   font-family: monospace;
-  color: rgb(232, 62, 140);
+  color: $code-text-color;
   word-break: break-word;
   font-size: 1.25em;
 }
@@ -85,28 +93,14 @@
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
-.grid-tcolumns-200 {
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
 .grid-trows-200 {
   grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
 }
 
-.dashboard-grid-wrapper {
-  display: grid;
-  grid-gap: 10px 20px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
 // =========== Buttons ===========
 @include media-breakpoint-down(sm) {
   .btn-block-sm-only {
     display: block;
     width: 100%;
   }
 }
-
-.bg-dark-ad {
-  background-color: rgb(29, 29, 29);
-}

app/javascript/themes/current/stylesheets/mixins.scss

@@ -0,0 +1,25 @@
+// =========== Color ===========
+$code-text-color: rgb(232, 62, 140);
+$color-danger-light: rgba(183, 107, 163, 0.15);
+$color-danger: #b76ba3;
+$color-primary: #346cb0;
+$color-purple: #15003e;
+$color-white: #ffffff;
+$color-gray-100: #f6f7f9;
+$color-gray-200: #e6e8ed;
+$color-gray-300: #d6d8e1;
+$color-gray-400: #c6c9d5;
+$color-gray-500: #a6abbd;
+$color-gray-600: #888c9b;
+$color-gray-700: #363642;
+$color-gray-800: #222230;
+$color-gray-900: #191927;
+
+// =========== Breakpoints ===========
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;

app/javascript/themes/current/stylesheets/theme.scss

@@ -15,7 +15,7 @@
   <iframe
     src="<%= @iframe_url %>"
     title="<%= @campaign.name %> Metabase dashboard"
-    class="metabase-card"
+    class="metabase-card border rounded"
     height="800"
     scrolling="yes"
     allowtransparency>

app/javascript/themes/current/stylesheets/theme_variables.scss

@@ -24,7 +24,7 @@
     </div>
   <% end %>
 </div>
-<div class="<%= @theme.inquiry.dark? ? "bg-dark-ad text-white" : "bg-white" %> vw-100 pt-4">
+<div class="<%= @theme.inquiry.dark? ? "bg-dark text-white" : "bg-white" %> vw-100 pt-4">
   <div class="container w-full mx-auto d-flex flex-column">
     <h1>Ad Template: <%= @template.humanize %></h1>
     <p>

app/javascript/themes/current/stylesheets/utilities.scss

@@ -13,7 +13,7 @@
   <iframe
     src="<%= @iframe_url %>"
     title="<%= @organization.name %> Metabase dashboard"
-    class="metabase-card"
+    class="metabase-card border rounded"
     height="800"
     scrolling="yes"
     allowtransparency>

app/javascript/themes/current/stylesheets/variables.scss

@@ -11,7 +11,7 @@
     please ensure ad blockers are disabled to view the overview
   </small>
   <iframe
-    class="metabase-card"
+    class="metabase-card border rounded"
     src="<%= @iframe_url %>"
     title="<%= @property.name %> Metabase dashboard"
     height="600px"

app/views/campaigns/show.html.erb

@@ -11,7 +11,7 @@
       <iframe
         src="<%= @iframe_url %>"
         title="<%= @property.name %> Metabase dashboard"
-        style="width: 100%; border: 0; resize: horizontal;"
+        class="metabase-card border rounded"
         height="800"
         scrolling="no"
         allowtransparency></iframe>