fix a bunch of tiny issues

siddharthkp · siddharthkp · commit 1db69a886d1b · 2020-09-10T14:56:48.000+02:00
diff --git a/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx b/packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx
@@ -10,7 +10,7 @@ export const backgrounds = [
   'orange',
   'blues.300',
   'blues.600',
-  'blues.700',
+  'blues.700'
 ];
 
 interface TeamAvatarProps {
@@ -24,15 +24,15 @@ interface TeamAvatarProps {
 const textSizes = {
   small: 2,
   big: 3,
-  bigger: 6,
+  bigger: 6
 };
 
 export const TeamAvatar = ({
   name,
   size = 'big',
   className,
   avatar,
-  style,
+  style
 }: TeamAvatarProps) => {
   if (!name) return null;
 
@@ -45,13 +45,14 @@ export const TeamAvatar = ({
     <>
       <img
         css={css({
-          maxWidth: avatarSize,
-          maxHeight: avatarSize,
+          width: avatarSize,
+          height: avatarSize,
+          objectFit: 'cover',
           borderRadius: 'small',
           borderColor: 'sideBar.border',
           borderStyle: 'solid',
           borderWidth: 1,
-          boxSizing: 'border-box',
+          boxSizing: 'border-box'
         })}
         style={style}
         src={avatar}
@@ -72,7 +73,7 @@ export const TeamAvatar = ({
         backgroundColor,
         color: 'white',
         fontWeight: 600,
-        fontFamily: 'Inter',
+        fontFamily: 'Inter'
       })}
       className={className}
     >
diff --git a/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx b/packages/app/src/app/pages/Profile2/LikedSandboxes.tsx
@@ -8,16 +8,16 @@ import { SANDBOXES_PER_PAGE } from './constants';
 export const LikedSandboxes = ({ menuControls }) => {
   const {
     actions: {
-      profile: { likedSandboxesPageChanged },
+      profile: { likedSandboxesPageChanged }
     },
     state: {
       profile: {
         current: { username },
         isLoadingSandboxes,
         currentLikedSandboxesPage,
-        likedSandboxes,
-      },
-    },
+        likedSandboxes
+      }
+    }
   } = useOvermind();
 
   // explicitly call it on first page render
@@ -45,7 +45,7 @@ export const LikedSandboxes = ({ menuControls }) => {
         rowGap={6}
         columnGap={6}
         css={{
-          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
         }}
       >
         {isLoadingSandboxes
@@ -62,6 +62,8 @@ export const LikedSandboxes = ({ menuControls }) => {
                 <SandboxCard sandbox={sandbox} menuControls={menuControls} />
               </Column>
             ))}
+        <div />
+        <div />
       </Grid>
       <Pagination />
     </Stack>
@@ -71,14 +73,14 @@ export const LikedSandboxes = ({ menuControls }) => {
 const Pagination = () => {
   const {
     actions: {
-      profile: { likedSandboxesPageChanged },
+      profile: { likedSandboxesPageChanged }
     },
     state: {
       profile: {
         currentLikedSandboxesPage,
-        current: { givenLikeCount },
-      },
-    },
+        current: { givenLikeCount }
+      }
+    }
   } = useOvermind();
 
   const numberOfPages = Math.ceil(givenLikeCount / SANDBOXES_PER_PAGE);
diff --git a/packages/app/src/app/pages/Profile2/ProfileCard.tsx b/packages/app/src/app/pages/Profile2/ProfileCard.tsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { useOvermind } from 'app/overmind';
 import { Link as RouterLink } from 'react-router-dom';
 import {
+  Grid,
   Stack,
   Avatar,
   Text,
@@ -11,20 +12,20 @@ import {
   Button,
   Textarea,
   Input,
-  Tooltip,
+  Tooltip
 } from '@codesandbox/components';
 import { TeamAvatar } from 'app/components/TeamAvatar';
 import css from '@styled-system/css';
 
 export const ProfileCard = ({ defaultEditing = false }) => {
   const {
     actions: {
-      profile: { updateUserProfile },
+      profile: { updateUserProfile }
     },
     state: {
       user: loggedInUser,
-      profile: { current: user },
-    },
+      profile: { current: user }
+    }
   } = useOvermind();
 
   const [editing, setEditing] = React.useState(defaultEditing);
@@ -61,7 +62,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
         borderColor: 'grays.600',
         paddingTop: 2,
         paddingBottom: 6,
-        marginBottom: 8,
+        marginBottom: 8
       })}
     >
       <Stack direction="vertical">
@@ -72,7 +73,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
             paddingX: 6,
             paddingY: 6,
             // fix height to avoid jumping
-            height: myProfile ? 230 : 'auto',
+            height: myProfile ? 230 : 'auto'
           })}
         >
           <Stack gap={4} align="center">
