Skip to content

changed icon placement on guild cards #2387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mvolkmann merged 4 commits into from
May 15, 2024
Merged

changed icon placement on guild cards #2387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af9621c
changed icon placement on guild cards
mvolkmann May 15, 2024
768dcbf
cleanup of guild card icon code
mvolkmann May 15, 2024
e4cca9f
fixed snapshot tests
mvolkmann May 15, 2024
b4640e6
Merge branch 'develop' into bugfix-guild-card-icon-placement
jackkeller May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions web-ui/src/components/guild-results/GuildSummaryCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,22 +134,29 @@ const GuildSummaryCard = ({ guild, index, isOpen, onGuildSelect }) => {
}
};

const iconStyles = { height: '2.5rem', width: '2.5rem' };
const iconStyles = {
position: 'absolute',
bottom: '0.5rem',
right: '0.5rem',
height: '2.5rem',
width: '2.5rem'
};

const guildIcon = () => (
Copy link
Collaborator Author

@mvolkmann mvolkmann May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved the JSX for the guild card icons into a new function to clean up the code.

<Tooltip
title={`This is a ${guild.community ? 'Community' : 'Guild'}.`}
aria-label="icon meaning"
>
{guild.community ? (
<Groups sx={{ color: 'var(--oci-orange)', ...iconStyles }} />
) : (
<Construction sx={{ color: 'var(--oci-light-blue)', ...iconStyles }} />
)}
</Tooltip>
);

return (
<StyledCard className={classes.card}>
<Tooltip
title={`This is a ${guild.community ? 'Community' : 'Guild'}.`}
aria-label="icon meaning"
>
{guild.community ? (
<Groups sx={{ color: 'var(--oci-orange)', ...iconStyles }} />
) : (
<Construction
sx={{ color: 'var(--oci-light-blue)', ...iconStyles }}
/>
)}
</Tooltip>
<StyledCard className={classes.card} sx={{ position: 'relative' }}>
<CardHeader
classes={{
content: classes.header,
Expand Down Expand Up @@ -250,6 +257,7 @@ const GuildSummaryCard = ({ guild, index, isOpen, onGuildSelect }) => {
</>
)}
</CardActions>
{guildIcon()}
<EditGuildModal
guild={guild}
open={open}
Expand Down
38 changes: 19 additions & 19 deletions web-ui/src/components/guild-results/__snapshots__/GuildResults.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,21 +78,8 @@ exports[`renders correctly 1`] = `
class="guilds"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1g0qwi7-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -174,14 +161,10 @@ exports[`renders correctly 1`] = `
</div>
</div>
</div>
</div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1li5fkl-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
Expand All @@ -191,6 +174,10 @@ exports[`renders correctly 1`] = `
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
</div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1g0qwi7-MuiPaper-root-MuiCard-root"
>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -270,6 +257,19 @@ exports[`renders correctly 1`] = `
</div>
</div>
</div>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1li5fkl-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
</div>
</div>
</div>
Expand Down
68 changes: 34 additions & 34 deletions web-ui/src/components/guild-results/__snapshots__/GuildSummaryCard.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,8 @@
exports[`renders correctly 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1g0qwi7-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -58,19 +45,10 @@ exports[`renders correctly 1`] = `
<div
class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
/>
</div>
</div>
`;

exports[`renders correctly for ADMIN 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1li5fkl-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
Expand All @@ -80,6 +58,15 @@ exports[`renders correctly for ADMIN 1`] = `
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
</div>
</div>
`;

exports[`renders correctly for ADMIN 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1g0qwi7-MuiPaper-root-MuiCard-root"
>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -161,19 +148,10 @@ exports[`renders correctly for ADMIN 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders correctly for guild lead 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11hidt-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1li5fkl-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
Expand All @@ -183,6 +161,15 @@ exports[`renders correctly for guild lead 1`] = `
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
</div>
</div>
`;

exports[`renders correctly for guild lead 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1g0qwi7-MuiPaper-root-MuiCard-root"
>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -266,6 +253,19 @@ exports[`renders correctly for guild lead 1`] = `
</div>
</div>
</div>
<svg
aria-hidden="true"
aria-label="icon meaning"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1li5fkl-MuiSvgIcon-root"
data-mui-internal-clone-element="true"
data-testid="ConstructionIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m13.7826 15.1719 2.1213-2.1213 5.9963 5.9962-2.1213 2.1213zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49c-1.17-1.17-3.07-1.17-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21"
/>
</svg>
</div>
</div>
`;