From 729750f81e5e540681bef698ca07d52e5e2e895d Mon Sep 17 00:00:00 2001 From: 1emu Date: Tue, 19 Sep 2023 17:43:17 -0300 Subject: [PATCH] chore: replace svg with png, add opacity animation to floating bar --- src/components/FloatingBar/FloatingBar.css | 14 ++++++- src/components/FloatingBar/FloatingBar.tsx | 9 +++-- src/components/Icon/Reactions.tsx | 42 --------------------- src/images/reactions.png | Bin 0 -> 2430 bytes 4 files changed, 18 insertions(+), 47 deletions(-) delete mode 100644 src/components/Icon/Reactions.tsx create mode 100644 src/images/reactions.png diff --git a/src/components/FloatingBar/FloatingBar.css b/src/components/FloatingBar/FloatingBar.css index d09038494..8cc832190 100644 --- a/src/components/FloatingBar/FloatingBar.css +++ b/src/components/FloatingBar/FloatingBar.css @@ -12,6 +12,12 @@ display: flex; justify-content: space-between; align-items: center; + opacity: 0; + transition: all 0.5s ease 0s; +} + +.FloatingBar--visible { + opacity: 1; } .FloatingBar__ProposalSectionActions { @@ -27,8 +33,14 @@ line-height: 24px; font-weight: var(--weight-semi-bold); text-transform: uppercase; - display: flex; gap: 5px; + display: flex; + align-items: center; +} + +.FloatingBar__ReactionsImg { + height: 24px; + width: 36px; } .FloatingBar__JoinDiscussion { diff --git a/src/components/FloatingBar/FloatingBar.tsx b/src/components/FloatingBar/FloatingBar.tsx index 484dd3616..63d102298 100644 --- a/src/components/FloatingBar/FloatingBar.tsx +++ b/src/components/FloatingBar/FloatingBar.tsx @@ -10,10 +10,11 @@ import useProposalComments from '../../hooks/useProposalComments' import Link from '../Common/Typography/Link' import Forum from '../Icon/Forum' import Open from '../Icon/Open' -import Reactions from '../Icon/Reactions' import './FloatingBar.css' +const reactions = require('../../images/reactions.png').default + interface FloatingBarProps { isVisible: boolean showViewReactions: boolean @@ -35,14 +36,14 @@ const FloatingBar: React.FC = ({ }) => { const t = useFormatMessage() const { comments, isLoadingComments } = useProposalComments(proposalId) - if (!isVisible) return null + return ( -
+
{showViewReactions && ( {t('component.floating_bar.view_reactions_label')} - + )} diff --git a/src/components/Icon/Reactions.tsx b/src/components/Icon/Reactions.tsx deleted file mode 100644 index d3515a18d..000000000 --- a/src/components/Icon/Reactions.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -function Reactions() { - return ( - - - - - - - - - - - - - - - - - - - - ) -} - -export default Reactions diff --git a/src/images/reactions.png b/src/images/reactions.png new file mode 100644 index 0000000000000000000000000000000000000000..e3c7c53d2cabec2976e349f7c3672b3d7c7d6d78 GIT binary patch literal 2430 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 literal 0 HcmV?d00001