Skip to content

Fix: Icons cant be on scale #3689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 17, 2020
Merged

Fix: Icons cant be on scale #3689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95374a0
icons cant be on scale
siddharthkp Mar 13, 2020
4b63b91
whoops thats not supposed to be there
siddharthkp Mar 13, 2020
972dde4
fix story size
siddharthkp Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const Comment = React.memo(({ comment }: any) => {
<Icon name="check" title="Resolved" color="green" />
)}
<Menu>
<Menu.IconButton name="more" title="Comment actions" size={3} />
<Menu.IconButton name="more" title="Comment actions" size={12} />
<Menu.List>
<Menu.Item
onSelect={() =>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const Reply = ({
{state.user.id === author.id && (
<Stack align="center">
<Menu>
<Menu.IconButton name="more" title="Reply actions" size={3} />
<Menu.IconButton name="more" title="Reply actions" size={12} />
<Menu.List>
<Menu.Item
onSelect={() =>
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const Dialog = props => {
})
}
name="check"
size={4}
size={14}
title="Resolve Comment"
css={css({
transition: 'color',
Expand All @@ -106,7 +106,7 @@ export const Dialog = props => {
/>
<IconButton
name="cross"
size={3}
size={10}
title="Close comment dialog"
onClick={closeDialog}
/>
Expand Down Expand Up @@ -146,7 +146,7 @@ export const Dialog = props => {
<Menu.IconButton
name="more"
title="Comment actions"
size={3}
size={12}
/>
<Menu.List>
<Menu.Item
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const Comments: React.FC = () => {
>
<Icon
name="comments"
size={20}
size={80}
color="mutedForeground"
css={{ opacity: 0.2 }}
/>
Expand Down Expand Up @@ -87,7 +87,7 @@ export const Comments: React.FC = () => {
className="icon-button"
name="filter"
title="Filter comments"
size={3}
size={12}
/>
<Menu.List>
{options.map(option => (
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/Icon/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const Simple = () => (
<Stack gap={2}>
<Icon name="github" />
<Icon name="github" css={{ color: 'blues.500' }} />
<Icon name="github" size={6} />
<Icon name="github" size={24} />
</Stack>
);

Expand Down
8 changes: 2 additions & 6 deletions packages/components/src/components/Icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,11 @@ type IconProps = React.SVGAttributes<SVGElement> &

export const Icon: React.FC<IconProps> = ({
name = 'notFound',
size = 4,
size = 16,
color = 'inherit',
...props
}) => {
const SVG = icons[name];
// we use a 4px scale for space and size
const scaledSize = size * 4;

return (
<SVG width={scaledSize} height={scaledSize} color={color} {...props} />
);
return <SVG width={size} height={size} color={color} {...props} />;
};