Merge pull request #5458 from ericrosenbaum/studio-report-responsive

Studio report modal style fixes

src/views/studio/l10n.json

@@ -70,7 +70,7 @@
     "studio.activityBecomeOwner": "{promotedProfileLink} was promoted to manager by {promotorProfileLink}",
 
     "studio.reportThisStudio": "Report this studio",
-    "studio.reportPleaseExplain": "Please explain why you feel this studio is disrespectful or inappropriate, or otherwise breaks the Scratch Community Guidelines.",
+    "studio.reportPleaseExplain": "Please select which part of the studio you find to be disrespectful or inappropriate, or otherwise breaks the Scratch Community Guidelines.",
     "studio.reportAreThereComments": "Are there inappropriate comments in the studio? Please report them by clicking the \"report\" button on the individual comments.",
     "studio.reportThanksForLettingUsKnow": "Thanks for letting us know!",
     "studio.reportYourFeedback": "Your feedback will help us make Scratch better."

src/views/studio/modals/studio-report-modal.jsx

@@ -46,16 +46,25 @@ const StudioReportModal = ({
                     isOpen
                     className="studio-report-modal"
                     onRequestClose={handleClose}
+                    useStandardSizes
                 >
                     <ModalTitle
                         className="studio-report-title"
                     />
-                    <ModalInnerContent
+                    <div
-                        className="studio-report-inner"
+                        className="studio-report-thanks-content"
                     >
-                        <h2><FormattedMessage id="studio.reportThanksForLettingUsKnow" /></h2>
+                        <img
-                        <p><FormattedMessage id="studio.reportYourFeedback" /></p>
+                            src="/svgs/studio/report-thanks.svg"
-                    </ModalInnerContent>
+                            className="studio-report-thanks-image"
+                        />
+                        <ModalInnerContent
+                            className="studio-report-inner"
+                        >
+                            <h2><FormattedMessage id="studio.reportThanksForLettingUsKnow" /></h2>
+                            <p><FormattedMessage id="studio.reportYourFeedback" /></p>
+                        </ModalInnerContent>
+                    </div>
                 </Modal>
             ) : (
                 <Modal

src/views/studio/modals/studio-report-modal.scss

@@ -1,8 +1,7 @@
 @import "../../../colors";
+@import "../../../frameless";
 
 .studio-report-modal {
-    width: 600px;
-
     .studio-report-title {
         box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
         background: $ui-aqua;
@@ -11,17 +10,29 @@
         padding-top: .75rem;
         width: 100%;
         height: 3rem;
+        cursor: pointer;
     }
 
     .studio-report-inner {
-        padding: 2.5rem;
+        padding: 2rem;
     }
 
     .studio-report-tile-container {
-        display: flex;
+        display: grid;
-        flex-wrap: wrap;
+
-        justify-content: space-between;
+        grid-template-columns: 1fr 1fr 1fr;
-        row-gap: 1rem;
+        @media #{$medium} { /* Keep 3 columns to narrower width since it is in a modal */
+            & { grid-template-columns: 1fr 1fr; }
+        }
+        @media #{$small} {
+            & { grid-template-columns: 1fr; }
+        }
+        column-gap: 14px;
+        row-gap: 14px;
+    }
+
+    .button {
+        margin: 0px;
     }
 
     .button:disabled {
@@ -30,7 +41,7 @@
 
     .studio-report-tile {
         background: rgba(0, 0, 0, 0.05);
-        width: 250px;
+        width: 230px;
         height: 156px;
         border-radius: 0.5rem 0.5rem 0 0;
     }
@@ -81,4 +92,13 @@
         display: flex;
         justify-content: flex-end;
     }
+
+    .studio-report-thanks-content {
+        display: flex;
+    }
+
+    .studio-report-thanks-image {
+        margin-top: 2rem;
+        margin-bottom: 2rem
+    }
 }

static/svgs/studio/report-thanks.svg

