style selection tiles

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 {

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>