From b7fb90c3ef78c27177f687eb61b8eb053404e83a Mon Sep 17 00:00:00 2001 From: captain-Akshay Date: Mon, 2 Oct 2023 20:49:40 +0530 Subject: [PATCH 1/2] fixed the x logo in the footer Signed-off-by: captain-Akshay --- site/src/App.style.js | 69 ++++++----- .../assets/images/social-icons/twitter.svg | 2 +- site/src/components/Footer/Footer.styles.js | 79 +++++++++---- site/src/components/Footer/index.js | 111 ++++++++---------- 4 files changed, 133 insertions(+), 128 deletions(-) diff --git a/site/src/App.style.js b/site/src/App.style.js index 71425fe..dae7262 100644 --- a/site/src/App.style.js +++ b/site/src/App.style.js @@ -1,10 +1,9 @@ import styled from "styled-components"; export const Header = styled.header` - position: sticky; top: 0; - background: #FFF; + background: #fff; z-index: 1; nav { @@ -19,7 +18,7 @@ export const Header = styled.header` position: relative; } - .scrolled { + .scrolled { box-shadow: rgba(0, 179, 159, 0.2) 0px 10px 25px; } @@ -29,8 +28,8 @@ export const Header = styled.header` height: auto; } .themeToggle { - margin: auto .5rem; - padding: auto .5rem; + margin: auto 0.5rem; + padding: auto 0.5rem; svg { width: 40px; height: 40px; @@ -41,15 +40,16 @@ export const Header = styled.header` align-items: center; justify-content: space-between; } - .signup-btn, .login-btn { + .signup-btn, + .login-btn { font-size: calc(16px + 6 * ((50vw - 320px) / 680)); transition: 0.2s ease-in-out; - margin: auto .5rem; + margin: auto 0.5rem; } .signup-btn { padding: 1rem 1.5rem; text-align: center; - color: #FFF; + color: #fff; background: rgba(235, 192, 23, 1); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); @@ -61,14 +61,14 @@ export const Header = styled.header` .signup-btn:hover { background-color: rgba(255, 208, 25, 1); box-shadow: 0px 0px 15px rgba(235, 192, 23, 1); - color: #FFF; + color: #fff; } .login-btn { margin: 0 0 0 1rem; padding: 1rem 1.5rem; text-align: center; - color: #FFF; + color: #fff; white-space: nowrap; background: rgba(0, 179, 159, 1); border-radius: 16px; @@ -79,9 +79,9 @@ export const Header = styled.header` } .login-btn:hover { - background-color: #00D3A9; + background-color: #00d3a9; box-shadow: 0px 0px 15px rgba(0, 179, 159, 1); - color: #FFF; + color: #fff; } @media screen and (max-width: 1400px) { img.logo { @@ -111,15 +111,15 @@ export const Header = styled.header` @media screen and (max-width: 768px) { img.logo { - max-width: 250px; + max-width: 250px; } .signup-btn { - padding: 0.70rem 1rem; - margin: auto .35rem; + padding: 0.7rem 1rem; + margin: auto 0.35rem; } .login-btn { - padding: 0.70rem 1rem; - margin: auto .35rem; + padding: 0.7rem 1rem; + margin: auto 0.35rem; } .themeToggle > svg { width: 28px; @@ -131,14 +131,14 @@ export const Header = styled.header` nav { padding: 1.5rem; } - + img.logo { - max-width: 200px; + max-width: 200px; } } @media screen and (max-width: 500px) { img.logo { - max-width: 180px; + max-width: 180px; } nav { padding: 1.5625rem 0.625rem; @@ -146,7 +146,8 @@ export const Header = styled.header` .themeToggle { position: static; } - .signup-btn, .login-btn { + .signup-btn, + .login-btn { padding: 5px 7px; } .themeToggle > svg { @@ -154,16 +155,15 @@ export const Header = styled.header` height: 20px; } } -` +`; export const Main = styled.main` - max-width: 75%; margin: 5rem auto; p { - font-size: 1.35rem; - text-align: center; + font-size: 1.35rem; + text-align: center; } h1 { @@ -215,7 +215,7 @@ export const Main = styled.main` &:hover { box-shadow: 0px 3px 20px 4px rgba(0, 179, 159, 0.75); .react-player__play-icon { - border-color: transparent transparent transparent #EBC017 !important; + border-color: transparent transparent transparent #ebc017 !important; } } } @@ -242,20 +242,19 @@ export const Main = styled.main` text-align: center; a { display: block; - background: #EBC017; - color: ${({ theme }) => theme.btn}; + background: #ebc017; + color: ${({ theme }) => theme.btn}; width: 14rem; padding: 1rem; margin: auto; border-radius: 0.5rem; transition: 0.2s ease-in-out; - &:hover{ + &:hover { background-color: rgba(255, 208, 25, 1); - box-shadow: 0px 0px 12px #EBC017; - color: #FFF; + box-shadow: 0px 0px 12px #ebc017; + color: #fff; } } - } .faq { @@ -276,7 +275,7 @@ export const Main = styled.main` max-width: 90%; } - @media screen and (max-width: 344px){ + @media screen and (max-width: 344px) { .join-community { a { width: 12rem; @@ -284,6 +283,4 @@ export const Main = styled.main` } max-width: 95%; } - - -` +`; diff --git a/site/src/assets/images/social-icons/twitter.svg b/site/src/assets/images/social-icons/twitter.svg index efb5ce4..344858b 100644 --- a/site/src/assets/images/social-icons/twitter.svg +++ b/site/src/assets/images/social-icons/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/site/src/components/Footer/Footer.styles.js b/site/src/components/Footer/Footer.styles.js index 2aed789..7d415f5 100644 --- a/site/src/components/Footer/Footer.styles.js +++ b/site/src/components/Footer/Footer.styles.js @@ -4,22 +4,23 @@ const FooterWrapper = styled.section` padding: 3.1rem 0 3.1rem 0; background: #222; - .container{ - display: flex; - margin: auto; - width: 60%; + .container { + display: flex; + margin: auto; + width: 60%; } .footer-links { width: 100%; margin: 1rem; padding: 0; - + li { list-style: none; margin: 0.75rem 0.75rem 0.75rem 0.125rem; - + a { + color: #999; &:hover { text-decoration: none; color: white; @@ -34,10 +35,23 @@ const FooterWrapper = styled.section` height: 22px; filter: invert(0.75) grayscale(1); } + svg { + fill: #999; + margin-right: 10px; + transition: fill 0.2s ease; + vertical-align: middle; + position: relative; + top: -2px; + width: 22px; + height: 22px; + } &:hover { img { - filter: invert(0); + filter: none; + } + svg { + fill: #fff; } } } @@ -49,7 +63,10 @@ const FooterWrapper = styled.section` } @media screen and (max-width: 1400px) { - .community, .getting-started, .resources, .socials { + .community, + .getting-started, + .resources, + .socials { flex: 0 0 22%; } } @@ -59,7 +76,10 @@ const FooterWrapper = styled.section` flex-wrap: wrap; width: 75%; } - .community, .getting-started, .resources, .socials { + .community, + .getting-started, + .resources, + .socials { flex: 0 0 30%; margin: 1rem 1rem 1rem 5rem; } @@ -70,7 +90,10 @@ const FooterWrapper = styled.section` flex-wrap: wrap; width: 90%; } - .community, .getting-started, .resources, .socials { + .community, + .getting-started, + .resources, + .socials { flex: 0 0 30%; margin: 1rem 1rem 1rem 4rem; } @@ -81,7 +104,10 @@ const FooterWrapper = styled.section` flex-wrap: wrap; width: 90%; } - .community, .getting-started, .resources, .socials { + .community, + .getting-started, + .resources, + .socials { flex: 0 0 100%; margin: 1rem 0; text-align: center; @@ -92,21 +118,21 @@ const FooterWrapper = styled.section` font-size: 0.9rem; margin-top: 1.5rem; padding-top: 1rem; - border-top: 1px solid #3C494F; + border-top: 1px solid #3c494f; display: flex; - justify-content:space-evenly; - text-align:center; - @media (max-width:1000px) { + justify-content: space-evenly; + text-align: center; + @media (max-width: 1000px) { flex-direction: column; text-align: center; - .text{ + .text { text-align: center; padding-top: 10px; padding-bottom: 10px; } } } - + .meshery-footer { display: inline-flex; align-items: center; @@ -118,8 +144,9 @@ const FooterWrapper = styled.section` height: 30px; } } - - &, a { + + &, + a { color: #999; } @@ -131,17 +158,17 @@ const FooterWrapper = styled.section` } } - .section-title{ + .section-title { font-size: 1.25rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.8); .title-link { - transition: 0.2s all; - color: rgba(255, 255, 255, 0.75); - &:hover { - color: #fff; - } + transition: 0.2s all; + color: rgba(255, 255, 255, 0.75); + &:hover { + color: #fff; + } } } @@ -158,4 +185,4 @@ const FooterWrapper = styled.section` } `; -export default FooterWrapper; \ No newline at end of file +export default FooterWrapper; diff --git a/site/src/components/Footer/index.js b/site/src/components/Footer/index.js index 3649adf..f72ed9e 100644 --- a/site/src/components/Footer/index.js +++ b/site/src/components/Footer/index.js @@ -1,29 +1,27 @@ -import React from 'react'; +import React from "react"; import SlackIcon from "../../assets/images/social-icons/slack.svg"; import DockerIcon from "../../assets/images/social-icons/docker.svg"; import YoutubeIcon from "../../assets/images/social-icons/youtube.svg"; -import TwitterIcon from "../../assets/images/social-icons/twitter.svg"; +// import TwitterIcon from "../../assets/images/social-icons/twitter.svg"; import GithubIcon from "../../assets/images/social-icons/github.svg"; import CalendarIcon from "../../assets/images/social-icons/calendar.png"; import LinkedinIcon from "../../assets/images/social-icons/linkedin.png"; -import FooterWrapper from './Footer.styles'; +import { ReactComponent as TwitterLogo } from "../../assets/images/social-icons/twitter.svg"; +import FooterWrapper from "./Footer.styles"; const Footer = () => { return ( - +
-
+

- + Project

  • - + Calendar Icon Calendar @@ -37,12 +35,9 @@ const Footer = () => { Docker Icon Docker Hub -
    • +
  • - + Slack Icon Slack @@ -58,26 +53,24 @@ const Footer = () => {
-
+ -
+

- + Community

-
+

- + Social

-
© {new Date().getFullYear()}- The Meshery Authors
+
+ © {new Date().getFullYear()}- The Meshery Authors +
Proudly representing every CNCF project
- +
- - ) -} + + ); +}; -export default Footer; +export default Footer; From ca3c9824af252537885217af57d56917a2b42668 Mon Sep 17 00:00:00 2001 From: captain-Akshay Date: Mon, 2 Oct 2023 21:07:23 +0530 Subject: [PATCH 2/2] fixed the x logo in the footer Signed-off-by: captain-Akshay --- site/src/components/Footer/Footer.styles.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/components/Footer/Footer.styles.js b/site/src/components/Footer/Footer.styles.js index 7d415f5..a5da23d 100644 --- a/site/src/components/Footer/Footer.styles.js +++ b/site/src/components/Footer/Footer.styles.js @@ -42,8 +42,9 @@ const FooterWrapper = styled.section` vertical-align: middle; position: relative; top: -2px; - width: 22px; - height: 22px; + width: 24px; + height: 24px; + right: 2px; } &:hover {