mirror of
https://github.com/Unleash/unleash.git
synced 2025-03-18 00:19:49 +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:  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)  But this is what it'd look like now with centered text:  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 }) => ({
|
const StyledButton = styled(Button)(({ theme }) => ({
|
||||||
fontSize: theme.spacing(1.75),
|
fontSize: theme.spacing(1.75),
|
||||||
textDecoration: 'underline',
|
textDecoration: 'underline',
|
||||||
|
textAlign: 'right',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
},
|
},
|
||||||
fontWeight: theme.typography.h4.fontWeight,
|
fontWeight: theme.typography.h4.fontWeight,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const InvisibleParagraph = styled('p')({
|
||||||
|
display: 'contents',
|
||||||
|
});
|
||||||
|
|
||||||
export const LicensedUsersBox = () => {
|
export const LicensedUsersBox = () => {
|
||||||
return (
|
return (
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledColumn>
|
<StyledColumn>
|
||||||
<Typography variant='body1' fontWeight='bold'>
|
<InvisibleParagraph>
|
||||||
11/25
|
<Typography
|
||||||
</Typography>
|
variant='body1'
|
||||||
<Typography variant='body2'>Seats used last 30 days</Typography>
|
fontWeight='bold'
|
||||||
|
component='span'
|
||||||
|
>
|
||||||
|
11/25
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='body2' component='span'>
|
||||||
|
Seats used last 30 days
|
||||||
|
</Typography>
|
||||||
|
</InvisibleParagraph>
|
||||||
</StyledColumn>
|
</StyledColumn>
|
||||||
<RightColumn>
|
<RightColumn>
|
||||||
<HelpIcon
|
<HelpIcon
|
||||||
|
@ -29,7 +29,7 @@ const StyledElement = styled(Box)(({ theme }) => ({
|
|||||||
export const UsersHeader = () => {
|
export const UsersHeader = () => {
|
||||||
const licensedUsers = useUiFlag('licensedUsers');
|
const licensedUsers = useUiFlag('licensedUsers');
|
||||||
const { isOss } = useUiConfig();
|
const { isOss } = useUiConfig();
|
||||||
const licensedUsersEnabled = licensedUsers && isOss();
|
const licensedUsersEnabled = licensedUsers && !isOss();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledContainer licensedUsersEnabled={licensedUsersEnabled}>
|
<StyledContainer licensedUsersEnabled={licensedUsersEnabled}>
|
||||||
|
Loading…
Reference in New Issue
Block a user