Merge remote-tracking branch 'origin/develop' into release/2023-06-27

2024-11-23 15:47:53 -05:00 · 2023-06-27 00:31:56 +00:00 · 2023-06-27 00:31:56 +00:00 · 5ef9fc9865
commit 5ef9fc9865
parent 86415ec7ee 006f744063
74 changed files with 287 additions and 26951 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -128,6 +128,7 @@ workflows:
            branches:
              only:
                - develop
+                - beta
                - /^hotfix\/.*/
                - /^release\/.*/
      - integration-tests:
@ -141,6 +142,7 @@ workflows:
            branches:
              only:
                - develop
+                - beta
                - /^hotfix\/.*/
                - /^release\/.*/
      - build-and-deploy-production:
@ -190,5 +192,6 @@ workflows:
              ignore:
                - develop
                - master
+                - beta
                - /^hotfix\/.*/
                - /^release\/.*/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -136,8 +136,8 @@
    "regenerator-runtime": "0.13.9",
    "sass": "1.49.7",
    "sass-loader": "10.2.1",
-    "scratch-gui": "1.9.10",
-    "scratch-l10n": "3.15.20230620032154",
+    "scratch-gui": "2.0.10",
+    "scratch-l10n": "3.15.20230626032211",
    "selenium-webdriver": "4.1.0",
    "slick-carousel": "1.6.0",
    "style-loader": "0.12.3",
--- a/src/_colors.scss
+++ b/src/_colors.scss
@ -13,6 +13,7 @@ $ui-orange-90percent: hsla(38, 100%, 55%, .9);
 $ui-dark-orange: hsla(30, 100%, 55%, 1); // ##FF8C1A Variables Primary

 $ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */
+$ui-red-dark: hsla(20, 100%, 40%, 1); /* #CC4400 */
 $ui-red-25percent: hsla(20, 100%, 55%, .25);
 $ui-green-35percent: rgba(126, 225, 195, .35);

@ -30,8 +31,12 @@ $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
 $ui-aqua: hsla(144, 45%, 36%, 1); 
 $ui-aqua-dark: darken($ui-aqua, 10%);
 $ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary
-$ui-purple-dark: hsla(260, 60%, 60%, 1); // #774DCB Looks Secondary
+$ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary
+$ui-purple-darker: hsla(260, 46%, 54%, 1);
+$ui-purple-10percent: hsla(260, 60%, 60%, .1);
+$ui-purple-25percent: hsla(260, 60%, 60%, .25);
 $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
+$ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */

 $ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
 $ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
@ -64,7 +69,7 @@ $type-gray-75percent: hsla(225, 15%, 40%, .75);
 $type-gray-60percent: hsla(225, 15%, 40%, .6);
 $type-white: hsla(0, 100%, 100%, 1); //#FFF

-$link-blue: $ui-blue;
+$link-purple: $ui-purple-dark;

 /* Down Deep */
 $dd-darkblue: hsla(195, 72.4%, 17.1%, 1);
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@ -35,7 +35,7 @@

            &.has-error {
                .input {
-                    border: 1px solid $ui-orange;
+                    border: 1px solid $ui-red-dark;
                }
            }

--- a/src/components/dropdown-banner/banner.scss
+++ b/src/components/dropdown-banner/banner.scss
@ -37,6 +37,6 @@ $navigation-height: 50px;
    }

    &.warning {
-        background-color: $ui-orange;
+        background-color: $ui-red-dark;
    }    
 }
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@ -7,7 +7,7 @@
    right: 0;
    border: 1px solid $active-gray;
    border-radius: 0 0 5px 5px;
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
    padding: 10px;
    min-width: 9rem;
    max-width: 16.25rem;
@ -16,9 +16,10 @@
    font-size: .8125rem;
    font-weight: normal;

-    &.staging {
-        background-color: $ui-orange;
-    }
+    // Temporary removal of staging styling for testing purposes
+    // &.staging {
+    //     background-color: $ui-orange;
+    // }

    &.open {
        display: block;
@ -82,7 +83,7 @@
            border-left: 1px solid $active-gray;
            border-radius: 5px;

-            background-color: $ui-blue;
+            background-color: $ui-purple-dark;
            width: $arrow-border-width;
            height: $arrow-border-width;

--- a/src/components/formik-forms/formik-input.scss
+++ b/src/components/formik-forms/formik-input.scss
@ -12,17 +12,17 @@
    font-size: .875rem;

    &:focus {
-        box-shadow: 0 0 0 .25rem $ui-blue-25percent;
+        box-shadow: 0 0 0 .25rem $ui-purple-25percent;
        outline: none;
-        border: 1px solid $ui-blue;
+        border: 1px solid $ui-purple-dark;
        transition: all .5s ease, font-size 0s;
    }

    &.fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-red-dark;

        &:focus {
-            box-shadow: 0 0 0 .25rem $ui-orange-25percent;
+            box-shadow: 0 0 0 .25rem $ui-red-25percent;
            outline: none;
        }
    }
--- a/src/components/formik-forms/formik-select.scss
+++ b/src/components/formik-forms/formik-select.scss
@ -2,7 +2,7 @@

 .select {
    .fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-purple-dark;

        &:focus {
            box-shadow: 0 0 0 .25rem $ui-orange-25percent;
--- a/src/components/forms/button.scss
+++ b/src/components/forms/button.scss
@ -9,7 +9,7 @@ $pass-bg: $ui-aqua;
    margin: .5em 0;
    border: 0;
    border-radius: .5rem;
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
    cursor: pointer;
    padding: 1em 1.25em;
    color: $type-white;
@ -24,7 +24,7 @@ $pass-bg: $ui-aqua;
    /* DATA BUTTON STATES */
    &.white {
        background-color: $base-bg;
-        color: $ui-blue;
+        color: $ui-purple-dark;
    }

    &.pass {
--- a/src/components/forms/inplace-input.scss
+++ b/src/components/forms/inplace-input.scss
@ -13,12 +13,12 @@
    &:focus {
        transition: all .5s ease;
        outline: none;
-        border: 2px solid $ui-blue;
-        box-shadow: 0 0 0 4px $ui-blue-25percent;
+        border: 2px solid $ui-purple-dark;
+        box-shadow: 0 0 0 4px $ui-purple-25percent;
    }

    &.fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-red-dark;
    }

    &.pass {
@ -51,12 +51,12 @@
    &:focus {
        transition: all .2s ease;
        outline: none;
-        border: 2px solid $ui-blue;
-        box-shadow: 0 0 0 4px $ui-blue-25percent;
+        border: 2px solid $ui-purple-dark;
+        box-shadow: 0 0 0 4px $ui-purple-25percent;
    }

    &.fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-red-dark;
    }
    
    &::placeholder {
--- a/src/components/forms/input.scss
+++ b/src/components/forms/input.scss
@ -23,11 +23,11 @@ $base-bg: $ui-light-gray;
    &:focus {
        transition: all .5s ease;
        outline: none;
-        border: 1px solid $ui-blue;
+        border: 1px solid $ui-purple-dark;
    }

    &.fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-red-dark;
    }

    &.pass {
--- a/src/components/forms/phone-input.scss
+++ b/src/components/forms/phone-input.scss
@ -15,6 +15,7 @@

            &:focus {
                outline: none;
+                border-color: $ui-purple-dark;
            }
        }
    }
--- a/src/components/forms/select.scss
+++ b/src/components/forms/select.scss
@ -33,7 +33,7 @@

        &:focus {
            outline: none;
-            border: 1px solid $ui-blue;
+            border: 1px solid $ui-purple-dark;
        }

        &:-moz-focusring {
--- a/src/components/forms/textarea.scss
+++ b/src/components/forms/textarea.scss
@ -16,11 +16,11 @@
    &:focus {
        transition: all 1s ease;
        outline: none;
-        border: 1px solid $ui-blue;
+        border: 1px solid $ui-purple-dark;
    }

    &.fail {
-        border: 1px solid $ui-orange;
+        border: 1px solid $ui-red-dark;
    }
    
    &::placeholder {
--- a/src/components/forms/validation-message.scss
+++ b/src/components/forms/validation-message.scss
@ -11,7 +11,7 @@
    margin-left: $arrow-border-width;
    border: 1px solid $active-gray;
    border-radius: 5px;
-    background-color: $ui-orange;
+    background-color: $ui-red-dark;
    padding: 1rem;
    max-width: 18.75rem;
    min-height: 1rem;
@ -32,7 +32,7 @@
        border-left: 1px solid $active-gray;
        border-radius: 5px;

-        background-color: $ui-orange;
+        background-color: $ui-red-dark;
        width: $arrow-border-width;
        height: $arrow-border-width;

@ -73,18 +73,18 @@
 }

 .validation-error {
-    background-color: $ui-orange;
+    background-color: $ui-red-dark;

    &:before {
-        background-color: $ui-orange;
+        background-color: $ui-red-dark;
    }
 }

 .validation-info {
-    background-color: $ui-blue;
+    background-color: $ui-blue-dark;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);

    &:before {
-        background-color: $ui-blue;
+        background-color: $ui-blue-dark;
    }
 }
--- a/src/components/info-button/info-button.scss
+++ b/src/components/info-button/info-button.scss
@ -28,7 +28,7 @@
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);
    padding: .75rem;
    overflow: visible;
