diff --git a/components/reps/GridRep/index.module.scss b/components/reps/GridRep/index.module.scss index e3680ac6..76909c85 100644 --- a/components/reps/GridRep/index.module.scss +++ b/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); + } } } diff --git a/components/reps/GridRep/index.tsx b/components/reps/GridRep/index.tsx index 3c364e5e..869ac04d 100644 --- a/components/reps/GridRep/index.tsx +++ b/components/reps/GridRep/index.tsx @@ -491,31 +491,31 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => { ) - 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 ( - - - - - - ) - } else if (party.visibility === 3) { - return ( - - - - - - ) - } - } + const renderFavoriteButton = + account.authorized && + ((party.user && account.user && account.user.id !== party.user.id) || + !party.user) && + favoriteButton + + const renderVisibilityIcon = party.visibility === 2 && ( + +
+ + + +
+
+ ) + + const renderPrivateIcon = party.visibility === 3 && ( + +
+ + + +
+
+ ) const detailsWithUsername = (
@@ -538,7 +538,11 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => { )}
- {buttonArea()} +
+ {renderPrivateIcon} + {renderVisibilityIcon} + {renderFavoriteButton} +
{attribution()}