Add transitions

Author: codesheri

web/src/components/Button/index.js

@@ -13,6 +13,7 @@ const StyledLink = styled(GatsbyLink)`
     props.primary ? "var(--white)" : "var(--peach)"};
   color: ${(props) => (props.primary ? "var(--black)" : "var(--white)")};
   text-decoration: none;
+  transition: var(--transition);
   &:hover {
     cursor: pointer;
     background-color: var(--light-peach);

web/src/components/ContactForm/styles.js

@@ -47,6 +47,8 @@ export const SubmitButton = styled.button`
   background-color: var(--white);
   color: var(--black);
   text-decoration: none;
+  transition: var(--transition);
+
   &:hover {
     cursor: pointer;
     background-color: var(--light-peach);

web/src/components/Footer/styles.js

@@ -114,6 +114,10 @@ export const SocialsList = styled.ul`
   margin: 40px auto;
   padding-left: 0;
 
+  a {
+    transition: var(--transition);
+  }
+
   a:hover,
   a:focus {
     filter: brightness(1.4);

web/src/components/ProjectLink/styles.js

@@ -25,6 +25,7 @@ export const ProjectLink = styled(Link)`
     top: 0;
     left: 0;
     border-radius: 15px;
+    transition: var(--transition);
   }
   &:hover,
   &:focus {

web/src/styles/GlobalStyles.js

@@ -9,6 +9,7 @@ const GlobalStyle = createGlobalStyle`
     --dark-grey: hsl(264, 5%, 20%);
     --light-grey: hsl(210, 17%, 95%);
     --site-container: 1111px;
+    --transition: all 0.3s ease-in-out;
   }
   html {
     box-sizing: border-box;