@@ -103,4 +103,4 @@ const KanvasisualizeBanner = () => {
);
};
-export default KanvasisualizeBanner;
\ No newline at end of file
+export default KanvasisualizeBanner;
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index 7db6233a1e49..23de0cc64ec0 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -61,13 +61,13 @@ const Kanvas = (props) => {
),
},
{
- title: "Visualizer Mode",
+ title: "Operator Mode",
description:
- "Visualizer offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Visualizer.",
+ "Operator offers an interactive topology of your Kubernetes clusters with live terminal sessions, log streaming and performance testing of your applications. Designs created in Designer mode can be deployed and viewed as running in your environment using Operator.",
content: (
),
@@ -144,7 +144,7 @@ const Kanvas = (props) => {
[
{
title: "Bring those ideas to life",
- description: "Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.",
+ description: "Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.",
imgContent: (
<>
diff --git a/src/sections/Kanvas/kanvas-cta/index.js b/src/sections/Kanvas/kanvas-cta/index.js
index d71129808f89..9c889aa51639 100644
--- a/src/sections/Kanvas/kanvas-cta/index.js
+++ b/src/sections/Kanvas/kanvas-cta/index.js
@@ -3,7 +3,6 @@ import styled from "styled-components";
import { Container } from "../../../reusecore/Layout";
import Locator from "./locator.svg";
-import MesherySurface from "./meshery-surface.svg";
import Button from "../../../reusecore/Button";
const KanvasCTAWrapper = styled.div`
@@ -17,10 +16,6 @@ const KanvasCTAWrapper = styled.div`
margin: 2rem auto;
align-items: center;
- .surface {
- width: 60%;
- min-width: 160px;
- }
.rotate{
animation: coin-rotate 4s ease-in-out infinite alternate;
/* animation-fill-mode: both; */
@@ -59,9 +54,7 @@ const KanvasCTAWrapper = styled.div`
@media screen and (max-width:767px) {
display: block;
- .surface {
- width: 30%;
- }
+
.rotate {
margin: 0 auto 0.25rem;
height: 12rem;
@@ -97,7 +90,6 @@ const KanvasCTA = () => {
-
Kanvas is here!
diff --git a/src/sections/Kanvas/kanvas-cta/locator.svg b/src/sections/Kanvas/kanvas-cta/locator.svg
index b45cef0f2caf..29c4be1f481b 100644
--- a/src/sections/Kanvas/kanvas-cta/locator.svg
+++ b/src/sections/Kanvas/kanvas-cta/locator.svg
@@ -1 +1,26 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/sections/Kanvas/kanvas-icon.svg b/src/sections/Kanvas/kanvas-icon.svg
index c51b6d9bb9cf..80226d79285b 100644
--- a/src/sections/Kanvas/kanvas-icon.svg
+++ b/src/sections/Kanvas/kanvas-icon.svg
@@ -1 +1,20 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/sections/Kanvas/kanvas-modes.js b/src/sections/Kanvas/kanvas-modes.js
index 782289fde652..832855b66bb6 100644
--- a/src/sections/Kanvas/kanvas-modes.js
+++ b/src/sections/Kanvas/kanvas-modes.js
@@ -270,11 +270,11 @@ const KanvasModes = () => {
Apply patterns and manage many Kubernetes clusters
-
setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} />
+
setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} />
Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management. Interactively connect to terminal sessions or initiate and search log streams from your containers.
diff --git a/src/sections/Meshery/Meshery-integrations/Integration.style.js b/src/sections/Meshery/Meshery-integrations/Integration.style.js
index 506ffc1c8a30..7c7ee84326d2 100755
--- a/src/sections/Meshery/Meshery-integrations/Integration.style.js
+++ b/src/sections/Meshery/Meshery-integrations/Integration.style.js
@@ -16,6 +16,17 @@ export const HoneycombGrid = styled.div`
}
}
+ .search-box {
+ input {
+ border: 1px solid ${props => props.theme.headingColor} !important;
+
+ &:focus {
+ border-color: #fff !important;
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+ }
+ }
+ }
+
.category {
display: flex;
flex-wrap: wrap;
diff --git a/src/sections/Pricing/icons/kanvas-icon.svg b/src/sections/Pricing/icons/kanvas-icon.svg
index c51b6d9bb9cf..80226d79285b 100644
--- a/src/sections/Pricing/icons/kanvas-icon.svg
+++ b/src/sections/Pricing/icons/kanvas-icon.svg
@@ -1 +1,20 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/sections/Products/images/layer5-products-overview-dark.svg b/src/sections/Products/images/layer5-products-overview-dark.svg
index d00fb50c066a..147b9ad88a0d 100644
--- a/src/sections/Products/images/layer5-products-overview-dark.svg
+++ b/src/sections/Products/images/layer5-products-overview-dark.svg
@@ -1 +1,95 @@
-
\ No newline at end of file
+
diff --git a/src/sections/Products/images/layer5-products-overview.svg b/src/sections/Products/images/layer5-products-overview.svg
index 67cb2939d6cb..9d215be6d39a 100644
--- a/src/sections/Products/images/layer5-products-overview.svg
+++ b/src/sections/Products/images/layer5-products-overview.svg
@@ -1,801 +1,94 @@
-
-
-
))}
-
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 7deb603dcd3c..57ef8e728ca4 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -645,6 +645,7 @@ const SistentWrapper = styled.div`
.product_cards .card {
width: 400px;
+ height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -652,6 +653,7 @@ const SistentWrapper = styled.div`
background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0};
padding: 2rem;
}
+
.logo {
max-height: 3rem;
}
@@ -675,14 +677,20 @@ const SistentWrapper = styled.div`
color: ${props => props.theme.text};
}
- .card .text {
- padding-top: 1rem;
- padding-bottom: 2rem;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- color: ${(props) => props.theme.whiteToBlack};
- }
+.card .text {
+ padding-top: 1rem;
+ padding-bottom: 2rem;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ color: ${(props) => props.theme.whiteToBlack};
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-height: calc(1.5rem * 4);
+}
.card {
box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
diff --git a/src/sections/app.style.js b/src/sections/app.style.js
index c09e58973553..dbff856e861e 100644
--- a/src/sections/app.style.js
+++ b/src/sections/app.style.js
@@ -174,6 +174,25 @@ section{
position: relative;
}
+ // styling for the searchbox
+ .search-box {
+ input {
+ background-color: ${props => props.theme.shadowDarkColor}!important;
+ color: ${props => props.theme.text};
+ transition: all 450ms ease 0s;
+
+ &:focus {
+ border-color: #fff !important;
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+ }
+ }
+
+ // for the Search Icon
+ svg {
+ color: ${(props) => props.theme.searchIconColor};
+ }
+ }
+
/* Modal styling needs to be applied to the global CSS */
.Modal {
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index f4f8e83b9af9..aff46ff5d86f 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -38,6 +38,9 @@ const lighttheme = {
headingColor: "#111111",
+ // searchbox Icon Color
+ searchIconColor: "#333333",
+
// light slate gray (medium gray)
textColor: "#000000",
shadowColor: "rgba(0, 0, 0, 0.05)",
@@ -267,6 +270,9 @@ export const darktheme = {
headingColor: "#000000",
+ // searchbox icon color
+ searchIconColor: "#FFFFFF",
+
// light slate gray (medium gray)
textColor: "#000000",
shadowColor: "rgba(255, 255, 255, 0.05)",
diff --git a/static/brand/stick-figures.zip b/static/brand/five-mascot-kit.zip
similarity index 100%
rename from static/brand/stick-figures.zip
rename to static/brand/five-mascot-kit.zip
diff --git a/static/brand/kanvas-brand-kit.zip b/static/brand/kanvas-brand-kit.zip
index ed73c07f6d03..27804c7d6aa9 100644
Binary files a/static/brand/kanvas-brand-kit.zip and b/static/brand/kanvas-brand-kit.zip differ