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

Increase size of Kanvas icon for better visibility #6070

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+58 −12
Open

Increase size of Kanvas icon for better visibility #6070

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
59235f4
increase-kanvas-icon-size
Tharanishwaran Nov 10, 2024
be1a4d4
Merge branch 'master' into Increase-size-Kanvas-icon
vishalvivekm Nov 10, 2024
de45a5d
Improve-Kanvas-icon-scaling-across-screens
Tharanishwaran Nov 12, 2024
e1ce905
Merge branch 'master' of github.com:layer5io/layer5 into Increase-siz…
Tharanishwaran Nov 12, 2024
397c354
Merge branch 'Increase-size-Kanvas-icon' of github.com:Tharanishwaran…
Tharanishwaran Nov 12, 2024
dfa511e
Merge branch 'layer5io:master' into Increase-size-Kanvas-icon
Tharanishwaran Nov 23, 2024
6aae58f
Added responsive design for smaller screens
Tharanishwaran Nov 23, 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
70 changes: 58 additions & 12 deletions src/sections/Kanvas/kanvas_banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ const BannerSectionWrapper = styled.div`
text-align: center;
}

}
.banner-text p {
color: ${props => props.theme.saffronColor};
margin-bottom: .5rem;
Expand Down Expand Up @@ -96,7 +95,8 @@ const BannerSectionWrapper = styled.div`
overflow: hidden;
margin-top: -7rem;
position: relative;
left: 30%;
left: 10%;
margin-top: -8rem;
z-index: 0;

}
Expand All @@ -117,7 +117,8 @@ const BannerSectionWrapper = styled.div`

@media screen and (max-width: 1700px) {
.kanvas-logo {
width: 12rem;
width: 20rem;
left: 21%;
/* right: 12rem; */
/* margin-top: -5rem; */
}
Expand All @@ -128,28 +129,28 @@ const BannerSectionWrapper = styled.div`
@media screen and (max-width: 1200px) {
.kanvas-logo {
left: 20%;
width: 10rem;
width: 18rem;
/* right: 8rem; */
margin-top: -5rem;
}
/* border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ; */
}
@media screen and (max-width: 992px) {
.kanvas-logo {
width: 8rem;
width: 16rem;
margin-top: -2rem;
left: 15%;
}
border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ;
border-radius: 0% 85% 0% 0% / 0% 60% 0% 0%;
}

@media screen and (max-width: 768px) {
padding: 8rem 2rem 3rem;
.kanvas-logo {
margin-top: -5rem;
margin-right: 2rem;
left: 7%;
min-width: 5rem;
left: 10%;
min-width: 8rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
Expand All @@ -158,16 +159,61 @@ const BannerSectionWrapper = styled.div`
margin-top: -5rem;
margin-right: 2rem;
left: 0%;
min-width: 3rem;
min-width: 8rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 450px) {
.kanvas-logo {
margin-top: -5rem;
margin-right: 1rem;
left: -10%;
min-width: 7rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 400px) {
.kanvas-logo {
margin-top: -5rem;
margin-right: 0;
left: -20%;
min-width: 3rem;
margin-right: 0rem;
left: -28%;
min-width: 6rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 350px) {
.kanvas-logo {
margin-top: -5rem;
margin-right: 0rem;
left: -48%;
min-width: 5rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 305px) {
.kanvas-logo {
margin-top: -5rem;
margin-right: 0rem;
left: -90%;
min-width: 5rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 260px) {
.kanvas-logo {
margin-top: -5rem;
margin-right: 0rem;
left: -170%;
min-width: 5rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
@media screen and (max-width: 210px) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this overuse of media queries is not a good practice. This will become hard to maintain and when something changes around this component we again had to rewrite its styles. Use better css, like use flex, max width etc and make more dynamic rather than fixing on each screen width.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion, @sudhanshutech I'll refactor the CSS using more dynamic techniques like flex and max-width instead of relying on media queries.

.kanvas-logo {
margin-top: -5rem;
margin-right: 0rem;
left: -280%;
min-width: 5rem;
}
border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
}
Expand Down