fix low hanging lint issues

package.json

@@ -9,8 +9,8 @@
     "serve": "npx http-server ./build -p 3001",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "npm run lint:js & npm run lint:styles",
-    "lint:fix": "npm run lint:js:fix & npm run lint:styles:fix",
+    "lint": "npm run lint:js && npm run lint:styles",
+    "lint:fix": "npm run lint:js:fix && npm run lint:styles:fix",
     "lint:js": "eslint --ext .js,.jsx --ignore-path .gitignore .",
     "lint:js:fix": "eslint --fix --ext .js,.jsx --ignore-path .gitignore .",
     "lint:styles": "stylelint --ignore-path .gitignore '{**/*,*}.{css,sass,scss,html}'",

src/components/pages/build/cards-view/card.module.scss

@@ -1,26 +1,28 @@
 .card {
-    padding: 10px;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    margin: 0 0 1rem 0;
-    min-width: 800px;
-    overflow: hidden;
-    border-radius: 10px;
-    box-shadow: 0 0 1px rgba(40, 41, 61, 0.08), 0 0.5px 2px rgba(96, 97, 112, 0.16);
-    &:hover {
-        box-shadow: 0 1px 6px -3px rgba(0, 0, 0, 0.5);
-        box-shadow: 2px 0 -3px rgba(40, 41, 61, 0.08), 0 2px 2px rgba(96, 97, 112, 0.16);
-    }
-    &-message {
-        padding: 1rem;
-    }
+  display: flex;
+  align-items: center;
+  min-width: 800px;
+  padding: 10px;
+  margin: 0 0 1rem 0;
+  overflow: hidden;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 0 1px rgba(40, 41, 61, 0.08), 0 0.5px 2px rgba(96, 97, 112, 0.16);
+
+  &:hover {
+    box-shadow: 0 1px 6px -3px rgba(0, 0, 0, 0.5);
+    box-shadow: 2px 0 -3px rgba(40, 41, 61, 0.08), 0 2px 2px rgba(96, 97, 112, 0.16);
+  }
+
+  &-message {
+    padding: 1rem;
+  }
 }
 
 @media only screen and (max-width: 992px) {
-    .card {
-        min-width: 100%;
-        max-width: 100%;
-        overflow: auto;
-    }
+  .card {
+    min-width: 100%;
+    max-width: 100%;
+    overflow: auto;
+  }
 }

src/components/pages/build/cards-view/cards-view.module.scss

@@ -1,13 +1,13 @@
 .card-list {
-    margin: 1rem 2rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 1rem 2rem;
+  margin-top: 40px;
 }
 
 .message {
-    padding: 1rem;
-    background-color: white;
-    border: 1px lightgrey solid;
+  padding: 1rem;
+  background-color: white;
+  border: 1px lightgrey solid;
 }

src/components/pages/build/graph-view/diagram/controls/controls.module.scss

@@ -4,33 +4,38 @@
   right: 15px;
   display: flex;
   flex-flow: column;
+
   &-group {
     display: flex;
     flex-flow: column;
-    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
   }
+
   .btn {
-    background: #ffffff;
-    border: 1px solid #ffffff;
     box-sizing: border-box;
-    border-radius: 4px;
-    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
-    width: 22px;
-    height: 22px;
-    margin-bottom: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-bottom: 8px;
     cursor: pointer;
+    background: #fff;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+    border: 1px solid #fff;
+    border-radius: 4px;
+
     &-zoom-in,
     &-zoom-out {
-      filter: none;
       margin-bottom: 0;
+      filter: none;
     }
+
     &-zoom-in {
-      border-radius: 4px 4px 0 0;
       border-bottom-color: rgba(151, 151, 151, 0.24);
+      border-radius: 4px 4px 0 0;
     }
+
     &-zoom-out {
       border-radius: 0 0 4px 4px;
     }

src/components/pages/build/graph-view/diagram/custom-nodes/node-default/node-default-widget.module.scss

@@ -3,28 +3,31 @@
 }
 
 .node-inner {
-  max-width: 100%;
-  width: 100%;
-  height: 36px;
-  background-color: #fff;
-  box-shadow: 0px 0px 2px rgba(40, 41, 61, 0.04), 0px 4px 8px rgba(96, 97, 112, 0.16);
-  border-radius: 5px;
-  border: none;
-  color: black;
+  position: relative;
   display: flex;
+  flex: 1 1 100%;
   align-items: center;
   justify-content: center;
-  position: relative;
-  flex: 1 1 100%;
+  width: 100%;
+  max-width: 100%;
+  height: 36px;
+  color: black;
   cursor: pointer;
+  background-color: #fff;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 0 2px rgba(40, 41, 61, 0.04), 0 4px 8px rgba(96, 97, 112, 0.16);
+
   &-selected {
     border: 1px solid #2477e5;
   }
+
   &-skipped,
   &-declined,
   &-waiting_on_dependencies {
     cursor: not-allowed;
   }
+
   &:focus {
     outline: none;
   }
@@ -34,33 +37,36 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+
   .circle-port {
     width: 5px;
     height: 5px;
-    border-radius: 50%;
     background: #2477e5;
     border: 1px solid #2477e5;
+    border-radius: 50%;
   }
+
   &-in {
     left: -2.5px;
   }
+
   &-out {
     top: 50%;
     right: -2.5px;
   }
 }
 
 .name {
-  text-align: center;
-  font-weight: 500;
+  margin-top: 7px;
   font-size: 10px;
+  font-weight: 500;
   line-height: 14px;
+  color: rgba(5, 25, 46, 0.7);
   text-align: center;
   letter-spacing: 0.1px;
-  color: rgba(5, 25, 46, 0.7);
-  margin-top: 7px;
   overflow-wrap: break-word;
 }
