twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 12:02:10 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 32 deletions
Show Stats 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;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 13px;
}
</style>

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

@ -20,7 +20,7 @@ const StyledIconButton = styled.button`
&:disabled {
background: ${(props) => props.theme.quaternaryBackground};
color: ${(props) => props.theme.text80};
color: ${(props) => props.theme.text40};
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'};
background-image: url(${(props) =>
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;
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};
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;
justify-content: center;
justify-content: center;
width: ${(props) => props.size}px;
`;
@ -63,11 +41,7 @@ export function Avatar({
return (
<StyledAvatar avatarUrl={avatarUrl} size={size} type={type}>
{noAvatarUrl && (
<StyledPlaceholderLetter size={size}>
{placeholder[0]?.toLocaleUpperCase()}
</StyledPlaceholderLetter>
)}
{noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
</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;
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 = {
render: getRenderWrapperForComponent(

3
infra/dev/Makefile
View File

@ -17,6 +17,9 @@ sh:
front-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:
@docker-compose exec twenty-dev sh -c "cd /app/front && yarn test"