update logos

Signed-off-by: aabidsofi19 <[email protected]>

Author: aabidsofi19

Dockerfile

@@ -33,16 +33,16 @@ LABEL org.opencontainers.image.title="Meshery" \
   com.docker.desktop.extension.api.version=">= 0.2.0" \
    com.docker.extension.screenshots="[ \
       { \
-        \"alt\": \"Meshery Docker Extension\", \
+        \"alt\": \"Kanvas Docker Extension\", \
         \"url\": \"https://raw.githubusercontent.com/meshery/meshery/master/install/docker-extension/docs/img/meshmap-docker-extension-for-meshery.png\" \
       },{ \
-        \"alt\": \"Meshery Docker Extension\", \
+        \"alt\": \"Kanvas Docker Extension\", \
         \"url\": \"https://raw.githubusercontent.com/meshery/meshery/master/install/docker-extension/docs/img/Docker-extension-meshery.png\" \
       } \
     ]" \
   com.docker.extension.detailed-description="\
   <h2>Visually and collaboratively design and operate your Kubernetes clusters (<a href='https://meshery.io/catalog'>video</a>).</h2> \
-  <p>The Meshery Docker Extension is your cloud native infrastructure designer, complete with multi-cluster Kubernetes management. Meshery provides cloud native engineers with visual and collaborative interface to designing and operating cloud native infrastructure.</p> \
+  <p>The Kanvas Docker Extension is your cloud native infrastructure designer, complete with multi-cluster Kubernetes management. Meshery provides cloud native engineers with visual and collaborative interface to designing and operating cloud native infrastructure.</p> \
   <ul> \
     <li><b>Discovery of your Kubernetes environments</b> - Meshery is a multi-cluster manager and will scan your kubeconfig, allowing you to select which of your Kubernetes contexts to connect. Switch from one K8s cluster to the next or manage multiple concurrently.</li> \
     <li><b>Support for your Docker Compose apps -</b> Import your Docker Compose apps. Configure and deploy them to Kubernetes.</li> \
@@ -56,7 +56,7 @@ LABEL org.opencontainers.image.title="Meshery" \
 COPY --from=builder /backend/bin/service /
 COPY docker-compose.yaml .
 COPY metadata.json .
-COPY meshery-logo-light.svg .
+COPY kanvas-mark-logo-light.svg .
 COPY --from=client-builder /ui/build ui
 EXPOSE 7877/tcp
 CMD ["./service"]

kanvas-mark-logo-light.svg

