Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix kanvas design carousel and links #5973

Merged
merged 3 commits into from
Oct 6, 2024
Merged

Fix kanvas design carousel and links #5973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6d5e35
fix button type and url in kanvas-design-integrations.js
Touriist Oct 6, 2024
e673e48
fix cloud link ref in kanvas-design-banner.js
Touriist Oct 6, 2024
4bf0688
fix PopOutCardCarousel.style.js
Touriist Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/components/PopOutCardCarousel/PopOutCardCarousel.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/sections/Kanvas/Kanvas-design/kanvas-design-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -173,4 +173,4 @@ const KanvasDesignBanner = () => {
);
};

export default KanvasDesignBanner;
export default KanvasDesignBanner;
4 changes: 2 additions & 2 deletions src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading