Settings counter alignment fix (#10802)
https://discord.com/channels/1130383047699738754/1349342363490844692
This commit is contained in:
@ -1,6 +1,6 @@
|
|||||||
import { TextInput } from '@/ui/input/components/TextInput';
|
import { TextInput } from '@/ui/input/components/TextInput';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import { Button, IconMinus, IconPlus } from 'twenty-ui';
|
import { IconButton, IconMinus, IconPlus } from 'twenty-ui';
|
||||||
import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
|
import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
|
||||||
|
|
||||||
type SettingsCounterProps = {
|
type SettingsCounterProps = {
|
||||||
@ -29,17 +29,6 @@ const StyledTextInput = styled(TextInput)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledControlButton = styled(Button)`
|
|
||||||
height: ${({ theme }) => theme.spacing(6)};
|
|
||||||
width: ${({ theme }) => theme.spacing(6)};
|
|
||||||
padding: 0;
|
|
||||||
justify-content: center;
|
|
||||||
svg {
|
|
||||||
height: ${({ theme }) => theme.spacing(4)};
|
|
||||||
width: ${({ theme }) => theme.spacing(4)};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const SettingsCounter = ({
|
export const SettingsCounter = ({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
@ -79,10 +68,11 @@ export const SettingsCounter = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledCounterContainer>
|
<StyledCounterContainer>
|
||||||
<StyledControlButton
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
Icon={IconMinus}
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
onClick={handleDecrementCounter}
|
onClick={handleDecrementCounter}
|
||||||
Icon={IconMinus}
|
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
<StyledTextInput
|
<StyledTextInput
|
||||||
@ -92,10 +82,11 @@ export const SettingsCounter = ({
|
|||||||
onChange={handleTextInputChange}
|
onChange={handleTextInputChange}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
<StyledControlButton
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
Icon={IconPlus}
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
onClick={handleIncrementCounter}
|
onClick={handleIncrementCounter}
|
||||||
Icon={IconPlus}
|
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
</StyledCounterContainer>
|
</StyledCounterContainer>
|
||||||
|
|||||||
@ -18,6 +18,7 @@ type SettingsOptionCardContentSelectProps = {
|
|||||||
|
|
||||||
const StyledSelectContainer = styled.div`
|
const StyledSelectContainer = styled.div`
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
width: 120px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const SettingsOptionCardContentSelect = ({
|
export const SettingsOptionCardContentSelect = ({
|
||||||
|
|||||||
Reference in New Issue
Block a user