admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix avatar storybook issue + fix Autosize input send button color (#389)

Browse Source 
* Fix avatar storybook issue + fix Autosize input send button color

* Fix storybook font-size
This commit is contained in:
Charles Bochet
2023-06-25 14:58:34 -07:00
committed by GitHub
parent 3c5a270eca
commit f0bbfb11ee
5 changed files with 13 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/.storybook/preview-head.html
View File

@ -6,4 +6,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
html {
font-size: 13px;
}
</style> </style>

2
front/src/modules/ui/components/buttons/IconButton.tsx
View File

@ -20,7 +20,7 @@ const StyledIconButton = styled.button`
&:disabled { &:disabled {
background: ${(props) => props.theme.quaternaryBackground}; background: ${(props) => props.theme.quaternaryBackground};
color: ${(props) => props.theme.text80}; color: ${(props) => props.theme.text40};
cursor: default; cursor: default;
} }
`; `;

34
front/src/modules/users/components/Avatar.tsx
View File

@ -18,38 +18,16 @@ export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholder'>>`
: 'none'}; : 'none'};
background-image: url(${(props) => background-image: url(${(props) =>
isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'}); isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
background-image: url(${(props) =>
isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
background-position: center center;
background-repeat: no-repeat;
background-size: cover; background-size: cover;
border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')}; border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
display: flex;
height: ${(props) => props.size}px;
height: ${(props) => props.size}px;
justify-content: center;
width: ${(props) => props.size}px;
width: ${(props) => props.size}px;
`;
type StyledPlaceholderLetterProps = {
size: number;
};
export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
align-items: center;
color: ${(props) => props.theme.text80}; color: ${(props) => props.theme.text80};
display: flex; display: flex;
font-size: 12px;
font-weight: 500; font-size: ${(props) => props.theme.fontSizeSmall};
font-weight: ${(props) => props.theme.fontWeightMedium};
height: ${(props) => props.size}px; height: ${(props) => props.size}px;
justify-content: center;
justify-content: center;
width: ${(props) => props.size}px; width: ${(props) => props.size}px;
`; `;
@ -63,11 +41,7 @@ export function Avatar({
return ( return (
<StyledAvatar avatarUrl={avatarUrl} size={size} type={type}> <StyledAvatar avatarUrl={avatarUrl} size={size} type={type}>
{noAvatarUrl && ( {noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
<StyledPlaceholderLetter size={size}>
{placeholder[0]?.toLocaleUpperCase()}
</StyledPlaceholderLetter>
)}
</StyledAvatar> </StyledAvatar>
); );
} }

3
front/src/modules/users/components/__stories__/Avatar.stories.tsx
View File

@ -12,7 +12,8 @@ const meta: Meta<typeof Avatar> = {
export default meta; export default meta;
type Story = StoryObj<typeof Avatar>; type Story = StoryObj<typeof Avatar>;
const avatarUrl = 'http://placekitten.com/300/300'; const avatarUrl =
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
export const Rounded: Story = { export const Rounded: Story = {
render: getRenderWrapperForComponent( render: getRenderWrapperForComponent(

3
infra/dev/Makefile
View File

@ -17,6 +17,9 @@ sh:
front-start: front-start:
@docker-compose exec twenty-dev sh -c "cd /app/front && yarn start" @docker-compose exec twenty-dev sh -c "cd /app/front && yarn start"
front-lint:
@docker-compose exec twenty-dev sh -c "cd /app/front && yarn lint"
front-test: front-test:
@docker-compose exec twenty-dev sh -c "cd /app/front && yarn test" @docker-compose exec twenty-dev sh -c "cd /app/front && yarn test"