added notes menu

src/containers/lab/LabGrid/index.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import Masonry from 'react-masonry-css';
 
+import { Columns } from '~/components/containers/Columns';
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { LabNoResults } from '~/components/lab/LabNoResults';
 import { LabNode } from '~/components/lab/LabNode';
@@ -35,11 +36,7 @@ const LabGrid: FC<IProps> = () => {
 
   if (isLoading) {
     return (
-      <Masonry
-        className={styles.wrap}
-        breakpointCols={breakpointCols}
-        columnClassName={styles.column}
-      >
+      <Columns>
         <LoadingNode />
         <LoadingNode />
         <LoadingNode />
@@ -49,7 +46,7 @@ const LabGrid: FC<IProps> = () => {
         <LoadingNode />
         <LoadingNode />
         <LoadingNode />
-      </Masonry>
+      </Columns>
     );
   }
 
@@ -59,11 +56,7 @@ const LabGrid: FC<IProps> = () => {
 
   return (
     <InfiniteScroll hasMore={hasMore} loadMore={loadMore}>
-      <Masonry
-        className={styles.wrap}
-        breakpointCols={breakpointCols}
-        columnClassName={styles.column}
-      >
+      <Columns>
         {nodes.map(node => (
           <LabNode
             node={node.node}
@@ -72,7 +65,7 @@ const LabGrid: FC<IProps> = () => {
             commentCount={node.comment_count}
           />
         ))}
-      </Masonry>
+      </Columns>
     </InfiniteScroll>
   );
 };

src/containers/lab/LabGrid/styles.module.scss

@@ -1,26 +0,0 @@
-@import "src/styles/variables.scss";
-
-div.wrap {
-  display: flex;
-  width: 100%;
-  margin-right: 0;
-
-  @include tablet {
-    padding: 0 $gap * 0.5;
-  }
-}
-
-.column {
-  background-clip: padding-box;
-  box-sizing: border-box;
-  padding: 0 $gap * 0.5;
-  margin-top: -$gap * 0.5;
-
-  @include tablet {
-    padding: 0;
-  }
-
-  & > div {
-    margin-bottom: $gap;
-  }
-}

src/containers/settings/SettingsNotes/index.tsx

@@ -3,6 +3,7 @@ import React, { useState, VFC } from 'react';
 import Masonry from 'react-masonry-css';
 
 import { Card } from '~/components/containers/Card';
+import { Columns } from '~/components/containers/Columns';
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Markdown } from '~/components/containers/Markdown';
@@ -20,11 +21,6 @@ import styles from './styles.module.scss';
 
 interface SettingsNotesProps {}
 
-const breakpointCols = {
-  default: 2,
-  1280: 1,
-};
-
 const SettingsNotes: VFC<SettingsNotesProps> = () => {
   const [text, setText] = useState('');
   const { notes } = useGetNotes('');
@@ -44,11 +40,7 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
         </Group>
       </Padder>
 
-      <Masonry
-        className={styles.wrap}
-        breakpointCols={breakpointCols}
-        columnClassName={styles.column}
-      >
+      <Columns>
         <Card>
           <Group>
             <Textarea handler={setText} value={text} />
@@ -63,7 +55,7 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
         {notes.map(note => (
           <NoteCard key={note.id} content={note.content} createdAt={note.created_at} />
         ))}
-      </Masonry>
+      </Columns>
     </div>
   );
 };

src/containers/settings/SettingsNotes/styles.module.scss

@@ -1,27 +0,0 @@
-@import "src/styles/variables";
-@import "src/styles/mixins";
-
-div.wrap {
-  display: flex;
-  width: 100%;
-  margin-right: 0;
-  padding: $gap $gap * 0.5;
-
-  @include tablet {
-    padding: 0 $gap * 0.5;
-  }
-}
-
-.column {
-  background-clip: padding-box;
-  box-sizing: border-box;
-  padding: 0 $gap * 0.5;
-
-  @include tablet {
-    padding: 0;
-  }
-
-  & > div {
-    margin-bottom: $gap;
-  }
-}