style(ui): Fix stylelint errors

* manually fix scss style errors * update package.json targets `lint:styles` and `lint:styles:fix` * update .stylelintrc.json to defaultSeverity 'warning'
orb-community · Dec 19, 2023 · 5295c41 · 5295c41
1 parent 1bd9805
commit 5295c41
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 125 deletions.
diff --git a/ui/.stylelintrc.json b/ui/.stylelintrc.json
@@ -1,4 +1,5 @@
 {
+  "defaultSeverity": "warning",
   "rules": {
     "color-hex-case": "lower",
     "color-no-invalid-hex": true,

diff --git a/ui/package.json b/ui/package.json
@@ -22,8 +22,8 @@
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
     "lint": "ng lint",
     "lint:fix": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'",
-    "lint:styles": "stylelint ./src/**/*.scss",
-    "lint:styles:fix": "stylelint ./src/**/*.scss --fix",
+    "lint:styles": "npx stylelint './src/**/*.{css,scss}'",
+    "lint:styles:fix": "npx stylelint './src/**/*.{css,scss}' --fix",
     "lint:ci": "npm run lint && npm run lint:styles",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
     "e2e": "ng e2e",

diff --git a/ui/src/app/auth/pages/register/register.component.scss b/ui/src/app/auth/pages/register/register.component.scss
@@ -1,10 +1,10 @@
 @import '../login/login.component';
 
-.accept-group-display{
+.accept-group-display {
   display: inline-flex;
   margin-top: 0.5rem;
   align-items: stretch;
   .label {
     margin-top: 0.9rem;
   }
-}
+}
diff --git a/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss b/ui/src/app/pages/datasets/policies.agent/view/agent.policy.view.component.scss
@@ -265,13 +265,12 @@ header {
   background-color: transparent;
   border: none;
   outline: none;
-  font-family: Open Sans,sans-serif;
-  font-size: .875rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 0.875rem;
   font-weight: 700;
   line-height: 1rem;
   text-transform: uppercase;
   color: #969fb9;
-  border: none;
   border-bottom: solid 2px transparent;
   &:hover {
     color: #5aa1ff;

diff --git a/ui/src/app/pages/fleet/agents/key/agent.key.component.scss b/ui/src/app/pages/fleet/agents/key/agent.key.component.scss
@@ -50,7 +50,7 @@ nb-card {
         border: 0 transparent;
         color: #969fb9;
         position: relative;
-        top: -0.10rem;
+        top: -0.1rem;
         right: -0.15rem;
         outline: none;
         max-height: 28px !important;
@@ -104,13 +104,13 @@ a {
   fill: #3089fc !important;
 }
 .command-card {
-  margin: 1.5rem 0 !important; 
+  margin: 1.5rem 0 !important;
   background-color: #1c2339 !important;
   padding: 0 !important;
   border: transparent;
   nb-card-header {
     border: none !important;
-    border-radius: 0px !important;
+    border-radius: 0 !important;
   }
   nb-card-body {
     margin: 0 !important;

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.scss b/ui/src/app/pages/fleet/agents/list/agent.list.component.scss
@@ -182,10 +182,10 @@ input[type=checkbox] {
   margin-left: 10px;
 }
 .selected-buttons {
-  width: 270px; 
-  display: flex; 
-  align-self: flex-end; 
-  gap: 5px; 
+  width: 270px;
+  display: flex;
+  align-self: flex-end;
+  gap: 5px;
 }
 .agent-reset {
   color: #fff !important;

diff --git a/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss b/ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss
@@ -1,97 +1,97 @@
 nb-card {
-    max-width: 38rem !important;
-    padding: 0 !important;
-
-    nb-card-header {
-      background: #232940 !important;
-      color: #969fb9 !important;
-    }
-
-    nb-card-body {
-      margin: 2rem 3rem !important;
-      padding: 0 !important;
-
-      p {
-        color: #969fb9 !important;
-        margin-bottom: 1rem !important;
-        font-weight: 500 !important;
-        font-size: 14px !important;
-        line-height: 24px !important;
-      }
-
-      .ns1-red {
-        color: #df316f !important;
-      }
-    }
-
-    nb-card-footer {
-      text-align: center !important;
-      padding: 1.5rem !important;
-    }
+  max-width: 38rem !important;
+  padding: 0 !important;
+
+  nb-card-header {
+    background: #232940 !important;
+    color: #969fb9 !important;
   }
 
-  // ORB
-  ::ng-deep {
-    .orb-close-dialog {
-      background-color: #23294000 !important;
-      border-radius: 4px !important;
-      display: contents !important;
-      float: right !important;
+  nb-card-body {
+    margin: 2rem 3rem !important;
+    padding: 0 !important;
 
-      > span {
-        float: right;
-        font-size: 1.5rem !important;
-        color: #3089fc !important;
-        font-weight: 900 !important;
-      }
+    p {
+      color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
-    .orb-sink-delete-warning-button:not(.btn-disabled) {
-      background-color: #3089fc !important;
-      color: #ffffff !important;
+    .ns1-red {
+      color: #df316f !important;
     }
   }
-  .ns1red {
-    color: #df316f !important;
-  }
-  .element-list {
-    max-height: 225px;
-    overflow-y: auto;
-    margin-left: 20px;
-  }
-  .span-accent {
-    font-size: 13px;
-    font-weight: 600;
-    float: right;
-  }
-  .item-row {
-    display: flex;
-    align-items: center;
-    border-radius: 6px;
-    width: 300px;
-    padding-left: 3px;
-    font-size: 13px;
-    font-weight: 600;
-  }
-  .item-row:hover {
-    background-color: #1e263d;
-  }
-  .col-8 {
-    flex: 1;
-    padding-left: 0;
+
+  nb-card-footer {
+    text-align: center !important;
+    padding: 1.5rem !important;
   }
-  .col-3 {
-    flex: 1;
-    padding-right: 0;
+}
+
+// ORB
+::ng-deep {
+  .orb-close-dialog {
+    background-color: #23294000 !important;
+    border-radius: 4px !important;
+    display: contents !important;
+    float: right !important;
+
+    > span {
+      float: right;
+      font-size: 1.5rem !important;
+      color: #3089fc !important;
+      font-weight: 900 !important;
+    }
   }
-  .overflow-ellipsis {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    max-width: 350px !important;
+
+  .orb-sink-delete-warning-button:not(.btn-disabled) {
+    background-color: #3089fc !important;
+    color: #ffffff !important;
   }
-  .agent-info {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+}
+.ns1red {
+  color: #df316f !important;
+}
+.element-list {
+  max-height: 225px;
+  overflow-y: auto;
+  margin-left: 20px;
+}
+.span-accent {
+  font-size: 13px;
+  font-weight: 600;
+  float: right;
+}
+.item-row {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  width: 300px;
+  padding-left: 3px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.item-row:hover {
+  background-color: #1e263d;
+}
+.col-8 {
+  flex: 1;
+  padding-left: 0;
+}
+.col-3 {
+  flex: 1;
+  padding-right: 0;
+}
+.overflow-ellipsis {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 350px !important;
+}
+.agent-info {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/ui/src/app/pages/fleet/agents/view/agent.view.component.scss b/ui/src/app/pages/fleet/agents/view/agent.view.component.scss
@@ -228,19 +228,18 @@ nb-card {
   font-weight: 400;
   margin-top: 23px;
   line-height: 1.25rem;
-} 
+}
 .tab-button {
   padding: 16px 32px;
   background-color: transparent;
   border: none;
   outline: none;
-  font-family: Open Sans,sans-serif;
-  font-size: .875rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 0.875rem;
   font-weight: 700;
   line-height: 1rem;
   text-transform: uppercase;
   color: #969fb9;
-  border: none;
   border-bottom: solid 2px transparent;
   &:hover {
     color: #5aa1ff;

diff --git a/ui/src/app/pages/fleet/groups/details/agent.group.details.component.scss b/ui/src/app/pages/fleet/groups/details/agent.group.details.component.scss
@@ -13,7 +13,7 @@ nb-card {
 
   nb-card-body {
     overflow: hidden !important;
-    margin: 2rem 3rem 0 3rem !important;
+    margin: 2rem 3rem 0 !important;
     padding: 0 !important;
   }
 }
@@ -43,7 +43,7 @@ nb-card {
   }
 }
 .group-edit-button {
-  padding: 8px 24px 8px 24px;
+  padding: 8px 24px;
   border-radius: 16px;
   border: none;
   background-color: #3089fc;

diff --git a/ui/src/app/pages/sinks/details/sink.details.component.scss b/ui/src/app/pages/sinks/details/sink.details.component.scss
@@ -14,7 +14,7 @@ nb-card {
 
   nb-card-body {
     overflow: hidden !important;
-    margin: 2rem 3rem 0 3rem !important;
+    margin: 2rem 3rem 0 !important;
     padding: 0 !important;
   }
 }
@@ -113,7 +113,7 @@ p {
   font-size: 14px;
 }
 .sink-edit-button {
-  padding: 8px 24px 8px 24px;
+  padding: 8px 24px;
   border-radius: 16px;
   border: none;
   background-color: #3089fc;