Skip to content

Commit 1ea4ac3

Browse files
Namanv0509Namanv0509
committed
Update styling for consistency
1 parent cf49452 commit 1ea4ac3

File tree

2 files changed

+63
-32
lines changed

2 files changed

+63
-32
lines changed

‎site/src/Resources.js‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import React from "react";
22
import Button from "./reusecore/Button";
33
import styled from "styled-components";
44
// import AcademyIcon from './assets/images/academy-icon.svg';
5-
import CatalogIcon from "./assets/images/catalog-icon.svg";
6-
import BookIcon from "./assets/images/book-icon.svg";
7-
5+
import CatalogIcon from './assets/images/catalog-icon.svg'
6+
import BookIcon from './assets/images/book-icon.svg'
87
const Container = styled.div`
98
max-width: 1200px;
109
margin: 0 auto;
@@ -28,18 +27,19 @@ const Subheading = styled.p`
2827
margin: 0 auto;
2928
`;
3029

30+
3131
const CardGrid = styled.div`
3232
display: grid;
3333
grid-template-columns: 1fr;
3434
gap: 2rem;
35-
35+
3636
@media (min-width: 768px) {
3737
grid-template-columns: repeat(2, 1fr);
3838
}
3939
`;
4040

4141
const Card = styled.div`
42-
background-color: ${({ theme }) => theme.body};
42+
background-color: ${({ theme }) => theme.body};
4343
border-radius: 0.5rem;
4444
box-shadow: 0px 0px 2px;
4545
padding: 2rem;
@@ -48,11 +48,9 @@ const Card = styled.div`
4848
flex-direction: column;
4949
align-items: center;
5050
`;
51-
5251
const CardImageContainer = styled.div`
5352
max-width: 6rem;
5453
`;
55-
5654
const CardImage = styled.img`
5755
max-width: 6rem;
5856
object-fit: contain;
@@ -62,7 +60,7 @@ const CardImage = styled.img`
6260
const CardTitle = styled.h3`
6361
font-size: 1.5rem;
6462
font-weight: bold;
65-
color: ${(props) => props.theme.text};
63+
color: ${props => props.theme.text};
6664
margin-bottom: 1rem;
6765
`;
6866

@@ -74,23 +72,25 @@ const Spacer = styled.div`
7472
flex-grow: 1;
7573
`;
7674

75+
7776
const ResourcesSection = () => {
7877
return (
7978
<Container>
8079
<HeaderSection>
81-
<MainHeading>No setup required</MainHeading>
80+
<MainHeading>
81+
No setup required
82+
</MainHeading>
8283
<Subheading>
83-
Learn by doing: explore these hands-on resources using the playground
84-
right in your browser
84+
Learn by doing: explore these hands-on resources using the playground right in your browser
8585
</Subheading>
8686
</HeaderSection>
8787

8888
<CardGrid>
8989
<Card>
9090
<CardImageContainer>
91-
<CardImage
92-
src={BookIcon}
93-
alt="Hands-on tutorials"
91+
<CardImage
92+
src={BookIcon}
93+
alt="Hands-on tutorials"
9494
style={{ paddingTop: "1.2rem" }}
9595
/>
9696
</CardImageContainer>
@@ -99,26 +99,42 @@ const ResourcesSection = () => {
9999
Interactive tutorials to increase your cloud native knowledge.
100100
</CardDescription>
101101
<Spacer />
102-
{/* Use same markup as the Join button — let the Button component decide styling */}
103-
<Button url="https://docs.meshery.io/guides/tutorials">
104-
Tutorials
105-
</Button>
102+
<Button url="https://docs.meshery.io/guides/tutorials" style={{ color: "rgb(255,255,255)" }}> Tutorials</Button>
106103
</Card>
107104

105+
{/* <Card>
106+
<CardImageContainer>
107+
<CardImage
108+
src={AcademyIcon}
109+
alt="Academy Icon"
110+
/>
111+
</CardImageContainer>
112+
<CardTitle>Academy</CardTitle>
113+
<CardDescription>
114+
Learn how to use various cloud native tools with Meshery.
115+
</CardDescription>
116+
<Spacer />
117+
<Button url="https://docs.meshery.io/guides/tutorials" style={{ color: "rgb(255,255,255)"}}>Get Started</Button>
118+
</Card> */}
119+
120+
108121
<Card>
109122
<CardImageContainer>
110-
<CardImage src={CatalogIcon} alt="Catalog Icon" />
123+
<CardImage
124+
src={CatalogIcon}
125+
alt="Catalog Icon"
126+
/>
111127
</CardImageContainer>
112128
<CardTitle>Catalog</CardTitle>
113129
<CardDescription>
114-
Reusable designs and templates for Cloud Native Infrastructure.
130+
Reusable designs and templates for Cloud Native Infrastructure.
115131
</CardDescription>
116132
<Spacer />
117-
<Button url="https://meshery.io/catalog">Learn More</Button>
133+
<Button url="https://meshery.io/catalog" style={{ color: "rgb(255,255,255)"}}>Learn More</Button>
118134
</Card>
119135
</CardGrid>
120136
</Container>
121137
);
122138
};
123139

124-
export default ResourcesSection;
140+
export default ResourcesSection;

‎site/src/reusecore/Button/btn.style.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ const ButtonStyle = styled.button`
1717
position: relative;
1818
color: ${props => props.theme.white };
1919
background-color: #00B39F;
20-
// z-index: 999;
20+
z-index: 999;
2121
&:hover,
2222
&:focus {
2323
color: white;
2424
background: ${props => props.theme.activeColor};
25-
box-shadow: 0 2px 10px ${props => props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"};
25+
box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour};
2626
}
2727
&:active{
28-
box-shadow: 0 2px 10px ${props => props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"};
28+
box-shadow: 0 2px 10px ${props => props.theme.blackFourToWhiteFour};
2929
transform: scale(0.98);
3030
}
3131
.icon-left{
@@ -35,33 +35,48 @@ const ButtonStyle = styled.button`
3535
margin-left: 8px;
3636
}
3737
38-
${props => props.primary && css`
39-
color: ${props => props.theme.black};
38+
${props => props.$outlined && css`
39+
background: transparent;
40+
border: 2px solid ${props => props.theme.whiteToBlack};
41+
color: ${props => props.theme.whiteToBlack};
42+
&:hover{
43+
box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour};
44+
}
45+
&:active{
46+
background: ${props => props.theme.lightGrey};
47+
box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour};
48+
transform: scale(0.98);
49+
}
50+
`}
51+
52+
53+
${props => props.$primary && css`
54+
color: ${props => props.theme.white};
4055
background: ${props => props.theme.highlightColor};
4156
4257
&:hover{
4358
color: ${props.theme.black};
4459
background: ${props.theme.highlightColor};
45-
box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"};
60+
box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour};
4661
}
4762
&:active{
4863
background: ${props => props.theme.saffronColor};
49-
box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"};
64+
box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour};
5065
transform: scale(0.98);
5166
}
5267
5368
`}
54-
${props => props.secondary && css`
69+
${props => props.$secondary && css`
5570
color: white;
5671
background: ${props.theme.secondaryColor};
5772
&:hover{
5873
background: ${props.theme.caribbeanGreenColor};
59-
box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"};
74+
box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour};
6075
}
6176
&:active{
6277
color: #326d62;
6378
background: ${props.theme.secondaryColor};
64-
box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"};
79+
box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour};
6580
transform: scale(0.98);
6681
}
6782
`}

0 commit comments

Comments
 (0)