+
 .status {
   width: 20px;
   height: 20px;

src/components/pages/build/graph-view/diagram/custom-nodes/node-edge/node-edge-widget.module.scss

@@ -4,33 +4,36 @@
 }
 
 .node-inner {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  appearance: none;
-  background: #f2f2f2;
-  border: 1px solid #acacac;
   position: relative;
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: #f2f2f2;
+  border: 1px solid #acacac;
+  border-radius: 50%;
+  appearance: none;
 }
 
 .port {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+
   .circle-port {
     width: 5px;
     height: 5px;
-    border-radius: 50%;
     background: #2477e5;
     border: 1px solid #2477e5;
+    border-radius: 50%;
   }
+
   &-in {
     left: -2.5px;
   }
+
   &-out {
     top: 50%;
     right: -2.5px;
@@ -39,8 +42,8 @@
 
 .fake-icon-stop {
   display: block;
-  background: #8b8b8b;
-  border-radius: 1px;
   width: 8px;
   height: 8px;
+  background: #8b8b8b;
+  border-radius: 1px;
 }

src/components/pages/build/graph-view/diagram/diagram.jsx

@@ -1,6 +1,6 @@
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import createEngine, {
-  DiagramModel,	DagreEngine,
+  DiagramModel, DagreEngine,
 } from '@projectstorm/react-diagrams';
 import classNames from 'classnames/bind';
 import React, {
@@ -138,7 +138,7 @@ const Diagram = (props) => {
   useLayoutEffect(() => {
     if (nodeModels.length >= 3) {
       nodeModels.slice(1, nodeModels.length - 1).forEach((nodeModel) => {
-        nodeModel.setIsImperativelySelected(nodeModel.getOptions().number == selectedNodeNumber);
+        nodeModel.setIsImperativelySelected(nodeModel.getOptions().number === selectedNodeNumber);
       });
     }
   }, [nodeModels, selectedNodeNumber]);

src/components/pages/build/graph-view/diagram/diagram.module.scss

@@ -1,6 +1,6 @@
 .diagram-wrapper {
-  display: block;
   position: relative;
+  display: block;
   width: 100%;
   height: 100%;
   overflow: hidden;

src/components/pages/build/graph-view/graph-view.jsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames/bind';
 import React, { useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
 import SplitPane from 'react-split-pane';
 import './graph-view.scss';
 
@@ -9,8 +10,6 @@ import Diagram from './diagram';
 import css from './graph-view.module.scss';
 import StepInfoDrawer from './step-info-drawer';
 
-import { useHistory, useParams } from 'react-router-dom';
-
 const cx = classNames.bind(css);
 
 const GraphView = (props) => {

src/components/pages/build/graph-view/graph-view.module.scss

@@ -8,27 +8,32 @@ $dot-size: 1px;
 $dot-space: 10px;
 
 @mixin grid-bg($dot-color, $bg-color, $dot-size, $dot-space) {
-  background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
-    linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
+  background:
+    linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
+    linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
+    $dot-color;
   background-size: $dot-space $dot-space;
 }
 
 .graph {
   &-wrapper {
-    padding: 0;
-    min-height: 500px;
     position: relative;
+    min-height: 500px;
+    padding: 0;
+
     @include grid-bg($dot-color, $bg-color-w, $dot-size, $dot-space);
   }
+
   &-stages {
+    position: relative;
     width: 100%;
     height: 100%;
-    position: relative;
     background: rgba(238, 249, 255, 0.5);
   }
+
   &-steps {
+    position: relative;
     width: 100%;
     height: 100%;
-    position: relative;
   }
 }

src/components/pages/build/graph-view/graph-view.scss

@@ -1,30 +1,32 @@
 .Resizer {
-  background: transparent;
   z-index: 1;
+  background: transparent;
   background-clip: padding-box;
 }
 
 .Resizer.horizontal {
+  position: relative;
+  width: 100%;
   height: 3px;
   padding: 3px 0;
   margin: 0;
   cursor: row-resize;
-  width: 100%;
-  position: relative;
+
   &::before {
-    content: "";
     position: absolute;
-    left: 0;
+    top: 3px;
     right: 0;
+    left: 0;
     height: 3px;
-    top: 3px;
+    content: "";
     background: rgba(10, 143, 253, 0.3);
   }
 }
 
 .Resizer.disabled {
   cursor: not-allowed;
 }
+
 .Resizer.disabled:hover {
   border-color: transparent;
 }