diff --git a/packages/proposal-components/src/components/NotificationItem.tsx b/packages/proposal-components/src/components/NotificationItem.tsx new file mode 100644 index 0000000..f8852d6 --- /dev/null +++ b/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 ( + + + {text} + + + setShow(false)} /> + + ) + } + 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; +` diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx index 0639af3..0305e60 100644 --- a/packages/proposal-components/src/components/Proposal.tsx +++ b/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() { {/* */} + ) } diff --git a/packages/proposal-components/src/components/ViewLink.tsx b/packages/proposal-components/src/components/ViewLink.tsx index 49d83eb..e7a65b8 100644 --- a/packages/proposal-components/src/components/ViewLink.tsx +++ b/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 View on Etherscan +} + +const LinkNotification = styled(Link)` + margin-right: 32px; + font-size: 12px; +` diff --git a/packages/proposal-components/src/components/VotePropose.tsx b/packages/proposal-components/src/components/VotePropose.tsx index 1f88351..6cd871f 100644 --- a/packages/proposal-components/src/components/VotePropose.tsx +++ b/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) { diff --git a/packages/react-components/src/components/misc/Buttons.tsx b/packages/react-components/src/components/misc/Buttons.tsx index 9cfc2cf..e752b17 100644 --- a/packages/react-components/src/components/misc/Buttons.tsx +++ b/packages/react-components/src/components/misc/Buttons.tsx @@ -166,4 +166,5 @@ export const CloseButton = styled.button` background-image: url(${({ theme }) => (theme === orangeTheme ? closeButton : blueCloseButton)}); background-color: transparent; border: none; + flex-shrink: 0; `