From 44049e94be6616a235f480c4feb45dc06883a164 Mon Sep 17 00:00:00 2001
From: Milan Klanjsek <mklanjsek@pivotal.io>
Date: Thu, 25 Mar 2021 08:59:04 -0600
Subject: [PATCH] Fixed Storybook issues with Clarity 5

Signed-off-by: Milan Klanjsek <mklanjsek@pivotal.io>
---
 web/.storybook/preview-head.html              | 39 +++++++++++++++++++
 web/angular.json                              |  2 +-
 web/package-lock.json                         |  4 +-
 .../cytoscape/cytoscape.component.scss        |  4 +-
 .../cytoscape/cytoscape.component.ts          |  2 +-
 .../navigation/navigation.component.scss      |  1 +
 6 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/web/.storybook/preview-head.html b/web/.storybook/preview-head.html
index f0148d1bcb..4ed0b03ca2 100644
--- 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
index 1eed1b95a7..65c3371a3f 100644
--- 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
index 3067bf95bf..4168bbe2a0 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -4433,7 +4433,7 @@
         "loglevel": "^1.6.4",
         "loglevel-plugin-prefix": "^0.8.4",
         "lunr": "^2.3.6",
-        "marked": "^0.7.0",
+        "marked": "2.0.1",
         "minimist": "^1.2.0",
         "opencollective-postinstall": "^2.0.2",
         "os-name": "^3.1.0",
@@ -30830,4 +30830,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
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
index 6841545a9b..ebcbcdae13 100644
--- 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
index e5ab615678..a6a8c7dd30 100644
--- 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
index 796909c8b3..d1e53b7183 100644
--- 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;
 }