scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-21 10:18:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #8914 from scratchfoundation/fix/onboarding-styling-issues

Browse source 
fix: styling issues
This commit is contained in:
Miroslav Dionisiev 2024-11-12 17:45:04 +02:00 committed by GitHub
commit 3f0d6f4239
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 53 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/journeys/project-journey/project-journey.scss → src/components/journeys/common-journey.scss
View file

@ -1,19 +1,27 @@
@import "../../../colors";
@import "../../colors";
.driver-popover.tutorials-highlight,
.driver-popover.project-journey {
display: flex;
flex-direction: column;
display: flex !important;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
background-color: $ui-purple-dark;
padding: 0.5rem;
.driver-popover-close-btn {
display: flex !important;
justify-content: center;
align-items: center;
position: relative;
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white;
background-color: $ui-purple-dark;
.close-btn-img {
height: 1.25rem;
width: 1.25rem;
}
}
.driver-popover-arrow-side-left.driver-popover-arrow {

16
src/components/journeys/driver-journey/driver-journey.jsx
View file

@ -20,6 +20,19 @@ const DriverJourney = ({configProps, driverObj}) => {
callback();
}
const portalData = [];
const closeButton = document.getElementsByClassName('driver-popover-close-btn')[0];
if (closeButton) {
closeButton.textContent = '';
const closeButtonImage = document.createElement('img');
closeButtonImage.src = '/svgs/modal/close-x.svg';
closeButtonImage.className = 'close-btn-img';
closeButton.appendChild(closeButtonImage);
closeButton.addEventListener('click', () => driverObj.destroy());
}
for (const [section, component] of Object.entries(
sectionComponents
)) {
@ -62,7 +75,8 @@ DriverJourney.propTypes = {
}),
driverObj: PropTypes.shape({
setConfig: PropTypes.func,
drive: PropTypes.func
drive: PropTypes.func,
destroy: PropTypes.func
})
};

4
src/components/journeys/editor-journey/editor-journey.jsx
View file

@ -18,7 +18,7 @@ const messages = defineMessages({
},
projectGenreStepTitle: {
id: 'gui.journey.controls.choose.projectGenre',
defaultMessage: 'What do you whant to create?',
defaultMessage: 'What do you want to create?',
description: 'Choose project genre step title'
},
typeStepTitle: {
@ -151,7 +151,7 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou
editorJourneyStep: editorJourneyStep
});
driverObj.moveTo(stepNumber);
}, driverObj);
}, [driverObj]);
const createStep = useCallback((projectId, tutorialId) => ({
title: intl.formatMessage(messages.createStepTitle),

12
src/components/journeys/editor-journey/editor-journey.scss
View file

@ -2,7 +2,6 @@
@import "../../../frameless";
.driver-popover.gui-journey {
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
max-width: unset;
padding: 0;
border-radius: 15px;
@ -11,20 +10,27 @@
transform: translate(-50%, -50%);
.driver-popover-close-btn {
display: flex !important;
justify-content: center;
align-items: center;
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white;
background-color: $ui-aqua-dark;
.close-btn-img {
height: 1.25rem;
width: 1.25rem;
}
}
.driver-popover-title {
padding: 1rem 0;
font-size: 1rem;
font-weight: 700;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
text-align: center;
color: $type-white;
margin: 0;

2
src/components/journeys/project-journey/project-journey.jsx
View file

@ -4,7 +4,7 @@ const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl');
const {useState} = require('react');
const PropTypes = require('prop-types');
require('./project-journey.scss');
require('../common-journey.scss');
const messages = defineMessages({
playProject: {

2
src/components/journeys/tutorials-highlight/tutorials-highlight.jsx
View file

@ -4,7 +4,7 @@ const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl');
const PropTypes = require('prop-types');
const {useState} = require('react');
require('./tutorials-highlight.scss');
require('../common-journey.scss');
const messages = defineMessages({
tutorialsHighlight: {

41
src/components/journeys/tutorials-highlight/tutorials-highlight.scss
View file

@ -1,41 +0,0 @@
@import "../../../colors";
.driver-popover.tutorials-highlight {
display: flex;
flex-direction: column;
background-color: $ui-purple-dark;
.driver-popover-close-btn {
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
margin: 0.5rem;
font-size: 2rem;
font-weight: bold;
color: $type-white;
background-color: $ui-purple-dark;
}
.driver-popover-arrow-side-left.driver-popover-arrow {
border-left-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-right.driver-popover-arrow {
border-right-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-top.driver-popover-arrow {
border-top-color: $ui-purple-dark;;
}
.driver-popover-arrow-side-bottom.driver-popover-arrow {
border-bottom-color: $ui-purple-dark;;
}
.driver-popover-description {
color: $ui-white;
font-size: 1rem;
font-weight: 700;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
}

13
src/lib/onboarding.js
View file

@ -39,9 +39,14 @@ const isUserEligible = (user, permissions) =>
!isBanned(user);
const calculateAgeGroup = (birthYear, birthMonth) => {
if (!birthMonth || !birthYear) {
return '[unset]';
}
const today = new Date();
let age = today.getFullYear() - parseInt(birthYear, 10);
const monthDiff = today.getMonth() + 1 - parseInt(birthMonth, 10);
let age = today.getFullYear() - birthYear;
const monthDiff = today.getMonth() + 1 - birthMonth;
if (monthDiff < 0) {
age--;
}
@ -71,6 +76,8 @@ export const triggerAnalyticsEvent = eventVaribles => {
};
export const sendUserProperties = (user, permissions) => {
window.dataLayer = window.dataLayer || [];
if (!isUserEligible(user, permissions)) {
window.dataLayer.push({
testGroup: null,
@ -80,8 +87,6 @@ export const sendUserProperties = (user, permissions) => {
return;
}
window.dataLayer = window.dataLayer || [];
const {gender, birthYear, birthMonth} = user;
window.dataLayer.push({