From 51c92071f418055ff760ea1e3543095349c6e1ff Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 15 Sep 2022 18:10:52 +0300 Subject: [PATCH 1/2] TCA-444 - Learn Landing Header content --- .../learn-lib/wave-hero/WaveHero.module.scss | 8 +++---- .../learn/learn-lib/wave-hero/WaveHero.tsx | 2 +- .../learn/welcome/WelcomePage.module.scss | 15 ++++++++---- src-ts/tools/learn/welcome/WelcomePage.tsx | 8 ++++++- src-ts/tools/learn/welcome/tca-full-logo.svg | 24 +++++++++++++++++++ 5 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 src-ts/tools/learn/welcome/tca-full-logo.svg diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss index 996cb752a..7fb19c5aa 100755 --- a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss +++ b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss @@ -19,7 +19,7 @@ } } } - + &-inner { padding: calc($space-xxxxl + $space-sm) 0 $space-lg; @include contentWidth; @@ -47,13 +47,13 @@ flex-direction: column; } } - + &-card-col { flex: 0 0 auto; } - + &-text { @extend .body-medium-normal; - margin-top: $space-xxl; + margin-top: $space-sm; } } diff --git a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx index a78e17b7b..907111c88 100755 --- a/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx +++ b/src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx @@ -7,7 +7,7 @@ interface WaveHeroProps { children?: ReactNode text: string theme?: 'light' - title: string + title: ReactNode } const WaveHero: FC = (props: WaveHeroProps) => { diff --git a/src-ts/tools/learn/welcome/WelcomePage.module.scss b/src-ts/tools/learn/welcome/WelcomePage.module.scss index c00834ead..c44175908 100644 --- a/src-ts/tools/learn/welcome/WelcomePage.module.scss +++ b/src-ts/tools/learn/welcome/WelcomePage.module.scss @@ -1,10 +1,15 @@ @import '../../../lib/styles/includes'; .hero-wrap { + svg:global(.tca-logo) { + margin-bottom: $space-xxl; + max-width: calc(100% - 70px); + } + :global(.hero-card-col) { width: 43.5%; max-width: 600px; - + @include ltemd { width: 100%; max-width: none; @@ -15,7 +20,7 @@ .courses-section { padding: $space-xxxxl 0; position: relative; - + @include ltemd { padding-top: $space-xxl; } @@ -38,12 +43,12 @@ @include ltelg { grid-template-columns: repeat(2, 1fr); } - + @media (max-width: 576px) { grid-template-columns: repeat(1, 1fr); } - + @include ltemd { margin-top: $space-xxl; } -} \ No newline at end of file +} diff --git a/src-ts/tools/learn/welcome/WelcomePage.tsx b/src-ts/tools/learn/welcome/WelcomePage.tsx index 12008470f..e437e9a43 100644 --- a/src-ts/tools/learn/welcome/WelcomePage.tsx +++ b/src-ts/tools/learn/welcome/WelcomePage.tsx @@ -14,6 +14,7 @@ import { import { CoursesCard } from './courses-card' import { ProgressBlock } from './progress-block' import styles from './WelcomePage.module.scss' +import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg' const WelcomePage: FC<{}> = () => { @@ -30,7 +31,12 @@ const WelcomePage: FC<{}> = () => {
+ + Welcome! + + )} text={` The Topcoder Academy will provide you with learning opportunities in the form of guided learning paths. diff --git a/src-ts/tools/learn/welcome/tca-full-logo.svg b/src-ts/tools/learn/welcome/tca-full-logo.svg new file mode 100644 index 000000000..9deee693b --- /dev/null +++ b/src-ts/tools/learn/welcome/tca-full-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + From cfeb2d4c250a26e5b1fd194d5399864746fd55a0 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 15 Sep 2022 18:16:28 +0300 Subject: [PATCH 2/2] lint fixes --- src-ts/tools/learn/welcome/WelcomePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-ts/tools/learn/welcome/WelcomePage.tsx b/src-ts/tools/learn/welcome/WelcomePage.tsx index e437e9a43..303472002 100644 --- a/src-ts/tools/learn/welcome/WelcomePage.tsx +++ b/src-ts/tools/learn/welcome/WelcomePage.tsx @@ -13,8 +13,8 @@ import { import { CoursesCard } from './courses-card' import { ProgressBlock } from './progress-block' -import styles from './WelcomePage.module.scss' import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg' +import styles from './WelcomePage.module.scss' const WelcomePage: FC<{}> = () => {