feat: add notification UI

showPopup was also refactored to be better
2020-08-12 20:54:14 -05:00
parent feea209507
commit 0caa803d27
34 changed files with 2516 additions and 104 deletions
--- a/frontend/src/shared/components/NotifcationPopup/index.tsx
+++ b/frontend/src/shared/components/NotifcationPopup/index.tsx
@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+import TimeAgo from 'react-timeago';
+
+import { Popup } from 'shared/components/PopupMenu';
+
+const ItemWrapper = styled.div`
+  cursor: pointer;
+  border-bottom: 1px solid #414561;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  justify-content: space-between;
+  display: flex;
+
+  &:hover {
+    background: #10163a;
+  }
+`;
+const ItemWrapperContent = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const ItemIconContainer = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const ItemTextContainer = styled.div`
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+`;
+
+const ItemTextTitle = styled.span`
+  font-weight: 500;
+  display: block;
+  color: rgba(${props => props.theme.colors.primary});
+  font-size: 14px;
+`;
+const ItemTextDesc = styled.span`
+  font-size: 12px;
+`;
+
+const ItemTimeAgo = styled.span`
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  font-size: 11px;
+`;
+
+type NotificationItemProps = {
+  title: string;
+  description: string;
+  createdAt: string;
+};
+
+export const NotificationItem: React.FC<NotificationItemProps> = ({ title, description, createdAt }) => {
+  return (
+    <ItemWrapper>
+      <ItemWrapperContent>
+        <ItemIconContainer />
+        <ItemTextContainer>
+          <ItemTextTitle>{title}</ItemTextTitle>
+          <ItemTextDesc>{description}</ItemTextDesc>
+        </ItemTextContainer>
+      </ItemWrapperContent>
+      <TimeAgo date={createdAt} component={ItemTimeAgo} />
+    </ItemWrapper>
+  );
+};
+
+const NotificationHeader = styled.div`
+  padding: 0.75rem;
+  text-align: center;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: rgba(${props => props.theme.colors.primary});
+`;
+
+const NotificationHeaderTitle = styled.span`
+  font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+const NotificationFooter = styled.div`
+  cursor: pointer;
+  padding: 0.5rem;
+  text-align: center;
+  color: rgba(${props => props.theme.colors.primary});
+  &:hover {
+    background: #10163a;
+  }
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+`;
+
+const NotificationPopup: React.FC = ({ children }) => {
+  return (
+    <Popup title={null} tab={0} borders={false} padding={false}>
+      <NotificationHeader>
+        <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
+      </NotificationHeader>
+      <ul>{children}</ul>
+      <NotificationFooter>View All</NotificationFooter>
+    </Popup>
+  );
+};
+
+export default NotificationPopup;