@@ -1,5 +1,5 @@
 {
-  "icon": "meshery-logo-light.svg",
+  "icon": "kanvas-mark-logo-light.svg",
   "vm": {
     "composefile": "docker-compose.yaml"
   },

meshery-logo-light.svg

@@ -13,7 +13,7 @@ import { Avatar } from "@mui/material";
 // import CiliumIcon from '../../img/SVGs/ciliumIcon'
 // import TraefikIcon from '../../img/SVGs/traefikIcon'
 import Meshery from "../../img/SVGs/meshery";
-import MesheryIcon from "../../img/meshery-logo/CustomMesheryLogo";
+import KanvasIcon from "../../img/meshery-logo/CustomKanvasLogo";
 import { DockerMuiThemeProvider } from "@docker/docker-mui-theme";
 import CssBaseline from "@mui/material/CssBaseline";
 import { LoadComp } from "../LoadingComponent/LoadComp";
@@ -460,7 +460,7 @@ const ExtensionsComponent = () => {
 
   const launchMeshery = () => {
     console.log("Launching Meshery...");
-    window.location.href = proxyUrl;
+    window.location.href = "https://cloud.layer5.io";
   };
 
   return (
@@ -493,11 +493,10 @@ const ExtensionsComponent = () => {
           }}
         >
           <div>
-            <MesheryIcon CustomColor={isDarkTheme ? "white" : "#3C494F"} />
+            <KanvasIcon CustomColor={isDarkTheme ? "white" : "#3C494F"} />
 
             <Typography sx={{ margin: "auto", paddingTop: "1rem" }}>
-              Design and operate your cloud native deployments with the
-              extensible management plane, Meshery.
+              Design and operate your cloud native deployments with Kanvas.
             </Typography>
           </div>
         </div>

meshery-logo-white.svg

@@ -1,34 +1,33 @@
 export const CHART_COLORS = ["#3B697D", "#74A8BE", "#90B9CB", "#CBDEE6"];
 
 export const topicsList = [
-    { label: "Deployment", value: "deployment" },
-    { label: "Traffic-management", value: "traffic-management" },
-    { label: "Security", value: "security" },
-    { label: "Workloads", value: "workloads" },
-    { label: "Observability", value: "observability" },
-    { label: "Troubleshooting", value: "troubleshooting" },
-    { label: "Scaling", value: "scaling" },
-    { label: "Resiliency", value: "resiliency" },
+  { label: "Deployment", value: "deployment" },
+  { label: "Traffic-management", value: "traffic-management" },
+  { label: "Security", value: "security" },
+  { label: "Workloads", value: "workloads" },
+  { label: "Observability", value: "observability" },
+  { label: "Troubleshooting", value: "troubleshooting" },
+  { label: "Scaling", value: "scaling" },
+  { label: "Resiliency", value: "resiliency" },
 ];
 
 // Extension Point: Add more remote providers here as needed.
-// This is a list of remote providers that are supported by the Meshery Docker Extension.
+// This is a list of remote providers that are supported by the Kanvas Docker Extension.
 export const REMOTE_PROVIDERS = [
-    {
-        name: "Layer5",
-        url: "https://cloud.layer5.io",
-    },
-    {
-        name: "Exoscale",
-        url: "https://cloud.exoscale.com",
-    },
+  {
+    name: "Layer5",
+    url: "https://cloud.layer5.io",
+  },
+  {
+    name: "Exoscale",
+    url: "https://cloud.exoscale.com",
+  },
 ];
 
 export const SELECTED_REMOTE_PROVIDER =
-    REMOTE_PROVIDERS.find(
-        (provider) =>
-            provider.name === process.env.REACT_APP_REMOTE_PROVIDER_NAME,
-    ) ?? REMOTE_PROVIDERS[0];
+  REMOTE_PROVIDERS.find(
+    (provider) => provider.name === process.env.REACT_APP_REMOTE_PROVIDER_NAME,
+  ) ?? REMOTE_PROVIDERS[0];
 
 export const SELECTED_PROVIDER_NAME = SELECTED_REMOTE_PROVIDER.name;
 

metadata.json

@@ -0,0 +1,92 @@
+import React from "react";
+
+const KanvasIcon = ({ customColor }) => {
+  return (
+    <svg
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 2300 500"
+      height="100"
+      width="auto"
+      className="mark-and-logo"
+    >
+      <defs>
+        <style>
+          {`
+            .cls-1 {
+              fill: #00b39f;
+            }
+
+            .cls-2 {
+              fill: #00d3a9;
+            }
+
+            .cls-3 {
+              fill: ${customColor || "#ffffff"};
+            }
+          `}
+        </style>
+      </defs>
+      <g>
+        <path
+          className="cls-3"
+          d="M1408.37,392.29h-52.37v-186.66c0-2.07-.34-4.03-1.01-5.87-.67-1.84-1.58-3.45-2.72-4.83-1.15-1.39-2.49-2.47-4.02-3.28-1.53-.8-3.16-1.2-4.88-1.2h-208.73v-57.15h215.46c7.94,0,15.45,1.84,22.54,5.52,7.08,3.68,13.3,8.69,18.66,15.02,5.26,6.45,9.42,13.93,12.48,22.45,3.06,8.51,4.6,17.55,4.6,27.1v188.9ZM1206.72,392.29h-52.37v-184.3h52.37v184.3Z"
+        />
+        <path
+          className="cls-3"
+          d="M1668.64,133.29l-105.44,259h-40.42l-105.44-259h53.48l72.17,179.06,72.17-179.06h53.48Z"
+        />
+        <polygon
+          className="cls-3"
+          points="1716.79 133.33 1613.19 392.26 1670.03 392.26 1742.69 208.76 1795.11 342.72 1711.27 342.72 1691.94 392.26 1872.19 392.26 1768.59 133.33 1716.79 133.33"
+        />
+        <path
+          className="cls-3"
+          d="M2153.29,324.6c0,9.32-1.55,18.08-4.64,26.25-3.09,8.29-7.33,15.49-12.73,21.57-5.4,6.12-11.64,10.94-18.72,14.51-7.19,3.57-14.82,5.35-22.91,5.35h-201.27v-54.56h201.27c3.2,0,5.89-1.27,8.09-3.81s3.29-5.64,3.29-9.32v-21.06c0-3.69-1.09-6.79-3.29-9.32-2.2-2.53-4.89-3.79-8.09-3.79h-142.28c-8.07,0-15.67-1.78-22.75-5.35-7.19-3.57-13.48-8.47-18.87-14.68-5.4-6.22-9.63-13.48-12.73-21.75-3.09-8.19-4.64-16.93-4.64-26.25v-21.06c0-9.32,1.55-18.14,4.64-26.42,3.09-8.19,7.33-15.37,12.73-21.59,5.38-6.22,11.68-11.11,18.87-14.68,7.09-3.57,14.68-5.35,22.75-5.35h201.28v54.9h-201.28c-3.19,0-5.89,1.27-8.07,3.81-2.2,2.53-3.3,5.64-3.3,9.32v21.06c0,3.69,1.11,6.79,3.3,9.32,2.18,2.53,4.89,3.79,8.07,3.79h142.28c8.09,0,15.72,1.78,22.91,5.35,7.09,3.57,13.33,8.47,18.72,14.68,5.4,6.22,9.63,13.42,12.73,21.59,3.09,8.29,4.64,17.09,4.64,26.42v21.06Z"
+        />
+        <g>
+          <polyline
+            className="cls-3"
+            points="857.78 133.29 785.04 133.29 647.49 248.77 647.49 133.44 596.37 133.44 596.37 392.29 647.49 392.29 647.49 317.6"
+          />
+          <polygon
+            className="cls-3"
+            points="741.55 258.43 860.68 392.29 787.2 392.29 699.39 293.89 741.55 258.43"
+          />
+        </g>
+        <polygon
+          className="cls-3"
+          points="974.11 133.33 870.51 392.26 927.35 392.26 1000.01 208.76 1052.44 342.72 968.6 342.72 949.26 392.26 1129.51 392.26 1025.91 133.33 974.11 133.33"
+        />
+      </g>
+      <g>
+        <polygon
+          className="cls-2"
+          points="284.86 30.1 284.86 228.75 457.03 129.07 284.86 30.1"
+        />
+        <polygon
+          className="cls-2"
+          points="284.86 270.3 284.86 469.9 458.61 370.56 284.86 270.3"
+        />
+        <polygon
+          className="cls-1"
+          points="260.07 227.38 260.07 31.77 90.02 129.25 260.07 227.38"
+        />
+        <polygon
+          className="cls-1"
+          points="260.07 468.98 260.07 271.74 89.61 370.43 260.07 468.98"
+        />
+        <polygon
+          className="cls-1"
+          points="470.41 348.75 470.41 149.97 298.45 249.52 470.41 348.75"
+        />
+        <polygon
+          className="cls-2"
+          points="75.68 149.59 75.68 349.85 248.91 249.56 75.68 149.59"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default KanvasIcon;