diff --git a/src/components/ScenarioCard/ScenarioCard.style.js b/src/components/ScenarioCard/ScenarioCard.style.js
index 0314f6d04cd57..f319b5015a649 100644
--- a/src/components/ScenarioCard/ScenarioCard.style.js
+++ b/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,9 +54,9 @@ 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;
}
@@ -61,9 +64,9 @@ export const ScenarioCardWrapper = styled.div`
.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; */
diff --git a/src/sections/Learn/Service-Mesh-Labs/LabsWrapper.style.js b/src/sections/Learn/Service-Mesh-Labs/LabsWrapper.style.js
index 79065bf484224..5bea05c0e7d24 100644
--- a/src/sections/Learn/Service-Mesh-Labs/LabsWrapper.style.js
+++ b/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;
diff --git a/src/sections/Learn/Service-Mesh-Labs/assets/servicemeshinterface-stackedsmi-black.svg b/src/sections/Learn/Service-Mesh-Labs/assets/servicemeshinterface-stackedsmi-black.svg
new file mode 100644
index 0000000000000..20edb986f1cbc
--- /dev/null
+++ b/src/sections/Learn/Service-Mesh-Labs/assets/servicemeshinterface-stackedsmi-black.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/sections/Learn/Service-Mesh-Labs/assets/smp-light-text-inverted.svg b/src/sections/Learn/Service-Mesh-Labs/assets/smp-light-text-inverted.svg
new file mode 100644
index 0000000000000..704662b166d26
--- /dev/null
+++ b/src/sections/Learn/Service-Mesh-Labs/assets/smp-light-text-inverted.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/sections/Learn/Service-Mesh-Labs/courseData.js b/src/sections/Learn/Service-Mesh-Labs/courseData.js
index c33acdea99058..e43da2fbfc0df 100644
--- a/src/sections/Learn/Service-Mesh-Labs/courseData.js
+++ b/src/sections/Learn/Service-Mesh-Labs/courseData.js
@@ -1,13 +1,13 @@
-import istioLogo from "../../../assets/images/service-mesh-icons/istio-white.svg";
-import linkerdLogo from "../../../assets/images/service-mesh-icons/linkerd-white.svg";
-import consulLogo from "../../../assets/images/service-mesh-icons/consul-white.svg";
-import kumaLogo from "../../../assets/images/service-mesh-icons/kuma-white.svg";
-import nsmLogo from "../../../assets/images/service-mesh-icons/nsm-white.svg";
-import traefikLogo from "../../../assets/images/service-mesh-icons/traefik-white.svg";
+import istioLogo from "../../../assets/images/service-mesh-icons/istio.svg";
+import linkerdLogo from "../../../assets/images/service-mesh-icons/linkerd.svg";
+import consulLogo from "../../../assets/images/service-mesh-icons/consul.svg";
+import kumaLogo from "../../../assets/images/service-mesh-icons/kuma.svg";
+import nsmLogo from "../../../assets/images/service-mesh-icons/nsm.svg";
+import traefikLogo from "../../../assets/images/service-mesh-icons/traefik.svg";
// import smpLogo from "../../assets/images/smp/horizontal/smp-light-text-side.svg";
-import smpLogo from "./assets/smp-light-text.svg";
-import smiLogo from "./assets/servicemeshinterface-stackedsmi-white.svg";
-import osmLogo from "../../../assets/images/service-mesh-icons/open-service-mesh/icon/white/openservicemesh-icon-white.svg";
+import smpLogo from "./assets/smp-light-text-inverted.svg";
+import smiLogo from "./assets/servicemeshinterface-stackedsmi-black.svg";
+import osmLogo from "../../../assets/images/service-mesh-icons/open-service-mesh/icon/color/openservicemesh-icon-color.svg";
export const data = [
{
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index cb13e86d0fd5b..123cfa8d804bf 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -77,6 +77,7 @@ const lighttheme = {
invertColor: "0%",
meshInterfaceLogoFilter: "0%",
mapBackground: "0%",
+ filter: "none",
//Elevation Color(Used in Cards Mostly)
elevationColor: "#FFFFFF",
@@ -310,6 +311,7 @@ export const darktheme = {
invertColor: "invert(100%)",
meshInterfaceLogoFilter: "90%",
mapBackground: "93%",
+ filter: "brightness(0) invert(1)",
//Elevation Color(Used in Cards Mostly)
elevationColor: "#212121",