Merge pull request #161 from captain-Akshay/twitter-logo

fixed the x logo in the footer
meshery · Nov 16, 2023 · 619ba5a · 619ba5a
2 parents 2b94661 + ca3c982
commit 619ba5a
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 128 deletions.
diff --git 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,39 +131,39 @@ 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;
     }
     .themeToggle {
       position: static;
     }
-    .signup-btn, .login-btn {
+    .signup-btn,
+    .login-btn {
       padding: 5px 7px;
     }
     .themeToggle > svg {
       width: 20px;
       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,14 +275,12 @@ 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;
       }
     }
     max-width: 95%;
   }
-
-
-`
+`;
diff --git a/site/src/assets/images/social-icons/twitter.svg b/site/src/assets/images/social-icons/twitter.svg
diff --git 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,24 @@ 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: 24px;
+          height: 24px;
+          right: 2px;
+        }
 
         &:hover {
           img {
-            filter: invert(0);
+            filter: none;
+          }
+          svg {
+            fill: #fff;
           }
         }
       }
@@ -49,7 +64,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 +77,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 +91,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 +105,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 +119,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 +145,9 @@ const FooterWrapper = styled.section`
       height: 30px;
     }
   }
-  
-  &, a {
+
+  &,
+  a {
     color: #999;
   }
 
@@ -131,17 +159,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 +186,4 @@ const FooterWrapper = styled.section`
   }
 `;
 
-export default FooterWrapper;
+export default FooterWrapper;