[Site] [Dark Mode] Update import catalog modal according to theme #1203

_includes/coming-soon.html

@@ -1,8 +1,8 @@
     <div class="card link">
         <div class="card-inner">
-            <div class="front" style="background:rgba(0, 0, 0, 0.7)">
+            <div class="front">
                 <h4 class="overlay-text">{{pattern.name}}</h4>
-                <h5 class="pattern-name">Coming Soon...</h5>
+                <h5>Coming Soon...</h5>
                 <img class="pattern-image-overlay" src="{{pattern.image}}" />
                 <h6 class="pattern-id-overlay">
                     <img class="smp-overlay" src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg"

_includes/help-modal.html

@@ -44,6 +44,7 @@
 .tabcontent {
   padding: 6px 12px;
   border-top: none;
+  background-color: var(--integrations-bg);
 }
 
 /* Modal Content/Box */
@@ -60,6 +61,7 @@
   float: right;
   font-size: 28px;
   font-weight: bold;
+  /* margin-right: 10px; */
 }
 
 .closed:hover,
@@ -75,14 +77,16 @@
     <div class="help-modal-content">
 
         <div class="tab">
-            <span class="closed" style=" padding: 4px 4px">&times;</span>
+            <span class="closed" style=" padding: 4px 10px">&times;</span>
             <button class="tablinks active" onclick="openTab(event, 'MesheryUI')">Meshery UI</button>
             <button class="tablinks" onclick="openTab(event, 'MesheryCLI')">Meshery CLI</button>
           </div>
 
           <!-- Tab content -->
           <div id="MesheryUI" class="tabcontent">
             <h3>Meshery UI</h3>
+            <p>To install Meshery follow the steps mentioned in the  <a href="https://docs.meshery.io/installation/quick-start#install-meshery">docs</a></p>
+
             <!-- <a href="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4"
 				data-fancybox="images" data-caption="Import your patterns"> -->
         <div style="text-align: center;">
@@ -99,6 +103,9 @@ <h3>Meshery UI</h3>
 
           <div id="MesheryCLI" class="tabcontent" style="display: none;">
             <h3>Meshery CLI</h3>
+            <p>To use mesheryctl follow the steps mentioned in the <a href="https://docs.meshery.io/installation/mesheryctl">docs</a></p>
+
+            <!-- <h3>Meshery CLI</h3> -->
             <p>1. Apply a pattern file. </p>
             <div id="start-pattern" class="highlight-code">
                 <p class="code-box" style="height: 40px; line-height: 15px; color: white"><code style="position: absolute;">

_sass/catalog.scss

@@ -9,6 +9,9 @@
   font-size: 18px;
   font-weight: 400;
 }
+.tabcontent h3{
+  color: var(--color-secondary-dark);
+}
 /* CARD-STYLES */
 .card {
   position: relative;
@@ -99,7 +102,6 @@
   position: absolute;
   top: 40%;
   left: 50%;
-  color: white;
   font-size: 19px;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
@@ -112,7 +114,6 @@
   right: 0;
   padding-top: 10px;
   margin-right: 14px;
-  color: white;
   opacity: 0.7;
 }
 .catalog {
@@ -276,6 +277,7 @@ p {
   text-align: center;
   padding: 15px 0 15px 0;
 }
+
 .pattern-id {
   position: absolute;
   bottom: .5rem;

_sass/elements.scss

@@ -75,7 +75,7 @@ h3 {
 	color: var(--color-secondary-dark);
 }
 
-h4{
+h4, h5, h6{
 	color: var(--color-secondary-dark);
 }
 

_sass/programs.scss

@@ -18,11 +18,6 @@
     margin: 2rem  0rem;
   }
 
-  h5 {
-    color: var(--color-secondary-dark) !important;
-  }
-
-
 .program-heading {
     background: transparent !important;
     padding-bottom: 2rem !important;