From 1aa0780e290ef4621e133c7e09f38c00ae5201bb Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 19 Aug 2022 14:53:01 +0800
Subject: [PATCH] Use a masonry layout for the library layout

---
 .../patterns/LibraryCards/LibraryGridCard.tsx |  2 +-
 .../templates/library/LibraryHeadline.tsx     |  8 +++-
 .../templates/library/LibraryList.tsx         | 42 ++++++-------------
 packages/web/package.json                     |  1 +
 packages/web/styles/globals.css               | 18 ++++++++
 yarn.lock                                     |  5 +++
 6 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 01b13b9f8..2fca52282 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -21,7 +21,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         cursor: 'pointer',
         wordBreak: 'break-word',
         overflow: 'clip',
-        border: '1px solid $border',
+        border: '1px solid $libraryActiveMenuItem',
         position: 'relative',
       }}
       alignment="start"
diff --git a/packages/web/components/templates/library/LibraryHeadline.tsx b/packages/web/components/templates/library/LibraryHeadline.tsx
index 608abb7e8..84d3e1d83 100644
--- a/packages/web/components/templates/library/LibraryHeadline.tsx
+++ b/packages/web/components/templates/library/LibraryHeadline.tsx
@@ -1,4 +1,4 @@
-import { HStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
@@ -7,6 +7,7 @@ import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIc
 import { Button } from '../../elements/Button'
 import { LayoutCoordinator, LibraryLayoutType } from './LibraryContainer'
 import { useCallback } from 'react'
+import { Plus } from 'phosphor-react'
 
 export type LibraryHeadlineProps = {
   layoutCoordinator: LayoutCoordinator
@@ -26,7 +27,10 @@ export function LibraryHeadline(props: LibraryHeadlineProps): JSX.Element {
     <HStack alignment="center" distribution="start" css={{ pt: '4px', pb: '8px', width: '100%', pr: '15px' }}>
       <StyledText style="libraryHeader">Home</StyledText>
       <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '16px' }}>
-        <Button style="ctaDarkYellow">Add Link</Button>
+        <Button style="ctaDarkYellow" css={{ px: '13px', display: 'flex', alignItems: 'center' }}>
+          <Plus size={16} weight='bold' />
+          <SpanBox css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}>Add Link</SpanBox>
+        </Button>
         <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('LIST_LAYOUT')}>
           <LibraryListLayoutIcon color={typeColor('LIST_LAYOUT')} />
         </Button>
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index c65ad80d6..d7ad55f3c 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -7,6 +7,8 @@ import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard'
 import { LayoutCoordinator } from './LibraryContainer'
 import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
+import Masonry from 'react-masonry-css'
+
 
 export type LibraryListProps = {
   layoutCoordinator: LayoutCoordinator
@@ -46,32 +48,14 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
 
   return (
     <Box css={{ overflowY: 'scroll' }}>
-      <Box
-        css={{
-          width: '100%',
-          display: 'grid',
-          gridAutoRows: 'auto',
-          borderRadius: '8px',
-          marginBottom: '0px',
-          paddingRight: '14px',
-          paddingTop: '0px',
-          marginTop: '0px',
-          paddingBottom: '21px',
-          '@smDown': {
-            border: 'unset',
-            width: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-            margin: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
-            borderRadius: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 0 : undefined,
-          },
-          '@lg': {
-            gridTemplateColumns:
-            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
-          },
-          '@xl': {
-            gridTemplateColumns:
-            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
-          },
+      <Masonry
+        breakpointCols={props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 1 : {
+          default: 3,
+          1200: 2,
+          992: 1
         }}
+        className="omnivore-masonry-grid"
+        columnClassName="omnivore-masonry-grid_column"
       >
         {libraryItems.map((linkedItem) => (
           <Box
@@ -109,9 +93,9 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
             )}
           </Box>
         ))}
-      </Box>
-        {/* Extra padding at bottom to give space for scrolling */}
-        <Box css={{ width: '100%', height: '200px' }} />
-      </Box>
+      </Masonry>
+      {/* Extra padding at bottom to give space for scrolling */}
+      <Box css={{ width: '100%', height: '200px' }} />
+    </Box>
   )
 }
\ No newline at end of file
diff --git a/packages/web/package.json b/packages/web/package.json
index 38bc3ec6d..4c18caea8 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -43,6 +43,7 @@
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
+    "react-masonry-css": "^1.0.16",
     "react-pro-sidebar": "^0.7.1",
     "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",
diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
index 1be086471..f8da27b56 100644
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@@ -295,4 +295,22 @@ input[type=range]::-webkit-slider-thumb {
 button {
   padding: 0px;
   margin: 0px;
+}
+
+.omnivore-masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -16px; /* gutter size offset */
+  margin-right: 14px;
+  width: auto;
+}
+.omnivore-masonry-grid_column {
+  padding-left: 16px; /* gutter size */
+  background-clip: padding-box;
+}
+
+.omnivore-masonry-grid_column > div {
+  /* background: grey; */
+  margin-bottom: 16px;
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 075a3d86b..2c8917bbc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21245,6 +21245,11 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-masonry-css@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
+  integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
+
 react-popper-tooltip@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"