add user notifications (#148)

* added notification settings

* notifications: added list to profile

* notifications: changed appearance for comment notifications

src/containers/notifications/NotificationList/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { NotificationComment } from '~/components/notifications/NotificationComment';
+import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+
+import styles from './styles.module.scss';
+
+interface NotificationListProps {}
+
+const NotificationList: FC<NotificationListProps> = () => {
+  const { isLoading, items } = useNotificationsList();
+
+  if (isLoading) {
+    return <LoaderCircle />;
+  }
+
+  return (
+    <div className={styles.grid}>
+      {/* <div className={styles.head}>HEAD</div> */}
+      <div className={styles.list}>
+        <div className={styles.items}>
+          {items?.map((item) => (
+            <div className={styles.item} key={item.created_at}>
+              <NotificationComment item={item} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NotificationList };

src/containers/notifications/NotificationList/styles.module.scss

@@ -0,0 +1,41 @@
+@import 'src/styles/variables';
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 4;
+  height: 100%;
+}
+
+.head {
+  @include row_shadow;
+
+  width: 100%;
+  padding: $gap;
+}
+
+.list {
+  @include row_shadow;
+
+  overflow-y: auto;
+  flex: 1 1;
+  overflow: auto;
+  width: 100%;
+}
+
+.items {
+  display: grid;
+  grid-auto-flow: row;
+}
+
+.item {
+  @include row_shadow;
+  padding-right: $gap;
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: $content_bg_lighter;
+  }
+}