granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework GridRep button display

Browse source
This commit is contained in:
Justin Edmund 2023-09-15 11:17:15 -07:00
parent 27079a5a72
commit ce3001132f
2 changed files with 50 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/reps/GridRep/index.module.scss
View file

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

56
components/reps/GridRep/index.tsx
View file

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