Merge pull request #159 from ajeetchaulagain/code-cleanup-refactor-2

Code Cleanup and Refactor
ajeetchaulagain · Jan 26, 2023 · d5f8ff4 · d5f8ff4
2 parents da49137 + e4e7444
commit d5f8ff4
Show file tree

Hide file tree

Showing 41 changed files with 219 additions and 191 deletions.
diff --git a/src/components/about-jumbotron/AboutJumbotron.tsx b/src/components/about-jumbotron/AboutJumbotron.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAuthorImage } from 'hooks';
-import { StyledGatsbyImage } from 'components/gatsby-image/StyledGatsbyImage';
-import { ButtonLink } from 'components/button-link';
+import { StyledGatsbyImage } from '../gatsby-image/StyledGatsbyImage';
+import { ButtonLink } from '../button-link';
 import {
   Container,
   ImageWrapper,

diff --git a/src/components/blog-post-card/BlogPostCard.tsx b/src/components/blog-post-card/BlogPostCard.tsx
@@ -1,8 +1,7 @@
+import React from 'react';
 import { StyledGatsbyImage } from '../gatsby-image/StyledGatsbyImage';
 import { Tag } from '../tag/Tag';
-import Link from '../link/Link';
-
-import React from 'react';
+import { Link } from '../link/Link';
 import { BlogPostCardProps } from './PropTypes';
 import {
   Container,

diff --git a/src/components/blog-post-card/PropTypes.ts b/src/components/blog-post-card/PropTypes.ts
@@ -1,4 +1,4 @@
-import { HeadingProps } from 'components/heading/Heading';
+import { HeadingProps } from '../heading/Heading';
 import { GatsbyImageProps } from 'gatsby-plugin-image';
 
 export type BlogPostCardProps = {

diff --git a/src/components/blog-post-card/styles.tsx b/src/components/blog-post-card/styles.tsx
@@ -1,4 +1,4 @@
-import { StyledGatsbyImage } from 'components/gatsby-image/StyledGatsbyImage';
+import { StyledGatsbyImage } from '../gatsby-image/StyledGatsbyImage';
 import styled from 'styled-components';
 import { p, mb, mt, mr } from 'styled-components-spacing';
 import breakpoint from 'styled-components-breakpoint';
@@ -11,7 +11,7 @@ export const StyledHeading = styled(Heading)`
 export const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.tertiaryBackground};
   border: 1px solid ${({ theme }) => theme.colors.cardBorder};
-  border-radius: ${(props) => props.theme.borderRadius.base};
+  border-radius: ${({ theme }) => theme.borderRadius.base};
   ${p(5)};
   display: flex;
   align-items: flex-start;

diff --git a/src/components/button-link/ButtonLink.tsx b/src/components/button-link/ButtonLink.tsx
@@ -8,7 +8,7 @@ import {
   getStylesForButtonSize,
   getStylesForButtonColorAndVariant,
 } from './styles';
-import Link from '../link/Link';
+import { Link } from '../link/Link';
 
 export const BaseButtonLink = ({ text, iconName, ...rest }: ButtonProps) => {
   return (

diff --git a/src/components/button-link/styles.tsx b/src/components/button-link/styles.tsx
@@ -8,19 +8,19 @@ export const getStylesForButtonSize = (size: string) => {
       return css`
         ${px(2)}
         ${py(1)}
-        font-size:${(props) => props.theme.fontSizes.xsmall};
+        font-size:${({ theme }) => theme.fontSizes.xsmall};
       `;
     case 'medium':
       return css`
         ${px(4)}
         ${py(2)}
-        font-size:${(props) => props.theme.fontSizes.small};
+        font-size:${({ theme }) => theme.fontSizes.small};
       `;
     case 'large':
       return css`
         ${px(4)}
         ${py(3)};
-        font-size: ${(props) => props.theme.fontSizes.medium};
+        font-size: ${({ theme }) => theme.fontSizes.medium};
       `;
   }
 };
@@ -33,8 +33,8 @@ export const BaseButtonStyles = css`
     filter: contrast(120%);
   }
 
-  font-family: ${(props) => props.theme.fonts.body};
-  font-weight: ${(props) => props.theme.fontWeights[6]};
+  font-family: ${({ theme }) => theme.fonts.body};
+  font-weight: ${({ theme }) => theme.fontWeights[6]};
 `;
 
 export const getStylesForButtonColorAndVariant = (
@@ -47,7 +47,7 @@ export const getStylesForButtonColorAndVariant = (
         background-color: ${({ theme }) =>
           theme.buttonColors[color].background};
         color: ${({ theme }) => theme.buttonColors[color].text};
-        border-radius: ${(props) => props.theme.borderRadius.base || '10px'};
+        border-radius: ${({ theme }) => theme.borderRadius.base || '10px'};
       `;
 
     case 'text':
@@ -68,7 +68,7 @@ export const getStylesForButtonColorAndVariant = (
         border: ${({ theme }) =>
           `${theme.borders.thin} ${theme.buttonColors[color].background}`};
         color: ${({ theme }) => theme.buttonColors[color].background};
-        border-radius: ${(props) => props.theme.borderRadius.base || '10px'};
+        border-radius: ${({ theme }) => theme.borderRadius.base || '10px'};
       `;
   }
 };
diff --git a/src/components/contact-form/ContactForm.tsx b/src/components/contact-form/ContactForm.tsx
@@ -1,30 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-import {
-  Button as FormButton,
-  Input,
-  TextArea,
-  Label,
-} from 'components/form/styles';
-import { mb } from 'styled-components-spacing';
-
-const Container = styled.div`
-  ${mb(6)}
-`;
-
-const Button = styled(FormButton)`
-  width: 90px;
-`;
-
-const StyledForm = styled.form`
-  display: flex;
-  flex-direction: column;
-`;
-
-const FormRow = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
+import { Input, TextArea, Label } from '../form/styles';
+import { Container, StyledForm, FormRow, Button } from './styles';
 
 export const ContactForm = () => {
   return (

diff --git a/src/components/contact-form/styles.tsx b/src/components/contact-form/styles.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { Button as FormButton } from '../form/styles';
+import { mb } from 'styled-components-spacing';
+
+export const Container = styled.div`
+  ${mb(6)}
+`;
+
+export const Button = styled(FormButton)`
+  width: 90px;
+`;
+
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const FormRow = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/src/components/header-footer/Footer.tsx b/src/components/header-footer/Footer.tsx
@@ -12,7 +12,7 @@ import {
   SocialMediaLinksWrapper,
 } from './styles';
 import { SocialMediaIcons } from '../social-media-icons/SocialMediaIcons';
-import Link from '../link/Link';
+import { Link } from '../link/Link';
 
 export const Footer = () => {
   const data = useStaticQuery(graphql`

diff --git a/src/components/header-footer/Header.tsx b/src/components/header-footer/Header.tsx
@@ -14,10 +14,10 @@ import {
   HomeIconNavItem,
 } from './styles';
 import { navItems } from './navItems';
-import { ThemeToggleSwitch } from 'components/theme-toggle-switch/ThemeToggleSwitch';
-import Link from '../link/Link';
-import { GradientOverlay } from 'components/landing-page-hero/styles';
-import { Icon } from 'components/icon/Icon';
+import { ThemeToggleSwitch } from '../theme-toggle-switch/ThemeToggleSwitch';
+import { Link } from '../link/Link';
+import { GradientOverlay } from '../landing-page-hero/styles';
+import { Icon } from '../icon/Icon';
 
 export const Header = (): JSX.Element => {
   const data = useStaticQuery(graphql`

diff --git a/src/components/header-footer/styles.tsx b/src/components/header-footer/styles.tsx
@@ -2,10 +2,10 @@ import styled, { DefaultTheme } from 'styled-components';
 import { ml, mb, px, py, pt, pb, mr, mt } from 'styled-components-spacing';
 import breakpoint from 'styled-components-breakpoint';
 import { Paragraph } from '../paragraph/Paragraph';
-import Link from '../link/Link';
+import { Link } from '../link/Link';
 
 export const HeaderWrapper = styled.header`
-  font-family: ${(props) => props.theme.fonts.secondaryHeading};
+  font-family: ${({ theme }) => theme.fonts.secondaryHeading};
   width: 100%;
   background: url('pattern-3.jpg') repeat fixed center;
   background-size: 1000px;
@@ -53,7 +53,7 @@ export const LogoWrapper = styled.div`
   }
   span {
     font-size: ${({ theme }) => theme.fontSizes.small};
-    font-weight: ${(props) => props.theme.fontWeights[3]};
+    font-weight: ${({ theme }) => theme.fontWeights[3]};
     color: ${({ theme }) =>
       theme.name === 'lightTheme'
         ? theme.colors.secondaryText
@@ -68,7 +68,7 @@ export const LogoLink = styled(Link)`
   display: flex;
   align-items: center;
   &:hover {
-    color: ${(props) => props.theme.colors.lightGreen};
+    color: ${({ theme }) => theme.colors.lightGreen};
   }
 `;
 
@@ -80,7 +80,7 @@ export const NavMenuWrapper = styled.nav`
 
 export const NavItem = styled.li`
   font-size: ${({ theme }) => theme.fontSizes.small};
-  font-weight: ${(props) => props.theme.fontWeights[4]};
+  font-weight: ${({ theme }) => theme.fontWeights[4]};
   text-transform: uppercase;
   color: ${({ theme }) =>
     theme.name === 'lightTheme'
@@ -144,8 +144,8 @@ export const ThemeToggleSwitchWrapper = styled.div`
 // Footer and its component styles
 export const FooterContainer = styled.div`
   font-size: ${({ theme }) => theme.fontSizes.medium};
-  font-family: ${(props) => props.theme.fonts.secondaryHeading};
-  font-weight: ${(props) => props.theme.fontWeights[5]};
+  font-family: ${({ theme }) => theme.fonts.secondaryHeading};
+  font-weight: ${({ theme }) => theme.fontWeights[5]};
   width: 100%;
   background: url('../pattern-3.jpg') repeat fixed center;
   background-size: 1000px;

diff --git a/src/components/heading/Heading.tsx b/src/components/heading/Heading.tsx
@@ -16,7 +16,7 @@ const Heading1 = styled.h1<{ size?: HeadingFontSize; type?: FontType }>`
   font-size: ${({ size, theme: { headingFontSizes } }) =>
     size ? headingFontSizes[size] : headingFontSizes.xlarge};
 
-  font-weight: ${(props) => props.theme.fontWeights[9]};
+  font-weight: ${({ theme }) => theme.fontWeights[9]};
 
   ${breakpoint('xs', 'lg')`
     ${({ size, theme }: { size: HeadingFontSize; theme: DefaultTheme }) => {

diff --git a/src/components/hero-blank/HeroBlank.tsx b/src/components/hero-blank/HeroBlank.tsx
@@ -1,4 +1,4 @@
-import { GradientOverlay } from 'components/landing-page-hero/styles';
+import { GradientOverlay } from '../landing-page-hero/styles';
 import React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -19,3 +19,4 @@ export * from './social-media-icons/styles';
 export * from './hero-blank/HeroBlank';
 export * from './tag/Tag';
 export * from './comments/Comments';
+export * from './link/Link';
diff --git a/src/components/info-call-to-action/InfoCallToAction.tsx b/src/components/info-call-to-action/InfoCallToAction.tsx
@@ -1,49 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
-import { p, my } from 'styled-components-spacing';
-import { Icon } from 'components/icon/Icon';
-import { Paragraph } from 'components/paragraph/Paragraph';
-import { mb, mr } from 'styled-components-spacing';
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  background-color: ${(props) => props.theme.colors.tertiaryBackground};
-  border-radius: ${(props) => props.theme.borderRadius.base};
-  ${p(4)};
-  ${my(5)};
-
-  a {
-    font-family: ${({ theme }) => theme.fonts.body};
-    color: ${({ theme }) => theme.colors.brandPrimary};
-    text-decoration: underline;
-    font-weight: ${({ theme }) => theme.fontWeights[6]};
-    :hover {
-      text-decoration: none;
-    }
-  }
-`;
-
-const StyledParagraph = styled(Paragraph)`
-  ${mb(0)};
-  line-height: 1.5;
-  font-size: ${({ theme }) => theme.fontSizes.small};
-  font-weight: ${({ theme }) => theme.fontWeights[4]};
-`;
-
-const IconWrapper = styled.div`
-  font-size: 3rem;
-  display: flex;
-  color: ${({ theme }) => theme.colors.brandPrimary};
-  svg {
-    display: inline-block;
-    ${mr(4)};
-  }
-`;
-
-const ContentWrapper = styled.div`
-  width: 100%;
-`;
+import { Icon } from '../icon/Icon';
+import {
+  Container,
+  IconWrapper,
+  ContentWrapper,
+  StyledParagraph,
+} from './styles';
 
 type InfoCallToAction = {
   htmlString: string;

diff --git a/src/components/info-call-to-action/styles.tsx b/src/components/info-call-to-action/styles.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { p, my } from 'styled-components-spacing';
+import { Paragraph } from '../paragraph/Paragraph';
+import { mb, mr } from 'styled-components-spacing';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.tertiaryBackground};
+  border-radius: ${({ theme }) => theme.borderRadius.base};
+  ${p(4)};
+  ${my(5)};
+
+  a {
+    font-family: ${({ theme }) => theme.fonts.body};
+    color: ${({ theme }) => theme.colors.brandPrimary};
+    text-decoration: underline;
+    font-weight: ${({ theme }) => theme.fontWeights[6]};
+    :hover {
+      text-decoration: none;
+    }
+  }
+`;
+
+export const StyledParagraph = styled(Paragraph)`
+  ${mb(0)};
+  line-height: 1.5;
+  font-size: ${({ theme }) => theme.fontSizes.small};
+  font-weight: ${({ theme }) => theme.fontWeights[4]};
+`;
+
+export const IconWrapper = styled.div`
+  font-size: 3rem;
+  display: flex;
+  color: ${({ theme }) => theme.colors.brandPrimary};
+  svg {
+    display: inline-block;
+    ${mr(4)};
+  }
+`;
+
+export const ContentWrapper = styled.div`
+  width: 100%;
+`;
diff --git a/src/components/landing-page-hero/LandingPageHero.tsx b/src/components/landing-page-hero/LandingPageHero.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAuthorImage } from '../../hooks/useAuthorImage';
 import { SocialMediaIcons } from '../social-media-icons/SocialMediaIcons';
-import { ButtonLink } from 'components/button-link';
+import { ButtonLink } from '../button-link';
 import {
   Container,
   GradientOverlay,

diff --git a/src/components/landing-page-hero/styles.tsx b/src/components/landing-page-hero/styles.tsx
@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
 import { mb, px, pt, pb, mt } from 'styled-components-spacing';
 import breakpoint from 'styled-components-breakpoint';
-import { Heading } from 'components/heading/Heading';
-import { Paragraph } from 'components/paragraph/Paragraph';
-import { StyledGatsbyImage } from 'components/gatsby-image/StyledGatsbyImage';
+import { Heading } from '../heading/Heading';
+import { Paragraph } from '../paragraph/Paragraph';
+import { StyledGatsbyImage } from '../gatsby-image/StyledGatsbyImage';
 
 export const Container = styled.section`
   width: 100%;

diff --git a/src/components/layout/MasterLayout.tsx b/src/components/layout/MasterLayout.tsx
@@ -3,7 +3,7 @@ import breakpoint from 'styled-components-breakpoint';
 import styled, { DefaultTheme } from 'styled-components';
 import { Header, Footer } from '../header-footer';
 import { GlobalStyle } from '../../styles/GlobalStyles';
-import { Theme } from 'components/theme/Theme';
+import { Theme } from '../theme/Theme';
 import { Content } from './ContentWrapper';
 
 type MasterLayoutProps = {

diff --git a/src/components/link/Link.tsx b/src/components/link/Link.tsx
@@ -7,7 +7,7 @@ const isExternalLink = (path: string) =>
   path?.startsWith(`https://`) ||
   path?.startsWith(`//`);
 
-export default function Link<TState>({
+export function Link<TState>({
   children,
   ...props
 }: React.PropsWithoutRef<GatsbyLinkProps<TState>>) {