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:
parent
0b68fff0b7
commit
705a0e50d1
@ -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
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user