From fd7433c4612a697aa8c4700a68ced554d4ccbc3f Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Thu, 30 Nov 2023 15:16:23 -0500 Subject: [PATCH 01/15] Add 'Donate' to the About section --- client/modules/IDE/components/About.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx index e9a17f141d..9d2459c48b 100644 --- a/client/modules/IDE/components/About.jsx +++ b/client/modules/IDE/components/About.jsx @@ -162,6 +162,20 @@ function About(props) { Discord

+

+ + +

Date: Sat, 9 Dec 2023 19:28:11 +0900 Subject: [PATCH 02/15] add fundraiser section to header nav --- client/modules/IDE/components/Header/Nav.jsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx index b4f7cb151f..040ad1afa2 100644 --- a/client/modules/IDE/components/Header/Nav.jsx +++ b/client/modules/IDE/components/Header/Nav.jsx @@ -24,6 +24,7 @@ import { newFile, newFolder, showKeyboardShortcutModal, + showFundraiserModal, startSketch, stopSketch } from '../../actions/ide'; @@ -37,6 +38,7 @@ const Nav = ({ layout }) => ( matches ? ( + ) : ( @@ -85,6 +87,23 @@ const UserMenu = () => { return null; }; +const FundraiserSection = () => { + const dispatch = useDispatch(); + + return ( + <> + + + ); +}; + const DashboardMenu = () => { const { t } = useTranslation(); const editorLink = useSelector(selectSketchPath); From 1df1492caaaa2e54817ae8eb5d2922ebcefe116c Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Sat, 9 Dec 2023 19:28:51 +0900 Subject: [PATCH 03/15] create fundraiser modal and add it to IDEOverlays --- .../IDE/components/FundraiserModal.jsx | 20 +++++++++++++++++++ client/modules/IDE/components/IDEOverlays.jsx | 12 +++++++++++ 2 files changed, 32 insertions(+) create mode 100644 client/modules/IDE/components/FundraiserModal.jsx diff --git a/client/modules/IDE/components/FundraiserModal.jsx b/client/modules/IDE/components/FundraiserModal.jsx new file mode 100644 index 0000000000..4fa232342e --- /dev/null +++ b/client/modules/IDE/components/FundraiserModal.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import SquareLogoIcon from '../../../images/p5js-square-logo.svg'; + +export default function FundraiserModal() { + const { t } = useTranslation(); + + return ( +

+

{t('Fundraiser.Description')}

+ +

{t('Fundraiser.CallToAction')}

+
+ ); +} diff --git a/client/modules/IDE/components/IDEOverlays.jsx b/client/modules/IDE/components/IDEOverlays.jsx index 6dba0e76f5..789caeb753 100644 --- a/client/modules/IDE/components/IDEOverlays.jsx +++ b/client/modules/IDE/components/IDEOverlays.jsx @@ -5,6 +5,7 @@ import { useLocation, useParams } from 'react-router-dom'; import Overlay from '../../App/components/Overlay'; import { closeKeyboardShortcutModal, + closeFundraiserModal, closePreferences, closeShareModal, hideErrorModal @@ -14,6 +15,7 @@ import AddToCollectionList from './AddToCollectionList'; import ErrorModal from './ErrorModal'; import Feedback from './Feedback'; import KeyboardShortcutModal from './KeyboardShortcutModal'; +import FundraiserModal from './FundraiserModal'; import NewFileModal from './NewFileModal'; import NewFolderModal from './NewFolderModal'; import Preferences from './Preferences'; @@ -33,6 +35,7 @@ export default function IDEOverlays() { uploadFileModalVisible, preferencesIsVisible, keyboardShortcutVisible, + fundraiserContentVisible, shareModalVisible, shareModalProjectId, shareModalProjectName, @@ -106,6 +109,15 @@ export default function IDEOverlays() { )} + {fundraiserContentVisible && ( + dispatch(closeFundraiserModal())} + > + + + )} {errorType && ( Date: Sat, 9 Dec 2023 19:29:59 +0900 Subject: [PATCH 04/15] en-us text for fundraiser description --- translations/locales/en-US/translations.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index e6877b0f58..faa969d758 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -201,6 +201,11 @@ "TurnOffAccessibleOutput": "Turn Off Accessible Output" } }, + "Fundraiser": { + "Title": "Support p5.js", + "Description": "🎉 Join us in celebrating a Decade of Code! 🎉 Support p5.js and earn unique rewards. 🙂", + "CallToAction": "Contribute and learn more!" + }, "Sidebar": { "Title": "Sketch Files", "ToggleARIA": "Toggle open/close sketch file options", From 6ebf37f1c8bbf276b3ac1faf50043f06df959d71 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Sat, 9 Dec 2023 19:30:32 +0900 Subject: [PATCH 05/15] add constants, reducers, and actions --- client/constants.js | 2 ++ client/modules/IDE/actions/ide.js | 12 ++++++++++++ client/modules/IDE/reducers/ide.js | 5 +++++ 3 files changed, 19 insertions(+) diff --git a/client/constants.js b/client/constants.js index 565d716fa6..4529d25efb 100644 --- a/client/constants.js +++ b/client/constants.js @@ -90,6 +90,8 @@ export const SHOW_EDITOR_OPTIONS = 'SHOW_EDITOR_OPTIONS'; export const CLOSE_EDITOR_OPTIONS = 'CLOSE_EDITOR_OPTIONS'; export const SHOW_KEYBOARD_SHORTCUT_MODAL = 'SHOW_KEYBOARD_SHORTCUT_MODAL'; export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL'; +export const SHOW_FUNDRAISER_MODAL = 'SHOW_FUNDRAISER_MODAL'; +export const CLOSE_FUNDRAISER_MODAL = 'CLOSE_FUNDRAISER_MODAL'; export const SHOW_TOAST = 'SHOW_TOAST'; export const HIDE_TOAST = 'HIDE_TOAST'; export const SET_TOAST_TEXT = 'SET_TOAST_TEXT'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 80a43443bc..7a23535713 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -184,6 +184,18 @@ export function closeKeyboardShortcutModal() { }; } +export function showFundraiserModal() { + return { + type: ActionTypes.SHOW_FUNDRAISER_MODAL + }; +} + +export function closeFundraiserModal() { + return { + type: ActionTypes.CLOSE_FUNDRAISER_MODAL + }; +} + export function setUnsavedChanges(value) { return { type: ActionTypes.SET_UNSAVED_CHANGES, diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 8d45b8b50a..fd0e6b5708 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/client/modules/IDE/reducers/ide.js @@ -15,6 +15,7 @@ const initialState = { shareModalProjectName: 'My Cute Sketch', shareModalProjectUsername: 'p5_user', keyboardShortcutVisible: false, + fundraiserContentVisible: false, unsavedChanges: false, infiniteLoop: false, previewIsRefreshing: false, @@ -85,6 +86,10 @@ const ide = (state = initialState, action) => { return Object.assign({}, state, { keyboardShortcutVisible: true }); case ActionTypes.CLOSE_KEYBOARD_SHORTCUT_MODAL: return Object.assign({}, state, { keyboardShortcutVisible: false }); + case ActionTypes.SHOW_FUNDRAISER_MODAL: + return Object.assign({}, state, { fundraiserContentVisible: true }); + case ActionTypes.CLOSE_FUNDRAISER_MODAL: + return Object.assign({}, state, { fundraiserContentVisible: false }); case ActionTypes.SET_UNSAVED_CHANGES: return Object.assign({}, state, { unsavedChanges: action.value }); case ActionTypes.DETECT_INFINITE_LOOPS: From fe0bcf2447265a9af5b923fc6ba7d054077b949d Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Sat, 9 Dec 2023 19:31:00 +0900 Subject: [PATCH 06/15] add styling for fundraiser related components --- client/styles/abstracts/_variables.scss | 1 + client/styles/components/_fundraiser.scss | 13 +++++++++++++ client/styles/components/_nav.scss | 9 +++++++++ client/styles/main.scss | 1 + 4 files changed, 24 insertions(+) create mode 100644 client/styles/components/_fundraiser.scss diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 17cd04bab8..a520adb9dc 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -50,6 +50,7 @@ $themes: ( button-nav-inactive-color: $middle-gray, button-hover-color: $lightest, button-active-color: $lightest, + fundraiser-button-color: $p5js-pink, modal-background-color: $light, preferences-button-background-color: $medium-light, modal-border-color: $middle-light, diff --git a/client/styles/components/_fundraiser.scss b/client/styles/components/_fundraiser.scss new file mode 100644 index 0000000000..aa4f661209 --- /dev/null +++ b/client/styles/components/_fundraiser.scss @@ -0,0 +1,13 @@ +.fundraiser { + padding: #{20 / $base-font-size}rem; + margin-right: #{20 / $base-font-size}rem; + padding-bottom: #{40 / $base-font-size}rem; + width: #{500 / $base-font-size}rem; + text-align: center; + overflow-y: auto; +} + +.fundraiser__description { + margin: #{20 / $base-font-size}rem 0; + font-size: #{20 / $base-font-size}rem; +} \ No newline at end of file diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 69f267955e..ba7aea6ce2 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -23,6 +23,15 @@ align-items: center; } +.nav__fundraiser-btn { + font-weight: bold; + font-size: #{14 / $base-font-size}rem; + @include themify() { + color: getThemifyVariable('fundraiser-button-color'); + } +} + + .preview-nav__editor-svg { @include icon(); } diff --git a/client/styles/main.scss b/client/styles/main.scss index 9018fe6273..96d279d964 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -43,6 +43,7 @@ @import 'components/asset-list'; @import 'components/asset-size'; @import 'components/keyboard-shortcuts'; +@import 'components/fundraiser'; @import 'components/copyable-input'; @import 'components/feedback'; @import 'components/console-input'; From 067170d22b912950fc74a17648dfbda6ce5fe779 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Sat, 9 Dec 2023 19:31:44 +0900 Subject: [PATCH 07/15] add fundraiserContentVisible variable to testReduxStore --- client/testData/testReduxStore.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/testData/testReduxStore.js b/client/testData/testReduxStore.js index 6af5989a66..551edb742b 100644 --- a/client/testData/testReduxStore.js +++ b/client/testData/testReduxStore.js @@ -35,6 +35,7 @@ const initialTestState = { shareModalProjectName: 'My Cute Sketch', shareModalProjectUsername: 'p5_user', keyboardShortcutVisible: false, + fundraiserContentVisible: false, unsavedChanges: false, infiniteLoop: false, previewIsRefreshing: false, From 8ccf8f0920cc824d1a644eb8623a4088dfe751c2 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Sat, 9 Dec 2023 19:53:12 +0900 Subject: [PATCH 08/15] update nav snapshot --- .../Header/__snapshots__/Nav.unit.test.jsx.snap | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap index 3b55bfae67..f65623ea08 100644 --- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap +++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap @@ -39,6 +39,13 @@ exports[`Nav renders dashboard version for desktop 1`] = ` + @@ -666,6 +673,13 @@ exports[`Nav renders editor version for desktop 1`] = ` + From 2b286ca265e31bb18de47e7dbb51719d267a8eaf Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Wed, 13 Dec 2023 09:13:49 +0900 Subject: [PATCH 09/15] add pf logo and update cta styling --- client/images/processing-foundation-logo.svg | 5 +++ .../IDE/components/FundraiserModal.jsx | 32 ++++++++++++----- client/styles/abstracts/_variables.scss | 11 +++++- client/styles/components/_fundraiser.scss | 35 ++++++++++++++++++- client/styles/components/_nav.scss | 2 +- 5 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 client/images/processing-foundation-logo.svg diff --git a/client/images/processing-foundation-logo.svg b/client/images/processing-foundation-logo.svg new file mode 100644 index 0000000000..12fa2acbd7 --- /dev/null +++ b/client/images/processing-foundation-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/modules/IDE/components/FundraiserModal.jsx b/client/modules/IDE/components/FundraiserModal.jsx index 4fa232342e..fbbc931c53 100644 --- a/client/modules/IDE/components/FundraiserModal.jsx +++ b/client/modules/IDE/components/FundraiserModal.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import SquareLogoIcon from '../../../images/p5js-square-logo.svg'; +import LogoIcon from '../../../images/p5js-logo.svg'; +import PFLogoIcon from '../../../images/processing-foundation-logo.svg'; export default function FundraiserModal() { const { t } = useTranslation(); @@ -8,13 +9,28 @@ export default function FundraiserModal() { return (

{t('Fundraiser.Description')}

- -

{t('Fundraiser.CallToAction')}

+
+ + +
+ + {t('Fundraiser.CallToAction')} +
); } diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index a520adb9dc..e3c539e0dc 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -50,7 +50,10 @@ $themes: ( button-nav-inactive-color: $middle-gray, button-hover-color: $lightest, button-active-color: $lightest, - fundraiser-button-color: $p5js-pink, + fundraiser-button-nav-color: $p5js-pink, + fundraiser-button-background-color: $p5js-pink, + fundraiser-button-color: $white, + fundraiser-button-hover-active-color: $medium-dark, modal-background-color: $light, preferences-button-background-color: $medium-light, modal-border-color: $middle-light, @@ -165,6 +168,9 @@ $themes: ( editor-gutter-color: $darker, file-hover-color: $dark, file-selected-color: $medium-dark, + fundraiser-button-background-color: $p5js-pink, + fundraiser-button-color: $white, + fundraiser-button-hover-active-color: $medium-dark, input-text-color: $lightest, input-background-color: $dark, input-secondary-background-color: $medium-dark, @@ -259,6 +265,9 @@ $themes: ( editor-gutter-color: $darker, file-hover-color: $dark, file-selected-color: $medium-dark, + fundraiser-button-background-color: $yellow, + fundraiser-button-color: $dark, + fundraiser-button-hover-active-color: $medium-light, input-text-color: $lightest, input-background-color: $dark, input-secondary-background-color: $medium-dark, diff --git a/client/styles/components/_fundraiser.scss b/client/styles/components/_fundraiser.scss index aa4f661209..eac08704b7 100644 --- a/client/styles/components/_fundraiser.scss +++ b/client/styles/components/_fundraiser.scss @@ -2,12 +2,45 @@ padding: #{20 / $base-font-size}rem; margin-right: #{20 / $base-font-size}rem; padding-bottom: #{40 / $base-font-size}rem; - width: #{500 / $base-font-size}rem; + width: #{525 / $base-font-size}rem; text-align: center; overflow-y: auto; } +.fundraiser__CTA { + font-size: #{23 / $base-font-size}rem; + font-weight: bold; + margin-top: #{10 / $base-font-size}rem; + padding: #{20 / $base-font-size}rem; + border-radius: #{35 / $base-font-size}rem; + + @include themify() { + color: getThemifyVariable('fundraiser-button-color'); + background-color: getThemifyVariable('fundraiser-button-background-color'); + } + + &:hover, + &:focus { + @include themify() { + color: getThemifyVariable('fundraiser-button-color'); + background-color: getThemifyVariable('fundraiser-button-hover-active-color'); + } + } +} + .fundraiser__description { margin: #{20 / $base-font-size}rem 0; font-size: #{20 / $base-font-size}rem; +} + +.fundraiser__img-container { + display: flex; + justify-content: center; + margin: #{40 / $base-font-size}rem 0; +} + +.fundraiser__logo { + margin:0 #{30 / $base-font-size}rem; + width:#{150 / $base-font-size}rem; + height:#{150 / $base-font-size}rem; } \ No newline at end of file diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index ba7aea6ce2..4ca31ee872 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -27,7 +27,7 @@ font-weight: bold; font-size: #{14 / $base-font-size}rem; @include themify() { - color: getThemifyVariable('fundraiser-button-color'); + color: getThemifyVariable('fundraiser-button-nav-color'); } } From b68a73172adb55c03723557ba61753c6fdf6ca91 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Wed, 13 Dec 2023 09:14:31 +0900 Subject: [PATCH 10/15] add fundraiser nav text to translations --- client/modules/IDE/components/Header/Nav.jsx | 3 ++- translations/locales/en-US/translations.json | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx index 040ad1afa2..591f9b5740 100644 --- a/client/modules/IDE/components/Header/Nav.jsx +++ b/client/modules/IDE/components/Header/Nav.jsx @@ -88,6 +88,7 @@ const UserMenu = () => { }; const FundraiserSection = () => { + const { t } = useTranslation(); const dispatch = useDispatch(); return ( @@ -98,7 +99,7 @@ const FundraiserSection = () => { aria-label="2023-fundraiser-button" title="2023 Fundraiser Button" > - Celebrate a Decade of Code and Support p5.js! + {t('Nav.Fundraiser')} ); diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index faa969d758..f983254a4b 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -45,7 +45,8 @@ "Asset": "Asset", "MyAssets": "My Assets", "LogOut": "Log Out" - } + }, + "Fundraiser": "Support p5.js and the Processing Foundation!" }, "CodemirrorFindAndReplace": { "ToggleReplace": "Toggle Replace", @@ -202,8 +203,8 @@ } }, "Fundraiser": { - "Title": "Support p5.js", - "Description": "🎉 Join us in celebrating a Decade of Code! 🎉 Support p5.js and earn unique rewards. 🙂", + "Title": "Support Our Software and Team", + "Description": "🎉 Join us in celebrating a Decade of Code! 🎉 Support p5.js and the Processing Foundation and earn unique rewards. 🙂", "CallToAction": "Contribute and learn more!" }, "Sidebar": { From 8ab85b8456fed585f2ea4e21207cde9370c40c8f Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Wed, 13 Dec 2023 09:24:17 +0900 Subject: [PATCH 11/15] update nav snapshot --- .../components/Header/__snapshots__/Nav.unit.test.jsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap index f65623ea08..017f45bdd6 100644 --- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap +++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap @@ -44,7 +44,7 @@ exports[`Nav renders dashboard version for desktop 1`] = ` class="nav__fundraiser-btn" title="2023 Fundraiser Button" > - Celebrate a Decade of Code and Support p5.js! + Support p5.js and the Processing Foundation! @@ -678,7 +678,7 @@ exports[`Nav renders editor version for desktop 1`] = ` class="nav__fundraiser-btn" title="2023 Fundraiser Button" > - Celebrate a Decade of Code and Support p5.js! + Support p5.js and the Processing Foundation! From 00b8a48f5d5d8ff7973ec5c31422d4dad54bb491 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Wed, 13 Dec 2023 10:04:33 +0900 Subject: [PATCH 12/15] update aria label for processing foundation logo --- client/modules/IDE/components/FundraiserModal.jsx | 2 +- translations/locales/en-US/translations.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/FundraiserModal.jsx b/client/modules/IDE/components/FundraiserModal.jsx index fbbc931c53..ace4662255 100644 --- a/client/modules/IDE/components/FundraiserModal.jsx +++ b/client/modules/IDE/components/FundraiserModal.jsx @@ -19,7 +19,7 @@ export default function FundraiserModal() { diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index f983254a4b..a3dde037de 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -236,6 +236,7 @@ "ErrorARIA": "Error", "Save": "Save", "p5logoARIA": "p5.js Logo", + "PFlogoARIA": "Processing Foundation Logo", "DeleteConfirmation": "Are you sure you want to delete {{name}}?" }, "IDEView": { From 5bf63f75f30abdcbab19e6fb5cfd7711d5cbf57d Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Wed, 13 Dec 2023 23:14:39 +0900 Subject: [PATCH 13/15] update PF logo --- client/images/processing-foundation-logo.svg | 1028 ++++++++++++++++- .../IDE/components/FundraiserModal.jsx | 4 +- client/styles/components/_fundraiser.scss | 8 +- 3 files changed, 1033 insertions(+), 7 deletions(-) diff --git a/client/images/processing-foundation-logo.svg b/client/images/processing-foundation-logo.svg index 12fa2acbd7..013501f44e 100644 --- a/client/images/processing-foundation-logo.svg +++ b/client/images/processing-foundation-logo.svg @@ -1,5 +1,1025 @@ - - - - + + + diff --git a/client/modules/IDE/components/FundraiserModal.jsx b/client/modules/IDE/components/FundraiserModal.jsx index ace4662255..2b6d3f4fb6 100644 --- a/client/modules/IDE/components/FundraiserModal.jsx +++ b/client/modules/IDE/components/FundraiserModal.jsx @@ -11,13 +11,13 @@ export default function FundraiserModal() {

{t('Fundraiser.Description')}

Date: Wed, 13 Dec 2023 23:33:42 +0900 Subject: [PATCH 14/15] update logo styling --- client/styles/components/_fundraiser.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/client/styles/components/_fundraiser.scss b/client/styles/components/_fundraiser.scss index ac806a13b2..03119c4f86 100644 --- a/client/styles/components/_fundraiser.scss +++ b/client/styles/components/_fundraiser.scss @@ -36,17 +36,18 @@ .fundraiser__img-container { display: flex; justify-content: center; - margin: #{40 / $base-font-size}rem 0; + margin: #{40 / $base-font-size}rem 0 #{55 / $base-font-size}rem 0; } .fundraiser__logo-p5 { - margin:0 #{30 / $base-font-size}rem; + margin: 0 #{15 / $base-font-size}rem 0 #{30 / $base-font-size}rem; width:#{150 / $base-font-size}rem; height:#{150 / $base-font-size}rem; } .fundraiser__logo-PF { - margin:0 #{30 / $base-font-size}rem; - width:#{270 / $base-font-size}rem; + margin-left: #{20 / $base-font-size}rem; + padding-bottom: #{15 / $base-font-size}rem; + width:#{250 / $base-font-size}rem; height:#{150 / $base-font-size}rem; } \ No newline at end of file From 1602c00d84b04e47d3f6b49760aba0b0d346fc30 Mon Sep 17 00:00:00 2001 From: Rachel Lim Date: Fri, 15 Dec 2023 18:33:51 +0900 Subject: [PATCH 15/15] add mobile ver and update nav snapshot --- client/modules/IDE/components/Header/MobileNav.jsx | 6 +++++- .../Header/__snapshots__/Nav.unit.test.jsx.snap | 14 ++++++++++++++ client/styles/components/_fundraiser.scss | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx index 5f86233101..eeef49e3c6 100644 --- a/client/modules/IDE/components/Header/MobileNav.jsx +++ b/client/modules/IDE/components/Header/MobileNav.jsx @@ -23,7 +23,8 @@ import { newFile, newFolder, openPreferences, - showKeyboardShortcutModal + showKeyboardShortcutModal, + showFundraiserModal } from '../../actions/ide'; import { logoutUser } from '../../../User/actions'; import { useSketchActions, useWhatPage } from '../../hooks'; @@ -434,6 +435,9 @@ const MoreMenu = () => { {t('Nav.Help.Reference')} {t('Nav.Help.About')} + dispatch(showFundraiserModal())}> + {t('Nav.Fundraiser')} +
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap index 017f45bdd6..81161448d8 100644 --- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap +++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap @@ -457,6 +457,13 @@ exports[`Nav renders dashboard version for mobile 1`] = ` About +
  • + +
    • @@ -1091,6 +1098,13 @@ exports[`Nav renders editor version for mobile 1`] = ` About +
  • + +
    • diff --git a/client/styles/components/_fundraiser.scss b/client/styles/components/_fundraiser.scss index 03119c4f86..2d3a989782 100644 --- a/client/styles/components/_fundraiser.scss +++ b/client/styles/components/_fundraiser.scss @@ -2,7 +2,7 @@ padding: #{20 / $base-font-size}rem; margin-right: #{20 / $base-font-size}rem; padding-bottom: #{40 / $base-font-size}rem; - width: #{525 / $base-font-size}rem; + width: #{500 / $base-font-size}rem; text-align: center; overflow-y: auto; }