Fix: Icons cant be on scale (#3689)

* icons cant be on scale

* whoops thats not supposed to be there

* fix story size

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx

@@ -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={() =>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx

@@ -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={() =>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -96,7 +96,7 @@ export const Dialog = props => {
                 })
               }
               name="check"
-              size={4}
+              size={14}
               title="Resolve Comment"
               css={css({
                 transition: 'color',
@@ -106,7 +106,7 @@ export const Dialog = props => {
             />
             <IconButton
               name="cross"
-              size={3}
+              size={10}
               title="Close comment dialog"
               onClick={closeDialog}
             />
@@ -146,7 +146,7 @@ export const Dialog = props => {
                     <Menu.IconButton
                       name="more"
                       title="Comment actions"
-                      size={3}
+                      size={12}
                     />
                     <Menu.List>
                       <Menu.Item

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx

@@ -49,7 +49,7 @@ export const Comments: React.FC = () => {
     >
       <Icon
         name="comments"
-        size={20}
+        size={80}
         color="mutedForeground"
         css={{ opacity: 0.2 }}
       />
@@ -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 => (

packages/components/src/components/Icon/index.stories.tsx

@@ -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>
 );
 

packages/components/src/components/Icon/index.tsx

@@ -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} />;
 };