diff --git a/src/assets/images/AWS-Diagram/templates-dark.svg b/src/assets/images/AWS-Diagram/templates-dark.svg index 6dba5c9c0fa1..89ee40b4f2f0 100644 --- a/src/assets/images/AWS-Diagram/templates-dark.svg +++ b/src/assets/images/AWS-Diagram/templates-dark.svg @@ -280,6 +280,5 @@ - diff --git a/src/assets/images/kanvas/catalog-card-images/circuit-breaker-dark.svg b/src/assets/images/kanvas/catalog-card-images/circuit-breaker-dark.svg new file mode 100644 index 000000000000..9bd542f18450 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/circuit-breaker-dark.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/correlate-event-dark.svg b/src/assets/images/kanvas/catalog-card-images/correlate-event-dark.svg new file mode 100644 index 000000000000..b2e6df7327b5 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/correlate-event-dark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/denial-dark.svg b/src/assets/images/kanvas/catalog-card-images/denial-dark.svg new file mode 100644 index 000000000000..4213f334f167 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/denial-dark.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/http-dark.svg b/src/assets/images/kanvas/catalog-card-images/http-dark.svg new file mode 100644 index 000000000000..fe46801c8be5 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/http-dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/jwt-dark.svg b/src/assets/images/kanvas/catalog-card-images/jwt-dark.svg new file mode 100644 index 000000000000..7a7a43410bff --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/jwt-dark.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/multicluster-dark.svg b/src/assets/images/kanvas/catalog-card-images/multicluster-dark.svg new file mode 100644 index 000000000000..deb98693fc81 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/multicluster-dark.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/mutual-tls-dark.svg b/src/assets/images/kanvas/catalog-card-images/mutual-tls-dark.svg new file mode 100644 index 000000000000..d14f3cc9761f --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/mutual-tls-dark.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/node-agent-dark.svg b/src/assets/images/kanvas/catalog-card-images/node-agent-dark.svg new file mode 100644 index 000000000000..aa74e54c3699 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/node-agent-dark.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/only-wagent-dark.svg b/src/assets/images/kanvas/catalog-card-images/only-wagent-dark.svg new file mode 100644 index 000000000000..0c3c926dd788 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/only-wagent-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/pre-provision-dark.svg b/src/assets/images/kanvas/catalog-card-images/pre-provision-dark.svg new file mode 100644 index 000000000000..5409e13f14c1 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/pre-provision-dark.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/retries-dark.svg b/src/assets/images/kanvas/catalog-card-images/retries-dark.svg new file mode 100644 index 000000000000..39bc14eecd4a --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/retries-dark.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/retry-deadline-dark.svg b/src/assets/images/kanvas/catalog-card-images/retry-deadline-dark.svg new file mode 100644 index 000000000000..88feffef64cc --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/retry-deadline-dark.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/single-tenant-dark.svg b/src/assets/images/kanvas/catalog-card-images/single-tenant-dark.svg new file mode 100644 index 000000000000..7e02ca92edaa --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/single-tenant-dark.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/singleton-dark.svg b/src/assets/images/kanvas/catalog-card-images/singleton-dark.svg new file mode 100644 index 000000000000..0980e9fb300e --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/singleton-dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/kanvas/catalog-card-images/traces-dark.svg b/src/assets/images/kanvas/catalog-card-images/traces-dark.svg new file mode 100644 index 000000000000..17938d04aae5 --- /dev/null +++ b/src/assets/images/kanvas/catalog-card-images/traces-dark.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/sections/AWS-Diagram/diagram.js b/src/sections/AWS-Diagram/diagram.js index 816bf9264dbc..14617fb985e3 100644 --- a/src/sections/AWS-Diagram/diagram.js +++ b/src/sections/AWS-Diagram/diagram.js @@ -146,7 +146,7 @@ const Aws = () => {
- AWS Diagrams for anything + AWS Diagrams for anything
@@ -165,14 +165,14 @@ const Aws = () => {
- AWS Diagrams for anything + AWS Diagrams for anything
- AWS Diagrams for anything + AWS Diagrams for anything
@@ -192,14 +192,14 @@ const Aws = () => {
- AWS Diagrams for anything + AWS Diagrams for anything
- Designing AWS Diagrams with Kanvas + Designing AWS Diagrams with Kanvas
diff --git a/src/sections/Cloud-Native-Catalog/patterns.js b/src/sections/Cloud-Native-Catalog/patterns.js index fb7562f4896d..891e73a08e91 100644 --- a/src/sections/Cloud-Native-Catalog/patterns.js +++ b/src/sections/Cloud-Native-Catalog/patterns.js @@ -1,21 +1,37 @@ import React from "react"; import styled from "styled-components"; import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg"; +import Mutual_tls_dark from "../../assets/images/kanvas/catalog-card-images/mutual-tls-dark.svg"; import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg"; +import Retries_dark from "../../assets/images/kanvas/catalog-card-images/retries-dark.svg"; import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg"; +import Traces_dark from "../../assets/images/kanvas/catalog-card-images/traces-dark.svg"; import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg"; +import Denial_dark from "../../assets/images/kanvas/catalog-card-images/denial-dark.svg"; import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg"; +import Correlate_event_dark from "../../assets/images/kanvas/catalog-card-images/correlate-event-dark.svg"; import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg"; +import Only_wagent_dark from "../../assets/images/kanvas/catalog-card-images/only-wagent-dark.svg"; import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg"; +import Node_agent_dark from "../../assets/images/kanvas/catalog-card-images/node-agent-dark.svg"; import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg"; +import Single_tenant_dark from "../../assets/images/kanvas/catalog-card-images/single-tenant-dark.svg"; import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg"; +import Pre_provison_dark from "../../assets/images/kanvas/catalog-card-images/pre-provision-dark.svg"; import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg"; +import Circuit_breaker_dark from "../../assets/images/kanvas/catalog-card-images/circuit-breaker-dark.svg"; import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg"; +import Retry_deadline_dark from "../../assets/images/kanvas/catalog-card-images/retry-deadline-dark.svg"; import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg"; +import Singleton_dark from "../../assets/images/kanvas/catalog-card-images/singleton-dark.svg"; import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg"; +import Jwt_transformer_dark from "../../assets/images/kanvas/catalog-card-images/jwt-dark.svg"; import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg"; +import Multicluster_dark from "../../assets/images/kanvas/catalog-card-images/multicluster-dark.svg"; import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg"; +import Http_metrics_dark from "../../assets/images/kanvas/catalog-card-images/http-dark.svg"; import { Container } from "../../reusecore/Layout"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; const CatalogWrapper = styled.div` margin: 0; @@ -255,6 +271,7 @@ const CatalogWrapper = styled.div` `; const Catalog = () => { + const { isDark } = useStyledDarkMode(); return ( @@ -263,49 +280,49 @@ const Catalog = () => {
diff --git a/src/sections/Kanvas/kanvas-catalog.js b/src/sections/Kanvas/kanvas-catalog.js index 8001128711bd..b5346c39f777 100644 --- a/src/sections/Kanvas/kanvas-catalog.js +++ b/src/sections/Kanvas/kanvas-catalog.js @@ -1,26 +1,42 @@ import React from "react"; import styled from "styled-components"; import Mutual_tls from "../../assets/images/kanvas/catalog-card-images/mutual-tls.svg"; +import Mutual_tls_dark from "../../assets/images/kanvas/catalog-card-images/mutual-tls-dark.svg"; import Retries from "../../assets/images/kanvas/catalog-card-images/retries.svg"; +import Retries_dark from "../../assets/images/kanvas/catalog-card-images/retries-dark.svg"; import Traces from "../../assets/images/kanvas/catalog-card-images/traces.svg"; +import Traces_dark from "../../assets/images/kanvas/catalog-card-images/traces-dark.svg"; import Denial from "../../assets/images/kanvas/catalog-card-images/denial.svg"; +import Denial_dark from "../../assets/images/kanvas/catalog-card-images/denial-dark.svg"; import Correlate_event from "../../assets/images/kanvas/catalog-card-images/correlate-event.svg"; +import Correlate_event_dark from "../../assets/images/kanvas/catalog-card-images/correlate-event-dark.svg"; import Only_wagent from "../../assets/images/kanvas/catalog-card-images/only-wagent.svg"; +import Only_wagent_dark from "../../assets/images/kanvas/catalog-card-images/only-wagent-dark.svg"; import Node_agent from "../../assets/images/kanvas/catalog-card-images/node-agent.svg"; +import Node_agent_dark from "../../assets/images/kanvas/catalog-card-images/node-agent-dark.svg"; import Single_tenant from "../../assets/images/kanvas/catalog-card-images/single-tenant.svg"; +import Single_tenant_dark from "../../assets/images/kanvas/catalog-card-images/single-tenant-dark.svg"; import Pre_provison from "../../assets/images/kanvas/catalog-card-images/pre-provision.svg"; +import Pre_provison_dark from "../../assets/images/kanvas/catalog-card-images/pre-provision-dark.svg"; import Circuit_breaker from "../../assets/images/kanvas/catalog-card-images/circuit-breaker.svg"; +import Circuit_breaker_dark from "../../assets/images/kanvas/catalog-card-images/circuit-breaker-dark.svg"; import Retry_deadline from "../../assets/images/kanvas/catalog-card-images/retry-deadline.svg"; +import Retry_deadline_dark from "../../assets/images/kanvas/catalog-card-images/retry-deadline-dark.svg"; import Singleton from "../../assets/images/kanvas/catalog-card-images/singleton.svg"; +import Singleton_dark from "../../assets/images/kanvas/catalog-card-images/singleton-dark.svg"; import Jwt_transformer from "../../assets/images/kanvas/catalog-card-images/jwt.svg"; +import Jwt_transformer_dark from "../../assets/images/kanvas/catalog-card-images/jwt-dark.svg"; import Multicluster from "../../assets/images/kanvas/catalog-card-images/multicluster.svg"; +import Multicluster_dark from "../../assets/images/kanvas/catalog-card-images/multicluster-dark.svg"; import Http_metrics from "../../assets/images/kanvas/catalog-card-images/http.svg"; +import Http_metrics_dark from "../../assets/images/kanvas/catalog-card-images/http-dark.svg"; import Wasm from "../../assets/images/webassembly/webssembly_icon.svg"; import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg"; import Ebpf from "../../assets/images/kanvas/ebpf.svg"; import Opa from "../../assets/images/kanvas/opa.svg"; import { Container } from "../../reusecore/Layout"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; const CatalogWrapper = styled.div` @@ -418,12 +434,13 @@ h3.containerCaption { `; const Catalog = () => { + const { isDark } = useStyledDarkMode(); return (

- Kanvas is a sophisticated and delightfully intuitive tool for designing and operating cloud native infrastructure for Kubernetes. Choose freestyle composition of your infrastructure by drawing shapes, lines, text, and icons to represent the components and relationships of your Kubernetes clusters or quickstart by selecting a pattern the catalog of predefined templates. + Kanvas is a sophisticated and delightfully intuitive tool for designing and operating cloud native infrastructure for Kubernetes. Choose freestyle composition of your infrastructure by drawing shapes, lines, text, and icons to represent the components and relationships of your Kubernetes clusters or quickstart by selecting a pattern the catalog of predefined templates.

@@ -467,49 +484,49 @@ const Catalog = () => {