changed static colors to dynamic theme colors in Scenario.Card.style.js and LabsWrapper.style.js

src/components/ScenarioCard/ScenarioCard.style.js

@@ -4,12 +4,13 @@ export const ScenarioCardWrapper = styled.div`
     margin: 0px;
     .scenario-card-block {
         margin-bottom: 2rem;
+        background-color: ${props => props.theme.blackToWhite};
         border: 1px solid ${props => props.theme.primaryLightColorTwo};
         padding: 1rem;
         cursor: pointer;
         margin: 1rem;
         &:hover {
-            background-color: #222;
+            background-color: ${props => props.theme.backgroundColor};
             transition: 0.2s ease-in all;
         }
         &:hover .open-close-scenario {
@@ -25,6 +26,8 @@ export const ScenarioCardWrapper = styled.div`
         margin: auto;
         height: 100%;
         width: 100%;
+        filter: ${props => props.theme.filter};
+        transition: 0.2s ease-in all;
     }
     .scenario-description {
         display: flex;
@@ -37,12 +40,12 @@ export const ScenarioCardWrapper = styled.div`
     }
     h4.title {
         line-height: 1.4rem;
-        color: rgb(255, 255, 255);
+        color: ${props => props.theme.whiteToBlack};
         margin-bottom: 0.35rem;
     }
     p.info {
         line-height: 1rem;
-        color: lightgray;
+        color: ${props => props.theme.greyEEEEEEToBlack};
         margin-bottom: auto;
         font-weight: 300;
     }
@@ -51,19 +54,19 @@ export const ScenarioCardWrapper = styled.div`
 		display: flex;
 		justify-content: space-between;
         color: ${props => props.theme.primaryLightColorTwo};
-        
+
         margin-top: 1rem;
-        
+
         justify-content: flex-end;
 		align-self: flex-end;
 	}
 
 	.open-close-scenario {
 		display: flex;
 		background: transparent;
-        color: white;
+        color: ${props => props.theme.whiteToBlack};
 		border: none;
-		
+
 		font-size: 1rem;
 		cursor: pointer;
 		transition: 0.2s ease-in all;
@@ -75,21 +78,21 @@ export const ScenarioCardWrapper = styled.div`
 
     .sub-content {
         display:flex;
-        color: white;
+        color: ${props => props.theme.whiteToBlack};
         .ak {
             color: ${props => props.theme.linkColor};
             &:hover {
                 color: white;
             }
-        } 
-        justify-content:center; 
+        }
+        justify-content:center;
         margin-top:4rem;
         width:100%;
     }
-    
+
 
 	.active {
-		display: blwock;
+		display: block;
 		width: 100%;
 		height: 100%;
 		padding: 1.5rem;
@@ -100,7 +103,7 @@ export const ScenarioCardWrapper = styled.div`
         /* text-align:right; */
         position: relative;
         float: right;
-        
+
         /* display: flex; */
         /* align-self: flex-end; */
         /* right: 1rem; */

src/sections/Learn/Service-Mesh-Labs/LabsWrapper.style.js

@@ -1,12 +1,15 @@
 import styled from "styled-components";
 
 export const LabsWrapper = styled.div`
-    
+
 	.page-header {
 		margin: 5rem auto;
 	}
 	.course-tabs {
 		display: flex;
+        justify-content: center;
+        width: 100%;
+        position: relative;
 	}
 	.course-tab-list {
 		padding: 0rem;
@@ -28,13 +31,13 @@ export const LabsWrapper = styled.div`
 		list-style-type: none;
 		background: ${props => props.theme.secondaryColor};
 		cursor: pointer;
-		
+
 		&:hover {
             background-color: ${props => props.theme.highlightLightColor};
             transition: 0.05s ease-in all;
         }
 	}
-	
+
 	.title {
 		color: #fff;
 		font-weight: 600;
@@ -44,7 +47,9 @@ export const LabsWrapper = styled.div`
 		}
 	}
 	.content.react-tabs__tab-panel--selected {
-		background-color: black;
+		background-color: ${props => props.theme.blackToWhite};
+        marign-left: 5.05rem;
+        width: calc(100% - 5.05rem);
 	}
 	.react-tabs__tab--selected {
 		background: rgb(240, 192, 55);
@@ -53,13 +58,13 @@ export const LabsWrapper = styled.div`
 		box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.25);
 	}
 	.row-wrapper {
-		margin-left: 0px;
+		margin: 0 auto;
 	}
 	.join-community {
         margin: 5rem 0rem;
     }
     .join-community_text-and_button {
-		margin: 0 4rem; 
+		margin: 0 4rem;
         text-align: center;
         h1{
             margin-top: 1rem;