diff --git a/src/_colors.scss b/src/_colors.scss index ad8b3a9165e..58608c9301d 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -25,6 +25,9 @@ $background-color: hsla(0, 0%, 99%, 1); //#FDFDFD $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC +$ui-light-blue: hsla(195, 63%, 86%, 1); //#C5E7f2 +$ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F + /* UI Secondary Colors */ /* 3.0 colors */ /* Using www naming convention for now, should be consistent with gui */ @@ -48,6 +51,7 @@ $ui-light-primary: hsl(215, 100%, 95%); $ui-light-primary-transparent: hsla(215, 100%, 95%, 0); $ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9 +$ui-border-light-blue: hsla(215, 50%, 90%, 1); //#D9E3F2 /* modals */ $ui-mint-green: hsl(163, 69%, 44%); diff --git a/src/components/welcome/welcome.jsx b/src/components/welcome/welcome.jsx index 1606a229c23..fcb8f1f6c04 100644 --- a/src/components/welcome/welcome.jsx +++ b/src/components/welcome/welcome.jsx @@ -18,54 +18,42 @@ const Welcome = props => ( moreTitle="x" title={props.messages['welcome.welcomeToScratch']} > -
-

- - {props.messages['welcome.learn']} - -

+
+ {props.messages['welcome.explore']} Get Started -
-
-

- - {props.messages['welcome.tryOut']} - -

- + + {props.messages['welcome.community']} Starter Projects -
-
-

- - {props.messages['welcome.connect']} - -

- + + {props.messages['welcome.create']} Connect
@@ -75,9 +63,9 @@ const Welcome = props => ( Welcome.propTypes = { messages: PropTypes.shape({ 'welcome.welcomeToScratch': PropTypes.string, - 'welcome.learn': PropTypes.string, - 'welcome.tryOut': PropTypes.string, - 'welcome.connect': PropTypes.string + 'welcome.explore': PropTypes.string, + 'welcome.community': PropTypes.string, + 'welcome.create': PropTypes.string }), onDismiss: PropTypes.func, permissions: PropTypes.object, @@ -87,9 +75,9 @@ Welcome.propTypes = { Welcome.defaultProps = { messages: { 'welcome.welcomeToScratch': 'Welcome to Scratch!', - 'welcome.learn': 'Learn how to make a project in Scratch', - 'welcome.tryOut': 'Try out starter projects', - 'welcome.connect': 'Connect with other Scratchers' + 'welcome.explore': 'Explore Starter Projects', + 'welcome.community': 'Learn about the community', + 'welcome.create': 'Create a Project' } }; diff --git a/src/components/welcome/welcome.scss b/src/components/welcome/welcome.scss index 23065338205..15c358d1062 100644 --- a/src/components/welcome/welcome.scss +++ b/src/components/welcome/welcome.scss @@ -2,76 +2,48 @@ .welcome { .box-content { - padding: 0; - } - - .welcome-col { - display: inline-block; - margin: 10px 15px; - width: 150px; - height: 253px; - - h4 { - margin-top: 12px; - padding: 0; - font-weight: 200; - } - - > a { - display: block; - margin-top: 20px; - margin-bottom: 35px; - height: 100px; - } + display: flex ; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 1 100%; - $color-bars: "h4:before, > a:after"; + padding: 0; - #{$color-bars} { - display: block; - margin: 10px 0; - border-radius: 5px; + .welcome-banner { width: 100%; - height: 10px; - content: ""; - } - - img { - display: block; - max-width: 133px; - max-height: 100px; - } - - &.blue { - #{$color-bars} { - background-color: $ui-blue; - } - - a { - color: $ui-blue; - } - - img { - margin-left: 4px; - } - } - - &.green { - #{$color-bars} { - background-color: $ui-aqua; - } - - a { - color: $ui-aqua; - } + font-size: 0.875rem; + font-weight: 500; + line-height: 1.125rem; + text-align: center; + color: $ui-cyan-blue; + background-color: $ui-light-blue; + padding: 0.625rem 0; } - &.pink { - #{$color-bars} { - background-color: $ui-purple; - } - - a { - color: $ui-purple; + .welcome-options { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + + padding: 1.5rem 0; + + .welcome-option-button { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + + width: 10rem; + height: 13rem; + + border: 1px solid $ui-border-light-blue; + border-radius: 20px; + + text-align: center; } } } diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json index 79bc1e3bcb5..bd897708a78 100644 --- a/src/views/splash/l10n.json +++ b/src/views/splash/l10n.json @@ -51,9 +51,9 @@ "hocbanner.animateACharacter": "Animate a Character", "welcome.welcomeToScratch": "Welcome to Scratch!", - "welcome.learn": "Learn how to make a project in Scratch", - "welcome.tryOut": "Try out starter projects", - "welcome.connect": "Connect with other Scratchers", + "welcome.explore": "Explore Starter Projects", + "welcome.community": "Learn about the community", + "welcome.create": "Create a Project", "activity.seeUpdates": "This is where you will see updates from Scratchers you follow", "activity.checkOutScratchers": "Check out some Scratchers you might like to follow", diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 90296fe9190..a1bb9af6085 100644 --- a/src/views/splash/presentation.jsx +++ b/src/views/splash/presentation.jsx @@ -335,9 +335,9 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ 'general.viewAll': formatMessage({id: 'general.viewAll'}), 'news.scratchNews': formatMessage({id: 'news.scratchNews'}), 'welcome.welcomeToScratch': formatMessage({id: 'welcome.welcomeToScratch'}), - 'welcome.learn': formatMessage({id: 'welcome.learn'}), - 'welcome.tryOut': formatMessage({id: 'welcome.tryOut'}), - 'welcome.connect': formatMessage({id: 'welcome.connect'}), + 'welcome.explore': formatMessage({id: 'welcome.explore'}), + 'welcome.community': formatMessage({id: 'welcome.community'}), + 'welcome.create': formatMessage({id: 'welcome.create'}), 'intro.aboutScratch': formatMessage({id: 'intro.aboutScratch'}), 'intro.forEducators': formatMessage({id: 'intro.forEducators'}), 'intro.forParents': formatMessage({id: 'intro.forParents'}), diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index 647258bd13e..89a54e82799 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -33,6 +33,11 @@ } } + .box.welcome { + display: flex; + flex-direction: column; + } + .news { width: 40%; diff --git a/static/images/create_a_project.svg b/static/images/create_a_project.svg new file mode 100644 index 00000000000..737df13ae67 --- /dev/null +++ b/static/images/create_a_project.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/explore_starter_projects.svg b/static/images/explore_starter_projects.svg new file mode 100644 index 00000000000..0fee9d26746 --- /dev/null +++ b/static/images/explore_starter_projects.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn_about_the_community.svg b/static/images/learn_about_the_community.svg new file mode 100644 index 00000000000..7a230cd87bc --- /dev/null +++ b/static/images/learn_about_the_community.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/welcome-connect.png b/static/images/welcome-connect.png deleted file mode 100644 index 2ff63822d5a..00000000000 Binary files a/static/images/welcome-connect.png and /dev/null differ diff --git a/static/images/welcome-learn.png b/static/images/welcome-learn.png deleted file mode 100644 index 8717acd00f0..00000000000 Binary files a/static/images/welcome-learn.png and /dev/null differ diff --git a/static/images/welcome-try.png b/static/images/welcome-try.png deleted file mode 100644 index 351a648b417..00000000000 Binary files a/static/images/welcome-try.png and /dev/null differ