1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

fix: isOss check + minor UI things (#8828)

This PR fixes the isOss check for the licensed users component. It also
addresses two things in the UI:

1. It right-aligns the text on the button so that when we get narrower,
the text doesn't slide to the center. There's a few more things that we
can fix later, though. When you press it, it'll still show the entire
button layout:

![image](https://github.com/user-attachments/assets/ea4606be-614a-455e-921f-45ed8d40df23)
And when you focus it with a keyboard it still looks like a button. 

We can get around that by using a regular button and just styling it a
bit, but making the text align will take some extra jimmying around (not
done in this pr, but got stashed changes for it)

![image](https://github.com/user-attachments/assets/33b2f32b-0027-45bf-84f2-4a5e99ef38b2)

But this is what it'd look like now with centered text: 

![image](https://github.com/user-attachments/assets/fe4c6b28-ede1-4418-a471-c2b6b959aacf)



2. It wraps the entire left column in a `p` tag, because they belong
together. They're not two logical paragraphs. So instead, we wrap them
in spans and surround them in a
p. `Display: contents` makes the p "invisible", so its children act as
if
they're children of the container above it instead.
This commit is contained in:
Thomas Heartman 2024-11-22 09:26:52 +01:00 committed by GitHub
parent 0b68fff0b7
commit 705a0e50d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 5 deletions

View File

@ -21,20 +21,33 @@ const RightColumn = styled(StyledColumn)({
const StyledButton = styled(Button)(({ theme }) => ({
fontSize: theme.spacing(1.75),
textDecoration: 'underline',
textAlign: 'right',
'&:hover': {
backgroundColor: theme.palette.background.paper,
},
fontWeight: theme.typography.h4.fontWeight,
}));
const InvisibleParagraph = styled('p')({
display: 'contents',
});
export const LicensedUsersBox = () => {
return (
<StyledContainer>
<StyledColumn>
<Typography variant='body1' fontWeight='bold'>
11/25
</Typography>
<Typography variant='body2'>Seats used last 30 days</Typography>
<InvisibleParagraph>
<Typography
variant='body1'
fontWeight='bold'
component='span'
>
11/25
</Typography>
<Typography variant='body2' component='span'>
Seats used last 30 days
</Typography>
</InvisibleParagraph>
</StyledColumn>
<RightColumn>
<HelpIcon

View File

@ -29,7 +29,7 @@ const StyledElement = styled(Box)(({ theme }) => ({
export const UsersHeader = () => {
const licensedUsers = useUiFlag('licensedUsers');
const { isOss } = useUiConfig();
const licensedUsersEnabled = licensedUsers && isOss();
const licensedUsersEnabled = licensedUsers && !isOss();
return (
<StyledContainer licensedUsersEnabled={licensedUsersEnabled}>