From a76f0b3fac3ad5d2d95836d8330590d4c787ea9d Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Fri, 14 May 2021 17:08:08 -0400
Subject: [PATCH] styling studio report tiles

---
 src/views/studio/studio-report.jsx | 38 ++++++++++++++++--------------
 src/views/studio/studio.scss       | 14 ++++++++---
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/views/studio/studio-report.jsx b/src/views/studio/studio-report.jsx
index b9d5f9afd..fefa3b260 100644
--- a/src/views/studio/studio-report.jsx
+++ b/src/views/studio/studio-report.jsx
@@ -73,24 +73,26 @@ const StudioReport = ({
                         >
                             <h3><FormattedMessage id="studio.reportThisStudio" /></h3>
                             <p><FormattedMessage id="studio.reportPleaseExplain" /></p>
-                            <StudioReportTile
-                                handleChange={handleChange}
-                                heading={intl.formatMessage({id: 'studio.title'})}
-                                text={title}
-                                value={Fields.TITLE}
-                            />
-                            <StudioReportTile
-                                handleChange={handleChange}
-                                heading={intl.formatMessage({id: 'studio.description'})}
-                                text={description}
-                                value={Fields.DESCRIPTION}
-                            />
-                            <StudioReportTile
-                                handleChange={handleChange}
-                                heading={intl.formatMessage({id: 'studio.thumbnail'})}
-                                image={image}
-                                value={Fields.THUMBNAIL}
-                            />
+                            <div className="studio-report-tile-container">
+                                <StudioReportTile
+                                    handleChange={handleChange}
+                                    heading={intl.formatMessage({id: 'studio.title'})}
+                                    text={title}
+                                    value={Fields.TITLE}
+                                />
+                                <StudioReportTile
+                                    handleChange={handleChange}
+                                    heading={intl.formatMessage({id: 'studio.description'})}
+                                    text={description}
+                                    value={Fields.DESCRIPTION}
+                                />
+                                <StudioReportTile
+                                    handleChange={handleChange}
+                                    heading={intl.formatMessage({id: 'studio.thumbnail'})}
+                                    image={image}
+                                    value={Fields.THUMBNAIL}
+                                />
+                            </div>
                             <p><FormattedMessage id="studio.reportAreThereComments" /></p>
                             <button
                                 className="button"
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index 5e099b0e7..85aa46a93 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -89,6 +89,8 @@ $radius: 8px;
 }
 
 .studio-report-modal {
+    width: 650px;
+
     .studio-report-title {
         box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
         background: $ui-aqua;
@@ -103,19 +105,25 @@ $radius: 8px;
         padding: 2rem;
     }
 
+    .studio-report-tile-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
     .button:disabled {
         background-color: $active-dark-gray;
     }
 
     .studio-report-tile {
-        background: $ui-light-gray;
-        width: 200px;
+        background: rgba(0, 0, 0, 0.05);
+        width: 250px;
+        height: 156px;
         margin: 1rem;
         border-radius: 0.5rem;
     }
 
     .studio-report-tile-header {
-        background: $ui-gray;
+        background: rgba(0, 0, 0, 0.05);
         border-radius: 0.5rem;
         padding: 0.5rem;
     }