added notes menu

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