-    background-color: $ui-blue;
+    background-color: $ui-blue-dark;
    color: $type-white;
    line-height: 1.25rem;
    text-align: left;
@ -48,7 +48,7 @@
        border-left: 1px solid $active-gray;
        border-radius: 5px;

-        background-color: $ui-blue;
+        background-color: $ui-blue-dark;
        width: $arrow-border-width;
        height: $arrow-border-width;

--- a/src/components/informationpage/informationpage.scss
+++ b/src/components/informationpage/informationpage.scss
@ -8,7 +8,7 @@

    .title-banner {
        &.masthead {
-            background-color: $ui-blue-dark;
+            background-color: $ui-purple-dark;
            padding-bottom: .5rem;

            h1 {
--- a/src/components/intro/intro.scss
+++ b/src/components/intro/intro.scss
@ -12,7 +12,7 @@
    .intro-container {
        min-height: 24rem;
        justify-content: space-between;
-        background-color: $ui-blue;
+        background-color: $ui-purple-dark;
        background-size: 624px 325px;
        background-repeat: no-repeat;
        background-position: right;
@ -80,7 +80,7 @@
    .intro-button {
        border-radius: 4px;
        background-color: $ui-white;
-        color: $ui-blue;
+        color: $ui-purple-dark;
        padding: .625rem .75rem;
        font-size: 1rem;
        margin-right: .75rem;
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@ -9,7 +9,7 @@
    margin-bottom: .5rem;

    &:focus {
-        box-shadow: 0 0 0 .25rem $ui-blue-25percent;
+        box-shadow: 0 0 0 .25rem $ui-purple-25percent;
    }
 }

--- a/src/components/join-flow/next-step-button.scss
+++ b/src/components/join-flow/next-step-button.scss
@ -8,11 +8,11 @@
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height: 5.1875rem;
-    background-color: $ui-orange;
+    background-color: $ui-purple-dark;

    &:hover {
        transition: background-color .25s ease;
-        background-color: $ui-orange-90percent;
+        background-color: $ui-purple-darker;
    }

    /* match the small window setting for modal as a whole */
--- a/src/components/modal/addtostudio/modal.scss
+++ b/src/components/modal/addtostudio/modal.scss
@ -160,15 +160,15 @@ are not obscured by gradient overlay */
 }

 .studio-status-icon-unselected {
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
 }

 .submit-button {
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
 }

 .submit-button-waiting {
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
 }

 .studio-status-icon-plus-img,
--- a/src/components/modal/comments/modal.scss
+++ b/src/components/modal/comments/modal.scss
@ -17,8 +17,8 @@ $medium-and-small: "screen and (max-width : #{$mobileIntermediate}-1)";

 .report-modal-header {
    border-radius: 1rem 1rem 0 0;
-    box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
-    background-color: $ui-coral;
+    box-shadow: inset 0 -1px 0 0 $ui-red-dark;
+    background-color: $ui-red-dark;
    padding-top: .75rem;
    width: 100%;
    height: 3rem;
--- a/src/components/modal/social/modal.scss
+++ b/src/components/modal/social/modal.scss
@ -110,8 +110,8 @@
    &:focus {
        transition: all .2s ease;
        outline: none;
-        border: 2px solid $ui-blue;
-        box-shadow: 0 0 0 4px $ui-blue-25percent;
+        border: 2px solid $ui-purple-dark;
+        box-shadow: 0 0 0 4px $ui-purple-25percent;
    }

    &.social-textarea {
--- a/src/components/navigation/base/navigation.scss
+++ b/src/components/navigation/base/navigation.scss
@ -9,11 +9,12 @@
    border-bottom: 1px solid $active-gray;

    box-shadow: 0 0 3px $box-shadow-gray;
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;

-    &.staging {
-        background-color: $ui-orange;
-    }
+    // Temporary removal of staging styling for testing purposes
+    // &.staging {
+    //     background-color: $ui-orange;
+    // }


    width: 100%;
--- a/src/components/navigation/www/navigation.scss
+++ b/src/components/navigation/www/navigation.scss
@ -2,17 +2,18 @@
@import "../../../frameless";

 #navigation {
-    &.staging {
-        .messages {
-            .message-count {
-                display: none;
+    // Temporary removal of staging styling for testing purposes
+    // &.staging {
+    //     .messages {
+    //         .message-count {
+    //             display: none;

-                &.show {
-                    background-color: $ui-blue;
-                }
-            }
-        }
-    }
+    //             &.show {
+    //                 background-color: $ui-blue;
+    //             }
+    //         }
+    //     }
+    // }

    .logo {
        margin-right: 10px;
--- a/src/components/news/news.scss
+++ b/src/components/news/news.scss
@ -35,7 +35,7 @@
        h4 {
            display: block;
            
-            color: $link-blue;
+            color: $link-purple;
            font-size: .85rem;
        }

--- a/src/components/os-chooser/os-chooser.scss
+++ b/src/components/os-chooser/os-chooser.scss
@ -34,7 +34,7 @@
        }

        &.active {
-            background-color: $ui-blue;
+            background-color: $ui-purple-dark;
        }
    }
 }
--- a/src/components/privacy-banner/privacy-banner.scss
+++ b/src/components/privacy-banner/privacy-banner.scss
@ -8,7 +8,7 @@
 .privacy-banner {
    display: flex;
    z-index: 8;
-    background-color: $ui-blue-dark;
+    background-color: $ui-purple-darker;
    padding: 0;
    overflow: hidden;
    align-items: center;
@ -72,4 +72,4 @@
    .privacy-banner .donate-close-button {
        top: 1rem;
    }
-}
+}
--- a/src/components/social-message/social-message.scss
+++ b/src/components/social-message/social-message.scss
@ -41,7 +41,7 @@ a.social-messages-profile-link {
    color: $type-gray;

    &:hover {
-        color: $link-blue;
+        color: $link-purple;
    }
 }

--- a/src/components/steps/steps.scss
+++ b/src/components/steps/steps.scss
@ -29,7 +29,7 @@
        .step-number {
            display: inline-flex;
            border-radius: 2rem;
-            background-color: $ui-blue;
+            background-color: $ui-purple-dark;
            width: 2rem;
            height: 2rem;
            color: $ui-white;
--- a/src/components/teacher-banner/teacher-banner.scss
+++ b/src/components/teacher-banner/teacher-banner.scss
@ -33,6 +33,6 @@
        margin-left: 10px;
        background-color: $ui-white;
        padding: 13px 20px;
-        color: $ui-blue;
+        color: $ui-purple-dark;
    }
 }
--- a/src/components/tooltip/tooltip.scss
+++ b/src/components/tooltip/tooltip.scss
@ -25,7 +25,7 @@
        margin-top: $arrow-border-width * 0.5;
        border: 1px solid $active-gray;
        border-radius: 5px;
-        background-color: $ui-blue;
+        background-color: $ui-blue-dark;
        padding: 1rem;
        width: 13.75rem;
        text-align: left;
@ -43,7 +43,7 @@
            border-left: 1px solid $active-gray;
            border-radius: 5px;

-            background-color: $ui-blue;
+            background-color: $ui-blue-dark;
            width: $arrow-border-width;
            height: $arrow-border-width;

--- a/src/components/ttt-tile/ttt-tile.scss
+++ b/src/components/ttt-tile/ttt-tile.scss
@ -82,22 +82,6 @@
    font-size: .875rem;
 }

