feat: add shadow to the TallCardCollection (#45)

hobroker · Jun 25, 2022 · 8e9a8f4 · 8e9a8f4
1 parent 6355d87
commit 8e9a8f4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/features/navigation/components/Navigation.tsx b/src/features/navigation/components/Navigation.tsx
@@ -24,18 +24,18 @@ const Navigation = () => (
             <LogoText sx={{ width: 150 }} />
           </Button>
         </Box>
-        <Box sx={{ mr: 1, flexGrow: 1 }}>
+        <Box sx={{ mr: 1, flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
           <SearchProvider>
             <Search />
           </SearchProvider>
         </Box>
-        <Box>
+        <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
           <Button href={StaticRoute.Trending}>Trending</Button>
           <WhenLoggedIn>
             <Button href={StaticRoute.MyShows}>My Shows</Button>
           </WhenLoggedIn>
         </Box>
-        <Box sx={{ display: 'flex', gap: 1 }}>
+        <Box sx={{ display: 'flex', gap: 1, marginLeft: 'auto' }}>
           <WhenLoggedIn>
             <NotificationsProvider>
               <Notifications />

diff --git a/src/features/shows/components/card/TallCardCollection.tsx b/src/features/shows/components/card/TallCardCollection.tsx
@@ -15,6 +15,18 @@ const StyledWrapper = styled(({ scroll, ...props }: WrapperProps) => (
   padding: ${({ theme }) => theme.spacing(1)};
   border-radius: ${({ theme }) => theme.shape.borderRadius}px;
   margin-inline: -${({ theme }) => theme.spacing(0.75)};
+  background-image: linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)),
+    linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0));
+
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+
+  /* Opera doesn't support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
 
   ${({ theme, scroll }) =>
     scroll