diff --git a/src/components/BlogsCarouselHome/index.scss b/src/components/BlogsCarouselHome/index.scss index d5c6d88..0e3cb51 100644 --- a/src/components/BlogsCarouselHome/index.scss +++ b/src/components/BlogsCarouselHome/index.scss @@ -2,26 +2,18 @@ @import "../../style/bootstrapImports"; @import "../../style/buttons"; @import "../../style/bootstrapImports"; +@import "../../style/headings"; .homeCarousel { text-align: center; font-family: $mainFontFamily; .title { - color: $primaryColor; - font-weight: bold; - margin-top: 3rem; - font-family: $mainFontFamily; - text-align: center; - font-size: 2rem; - padding-top: 0.5rem; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-family: $mainFontFamily; - margin-bottom: 3rem; + @include secondaryHeader; } .slick-slider { diff --git a/src/components/ContactInfo/index.scss b/src/components/ContactInfo/index.scss index 6b224ad..be6a576 100644 --- a/src/components/ContactInfo/index.scss +++ b/src/components/ContactInfo/index.scss @@ -4,7 +4,7 @@ .contactInfo { h2 { - @include mainHeading; + @include contactHeader; margin-bottom: 1rem; } diff --git a/src/components/JobsTrainingHeader/index.scss b/src/components/JobsTrainingHeader/index.scss index 7e616ba..f00803f 100644 --- a/src/components/JobsTrainingHeader/index.scss +++ b/src/components/JobsTrainingHeader/index.scss @@ -1,19 +1,12 @@ @import "../../style/variables"; +@import "../../style/headings"; .jobsTrainingHeader { h2 { - color: $primaryColor; - font-family: $mainFontFamily; - margin-top: 4rem; - text-align: center; - font-size: 2rem; - font-weight: bold; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-family: $mainFontFamily; - margin-bottom: 3rem; + @include secondaryHeader; } } diff --git a/src/components/JobsTrainingHome/index.scss b/src/components/JobsTrainingHome/index.scss index 64fa7c3..06d5b00 100644 --- a/src/components/JobsTrainingHome/index.scss +++ b/src/components/JobsTrainingHome/index.scss @@ -1,5 +1,6 @@ @import "../../style/variables"; @import "../../style/buttons"; +@import "../../style/headings"; .jobsTrainingSection { padding-top: 0.5rem; @@ -9,8 +10,13 @@ font-family: $mainFontFamily; h6 { - color: $primaryColor; - margin-bottom: 3rem; + @include secondaryHeader; + } + + .jobsTrainingHeader { + h2 { + margin-top: 3rem; + } } .jobsTrainingHeader { diff --git a/src/components/SeekHelp/index.scss b/src/components/SeekHelp/index.scss index cf88865..ae11ad1 100644 --- a/src/components/SeekHelp/index.scss +++ b/src/components/SeekHelp/index.scss @@ -1,5 +1,6 @@ @import "../../style/variables"; @import "../../style/bootstrapImports"; +@import "../../style/headings"; .seekHelpSection { background: $lightColor; @@ -7,19 +8,11 @@ margin-bottom: 5rem; h2 { - color: $primaryColor; - text-align: center; - font-family: $mainFontFamily; - font-weight: bold; - margin-top: 3rem; - padding-top: 0.5rem; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-size: 16px; - font-family: $mainFontFamily; + @include secondaryHeader; } .mapStyle { diff --git a/src/components/SignIn/index.scss b/src/components/SignIn/index.scss index 0b8d82d..ef2f847 100644 --- a/src/components/SignIn/index.scss +++ b/src/components/SignIn/index.scss @@ -6,7 +6,7 @@ .signInSection { /* All section style */ width: 100%; - margin-top: 4rem; + margin-top: 2rem; margin-bottom: 4rem; .signInImg { @@ -23,10 +23,8 @@ } h2 { - @include mainHeading; - font-size: 2.8rem; - color: $primaryColor; - margin-bottom: 4rem; + @include mainHeader; + margin: 0 0 4rem 0; } h4 { diff --git a/src/components/SignUp/index.scss b/src/components/SignUp/index.scss index c0beadf..2c6ca57 100644 --- a/src/components/SignUp/index.scss +++ b/src/components/SignUp/index.scss @@ -6,7 +6,7 @@ .signUpSection { /* All section style */ width: 100%; - margin-top: 4rem; + margin-top: 2rem; margin-bottom: 4rem; background-color: $lightColor; @@ -20,10 +20,8 @@ } h2 { - @include mainHeading; - font-size: 2.8rem; - color: $primaryColor; - margin-bottom: 4rem; + @include mainHeader; + margin: 0 0 4rem 0; } h4 { diff --git a/src/containers/AboutUsPage/index.scss b/src/containers/AboutUsPage/index.scss index 5b18954..c50bb3c 100644 --- a/src/containers/AboutUsPage/index.scss +++ b/src/containers/AboutUsPage/index.scss @@ -1,13 +1,9 @@ @import "../../style/variables"; +@import "../../style/headings"; .aboutUsPage { h2 { - color: $primaryColor; - font-family: $mainFontFamily; - margin-top: 4rem; - font-size: 2rem; - font-weight: bold; - text-align: center; + @include mainHeader; } p { diff --git a/src/containers/BlogPage/index.scss b/src/containers/BlogPage/index.scss index b878d9d..e56d302 100644 --- a/src/containers/BlogPage/index.scss +++ b/src/containers/BlogPage/index.scss @@ -1,19 +1,12 @@ @import "../../style/variables"; +@import "../../style/headings"; .blogsMainContainer { h2 { - color: $primaryColor; - font-family: $mainFontFamily; - margin-top: 4rem; - text-align: center; - font-size: 2rem; - font-weight: bold; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-family: $mainFontFamily; - margin-bottom: 4rem; + @include secondaryHeader; } } diff --git a/src/containers/ContactUsPage/index.scss b/src/containers/ContactUsPage/index.scss index ffb94ce..c6e3dcc 100644 --- a/src/containers/ContactUsPage/index.scss +++ b/src/containers/ContactUsPage/index.scss @@ -1,4 +1,5 @@ @import "../../style/variables"; +@import "../../style/headings"; .contactUsPage { .contactContainer { @@ -20,17 +21,10 @@ } h2 { - color: $primaryColor; - font-family: $mainFontFamily; - margin-top: 4rem; - text-align: center; - font-size: 2rem; - font-weight: bold; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-family: $mainFontFamily; + @include secondaryHeader; } } diff --git a/src/containers/ProfilePage/index.scss b/src/containers/ProfilePage/index.scss index 6d80907..713cac2 100644 --- a/src/containers/ProfilePage/index.scss +++ b/src/containers/ProfilePage/index.scss @@ -15,10 +15,9 @@ } h2 { - @include mainHeading; - color: $primaryColor; - font-size: 2.7rem; - margin: 1rem 0 2rem 0; + @include mainHeader; + text-align: left; + margin: 1rem 0 3rem 0; } .sectionTitle { diff --git a/src/containers/SearchForHelpPage/index.scss b/src/containers/SearchForHelpPage/index.scss index bc92a00..496b31e 100644 --- a/src/containers/SearchForHelpPage/index.scss +++ b/src/containers/SearchForHelpPage/index.scss @@ -1,5 +1,6 @@ @import "../../style/variables"; @import "../../style/buttons"; +@import "../../style/headings"; .searchHelpPage { margin-bottom: 2rem; @@ -8,19 +9,11 @@ } h2 { - color: $primaryColor; - text-align: center; - font-family: $mainFontFamily; - font-weight: bold; - margin-top: 2rem; + @include mainHeader; } h6 { - color: $darkColor; - text-align: center; - font-size: 14px; - margin: 2rem 0; - font-family: $mainFontFamily; + @include secondaryHeader; } .seekHelpCards { diff --git a/src/style/_headings.scss b/src/style/_headings.scss index a03fdc1..8545198 100644 --- a/src/style/_headings.scss +++ b/src/style/_headings.scss @@ -1,4 +1,21 @@ -@mixin mainHeading { +@mixin mainHeader { + color: $primaryColor; + font-weight: bold; + margin-top: 3rem; + font-family: $mainFontFamily; + text-align: center; + font-size: 2rem; + padding-top: 0.5rem; +} + +@mixin secondaryHeader { + color: $darkColor; + text-align: center; + font-family: $mainFontFamily; + margin-bottom: 3rem; +} + +@mixin contactHeader { font-family: $mainFontFamily; font-style: normal; font-weight: 900;