run scss through prettier (gitcoinco#1085)

.circleci/config.yml

@@ -99,4 +99,4 @@ jobs:
           command: bundle exec erblint app/views/**/*.html.erb
       - run:
           name: Run prettier-standard check
-          command: yarn run --ignore-engines prettier-standard --check "app/**/*.js"
+          command: yarn run --ignore-engines prettier:check

.yarnclean

@@ -6,7 +6,6 @@ powered-test
 
 # asset directories
 docs
-doc
 website
 images
 

app/assets/stylesheets/organization_report.scss

@@ -217,8 +217,8 @@ span.badge-removed {
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 thead th {

app/javascript/advertisements/centered/theme.scss

@@ -22,13 +22,13 @@ div#cf[data-template='centered'] {
         color: rgba(255, 255, 255, 0.8);
 
         &:before {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
 
         &:after {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
@@ -73,13 +73,13 @@ div#cf[data-template='centered'] {
         margin-bottom: 8px;
 
         &:before {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
 
         &:after {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }

app/javascript/advertisements/docsify/theme.scss

@@ -21,7 +21,7 @@ div#cf[data-template='docsify'] {
         overflow: auto;
 
         &:after {
-          content: "";
+          content: '';
           clear: both;
           display: table;
         }
@@ -85,7 +85,7 @@ div#cf[data-template='docsify'] {
         overflow: auto;
 
         &:after {
-          content: "";
+          content: '';
           clear: both;
           display: table;
         }

app/javascript/advertisements/image-centered/theme.scss

@@ -1,5 +1,5 @@
-div#cf[data-template="image-centered"] {
-  &[data-theme="dark"] {
+div#cf[data-template='image-centered'] {
+  &[data-theme='dark'] {
     max-width: 280px;
     margin: 0 auto;
     border: none;
@@ -54,7 +54,7 @@ div#cf[data-template="image-centered"] {
     }
   }
 
-  &[data-theme="light"] {
+  &[data-theme='light'] {
     max-width: 280px;
     margin: 0 auto;
     border: none;

app/javascript/advertisements/image-only/theme.scss

@@ -1,5 +1,5 @@
-div#cf[data-template="image-only"] {
-  &[data-theme="dark"] {
+div#cf[data-template='image-only'] {
+  &[data-theme='dark'] {
     max-width: 280px;
     margin: 0 auto;
 
@@ -24,13 +24,13 @@ div#cf[data-template="image-only"] {
         margin-bottom: 8px;
 
         &:before {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
 
         &:after {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
@@ -59,7 +59,7 @@ div#cf[data-template="image-only"] {
     }
   }
 
-  &[data-theme="light"] {
+  &[data-theme='light'] {
     max-width: 280px;
     margin: 0 auto;
 
@@ -84,13 +84,13 @@ div#cf[data-template="image-only"] {
         margin-bottom: 8px;
 
         &:before {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }
 
         &:after {
-          content: "-";
+          content: '-';
           margin: 0 0.5em;
           opacity: 0.5;
         }

app/javascript/advertisements/index.js

@@ -69,9 +69,7 @@ class CodeFundAd {
   perform () {
     if (!this.visible) {
       console.log(
-        `CodeFund container element not visible! Please verify an element exists (and is visible) that matches the CSS selector "${
-          this.selector
-        }"`
+        `CodeFund container element not visible! Please verify an element exists (and is visible) that matches the CSS selector "${this.selector}"`
       )
       return this.dispatch({ status: 'no-container-element' })
     }

app/javascript/advertisements/index.scss

@@ -1,9 +1,10 @@
 // default styles for all ads
 #cf[data-template] {
-  &[data-theme='dark'], &[data-theme='light'] {
+  &[data-theme='dark'],
+  &[data-theme='light'] {
     &,
     * {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     }
 
     a {

app/javascript/advertisements/media/theme.scss

@@ -57,7 +57,7 @@ div#cf[data-template='media'] {
       a.cf-text {
         color: $text-color;
         strong {
-          color: $bold-text-color
+          color: $bold-text-color;
         }
         span.cf-link {
           color: $link-color;
@@ -80,7 +80,7 @@ div#cf[data-template='media'] {
       a.cf-text {
         color: $text-color;
         strong {
-          color: $bold-text-color
+          color: $bold-text-color;
         }
         span.cf-link {
           color: $link-color;

app/javascript/advertisements/rectangle-narrow/theme.scss

@@ -1,4 +1,4 @@
-div#cf[data-template="rectangle-narrow"][data-theme="dark"] {
+div#cf[data-template='rectangle-narrow'][data-theme='dark'] {
   margin: 0 auto;
   max-width: 330px;
   border: none;
@@ -45,7 +45,7 @@ div#cf[data-template="rectangle-narrow"][data-theme="dark"] {
   }
 }
 
-div#cf[data-template="rectangle-narrow"][data-theme="light"] {
+div#cf[data-template='rectangle-narrow'][data-theme='light'] {
   margin: 0 auto;
   max-width: 330px;
   border: none;

app/javascript/advertisements/smart-bar/theme.scss

@@ -5,12 +5,12 @@ $button-text-color: #2c6ac7;
 $button-hover-bg-color: #1c1565;
 $button-hover-text-color: #ffffff;
 
-div#cf[data-template="smart-bar"] {
-  &[data-theme="dark"] {
+div#cf[data-template='smart-bar'] {
+  &[data-theme='dark'] {
     // No changes
   }
 
-  &[data-theme="light"] {
+  &[data-theme='light'] {
     // No changes
   }
 
@@ -165,7 +165,7 @@ div#cf[data-template="smart-bar"] {
 }
 
 @media only screen and (min-width: 320px) and (max-width: 648px) {
-  div#cf[data-template="smart-bar"] {
+  div#cf[data-template='smart-bar'] {
     top: -196px;
   }
 }

app/javascript/advertisements/sponsored-text/theme.scss

@@ -1,8 +1,8 @@
-ins#cf[data-template="sponsored-text"][data-theme="dark"] {
+ins#cf[data-template='sponsored-text'][data-theme='dark'] {
   text-decoration: none !important;
   color: #aaaaaa;
   line-height: 1.7;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
 
@@ -57,11 +57,11 @@ ins#cf[data-template="sponsored-text"][data-theme="dark"] {
   }
 }
 
-ins#cf[data-template="sponsored-text"][data-theme="light"] {
+ins#cf[data-template='sponsored-text'][data-theme='light'] {
   text-decoration: none !important;
   color: #6c757e;
   line-height: 1.7;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
 

app/javascript/advertisements/square/theme.scss

@@ -1,4 +1,4 @@
-div#cf[data-template="square"] {
+div#cf[data-template='square'] {
   max-width: 255px;
   margin: 0 auto;
   background-color: hsl(0, 0%, 98%);

app/javascript/advertisements/sticky-box/theme.scss

@@ -1,8 +1,8 @@
-div#cf[data-template="sticky-box"] {
-  &[data-theme="dark"] {
+div#cf[data-template='sticky-box'] {
+  &[data-theme='dark'] {
   }
 
-  &[data-theme="light"] {
+  &[data-theme='light'] {
   }
 
   background: rgba(255, 255, 255, 0.98);
@@ -90,7 +90,7 @@ div#cf[data-template="sticky-box"] {
     }
   }
 
-  [data-behavior="close"] {
+  [data-behavior='close'] {
     background: rgba(0, 0, 0, 0.1);
     border-radius: 50px;
     color: #fff;

app/javascript/advertisements/text/theme.scss

@@ -1,4 +1,4 @@
-div#cf[data-template="text"][data-theme="dark"] {
+div#cf[data-template='text'][data-theme='dark'] {
   color: #77838f;
   text-decoration: none !important;
   box-shadow: none !important;
@@ -16,7 +16,7 @@ div#cf[data-template="text"][data-theme="dark"] {
   }
 }
 
-div#cf[data-template="text"][data-theme="light"] {
+div#cf[data-template='text'][data-theme='light'] {
   color: #77838f;
   text-decoration: none !important;
   box-shadow: none !important;

app/javascript/advertisements/top-bar/theme.scss

@@ -5,12 +5,12 @@ $button-text-color: #2c6ac7;
 $button-hover-bg-color: #1c1565;
 $button-hover-text-color: #ffffff;
 
-div#cf[data-template="top-bar"] {
-  &[data-theme="dark"] {
+div#cf[data-template='top-bar'] {
+  &[data-theme='dark'] {
     // No changes
   }
 
-  &[data-theme="light"] {
+  &[data-theme='light'] {
     // No changes
   }
 

app/javascript/advertisements/vertical/theme.scss

@@ -1,4 +1,4 @@
-div#cf[data-template="vertical"][data-theme="dark"] {
+div#cf[data-template='vertical'][data-theme='dark'] {
   width: 125px;
   margin: 0 auto;
   border: none;
@@ -63,7 +63,7 @@ div#cf[data-template="vertical"][data-theme="dark"] {
   }
 }
 
-div#cf[data-template="vertical"][data-theme="light"] {
+div#cf[data-template='vertical'][data-theme='light'] {
   width: 125px;
   margin: 0 auto;
   border: none;

app/javascript/controllers/code_sandbox_embed_controller.js

@@ -19,9 +19,7 @@ export default class extends Controller {
       )
       .then(
         (payload => {
-          this.element.src = `https://codesandbox.io/embed/${
-            payload.sandbox_id
-          }?hidenavigation=1&codemirror=1&highlights=12,13,14,15,16&view=editor`
+          this.element.src = `https://codesandbox.io/embed/${payload.sandbox_id}?hidenavigation=1&codemirror=1&highlights=12,13,14,15,16&view=editor`
         }).bind(this)
       )
       .catch(function (error) {

app/javascript/themes/current/components/theme.js

@@ -1319,9 +1319,7 @@ class Theme {
         // define custom template
         if (options.itemTemplate == true) {
           options.menuItemTemplate = item => {
-            return `<span class="user-avatar user-avatar-sm mr-2"><img src="${
-              item.original.avatar
-            }"></span> ${item.string}`
+            return `<span class="user-avatar user-avatar-sm mr-2"><img src="${item.original.avatar}"></span> ${item.string}`
           }
         }
 
@@ -1687,9 +1685,7 @@ class Theme {
               .addClass(`${strength[result.score]}`)
               .css('width', indicatorWidth)
             $(feedback).html(
-              `<strong>${result.feedback.warning}</strong> ${
-                result.feedback.suggestions
-              }`
+              `<strong>${result.feedback.warning}</strong> ${result.feedback.suggestions}`
             )
           } else {
             $(indicator).addClass('d-none')

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

@@ -1,12 +1,12 @@
-@import "~select2/dist/css/select2";
-@import "~select2-bootstrap-theme/dist/select2-bootstrap";
-@import "~noty/src/noty";
-@import "~noty/src/themes/mint";
-@import "~bootstrap-daterangepicker/daterangepicker";
-@import "~codemirror/lib/codemirror";
-@import "~codemirror/theme/idea";
-@import "~trix/dist/trix";
-@import "mixins";
-@import "theme";
-@import "utilities";
-@import "components";
+@import '~select2/dist/css/select2';
+@import '~select2-bootstrap-theme/dist/select2-bootstrap';
+@import '~noty/src/noty';
+@import '~noty/src/themes/mint';
+@import '~bootstrap-daterangepicker/daterangepicker';
+@import '~codemirror/lib/codemirror';
+@import '~codemirror/theme/idea';
+@import '~trix/dist/trix';
+@import 'mixins';
+@import 'theme';
+@import 'utilities';
+@import 'components';

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

@@ -1,10 +1,10 @@
-@import "./components/accordians";
-@import "./components/autocomplete";
-@import "./components/cards";
-@import "./components/checkbox_tree";
-@import "./components/creative_preview";
-@import "./components/dropdown";
-@import "./components/navigation";
-@import "./components/select2";
-@import "./components/sparkline";
-@import "./components/tables";
+@import './components/accordians';
+@import './components/autocomplete';
+@import './components/cards';
+@import './components/checkbox_tree';
+@import './components/creative_preview';
+@import './components/dropdown';
+@import './components/navigation';
+@import './components/select2';
+@import './components/sparkline';
+@import './components/tables';