@@ -81,7 +82,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
               css={css({
                 size: 64,
                 img: { borderRadius: 'medium' },
-                span: { fontSize: 3, height: 4, lineHeight: '16px' },
+                span: { fontSize: 3, height: 4, lineHeight: '16px' }
               })}
             />
             <Stack direction="vertical">
@@ -121,15 +122,17 @@ export const ProfileCard = ({ defaultEditing = false }) => {
               paddingX: 6,
               paddingY: 4,
               borderTop: '1px solid',
-              borderColor: 'grays.600',
+              borderColor: 'grays.600'
             })}
           >
             <Text size={2} weight="bold">
-              Team
+              Teams
             </Text>
-            <Stack gap={3}>
+            <Grid
+              css={{ gridTemplateColumns: 'repeat(auto-fill, 26px)', gap: 12 }}
+            >
               {user.teams
-                .slice()
+                .slice(1) // first one is always personal workspace
                 .sort((team1, team2) =>
                   team1.avatarUrl && !team2.avatarUrl ? -1 : 1
                 )
@@ -140,7 +143,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
                     </span>
                   </Tooltip>
                 ))}
-            </Stack>
+            </Grid>
           </Stack>
         ) : null}
         <Stack
@@ -149,7 +152,7 @@ export const ProfileCard = ({ defaultEditing = false }) => {
             paddingY: 4,
             marginBottom: 4,
             borderTop: '1px solid',
-            borderColor: 'grays.600',
+            borderColor: 'grays.600'
           })}
         >
           <Stack direction="vertical" gap={4} css={{ width: '100%' }}>
