Add notification (#60)

packages/proposal-components/src/components/NotificationItem.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
+import { CloseButton } from '@status-waku-voting/react-components/dist/esm/src/components/misc/Buttons'
+import styled from 'styled-components'
+import { NotificationLink } from './ViewLink'
+
+interface NotificationItemProps {
+  text: string
+  address: string
+}
+
+export function NotificationItem({ address, text }: NotificationItemProps) {
+  const [show, setShow] = useState(true)
+
+  if (show) {
+    return (
+      <NotificationBlock>
+        <NotificationContent>
+          <NotificationText>{text}</NotificationText>
+          <NotificationLink address={address} />
+        </NotificationContent>
+        <CloseButton theme={blueTheme} onClick={() => setShow(false)} />
+      </NotificationBlock>
+    )
+  }
+  return null
+}
+
+const NotificationBlock = styled.div`
+  display: flex;
+  align-items: center;
+  background: #fff;
+  padding: 16px;
+  width: 252px;
+  border-radius: 16px;
+  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
+  position: absolute;
+  top: 120px;
+  right: 24px;
+  z-index: 9999;
+
+  @media (max-width: 768px) {
+    right: 32px;
+  }
+
+  @media (max-width: 600px) {
+    top: 74px;
+    right: 16px;
+  }
+`
+
+const NotificationContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`
+const NotificationText = styled.p`
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.1px;
+  margin: 0;
+  margin-bottom: 16px;
+`

packages/proposal-components/src/components/Proposal.tsx

@@ -4,6 +4,7 @@ import { ProposalHeader } from './ProposalHeader'
 import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 import { ProposalList } from './ProposalList'
 import { VotingEmpty } from './VotingEmpty'
+import { NotificationItem } from './NotificationItem'
 
 export function Proposal() {
   return (
@@ -12,6 +13,7 @@ export function Proposal() {
       <ProposalHeader theme={blueTheme} />
       <ProposalList theme={blueTheme} />
       {/* <VotingEmpty theme={blueTheme} /> */}
+      <NotificationItem text={'Proposal you finalized will be settled after 10 confirmations.'} address={'#'} />
     </ProposalWrapper>
   )
 }

packages/proposal-components/src/components/ViewLink.tsx

@@ -38,3 +38,15 @@ export const Link = styled.a`
     background-size: contain;
   }
 `
+interface NotificationLinkProps {
+  address: string
+}
+
+export function NotificationLink({ address }: NotificationLinkProps) {
+  return <LinkNotification href={address}>View on Etherscan</LinkNotification>
+}
+
+const LinkNotification = styled(Link)`
+  margin-right: 32px;
+  font-size: 12px;
+`

packages/proposal-components/src/components/VotePropose.tsx

@@ -13,6 +13,7 @@ export interface VoteProposingProps {
 export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
   const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' ABC')
   const disabled = availableAmount === 0
+
   let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
 
   if (availableAmount < 100) {

packages/react-components/src/components/misc/Buttons.tsx

@@ -166,4 +166,5 @@ export const CloseButton = styled.button<CloseProps>`
   background-image: url(${({ theme }) => (theme === orangeTheme ? closeButton : blueCloseButton)});
   background-color: transparent;
   border: none;
+  flex-shrink: 0;
 `