From d0d32e81e90f114aac7fd933fab31f52c751daf4 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Tue, 27 Jul 2021 11:21:14 -0400
Subject: [PATCH] style selection tiles

---
 .../modals/transfer-ownership-modal.scss      | 25 ++++++++++++++++---
 .../studio/modals/transfer-ownership-tile.jsx | 15 +++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/views/studio/modals/transfer-ownership-modal.scss b/src/views/studio/modals/transfer-ownership-modal.scss
index bb0671278..2fceb7170 100644
--- a/src/views/studio/modals/transfer-ownership-modal.scss
+++ b/src/views/studio/modals/transfer-ownership-modal.scss
@@ -36,7 +36,7 @@
     }
 
     .inner {
-        padding: 2rem;
+        padding: 1rem;
     }
 
     .transfer-ownership-alert-wrapper .alert-wrapper {
@@ -88,8 +88,27 @@
         @media #{$intermediate-and-smaller} {
             & { grid-template-columns: repeat(2, minmax(0,1fr)); }
         }
-        column-gap: 20px;
-        row-gap: 20px;
+        column-gap: 12px;
+        row-gap: 12px;
+    }
+
+    .transfer-ownership-tile-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        overflow: hidden;
+        margin-left: 8px;
+        flex-grow: 1; /* Grow to fill available space */
+        min-width: 0; /* Prevents within from expanding beyond bounds */
+    }
+
+    .transfer-ownership-name-selected {
+        color: white !important;
+    }
+
+    .transfer-selection-icon {
+        margin-left: 8px;
+        margin-right: 8px;
     }
 
     .transfer-ownership-tile-selected {
diff --git a/src/views/studio/modals/transfer-ownership-tile.jsx b/src/views/studio/modals/transfer-ownership-tile.jsx
index 2e42088d9..419f41b72 100644
--- a/src/views/studio/modals/transfer-ownership-tile.jsx
+++ b/src/views/studio/modals/transfer-ownership-tile.jsx
@@ -14,8 +14,19 @@ const TransferOwnershipTile = ({
             className="studio-member-image"
             src={image}
         />
-        <div className="studio-member-info">
-            {username}
+        <div className="transfer-ownership-tile-info">
+            <div
+                className={classNames('studio-member-name',
+                    {'transfer-ownership-name-selected': selected}
+                )}
+
+            >
+                {username}
+            </div>
+            {selected &&
+                <div className="transfer-selection-icon">
+                    <img src="/svgs/studio/check-icon-white.svg" />
+                </div>}
             {isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
         </div>
     </div>