@@ -0,0 +1,20 @@
+<svg width="130" height="191" viewBox="0 0 130 191" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="3" width="130" height="188">
+<rect y="3" width="130" height="188" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00015 190.5C-61.0204 187.192 -53.9928 175.861 -57.4998 99C-60.4497 34.3467 -28.917 3.00052 32.7026 3.00052C109.489 3.00052 131.182 33.3704 128.968 98.3174C126.616 167.302 49.6022 193 2.00015 190.5Z" fill="#0FBD8C" fill-opacity="0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-26.3462 63.6609C-26.7399 61.5295 -25.3644 59.4724 -23.2444 59.0217L59.0989 41.5191C61.2301 41.0661 63.3318 42.4021 63.8262 44.524L78.131 105.916C78.3677 106.932 78.1983 108 77.659 108.892L64.858 130.08C64.3088 130.989 63.4205 131.642 62.3891 131.896L-6.31782 148.784C-8.55219 149.334 -10.7881 147.889 -11.2061 145.626L-26.3462 63.6609Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 111.166L79 107L64.3913 132L63 111.166Z" fill="#0EBD8C" fill-opacity="0.1"/>
+<rect x="-24.9741" y="73.2256" width="81" height="9" rx="4.5" transform="rotate(-13 -24.9741 73.2256)" fill="#575E75" fill-opacity="0.25"/>
+<rect x="-22.9741" y="90.2256" width="81" height="9" rx="4.5" transform="rotate(-13 -22.9741 90.2256)" fill="#575E75" fill-opacity="0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-6.54849 109.48C-7.10587 107.066 -5.6067 104.655 -3.19484 104.088L21.4033 98.298C23.8297 97.7269 26.2581 99.2371 26.8189 101.666C27.3762 104.08 25.8771 106.491 23.4652 107.059L-1.13289 112.848C-3.55935 113.419 -5.98774 111.909 -6.54849 109.48Z" fill="#575E75" fill-opacity="0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.085 69.4963L102.113 65.7763C100.679 63.0733 96.7551 62.324 94.2109 63.6475L93.2085 64.1701L93.2078 64.1695L31.1812 96.4579L31.123 96.4879L29.9175 98.7689L25.7672 106.62C25.5442 107.041 25.7175 107.68 26.0654 108.12C26.2715 108.384 26.5406 108.578 26.8254 108.612L30.9788 109.111L30.9763 109.106L36.8018 109.807L38.2781 109.985L38.3157 109.89L38.3472 109.949L91.7703 82.1391L91.7709 82.1403L94.5218 80.7085L94.5206 80.7073L95.5303 80.1817L95.5309 80.1829L98.2818 78.7511L98.2812 78.7493L100.039 77.8346L100.049 77.8539L101.368 77.1671C103.915 75.8411 105.52 72.203 104.085 69.4963Z" fill="#0EBD8C" fill-opacity="0.25"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.0137 107.407L97.1118 71.5674L89.2196 58.4067L29.1118 94.2522L37.0137 107.407Z" fill="#FFBF00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3123 99.6064L31.7587 98.5862L32.6907 95.2529L28.9264 94.22L28.8699 94.2538L27.791 96.6099L24.0771 104.722C23.7596 105.415 24.4766 106.608 25.241 106.658L35.2923 107.314L36.7792 107.411L37.9248 103.945L34.3761 103.128L35.3123 99.6064Z" fill="#CF8B17"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8201 100.933L24.0825 104.727C23.7649 105.42 24.4826 106.614 25.2463 106.664L29.429 106.937L25.8201 100.933Z" fill="#5C6771"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.9165 75.9072L82 62.7546L88.307 58.9998L96.2235 72.1517L89.9165 75.9072Z" fill="#36A97E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.7747 71.7455L88.8545 58.5699L90.1435 57.8031C92.6139 56.333 96.5816 56.8694 98.1656 59.5049L100.346 63.1315C101.932 65.77 100.529 69.5121 98.0557 70.9835L96.7747 71.7455Z" fill="#ED5F87"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.292 99.1195C93.6848 98.7458 94.7728 97.6621 95.148 96.2748L96.0011 93.1187C96.4042 91.6268 98.5292 91.6268 98.933 93.1187L99.786 96.2748C100.161 97.6621 101.249 98.7458 102.641 99.1195L105.811 99.9692C107.308 100.371 107.308 102.487 105.811 102.889L102.641 103.739C101.249 104.112 100.161 105.196 99.786 106.584L98.933 109.74C98.5292 111.231 96.4042 111.231 96.0011 109.74L95.148 106.584C94.7728 105.196 93.6848 104.112 92.292 103.739L89.1234 102.889C87.6255 102.487 87.6255 100.371 89.1234 99.9692L92.292 99.1195Z" fill="white"/>
+</g>
+</svg>