@@ -250,7 +253,7 @@ const SocialLinks = ({ username, socialLinks, editing, setSocialLinks }) => (
           css={css({
             fontWeight: 'normal',
             justifyContent: 'start',
-            paddingX: 0,
+            paddingX: 0
           })}
           onClick={() => setSocialLinks([...socialLinks, 'https://'])}
         >
diff --git a/packages/app/src/app/pages/Profile2/SandboxCard.tsx b/packages/app/src/app/pages/Profile2/SandboxCard.tsx
@@ -7,7 +7,7 @@ import {
   Stats,
   IconButton,
   SkeletonText,
-  isMenuClicked,
+  isMenuClicked
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
@@ -20,14 +20,14 @@ export const SandboxCard = ({
   type = SandboxTypes.DEFAULT_SANDBOX,
   sandbox,
   menuControls: { onKeyDown, onContextMenu },
-  index = null,
+  index = null
 }) => {
   const {
     state: {
       user: loggedInUser,
       profile: {
-        current: { username, featuredSandboxes },
-      },
+        current: { username, featuredSandboxes }
+      }
     },
     actions: {
       profile: {
@@ -36,9 +36,9 @@ export const SandboxCard = ({
         reorderFeaturedSandboxesInState,
         saveFeaturedSandboxesOrder,
         removeFeaturedSandboxesInState,
-        newSandboxShowcaseSelected,
-      },
-    },
+        newSandboxShowcaseSelected
+      }
+    }
   } = useOvermind();
 
   const ref = React.useRef(null);
@@ -49,7 +49,7 @@ export const SandboxCard = ({
     collect: monitor => {
       const dragItem = monitor.getItem();
       return {
-        isDragging: dragItem?.sandboxId === sandbox.id,
+        isDragging: dragItem?.sandboxId === sandbox.id
       };
     },
 
@@ -67,7 +67,7 @@ export const SandboxCard = ({
           // Rollback any reordering
           reorderFeaturedSandboxesInState({
             startPosition: index,
-            endPosition: previousPosition,
+            endPosition: previousPosition
           });
         } else {
           // remove newly added from featured in state
@@ -86,7 +86,7 @@ export const SandboxCard = ({
       } else if (dropResult.name === DropTargets.SHOWCASED_SANDBOX) {
         newSandboxShowcaseSelected(item.sandboxId);
       }
-    },
+    }
   });
 
   const [, drop] = useDrop({
@@ -140,12 +140,12 @@ export const SandboxCard = ({
 
       reorderFeaturedSandboxesInState({
         startPosition: dragIndex,
-        endPosition: hoverIndex,
+        endPosition: hoverIndex
       });
       // We're mutating the monitor item here to avoid expensive index searches!
       item.index = hoverIndex;
     },
-    drop: () => ({ name: DropTargets.PINNED_SANDBOXES }),
+    drop: () => ({ name: DropTargets.PINNED_SANDBOXES })
   });
 
   const myProfile = loggedInUser?.username === username;
@@ -161,11 +161,13 @@ export const SandboxCard = ({
         direction="vertical"
         gap={4}
         onContextMenu={event => onContextMenu(event, sandbox.id)}
-        onClick={() => {
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
           // we use on click instead of anchor tag so that safari renders
           // the html5 drag thumbnail instead of text
           if (isMenuClicked(event)) return;
-          window.location.href = sandboxUrl({ id: sandbox.id });
+          const url = sandboxUrl({ id: sandbox.id });
+          if (event.ctrlKey || event.metaKey) window.open(url, '_blank');
+          else window.open(url);
         }}
         tabIndex={0}
         onKeyDown={event => {
@@ -180,7 +182,7 @@ export const SandboxCard = ({
           // we transition the thumbnail out so that
           // the dragged thumbnail is 100% opacity
           transition: 'opacity 75ms',
-          transitionDelay: '16ms',
+          transitionDelay: '16ms'
         }}
         css={css({
           backgroundColor: 'grays.700',
@@ -190,12 +192,12 @@ export const SandboxCard = ({
           cursor: 'pointer',
           overflow: 'hidden',
           ':hover, :focus, :focus-within': {
-            boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900],
+            boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900]
           },
           ':focus, :focus-within': {
             outline: 'none',
-            borderColor: 'blues.600',
-          },
+            borderColor: 'blues.600'
+          }
         })}
       >
         <div
@@ -209,11 +211,11 @@ export const SandboxCard = ({
             backgroundSize: 'cover',
             backgroundPosition: 'top center',
             backgroundRepeat: 'no-repeat',
-            borderColor: 'grays.600',
+            borderColor: 'grays.600'
           })}
           style={{
             backgroundImage: `url(${sandbox.screenshotUrl ||
-              `/api/v1/sandboxes/${sandbox.id}/screenshot.png`})`,
+              `/api/v1/sandboxes/${sandbox.id}/screenshot.png`})`
           }}
         />
         <Stack justify="space-between">
@@ -244,15 +246,15 @@ export const SkeletonCard = () => (
         backgroundColor: 'grays.700',
         border: '1px solid',
         borderColor: 'grays.600',
-        borderRadius: 'medium',
+        borderRadius: 'medium'
       })}
     >
       <SkeletonText
         css={css({
           width: '100%',
           height: 160 + 1,
           borderBottom: '1px solid',
-          borderColor: 'grays.600',
+          borderColor: 'grays.600'
         })}
       />
       <Stack direction="vertical" gap={2} marginX={4} marginBottom={5}>
diff --git a/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx b/packages/app/src/app/pages/Profile2/ShowcaseSandbox.tsx
diff --git a/packages/app/src/app/pages/Profile2/index.tsx b/packages/app/src/app/pages/Profile2/index.tsx
