Fixed Storybook issues with Clarity 5

Signed-off-by: Milan Klanjsek <mklanjsek@pivotal.io>
vmware-archive · Mar 25, 2021 · 44049e9 · 44049e9
1 parent 20d2968
commit 44049e9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 6 deletions.
diff --git a/web/.storybook/preview-head.html b/web/.storybook/preview-head.html
@@ -36,4 +36,43 @@
   .sbdocs .sbdocs-preview pre code .token.punctuation {
     color: #000;
   }
+
+  .sbdocs .sbdocs-h1  {
+    font-size: 32px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 900;
+    margin-bottom: 8px;
+  }
+
+  .sbdocs .sbdocs-h2 {
+    font-size: 24px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin-bottom: 8px;
+  }
+
+  .sbdocs .sbdocs-h3 {
+    font-size: 20px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin-bottom: 8px;
+  }
+
+  .sbdocs .sbdocs-h4 {
+    font-size: 16px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin-bottom: 8px;
+  }
+
+  .sbdocs .sbdocs-p {
+    margin: 16px 0px;
+    color: rgb(51, 51, 51);
+  }
+
+   .sbdocs .sbdocs-ol, .sbdocs .sbdocs-ul{
+    padding-left: 30px;
+    margin: 16px 0px;
+  }
+
+  .sbdocs .sbdocs-li {
+    list-style-position: outside;
+  }
 </style>
diff --git a/web/angular.json b/web/angular.json
@@ -60,8 +60,8 @@
             ],
             "styles": [
               "node_modules/@clr/icons/clr-icons.min.css",
-              "node_modules/@clr/ui/clr-ui.min.css",
               "node_modules/@clr/ui/clr-ui-dark.min.css",
+              "node_modules/@clr/ui/clr-ui.min.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/src/app/modules/shared/components/presentation/cytoscape/cytoscape.component.scss b/web/src/app/modules/shared/components/presentation/cytoscape/cytoscape.component.scss
@@ -16,7 +16,7 @@
   top: 0;
 }
 
-::ng-deep .label1 {
+::ng-deep .label-header .label1 {
   font-size: 22px;
   color: var(--label1-color);
   font-weight: normal;
@@ -25,7 +25,7 @@
   cursor: default;
 }
 
-::ng-deep .label2 {
+::ng-deep .label-header .label2 {
   font-size: 16px;
   color: var(--label2-color);
   font-weight: normal;

diff --git a/web/src/app/modules/shared/components/presentation/cytoscape/cytoscape.component.ts b/web/src/app/modules/shared/components/presentation/cytoscape/cytoscape.component.ts
@@ -105,7 +105,7 @@ export class CytoscapeComponent implements OnChanges, OnDestroy {
         valignBox: 'bottom',
         halignBox: 'right',
         tpl: data =>
-          '<div><p class="label1">' +
+          '<div class="label-header"><p class="label1">' +
           data.label1 +
           '</p>' +
           '<p class="label2">' +

diff --git a/web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.scss b/web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.scss
@@ -52,6 +52,7 @@
 }
 
 :host ::ng-deep .nav-group-content .nav-group-trigger-icon {
+  display: flex;
   height: 1.5rem;
   margin-left: 6px;
 }