Rework GridRep button display

components/reps/GridRep/index.module.scss

@@ -212,6 +212,13 @@
     flex-direction: column;
     gap: $unit;
 
+    .buttonArea {
+      display: flex;
+      flex-direction: row;
+      gap: $unit;
+      justify-content: center;
+    }
+
     h2 {
       color: var(--text-primary);
       font-size: $font-regular;
@@ -241,15 +248,23 @@
         gap: calc($unit / 2);
       }
 
-      .icon {
+      .iconWrapper {
+        width: $unit-5x;
+        height: $unit-5x;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: $unit * 2.5;
-        height: $unit * 2.5;
 
-        svg {
-          fill: var(--text-tertiary);
+        .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: $unit * 2.5;
+          height: $unit * 2.5;
+
+          svg {
+            fill: var(--text-tertiary);
+          }
         }
       }
 

components/reps/GridRep/index.tsx

@@ -491,31 +491,31 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
     </Link>
   )
 
-  function buttonArea() {
-    if (
-      account.authorized &&
-      ((party.user && account.user && account.user.id !== party.user.id) ||
-        !party.user)
-    ) {
-      return favoriteButton
-    } else if (party.visibility === 2) {
-      return (
-        <Tooltip content={t('party.tooltips.unlisted')}>
-          <span className={styles.icon}>
-            <UnlistedIcon />
-          </span>
-        </Tooltip>
-      )
-    } else if (party.visibility === 3) {
-      return (
-        <Tooltip content={t('party.tooltips.private')}>
-          <span className={styles.icon}>
-            <PrivateIcon />
-          </span>
-        </Tooltip>
-      )
-    }
-  }
+  const renderFavoriteButton =
+    account.authorized &&
+    ((party.user && account.user && account.user.id !== party.user.id) ||
+      !party.user) &&
+    favoriteButton
+
+  const renderVisibilityIcon = party.visibility === 2 && (
+    <Tooltip content={t('party.tooltips.unlisted')}>
+      <div className={styles.iconWrapper}>
+        <span className={styles.icon}>
+          <UnlistedIcon />
+        </span>
+      </div>
+    </Tooltip>
+  )
+
+  const renderPrivateIcon = party.visibility === 3 && (
+    <Tooltip content={t('party.tooltips.private')}>
+      <div className={styles.iconWrapper}>
+        <span className={styles.icon}>
+          <PrivateIcon />
+        </span>
+      </div>
+    </Tooltip>
+  )
 
   const detailsWithUsername = (
     <div className={styles.details}>
@@ -538,7 +538,11 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
             )}
           </div>
         </div>
-        {buttonArea()}
+        <div className={styles.buttonArea}>
+          {renderPrivateIcon}
+          {renderVisibilityIcon}
+          {renderFavoriteButton}
+        </div>
       </div>
       <div className={styles.attributed}>
         {attribution()}