-.ttt-tile-guides {
-    margin: auto;
-    border-top: 1px dashed $ui-border;
-    border-radius: 0 0 1rem 1rem;
-    cursor: pointer;
-    padding: 1.25rem 0;
-    color: $link-blue;
-
-    font-size: .75rem;
-    font-weight: 500;
-
-    &:hover {
-        background-color: $ui-blue-10percent;
-    }
-}
-
 .ttt-tile-open-modal {
    display: inline-block;
    padding: 0 .25rem;
--- a/src/main.scss
+++ b/src/main.scss
@ -6,7 +6,7 @@ html,
 body {
    display: block;
    margin: 0;
-    background-color: $ui-blue-dark;
+    background-color: $ui-purple-dark;
    padding: 0;
    color: $type-gray;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
@ -91,19 +91,19 @@ strong {
 /* Links */
 a {
    cursor: pointer;
-    color: $ui-blue;
+    color: $ui-purple-dark;
    font-weight: bold;

    &:link,
    &:visited,
    &:active {
        text-decoration: none;
-        color: $link-blue;
+        color: $link-purple;
    }

    &:hover {
        text-decoration: none;
-        color: $ui-blue-dark;
+        color: $ui-purple-darker;
    }
 }

@ -137,6 +137,10 @@ p {
    font-weight: normal;
 }

+input {
+    outline-color: $ui-purple-dark;
+}
+
 ::selection {
    background-color: $ui-blue-25percent;
 }
--- a/src/views/about/about.scss
+++ b/src/views/about/about.scss
@ -79,7 +79,7 @@

 .about-button {
    margin-right: .75rem;
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
    color: $ui-white;
    font-size: 1rem;

--- a/src/views/annual-report/2021/annual-report.scss
+++ b/src/views/annual-report/2021/annual-report.scss
@ -75,7 +75,7 @@ p a {

 a, a:link, a:visited, a:active{
    cursor: pointer;
-    color: $motion-blue-3;
+    color: $ui-purple-dark;
 }

 .bold {
--- a/src/views/boost/boost.scss
+++ b/src/views/boost/boost.scss
@ -3,7 +3,7 @@

 .boost {
    .extension-header {
-        background-color: $ui-orange;
+        background-color: $ui-magenta-dark;
        background-image: url("/images/boost/boost-pattern.svg");
    }
 }
--- a/src/views/components/components.jsx
+++ b/src/views/components/components.jsx
@ -150,6 +150,7 @@ const Components = () => (
            />
            <h1>Colors</h1>
            <div className="colors">
+                <span className="ui-purple-dark">$ui-purple-dark</span>
                <span className="ui-blue">$ui-blue</span>
                <span className="ui-orange">$ui-orange</span>
                <span className="ui-light-gray">$ui-light-gray</span>
@ -167,7 +168,7 @@ const Components = () => (
                <span className="header-gray">$header-gray</span>
                <span className="type-gray">$type-gray</span>
                <span className="type-white">$type-white</span>
-                <span className="link-blue">$link-blue</span>
+                <span className="link-purple">$link-purple</span>
                <span className="splash-green">$ui-aqua</span>
                <span className="splash-pink">$ui-purple</span>
                <span className="splash-blue">$ui-blue</span>
--- a/src/views/components/components.scss
+++ b/src/views/components/components.scss
@ -9,7 +9,7 @@
        li {
            background-color: $active-gray;
            &.active {
-                background-color: $ui-blue;
+                background-color: $ui-purple-dark;
            }
        }
    }
@ -38,6 +38,7 @@
            font-weight: bold;
        }

+        .ui-purple-dark,
        .ui-blue,
        .ui-orange,
        .ui-dark-gray,
@ -45,13 +46,17 @@
        .overlay-gray,
        .header-gray,
        .type-gray,
-        .link-blue,
+        .link-purple,
        .splash-green,
        .splash-pink,
        .splash-blue {
            color: $ui-white;
        }

+        .ui-purple-dark {
+            background-color: $ui-purple-dark;
+        }
+
        .ui-blue {
            background-color: $ui-blue;
        }
@ -120,8 +125,8 @@
            background-color: $type-white;
        }

-        .link-blue {
-            background-color: $link-blue;
+        .link-purple {
+            background-color: $link-purple;
        }

        .splash-green {
--- a/src/views/cookies/cookies.jsx
+++ b/src/views/cookies/cookies.jsx
@ -12,6 +12,8 @@ const privacyPolicyLink = chunks => <a href="/privacy_policy">{chunks}</a>;
 const manageLink = chunks => <a href="http://www.allaboutcookies.org/manage-cookies">{chunks}</a>;
 const googlePoliciesLink = chunks => <a href="https://www.google.com/policies/privacy/partners">{chunks}</a>;
 const optOutLink = chunks => <a href="https://tools.google.com/dlpage/gaoptout">{chunks}</a>;
+// When this page was last updated. See 'click Cookies link' in footer-links.test.js if you update this value.
+const updated = new Date('2023-06-28T12:00:00.000-04:00');

 require('./cookies.scss');

@ -25,7 +27,10 @@ const Cookies = injectIntl(() => (
            <section>
                <p className="lastupdate">
                    <i>
-                        <FormattedMessage id="cookies.lastUpdated" />
+                        <FormattedMessage
+                            id="cookies.lastUpdatedFormat"
+                            values={{updated}}
+                        />
                    </i>
                </p>
                <p className="intro">
@ -121,6 +126,12 @@ const Cookies = injectIntl(() => (
                                    <td><FormattedMessage id="cookies.functional.scratchPolicySeen" /></td>
                                    <td><FormattedMessage id="cookies.table.weeks.3" /></td>
                                </tr>
+                                <tr>
+                                    <td>scratchtheme</td>
+                                    <td><a href="/privacy_policy">Scratch</a></td>
+                                    <td><FormattedMessage id="cookies.functional.scratchTheme" /></td>
+                                    <td><FormattedMessage id="cookies.table.years.1" /></td>
+                                </tr>
                                <tr>
                                    <td>wistia-video-progress-#</td>
                                    <td><a href="https://wistia.com/privacy">Wistia</a></td>
--- a/src/views/cookies/l10n.json
+++ b/src/views/cookies/l10n.json
@ -3,7 +3,7 @@
    "cookies.nav.types": "Types of Cookies",
    "cookies.nav.manage": "Manage Cookies",
    "cookies.nav.contact": "Contact Us",
-    "cookies.lastUpdated": "The Scratch Cookie Policy was last updated May 25, 2023",
+    "cookies.lastUpdatedFormat": "The Scratch Cookie Policy was last updated {updated, date, long}",
    "cookies.intro1": "This Cookie Policy (the <b>“Cookie Policy”</b>) is provided by Scratch Foundation (<b>“Scratch”</b>, <b>“we”</b> or <b>“us”</b>). It supplements the information and disclosures included in our <privacy>Privacy Policy</privacy>, and explains how Scratch uses Cookies on its website scratch.mit.edu (the <b>“Scratch Website”</b>) to its visitors (<b>“you”</b>, <b>“user”</b>). For the purpose of this Cookie Policy, <b>“Personal Information”</b> means any information relating to an identified or identifiable individual.",
    "cookies.intro2": "When you use the Scratch Website, we use cookies, beacons, invisible tags, unique IDs and similar technologies (collectively <b>“Cookies”</b>) to automatically record certain Personal Information from your browser or device.",
    "cookies.table.name": "Name",
@ -29,6 +29,7 @@
    "cookies.functional.permissions": "Used to track which features of the service a logged in user is able to access.",
    "cookies.functional.exploreBy": "Used to save the user’s current search preference.",
    "cookies.functional.scratchLanguage": "Used to save information about the user’s preferred language.",
+    "cookies.functional.scratchTheme": "Used to save information about the user’s preferred color mode.",
    "cookies.functional.scratchPolicySeen": "Used to track if the user has seen a privacy policy update notification",
    "cookies.functional.wistia": "Contains a timestamp for the Scratch Website’s video-content. This allows the user to resume watching without having to start over, if the user leaves the video or Scratch Website.",
    "cookies.functional.minilogSettings": "Unclassified",
@ -63,4 +64,4 @@
    "cookies.manageBody": "If you do not want your Personal Information to be collected through the use of Cookies, most browsers allow you to manage your Cookie preferences. You can set your browser to automatically decline Cookies or to request you to accept or decline Cookies for each site.  You can find more information about Cookies at <a>http://www.allaboutcookies.org/manage-cookies</a>.",
    "cookies.contactTitle": "Contact Us",
    "cookies.contactIntro": "If you have any questions about this Cookie Policy please contact us at privacy@scratch.mit.edu or via mail at:"
-}
+}
--- a/src/views/developers/developers.scss
+++ b/src/views/developers/developers.scss
@ -32,7 +32,7 @@ $developer-spot: $ui-aqua;
            }

            .band {
-                $band-color: hsla(360, 100%, 100%, .15);
+                $band-color: $box-shadow-light-gray;
                
                margin-top: 2rem;
                background-color: $band-color;
--- a/src/views/download/download.scss
+++ b/src/views/download/download.scss
@ -42,7 +42,7 @@
    }

    .download-header {
-        background-color: $ui-blue;
+        background-color: $ui-purple-dark;
        padding: 4rem 0;
        color: $ui-white;

@ -168,7 +168,7 @@

        p {
            line-height: normal;
-            color: $link-blue;
+            color: $link-purple;
            font-weight: 600;
        }

--- a/src/views/download/scratch-link/download.scss
+++ b/src/views/download/scratch-link/download.scss
@ -2,7 +2,7 @@

 .link {
    .extension-header {
-        background-color: $ui-aqua;
+        background-color: $ui-purple-dark;
        
        .inner {
            flex-direction: row;
--- a/src/views/ev3/ev3.scss
+++ b/src/views/ev3/ev3.scss
@ -2,7 +2,7 @@

 .ev3 {
    .extension-header {
-        background-color: $ui-orange;
+        background-color: $ui-magenta-dark;
        background-image: url("/images/ev3/ev3-pattern.svg");
    }
    .headline-icon {
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@ -12,7 +12,7 @@ $base-bg: $ui-white;
    .title-banner {
        &.masthead {
            margin-bottom: 0;
-            background-color: $ui-yellow;
+            background-color: $ui-aqua;
            padding: 0;

            h1 {
@ -84,13 +84,13 @@ $base-bg: $ui-white;
        justify-content: flex-start;

        li {
-            border: 1px solid $type-dark-gray;
-            background-color: $active-gray;
-            color: $header-gray;
+            border: 1px solid $ui-purple-dark;
+            background-color: $ui-white;
+            color: $link-purple;

            &.active {
                opacity: 1;
-                background-color: $ui-aqua;
+                background-color: $ui-purple-dark;
                color: $ui-white;
            }

@ -99,8 +99,11 @@ $base-bg: $ui-white;
            }

            &:hover {
-                background-color: $active-dark-gray;
-                color: $type-dark-gray;
+                background-color: $ui-purple-25percent;
+            }
+            
+            &.active:hover {
+                background-color: $ui-purple-darker;
            }
        }
    }
--- a/src/views/gdxfor/gdxfor.scss
+++ b/src/views/gdxfor/gdxfor.scss
@ -3,7 +3,7 @@

 .gdxfor {
    .extension-header {
-        background-color: $ui-blue;
+        background-color: $ui-blue-dark;
        background-image: url("/images/gdxfor/gdxfor-pattern.svg");
    }
 }
--- a/src/views/ideas/ideas.jsx
+++ b/src/views/ideas/ideas.jsx
@ -81,10 +81,10 @@ class Ideas extends React.Component {
                                <FormattedMessage id="ideas.headerMessage" />
                            </h1>
                            <a href="/projects/editor/?tutorial=all">
-                                <Button className="ideas-button">
+                                <Button className="banner-button">
                                    <img
                                        alt=""
-                                        src="/images/ideas/bulb-icon.svg"
+                                        src="/images/ideas/bulb-yellow-icon.svg"
                                    />
                                    <FormattedMessage id="ideas.headerButtonMessage" />
                                </Button>
--- a/src/views/ideas/ideas.scss
+++ b/src/views/ideas/ideas.scss
@ -9,7 +9,7 @@ $base-bg: $ui-white;
 }

 .banner-wrapper {
-    background: $ui-yellow bottom right url("/images/ideas/right-juice.png") no-repeat;
+    background: $ui-aqua bottom right url("/images/ideas/right-juice.png") no-repeat;
 }

 .ideas-banner {
@ -35,9 +35,29 @@ $base-bg: $ui-white;
    max-width: calc(100% - 2rem);
 }

+.banner-button {
+    background-color: $ui-white;
+    color: $ui-aqua;
+    font-size: 1rem;
+
+    img {
+        margin-right: 1rem;
+        height: 1.5rem;
+        vertical-align: middle;
+    }
+
+    a {
+        color: $ui-white;
+    }
+
+    span {
+      vertical-align: middle;
+    }
+}
+
 .ideas-button {
    margin-right: .75rem;
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
    color: $ui-white;
    font-size: 1rem;

--- a/src/views/messages/messages.scss
+++ b/src/views/messages/messages.scss
@ -7,7 +7,7 @@
 }

 .title-banner.mod-messages {
-    background-color: $ui-blue;
+    background-color: $ui-purple-dark;
    color: $type-white;
 }

@ -51,7 +51,7 @@
 .messages-header-unread {
    margin-left: 1rem;
    border-radius: 1rem;
-    background-color: $ui-orange;
+    background-color: $ui-red-dark;
    padding: .25rem .5rem;
    line-height: 1rem;
    color: $type-white;
@ -60,7 +60,7 @@
 .admin-message {
    border: 1px solid $active-dark-gray;
    border-radius: 5px;
-    background-color: $ui-blue-25percent;
+    background-color: $ui-purple-25percent;
    padding: 1rem;
 }

--- a/src/views/microbit/microbit.scss
+++ b/src/views/microbit/microbit.scss
@ -3,7 +3,7 @@

 .microbit {
    .extension-header {
-        background-color: $ui-mint-green;
+        background-color: #318131;
        background-image: url("/images/microbit/mbit-pattern.svg");
    }

--- a/src/views/parents/parents.scss
+++ b/src/views/parents/parents.scss
@ -67,7 +67,7 @@ $story-width: $cols3;
            }

            .band {
-                $band-color: hsla(360, 100%, 100%, .15);
+                $band-color: $box-shadow-light-gray;

                margin-top: 2rem;
                background-color: $band-color;
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@ -249,7 +249,7 @@
            .comment-reply {
                display: inline-flex;
                cursor: pointer;
-                color: $ui-blue;
+                color: $link-purple;
                font-weight: bold;

                &:after {
--- a/src/views/preview/subactions.scss
+++ b/src/views/preview/subactions.scss
@ -48,7 +48,7 @@
        .action-button {
            margin: 0 0 0 .5rem;
            border-radius: 19px;
-            background-color: $ui-blue;
+            background-color: $ui-purple-dark;
            padding: 0 .75rem;
            height: 2rem;
            text-decoration: none;
--- a/src/views/preview/unsupported-browser.scss
+++ b/src/views/preview/unsupported-browser.scss
@ -56,9 +56,9 @@
    }

    .back-button {
-        border: 1px solid $ui-blue;
+        border: 1px solid $ui-purple-dark;
        border-radius: .25rem;
-        background: $ui-blue;
+        background: $ui-purple-dark;
        cursor: pointer;
        padding: .5rem 2rem;
        color: $ui-white;
@ -74,7 +74,7 @@

    .faq-link {
        text-decoration: none;
-        color: $ui-blue;
+        color: $link-purple;
    }
 }

--- a/src/views/splash/features/features-banner.scss
+++ b/src/views/splash/features/features-banner.scss
@ -48,7 +48,7 @@

        .feature-image-text {
            margin: auto auto; 
-            color: $ui-blue;
+            color: $ui-purple-dark;
            font-size: 1rem;
            font-weight: bold;
        }
@ -63,7 +63,7 @@
        border-radius: 10px;
        background-color: $ui-white;
        padding: .75rem 1rem;
-        color: $ui-blue;
+        color: $ui-purple-dark;
        font-size: .75rem;
        font-weight: bold;
    }
--- a/src/views/splash/hoc/hoc-banner.scss
+++ b/src/views/splash/hoc/hoc-banner.scss
@ -59,7 +59,7 @@ $tile-height: 244px;

        .hoc-image-text {
            margin: auto auto; 
-            color: $ui-blue;
+            color: $ui-purple-dark;
            font-size: 1rem;
            font-weight: bold;
        }
@ -77,7 +77,7 @@ $tile-height: 244px;
        border-radius: 10px;
        background-color: $ui-white;
        padding: .5rem 1rem .75rem 1rem;
-        color: $ui-blue;
+        color: $ui-purple-dark;
        font-size: .75rem;
        font-weight: bold;

--- a/src/views/studio/icons/edit-icon.svg
+++ b/src/views/studio/icons/edit-icon.svg
@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9579C9.96446 16.0526 9.85758 16.1134 9.72976 16.1711L7.56659 17.0795C7.48799 16.8115 7.29336 16.4709 6.93361 16.1111C6.58592 15.7635 6.25738 15.5809 5.99914 15.4903L6.89672 13.338C6.94337 13.1992 7.0271 13.0936 7.1208 12.9999C7.14262 13 7.16333 12.9793 7.17418 12.9684L7.20476 12.9378C7.35075 12.7919 7.55585 12.703 7.79617 12.6711C8.40705 12.5955 9.11521 12.8854 9.64935 13.4195C10.1835 13.9537 10.4734 14.6618 10.3857 15.2606C10.3505 15.4582 10.2854 15.6615 10.1833 15.8118C10.1529 15.8642 10.1114 15.9057 10.069 15.9481L10.0592 15.9579ZM13.6054 6.53721C13.9427 6.19986 14.4603 6.12759 14.9902 6.28654C15.2973 6.37865 15.4255 6.75936 15.2154 6.96946L10.177 12.0079C10.0566 12.1282 9.86135 12.148 9.70333 12.0472C9.54003 11.9451 9.37127 11.8572 9.20119 11.7838C8.92376 11.6642 8.82736 11.3152 9.02168 11.1209L13.6054 6.53721ZM16.5317 9.46348L11.9489 14.0462C11.7586 14.2366 11.4084 14.1547 11.2923 13.8847C11.2173 13.7052 11.1239 13.5309 11.0163 13.3622C10.9099 13.1966 10.9364 12.9902 11.0616 12.865L16.0882 7.83835C16.2964 7.63022 16.677 7.75634 16.7711 8.06359C16.9356 8.59891 16.871 9.12417 16.5317 9.46348ZM18.5347 4.5342C17.2459 3.24545 15.3869 3.01396 14.3838 4.01711L6.29247 12.1084C6.09421 12.3067 5.91898 12.528 5.81284 12.7986L4.10642 16.8961C3.89183 17.4134 4.05796 18.0589 4.53397 18.5349C5.00998 19.0109 5.65549 19.177 6.1728 18.9625L10.2703 17.256C10.5398 17.1488 10.7611 16.9736 10.9594 16.7753L19.0507 8.68402C20.0538 7.68087 19.8234 5.82294 18.5347 4.5342Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9579C9.96446 16.0526 9.85758 16.1134 9.72976 16.1711L7.56659 17.0795C7.48799 16.8115 7.29336 16.4709 6.93361 16.1111C6.58592 15.7635 6.25738 15.5809 5.99914 15.4903L6.89672 13.338C6.94337 13.1992 7.0271 13.0936 7.1208 12.9999C7.14262 13 7.16333 12.9793 7.17418 12.9684L7.20476 12.9378C7.35075 12.7919 7.55585 12.703 7.79617 12.6711C8.40705 12.5955 9.11521 12.8854 9.64935 13.4195C10.1835 13.9537 10.4734 14.6618 10.3857 15.2606C10.3505 15.4582 10.2854 15.6615 10.1833 15.8118C10.1529 15.8642 10.1114 15.9057 10.069 15.9481L10.0592 15.9579ZM13.6054 6.53721C13.9427 6.19986 14.4603 6.12759 14.9902 6.28654C15.2973 6.37865 15.4255 6.75936 15.2154 6.96946L10.177 12.0079C10.0566 12.1282 9.86135 12.148 9.70333 12.0472C9.54003 11.9451 9.37127 11.8572 9.20119 11.7838C8.92376 11.6642 8.82736 11.3152 9.02168 11.1209L13.6054 6.53721ZM16.5317 9.46348L11.9489 14.0462C11.7586 14.2366 11.4084 14.1547 11.2923 13.8847C11.2173 13.7052 11.1239 13.5309 11.0163 13.3622C10.9099 13.1966 10.9364 12.9902 11.0616 12.865L16.0882 7.83835C16.2964 7.63022 16.677 7.75634 16.7711 8.06359C16.9356 8.59891 16.871 9.12417 16.5317 9.46348ZM18.5347 4.5342C17.2459 3.24545 15.3869 3.01396 14.3838 4.01711L6.29247 12.1084C6.09421 12.3067 5.91898 12.528 5.81284 12.7986L4.10642 16.8961C3.89183 17.4134 4.05796 18.0589 4.53397 18.5349C5.00998 19.0109 5.65549 19.177 6.1728 18.9625L10.2703 17.256C10.5398 17.1488 10.7611 16.9736 10.9594 16.7753L19.0507 8.68402C20.0538 7.68087 19.8234 5.82294 18.5347 4.5342Z" fill="#855CD6"/>
 </svg>
--- a/src/views/studio/modals/promote-modal.scss
+++ b/src/views/studio/modals/promote-modal.scss
@ -4,7 +4,7 @@
    width: 680px;

    .promote-title {
-        background: $ui-blue;
+        background: $ui-purple-dark;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: .75rem;
@ -61,7 +61,7 @@

    .cancel-button {
        background-color: $ui-white;
-        color: $ui-blue;
-        box-shadow: 0px 0px 0 1px $ui-blue;
+        color: $ui-purple-dark;
+        box-shadow: 0px 0px 0 1px $ui-purple-dark;
    }
 }
--- a/src/views/studio/modals/studio-report-modal.scss
+++ b/src/views/studio/modals/studio-report-modal.scss
@ -3,8 +3,8 @@

 .studio-report-modal {
    .studio-report-title {
-        box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
-        background: $ui-aqua;
+        box-shadow: inset 0 -1px 0 0 $ui-red-dark;
+        background: $ui-red-dark;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: .75rem;
--- a/src/views/studio/modals/transfer-host-modal.scss
+++ b/src/views/studio/modals/transfer-host-modal.scss
@ -3,7 +3,7 @@

 .transfer-host-modal {
    .transfer-host-title {
-        background: $ui-blue;
+        background: $ui-purple-dark;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: .75rem;
@ -81,8 +81,8 @@

    .cancel-button {
        background-color: $ui-white;
-        color: $ui-blue;
-        box-shadow: 0px 0px 0 1px $ui-blue;
+        color: $ui-purple-dark;
+        box-shadow: 0px 0px 0 1px $ui-purple-dark;
        margin-right: 1rem;
    }

@ -210,4 +210,4 @@
            margin: auto 1.5rem 1rem 1.5rem;
        }
    }
-}
+}
--- a/src/views/studio/modals/user-projects-modal.scss
+++ b/src/views/studio/modals/user-projects-modal.scss
@ -3,8 +3,8 @@

 .user-projects-modal {
    .user-projects-modal-title {
-        box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
-        background-color: $ui-blue;
+        box-shadow: inset 0 -1px 0 0 $box-shadow-light-gray;
+        background-color: $ui-purple-dark;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding-top: .75rem;
@ -21,7 +21,7 @@
            border: 1px solid rgba(0, 0, 0, 0.15);
            color: #575e75;
            &.active {
-                background: $ui-blue;
+                background: $ui-purple-dark;
                color: white;
            }
            &:active {
@ -29,8 +29,8 @@
            }
        }
        button:hover {
-            background: $ui-blue-25percent;
-            border: 1px solid $ui-blue-10percent;
+            background: $ui-purple-25percent;
+            border: 1px solid $ui-purple-10percent;
        }
    }
    .user-projects-modal-content {
@ -73,8 +73,8 @@
 }

 .studio-tile-added {
-    border: 1px solid $ui-blue !important; // Override the tile border set in studio.scss .studio-project-tile
-    box-shadow: 0 0 0 4px $ui-blue-25percent;
+    border: 1px solid $ui-purple-dark !important; // Override the tile border set in studio.scss .studio-project-tile
+    box-shadow: 0 0 0 4px $ui-purple-25percent;
 }

 .studio-project-add-remove-image {
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@ -97,7 +97,7 @@ $radius: 8px;

        button {
            font-size: smaller;
-            background-color: $ui-blue;
+            background-color: $ui-purple-dark;
            border: 1px solid transparent;
            border-radius: 999em;
            color: $ui-white;
@ -107,7 +107,7 @@ $radius: 8px;
            padding-right: 0.75em;

            &:hover {
-                background-color: $ui-blue-dark;
+                background-color: $ui-purple-darker;
            }

            img {
@ -212,7 +212,7 @@ $radius: 8px;
        }
    }
    .active > li {
-        background: $ui-blue;
+        background: $ui-purple-dark;
        color: white;
        img {
            filter: invert(0);
@ -223,7 +223,7 @@ $radius: 8px;
        border: 1px solid $active-gray;
    }
    a.active.nav_link:hover > li {
-        background: $ui-blue-dark;
+        background: $ui-purple-darker;
        color: white;
        img {
            filter: invert(0);
@ -240,11 +240,11 @@ $radius: 8px;
    width: 4.875rem;
    height: 2rem;

-    border: 1px solid $ui-blue;
+    border: 1px solid $ui-purple-dark;
    border-radius: 1rem;

    font-weight: bold;
-    color: $ui-blue;
+    color: $ui-purple-dark;
    font-size: 12px;
    display: flex;
    justify-content: center;
@ -318,7 +318,7 @@ $radius: 8px;
        min-width: 0; /* Prevents within from expanding beyond bounds */
    }
    .studio-project-title {
-        color: #4C97FF;
+        color: $link-purple;
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
@ -380,7 +380,7 @@ $radius: 8px;
        min-width: 0; /* Prevents within from expanding beyond bounds */
    }
    .studio-member-name {
-        color: #4C97FF;
+        color: $link-purple;
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
@ -395,11 +395,6 @@ $radius: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
-    .studio-member-remove, .studio-member-promote {
-        color: $ui-blue;
-        background: transparent;
-        border: none;
-    }

    .studio-member-tile-menu-wide {
        white-space: nowrap;
@ -415,7 +410,7 @@ $radius: 8px;
    margin-top: 20px;

    h3 {
-        color: #4C97FF;
+        color: $ui-purple-dark;
    }

    .studio-adder-row {
@ -585,7 +580,7 @@ $radius: 8px;
 }

 .studio-thumb-edit-button {
-    color: #4C97FF;
+    color: $link-purple;
    font-size: 1rem;
    font-weight: bold;
    height: 40px;
--- a/src/views/teachers/landing/landing.scss
+++ b/src/views/teachers/landing/landing.scss
@ -68,7 +68,7 @@ $story-width: $cols3;
            }

            .band {
-                $band-color: hsla(360, 100%, 100%, .15);
+                $band-color: $box-shadow-light-gray;

                margin-top: 2rem;
                background-color: $band-color;
--- a/src/views/wedo2/wedo2.scss
+++ b/src/views/wedo2/wedo2.scss
@ -2,7 +2,7 @@

 .wedo2 {
    .extension-header {
-        background-color: $ui-coral;
+        background-color: $ui-magenta-dark;
        background-image: url("/images/wedo2/wedo2-pattern.svg");
    }
 }
--- a/static/images/ideas/bulb-yellow-icon.svg
+++ b/static/images/ideas/bulb-yellow-icon.svg
@ -0,0 +1,3 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82051 1.12883V2.1582C8.82051 2.53811 9.10996 2.84565 9.48987 2.84565C9.86978 2.84565 10.1773 2.53811 10.1773 2.1582V1.12883C10.1773 0.748926 9.86978 0.459473 9.48987 0.459473C9.10996 0.459473 8.82051 0.748926 8.82051 1.12883ZM3.12281 3.08264C2.86773 3.35219 2.86773 3.78637 3.12281 4.03965L3.86272 4.78137C3.98936 4.908 4.17026 4.98218 4.35298 4.98218C4.5158 4.98218 4.69671 4.908 4.82153 4.78137C5.09471 4.51182 5.09471 4.07764 4.82153 3.82256L4.09971 3.08264C3.82835 2.80947 3.39236 2.80947 3.12281 3.08264ZM15.8589 4.0391C16.1122 3.78764 16.1122 3.35165 15.8589 3.0821C15.5876 2.81074 15.1516 2.81074 14.9001 3.0821L14.1584 3.82201C13.9051 4.07709 13.9051 4.51127 14.1584 4.78083C14.3031 4.90927 14.4641 4.98163 14.6468 4.98163C14.8097 4.98163 14.9906 4.90927 15.1172 4.78083L15.8589 4.0391ZM18.5 9.44934C18.5 9.82925 18.1906 10.1187 17.8125 10.1187H16.7814C16.4015 10.1187 16.0939 9.82925 16.0939 9.44934C16.0939 9.06944 16.4015 8.76189 16.7814 8.76189H17.8125C18.1906 8.76189 18.5 9.06944 18.5 9.44934ZM4.82244 14.117C5.0938 14.3883 5.0938 14.8044 4.82244 15.0758L4.10062 15.8175C3.95589 15.9441 3.79307 16.0165 3.61035 16.0165C3.42945 16.0165 3.26663 15.9441 3.12371 15.8175C2.86863 15.5461 2.86863 15.1119 3.12371 14.8587L3.86363 14.117C4.13499 13.8456 4.56917 13.8456 4.82244 14.117ZM11.9139 17.3004C12.0966 18.46 11.4254 19.4369 9.48969 19.4369C7.55578 19.4369 6.88461 18.46 7.06552 17.3004C7.11066 17.0476 7.25535 17.0926 7.61807 17.2054C7.98222 17.3187 8.56614 17.5003 9.48969 17.5175C10.4516 17.5175 11.0471 17.3247 11.4081 17.2078C11.7464 17.0982 11.8788 17.0553 11.9139 17.3004ZM2.88799 9.44934C2.88799 9.82925 2.58044 10.1187 2.21863 10.1187H1.16936C0.807544 10.1187 0.5 9.82925 0.5 9.44934C0.5 9.06944 0.807544 8.76189 1.16936 8.76189H2.21863C2.58044 8.76189 2.88799 9.06944 2.88799 9.44934ZM14.5021 8.76207C14.6269 10.1189 14.2307 11.3852 13.4709 12.3422C13.3081 12.5551 13.1588 12.7295 13.0251 12.8855C12.5783 13.4072 12.3071 13.7239 12.2932 14.5873C12.2932 15.1662 12.0038 15.6366 11.5334 15.8537H11.5171C10.2327 16.4869 8.74742 16.4688 7.46297 15.8537C7.0107 15.6366 6.72125 15.1662 6.72125 14.6597C6.72125 13.7589 6.44527 13.442 5.99087 12.9202L5.99086 12.9202C5.85205 12.7608 5.69659 12.5823 5.52726 12.3621C4.85971 11.5119 4.4599 10.4264 4.4599 9.26861C4.4599 6.28363 7.04869 3.93182 10.088 4.27555C12.4036 4.54691 14.285 6.44645 14.5021 8.76207ZM15.8589 15.8177C16.1122 15.5463 16.1122 15.1121 15.8589 14.8589L15.1172 14.1171C14.8621 13.844 14.4297 13.844 14.1584 14.1171C13.9051 14.3885 13.9051 14.8046 14.1584 15.0759L14.9001 15.8177C15.0249 15.9443 15.2077 16.0167 15.3687 16.0167C15.5514 16.0167 15.7323 15.9443 15.8589 15.8177Z" fill="#FFBF00"/>
+</svg>
--- a/static/svgs/project/comment-reply.svg
+++ b/static/svgs/project/comment-reply.svg
@ -5,6 +5,6 @@
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="comment-reply" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M9.4379644,9.95564876 C9.4397719,9.83000629 9.4365177,9.69150012 9.42535762,9.54182983 C9.39320024,9.16970313 9.30581606,8.72820912 9.12405695,8.26937328 C9.07512181,8.1566514 9.02758481,8.03887149 8.96746449,7.92470447 C8.89406178,7.78886016 8.89825622,7.75634423 8.7905989,7.59665491 C8.62352034,7.33435977 8.47531676,7.14143195 8.29006229,6.92104623 C7.92234964,6.50701011 7.47144725,6.15222524 6.99467914,5.89065268 C6.51441566,5.63486073 6.01387905,5.47228111 5.5671711,5.38846228 C5.12465758,5.30464345 4.71639867,5.29597253 4.48150998,5.29741768 C4.35847305,5.29452738 4.20677411,5.32270785 4.12917695,5.32632073 C4.04388999,5.33571422 3.99845021,5.34004968 3.99845021,5.34004968 C3.50070989,5.39279773 3.05540009,5.0185033 3.0050668,4.5040291 C2.96242332,4.07337373 3.20989533,3.68173747 3.58180242,3.53433194 C3.58180242,3.53433194 3.62514497,3.51771269 3.70553842,3.48591934 C3.79501983,3.454126 3.88310309,3.40571339 4.07395015,3.34862988 C4.46403315,3.22506936 4.96317161,3.09789597 5.6119118,3.03286412 C6.25575847,2.96999999 7.02893374,2.9880644 7.85034507,3.16076009 C8.66826104,3.33851382 9.53091772,3.67740202 10.3222689,4.17525697 C10.7053612,4.422378 11.1087266,4.72441482 11.4247078,5.00910981 C11.5596289,5.12183169 11.8001102,5.36533984 11.9385268,5.51708083 C12.1000127,5.68616364 12.2468182,5.86536252 12.3922255,6.04311624 C12.9591741,6.76424721 13.37722,7.545352 13.6547522,8.2534766 C13.9134224,8.91884719 14.055538,9.51573832 14.1351159,9.95564876 L15.4897593,9.95564876 C16.1024852,9.95564876 16.6500676,10.3333021 16.8842064,10.9178352 C17.1192892,11.5033442 16.9908905,12.1708245 16.5575451,12.6187388 L12.7603439,16.5426249 C12.4752234,16.8373311 12.0956921,17.0002978 11.6935022,17.0002978 C11.2903682,17.0002978 10.9108369,16.8373311 10.6266605,16.5426249 L6.82851524,12.6187388 C6.39611391,12.1708245 6.26677115,11.5033442 6.50185397,10.9178352 C6.73693679,10.3333021 7.28451925,9.95564876 7.89630104,9.95564876 L9.4379644,9.95564876 Z" fill="#4C97FF" transform="translate(10.000298, 10.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000298, -10.000000) "></path>
+        <path d="M9.4379644,9.95564876 C9.4397719,9.83000629 9.4365177,9.69150012 9.42535762,9.54182983 C9.39320024,9.16970313 9.30581606,8.72820912 9.12405695,8.26937328 C9.07512181,8.1566514 9.02758481,8.03887149 8.96746449,7.92470447 C8.89406178,7.78886016 8.89825622,7.75634423 8.7905989,7.59665491 C8.62352034,7.33435977 8.47531676,7.14143195 8.29006229,6.92104623 C7.92234964,6.50701011 7.47144725,6.15222524 6.99467914,5.89065268 C6.51441566,5.63486073 6.01387905,5.47228111 5.5671711,5.38846228 C5.12465758,5.30464345 4.71639867,5.29597253 4.48150998,5.29741768 C4.35847305,5.29452738 4.20677411,5.32270785 4.12917695,5.32632073 C4.04388999,5.33571422 3.99845021,5.34004968 3.99845021,5.34004968 C3.50070989,5.39279773 3.05540009,5.0185033 3.0050668,4.5040291 C2.96242332,4.07337373 3.20989533,3.68173747 3.58180242,3.53433194 C3.58180242,3.53433194 3.62514497,3.51771269 3.70553842,3.48591934 C3.79501983,3.454126 3.88310309,3.40571339 4.07395015,3.34862988 C4.46403315,3.22506936 4.96317161,3.09789597 5.6119118,3.03286412 C6.25575847,2.96999999 7.02893374,2.9880644 7.85034507,3.16076009 C8.66826104,3.33851382 9.53091772,3.67740202 10.3222689,4.17525697 C10.7053612,4.422378 11.1087266,4.72441482 11.4247078,5.00910981 C11.5596289,5.12183169 11.8001102,5.36533984 11.9385268,5.51708083 C12.1000127,5.68616364 12.2468182,5.86536252 12.3922255,6.04311624 C12.9591741,6.76424721 13.37722,7.545352 13.6547522,8.2534766 C13.9134224,8.91884719 14.055538,9.51573832 14.1351159,9.95564876 L15.4897593,9.95564876 C16.1024852,9.95564876 16.6500676,10.3333021 16.8842064,10.9178352 C17.1192892,11.5033442 16.9908905,12.1708245 16.5575451,12.6187388 L12.7603439,16.5426249 C12.4752234,16.8373311 12.0956921,17.0002978 11.6935022,17.0002978 C11.2903682,17.0002978 10.9108369,16.8373311 10.6266605,16.5426249 L6.82851524,12.6187388 C6.39611391,12.1708245 6.26677115,11.5033442 6.50185397,10.9178352 C6.73693679,10.3333021 7.28451925,9.95564876 7.89630104,9.95564876 L9.4379644,9.95564876 Z" fill="#855CD6" transform="translate(10.000298, 10.000000) scale(-1, 1) rotate(-90.000000) translate(-10.000298, -10.000000) "></path>
    </g>
-</svg>
+</svg>
--- a/static/svgs/studio/activity-curator.svg
+++ b/static/svgs/studio/activity-curator.svg
@ -1,4 +1,4 @@
 <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.2531 7.47107C5.2531 8.16594 5.51512 8.80522 5.9491 9.28437C4.50749 10.1253 3.54431 11.8131 3.54431 13.7407C3.54431 14.5562 4.19249 15.1128 5.00253 15.4536C5.82565 15.7998 6.90529 15.9673 7.97081 15.9673C9.03633 15.9673 10.116 15.7998 10.9391 15.4536C11.7491 15.1128 12.3973 14.5562 12.3973 13.7407V13.7342C12.3973 13.6496 12.3973 13.5472 12.3834 13.4418C12.3334 12.4083 12.0039 11.4543 11.4801 10.6824C11.0859 10.1059 10.5795 9.62615 9.99447 9.28522C10.4318 8.80663 10.6887 8.1706 10.6887 7.47107C10.6887 5.96646 9.47307 4.75 7.97416 4.75C6.46912 4.75 5.2531 5.96602 5.2531 7.47107Z" fill="#4C97FF"/>
-<path d="M15.0868 5.71516C14.0615 5.71516 13.2332 6.54343 13.2332 7.56872C13.2332 8.00598 13.385 8.40622 13.6373 8.72277C13.1654 9.02039 12.7758 9.45561 12.5108 9.97982C12.4698 10.0609 12.476 10.1578 12.527 10.233C13.0003 10.9304 13.3012 11.7992 13.3451 12.7461C13.3501 12.8539 13.4236 12.9463 13.5274 12.9753C14.3677 13.2105 15.4588 13.2317 16.3459 13.0414C16.7892 12.9463 17.2012 12.7943 17.5086 12.5735C17.8194 12.3501 18.0443 12.0384 18.0443 11.637C18.0443 10.393 17.4408 9.29929 16.5294 8.72307C16.7819 8.40648 16.9338 8.00612 16.9338 7.56872C16.9338 6.5441 16.1062 5.71516 15.0868 5.71516Z" fill="#4C97FF"/>
+<path d="M5.2531 7.47107C5.2531 8.16594 5.51512 8.80522 5.9491 9.28437C4.50749 10.1253 3.54431 11.8131 3.54431 13.7407C3.54431 14.5562 4.19249 15.1128 5.00253 15.4536C5.82565 15.7998 6.90529 15.9673 7.97081 15.9673C9.03633 15.9673 10.116 15.7998 10.9391 15.4536C11.7491 15.1128 12.3973 14.5562 12.3973 13.7407V13.7342C12.3973 13.6496 12.3973 13.5472 12.3834 13.4418C12.3334 12.4083 12.0039 11.4543 11.4801 10.6824C11.0859 10.1059 10.5795 9.62615 9.99447 9.28522C10.4318 8.80663 10.6887 8.1706 10.6887 7.47107C10.6887 5.96646 9.47307 4.75 7.97416 4.75C6.46912 4.75 5.2531 5.96602 5.2531 7.47107Z" fill="#855CD6"/>
+<path d="M15.0868 5.71516C14.0615 5.71516 13.2332 6.54343 13.2332 7.56872C13.2332 8.00598 13.385 8.40622 13.6373 8.72277C13.1654 9.02039 12.7758 9.45561 12.5108 9.97982C12.4698 10.0609 12.476 10.1578 12.527 10.233C13.0003 10.9304 13.3012 11.7992 13.3451 12.7461C13.3501 12.8539 13.4236 12.9463 13.5274 12.9753C14.3677 13.2105 15.4588 13.2317 16.3459 13.0414C16.7892 12.9463 17.2012 12.7943 17.5086 12.5735C17.8194 12.3501 18.0443 12.0384 18.0443 11.637C18.0443 10.393 17.4408 9.29929 16.5294 8.72307C16.7819 8.40648 16.9338 8.00612 16.9338 7.56872C16.9338 6.5441 16.1062 5.71516 15.0868 5.71516Z" fill="#855CD6"/>
 </svg>
--- a/static/svgs/studio/activity-edit.svg
+++ b/static/svgs/studio/activity-edit.svg
@ -1,3 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0592 15.9577C9.96446 16.0524 9.85758 16.1132 9.72976 16.1709L7.56659 17.0793C7.48799 16.8113 7.29336 16.4707 6.93361 16.1109C6.58592 15.7633 6.25738 15.5807 5.99914 15.4901L6.89672 13.3378C6.94337 13.199 7.0271 13.0934 7.1208 12.9997C7.14262 12.9998 7.16333 12.9791 7.17418 12.9682L7.20476 12.9376C7.35075 12.7917 7.55585 12.7028 7.79617 12.6709C8.40705 12.5953 9.11521 12.8852 9.64935 13.4193C10.1835 13.9535 10.4734 14.6616 10.3857 15.2605C10.3505 15.458 10.2854 15.6613 10.1833 15.8116C10.1529 15.864 10.1114 15.9055 10.069 15.9479L10.0592 15.9577ZM13.6054 6.53701C13.9427 6.19967 14.4603 6.12739 14.9902 6.28635C15.2973 6.37845 15.4255 6.75916 15.2154 6.96926L10.177 12.0077C10.0566 12.128 9.86135 12.1478 9.70333 12.047C9.54003 11.9449 9.37127 11.857 9.20119 11.7836C8.92376 11.664 8.82736 11.315 9.02168 11.1207L13.6054 6.53701ZM16.5317 9.46328L11.9489 14.046C11.7586 14.2364 11.4084 14.1545 11.2923 13.8845C11.2173 13.705 11.1239 13.5307 11.0163 13.362C10.9099 13.1964 10.9364 12.99 11.0616 12.8648L16.0882 7.83815C16.2964 7.63003 16.677 7.75614 16.7711 8.06339C16.9356 8.59871 16.871 9.12397 16.5317 9.46328ZM18.5347 4.534C17.2459 3.24525 15.3869 3.01376 14.3838 4.01691L6.29247 12.1082C6.09421 12.3065 5.91898 12.5278 5.81284 12.7984L4.10642 16.8959C3.89183 17.4132 4.05796 18.0587 4.53397 18.5347C5.00998 19.0107 5.65549 19.1769 6.1728 18.9623L10.2703 17.2558C10.5398 17.1486 10.7611 16.9734 10.9594 16.7751L19.0507 8.68382C20.0538 7.68067 19.8234 5.82274 18.5347 4.534Z" fill="#855CD6"/>
 </svg>
--- a/static/svgs/studio/activity-project.svg
+++ b/static/svgs/studio/activity-project.svg
@ -1,4 +1,4 @@
 <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.79431 5C6.79431 4.44772 7.24203 4 7.79431 4H17.7943C18.3466 4 18.7943 4.44772 18.7943 5V12C18.7943 12.5523 18.3466 13 17.7943 13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V5Z" fill="#4C97FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79431 7H4.79431C4.24203 7 3.79431 7.44772 3.79431 8V14C3.79431 15.1046 4.68974 16 5.79431 16H14.7943C15.3466 16 15.7943 15.5523 15.7943 15V14H7.79431C6.68974 14 5.79431 13.1046 5.79431 12V7ZM6.79431 7H14.7943C15.3466 7 15.7943 7.44772 15.7943 8V13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V7Z" fill="#4C97FF"/>
+<path d="M6.79431 5C6.79431 4.44772 7.24203 4 7.79431 4H17.7943C18.3466 4 18.7943 4.44772 18.7943 5V12C18.7943 12.5523 18.3466 13 17.7943 13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V5Z" fill="#855CD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.79431 7H4.79431C4.24203 7 3.79431 7.44772 3.79431 8V14C3.79431 15.1046 4.68974 16 5.79431 16H14.7943C15.3466 16 15.7943 15.5523 15.7943 15V14H7.79431C6.68974 14 5.79431 13.1046 5.79431 12V7ZM6.79431 7H14.7943C15.3466 7 15.7943 7.44772 15.7943 8V13H7.79431C7.24203 13 6.79431 12.5523 6.79431 12V7Z" fill="#855CD6"/>
 </svg>
--- a/static/svgs/tutorials.svg
+++ b/static/svgs/tutorials.svg
@ -10,8 +10,8 @@
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
-        <use id="Combined-Shape" fill="#4D97FF" xlink:href="#path-1"></use>
-        <g id="Color/White" mask="url(#mask-2)" fill="#4D97FF">
+        <use id="Combined-Shape" fill="#855CD6" xlink:href="#path-1"></use>
+        <g id="Color/White" mask="url(#mask-2)" fill="#855CD6">
            <g id="Color/1_Blue">
                <g id="Color/Blue/1_Blue">
                    <rect id="Primary-Blue" x="0" y="0" width="20" height="20"></rect>
@ -19,4 +19,4 @@
            </g>
        </g>
    </g>
-</svg>
+</svg>
--- a/test/integration/footer-links.test.js
+++ b/test/integration/footer-links.test.js
@ -125,6 +125,18 @@ describe('www-integration footer links', () => {
        expect(pathname).toMatch(/^\/privacy_policy\/?$/);
    });

+    test('click Cookies link', async () => {
+        await clickText('Cookies');
+        let url = await driver.getCurrentUrl();
+        let pathname = (new URL(url)).pathname;
+        expect(pathname).toMatch(/^\/cookies\/?$/);
+
+        // Verify localization of last updated message
+        let lastUpdated = await findText('The Scratch Cookie Policy was last updated June 28, 2023');
+        let lastUpdatedVisible = await lastUpdated.isDisplayed();
+        await expect(lastUpdatedVisible).toBe(true);
+    });
+
    test('click DMCA link', async () => {
        await clickText('DMCA');
        let url = await driver.getCurrentUrl();
--- a/test/integration/project-page.test.js
+++ b/test/integration/project-page.test.js
@ -41,6 +41,9 @@ let password = process.env.SMOKE_PASSWORD;

 const remote = process.env.SMOKE_REMOTE || false;

+const FILE_MENU_XPATH = '//div[contains(@class, "menu-bar_menu-bar-item")]' +
+    '[*[contains(@class, "menu-bar_collapsible-label")]//*[text()="File"]]';
+
 jest.setTimeout(60000);

 let driver;
@ -211,7 +214,7 @@ describe('www-integration project-creation signed in', () => {
        await driver.get(ownedUnsharedUrl + '/editor');
        let gf = await findByXpath('//img[@class="green-flag_green-flag_1kiAo"]');
        await gf.isDisplayed();
-        await clickText('File');
+        await clickXpath(FILE_MENU_XPATH);
        await clickText('Save as a copy');
        let successAlert = await findText('Project saved as a copy.');
        let alertVisible = await successAlert.isDisplayed();
@ -246,7 +249,7 @@ describe('www-integration project-creation signed in', () => {
        await clickXpath('//li[@class="link create"]');
        let gf = await findByXpath('//img[@class="green-flag_green-flag_1kiAo"]');
        await gf.isDisplayed();
-        await clickText('File');
+        await clickXpath(FILE_MENU_XPATH);
        await clickText('Load from your computer');
        await driver.sleep(1000);
        const input = await findByXpath('//input[@accept=".sb,.sb2,.sb3"]');