Merge pull request #5973 from Touriist/fix-kanvas-design-carousel

Fix kanvas design carousel and links

Author: sudhanshutech

src/components/PopOutCardCarousel/PopOutCardCarousel.style.js

@@ -53,12 +53,12 @@ const PopOutCardWrapper = styled.div`
 
   //dynamic css
   ${(props) => css`
-    z-index: ${100 - props.index};
-    ${props.index === 1 ? "background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%);" : ""};
-    ${props.index === 2 ? "background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%);" : ""};
-    ${props.index === 3 ? "    background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%);" : ""};
-    transform: rotateZ(${-4 - 6 * props.index}deg) translate(-${props.index *
-    36}px, ${props.index * 5}px);
+    z-index: ${100 - props.$index};
+    ${props.$index === 1 ? "background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%);" : ""};
+    ${props.$index === 2 ? "background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%);" : ""};
+    ${props.$index === 3 ? "    background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%);" : ""};
+    transform: rotateZ(${-4 - 6 * props.$index}deg) translate(-${props.$index *
+    36}px, ${props.$index * 5}px);
   `}
 
   ${(props) =>
@@ -134,7 +134,7 @@ const PopOutCardWrapper = styled.div`
   ${(props) =>
       !props.$active &&
     css`
-      :hover {
+      &:hover {
         transform: rotateZ(${-1 - 6 * props.$index}deg)
           translate(-${props.$index * 36}px, ${props.$index * 5}px);
         h3 {

src/sections/Kanvas/Kanvas-design/kanvas-design-banner.js

@@ -163,7 +163,7 @@ const KanvasDesignBanner = () => {
       </div>
       <div className="hero-image">
         <CytoscapeCtx />
-        <Button secondary title="Experience context-aware design" url="https://meshery.layer5.io" external={ true } />
+        <Button $secondary title="Experience context-aware design" $url="https://meshery.layer5.io" external={ true } />
         <h5>Upload your Helm Chart or Kubernetes manifest to have your infra diagrammed</h5>
       </div>
       <img className="dots-upper" src={BackgroundDotsPattern}  />
@@ -173,4 +173,4 @@ const KanvasDesignBanner = () => {
   );
 };
 
-export default KanvasDesignBanner;
+export default KanvasDesignBanner;

src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js

@@ -142,9 +142,9 @@ const KanvasIntegrationsSection = () => {
         <div>
           <Button
             id="integrations"
-            secondary
+            $secondary
             style={{ margin: "1.5rem 0 1.5rem 0" }}
-            url="https://layer5.io/cloud-native-management/meshery/integrations"
+            $url="https://layer5.io/cloud-native-management/meshery/integrations"
             $external={true}
           >
             All Integrations