From 16abffe36ca89bc15193cf2e283ad1e0b39908e6 Mon Sep 17 00:00:00 2001 From: jennethydyrova Date: Sun, 22 Nov 2020 11:42:26 +0300 Subject: [PATCH 1/2] homepage headers fix --- src/components/BlogsCarouselHome/index.scss | 6 +++++- src/components/JobsTrainingHome/index.scss | 9 +++++++-- src/components/SeekHelp/index.scss | 1 + 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/BlogsCarouselHome/index.scss b/src/components/BlogsCarouselHome/index.scss index 7327ad0..d5c6d88 100644 --- a/src/components/BlogsCarouselHome/index.scss +++ b/src/components/BlogsCarouselHome/index.scss @@ -10,7 +10,11 @@ .title { color: $primaryColor; font-weight: bold; - margin-top: 2rem; + margin-top: 3rem; + font-family: $mainFontFamily; + text-align: center; + font-size: 2rem; + padding-top: 0.5rem; } h6 { diff --git a/src/components/JobsTrainingHome/index.scss b/src/components/JobsTrainingHome/index.scss index ef2a344..64fa7c3 100644 --- a/src/components/JobsTrainingHome/index.scss +++ b/src/components/JobsTrainingHome/index.scss @@ -2,8 +2,7 @@ @import "../../style/buttons"; .jobsTrainingSection { - padding-top: 3.125rem; - margin-top: 1.875rem; + padding-top: 0.5rem; padding-bottom: 3.125rem; background-color: $secondaryColor; width: 100%; @@ -14,6 +13,12 @@ margin-bottom: 3rem; } + .jobsTrainingHeader { + h2 { + margin-top: 3rem; + } + } + a { @include normalLink; } diff --git a/src/components/SeekHelp/index.scss b/src/components/SeekHelp/index.scss index 4da96c7..cf88865 100644 --- a/src/components/SeekHelp/index.scss +++ b/src/components/SeekHelp/index.scss @@ -12,6 +12,7 @@ font-family: $mainFontFamily; font-weight: bold; margin-top: 3rem; + padding-top: 0.5rem; } h6 { From e218827fbe4c1efb3c15710bbc6b704e711847aa Mon Sep 17 00:00:00 2001 From: jennethydyrova Date: Sun, 22 Nov 2020 15:39:40 +0300 Subject: [PATCH 2/2] add header mixin, add it to all headers --- src/components/BlogsCarouselHome/index.scss | 14 +++----------- src/components/ContactInfo/index.scss | 2 +- src/components/JobsTrainingHeader/index.scss | 13 +++---------- src/components/JobsTrainingHome/index.scss | 4 ++-- src/components/SeekHelp/index.scss | 13 +++---------- src/components/SignIn/index.scss | 8 +++----- src/components/SignUp/index.scss | 8 +++----- src/containers/AboutUsPage/index.scss | 8 ++------ src/containers/BlogPage/index.scss | 13 +++---------- src/containers/ContactUsPage/index.scss | 12 +++--------- src/containers/ProfilePage/index.scss | 7 +++---- src/containers/SearchForHelpPage/index.scss | 13 +++---------- src/style/_headings.scss | 19 ++++++++++++++++++- 13 files changed, 50 insertions(+), 84 deletions(-) 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..af281ed 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,7 @@ font-family: $mainFontFamily; h6 { - color: $primaryColor; - margin-bottom: 3rem; + @include secondaryHeader; } .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;