From 39240d413ced3bf3a0adf79c803fe00a26862b1e Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 10 Apr 2021 01:47:53 +0200 Subject: [PATCH 1/3] fix: :fire: UI updates: button click animation, menu closing fix, menu animation - button press animation. - Fixed text getting cutoff or stacked during side panel closing. - Added missing transition to body for menu opening --- .../src/__tests__/components/button.test.tsx | 4 ++++ .../__tests__/components/buttonmenu.test.tsx | 8 +++++++ .../src/__tests__/widgets/menu.test.tsx | 23 +++++++++++++++---- .../src/__tests__/widgets/modal.test.tsx | 4 ++++ .../__tests__/widgets/walletModal.test.tsx | 12 ++++++++++ .../src/components/Button/StyledButton.tsx | 2 ++ .../pancake-uikit/src/widgets/Menu/Menu.tsx | 2 +- .../src/widgets/Menu/components/MenuEntry.tsx | 1 + .../src/widgets/Menu/components/Panel.tsx | 3 ++- 9 files changed, 53 insertions(+), 6 deletions(-) diff --git a/packages/pancake-uikit/src/__tests__/components/button.test.tsx b/packages/pancake-uikit/src/__tests__/components/button.test.tsx index ddaa05235..ee28e9ff4 100644 --- a/packages/pancake-uikit/src/__tests__/components/button.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/button.test.tsx @@ -47,6 +47,10 @@ it("renders correctly", () => { .c0:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c0:disabled, diff --git a/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx b/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx index b3fa8d71a..d7a179f8a 100644 --- a/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx @@ -69,6 +69,10 @@ it("renders correctly", () => { .c1:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c1:disabled, @@ -122,6 +126,10 @@ it("renders correctly", () => { .c2:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c2:disabled, diff --git a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx index db98185ab..90fb3c2a6 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx @@ -133,6 +133,10 @@ it("renders correctly", () => { .c3:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c3:disabled, @@ -186,6 +190,10 @@ it("renders correctly", () => { .c8:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c8:disabled, @@ -239,6 +247,10 @@ it("renders correctly", () => { .c24:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c24:disabled, @@ -409,6 +421,7 @@ it("renders correctly", () => { border-color: #ED4B9E; box-shadow: none; color: #ED4B9E; + margin-left: 8px; } .c21 { @@ -418,6 +431,7 @@ it("renders correctly", () => { border-color: #FFB237; box-shadow: none; color: #FFB237; + margin-left: 8px; } .c15 { @@ -502,14 +516,15 @@ it("renders correctly", () => { background-color: #FFFFFF; width: 0; height: 100vh; - -webkit-transition: padding-top 0.2s,width 0.2s; - transition: padding-top 0.2s,width 0.2s; + -webkit-transition: padding-top 0.2s,width 0.2s cubic-bezier(0.4,0,0.2,1); + transition: padding-top 0.2s,width 0.2s cubic-bezier(0.4,0,0.2,1); border-right: 0; z-index: 11; overflow: hidden; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); + white-space: nowrap; } .c0 { @@ -561,8 +576,8 @@ it("renders correctly", () => { -ms-flex-positive: 1; flex-grow: 1; margin-top: 64px; - -webkit-transition: margin-top 0.2s; - transition: margin-top 0.2s; + -webkit-transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); + transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); diff --git a/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx index 8ea246df2..7d47dde8f 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx @@ -88,6 +88,10 @@ it("renders correctly", () => { .c7:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c7:disabled, diff --git a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx index dcea07244..6b2d66970 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx @@ -133,6 +133,10 @@ it("renders ConnectModal correctly", () => { .c7:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c7:disabled, @@ -188,6 +192,10 @@ it("renders ConnectModal correctly", () => { .c12:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c12:disabled, @@ -243,6 +251,10 @@ it("renders ConnectModal correctly", () => { .c15:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; } .c15:disabled, diff --git a/packages/pancake-uikit/src/components/Button/StyledButton.tsx b/packages/pancake-uikit/src/components/Button/StyledButton.tsx index bfc50a1e7..f1b2422ed 100644 --- a/packages/pancake-uikit/src/components/Button/StyledButton.tsx +++ b/packages/pancake-uikit/src/components/Button/StyledButton.tsx @@ -66,6 +66,8 @@ const StyledButton = styled.button` &:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { opacity: 0.85; + transform: translateY(1px); + box-shadow: none; } ${getDisabledStyles} diff --git a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx index 01fb07843..373366e71 100644 --- a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx @@ -42,7 +42,7 @@ const BodyWrapper = styled.div` const Inner = styled.div<{ isPushed: boolean; showMenu: boolean }>` flex-grow: 1; margin-top: ${({ showMenu }) => (showMenu ? `${MENU_HEIGHT}px` : 0)}; - transition: margin-top 0.2s; + transition: margin-top 0.2s, margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: translate3d(0, 0, 0); max-width: 100%; diff --git a/packages/pancake-uikit/src/widgets/Menu/components/MenuEntry.tsx b/packages/pancake-uikit/src/widgets/Menu/components/MenuEntry.tsx index 89e0d08de..e03f443c8 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/MenuEntry.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/MenuEntry.tsx @@ -75,6 +75,7 @@ const LinkStatus = styled(Text)<{ color: keyof Colors }>` border-color: ${({ theme, color }) => theme.colors[color]}; box-shadow: none; color: ${({ theme, color }) => theme.colors[color]}; + margin-left: 8px; `; const LinkLabelMemo = React.memo(LinkLabel, (prev, next) => prev.isPushed === next.isPushed); diff --git a/packages/pancake-uikit/src/widgets/Menu/components/Panel.tsx b/packages/pancake-uikit/src/widgets/Menu/components/Panel.tsx index 76d73016d..6fd7266d3 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/Panel.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/Panel.tsx @@ -22,11 +22,12 @@ const StyledPanel = styled.div<{ isPushed: boolean; showMenu: boolean }>` background-color: ${({ theme }) => theme.nav.background}; width: ${({ isPushed }) => (isPushed ? `${SIDEBAR_WIDTH_FULL}px` : 0)}; height: 100vh; - transition: padding-top 0.2s, width 0.2s; + transition: padding-top 0.2s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-right: ${({ isPushed }) => (isPushed ? "2px solid rgba(133, 133, 133, 0.1)" : 0)}; z-index: 11; overflow: ${({ isPushed }) => (isPushed ? "initial" : "hidden")}; transform: translate3d(0, 0, 0); + ${({ isPushed }) => !isPushed && "white-space: nowrap;"}; ${({ theme }) => theme.mediaQueries.nav} { z-index: initial; From 5b813d587055ef9bb0266ef4c24665e0a90baf51 Mon Sep 17 00:00:00 2001 From: Max Date: Sun, 11 Apr 2021 00:35:43 +0200 Subject: [PATCH 2/3] feat: :art: Logo blinking animation Eyes will blink when the logo is being hovered --- .../components/fallingbunnies.test.tsx | 2 ++ .../src/__tests__/widgets/menu.test.tsx | 20 +++++++++++++++++++ .../src/components/Svg/Icons/Logo.tsx | 2 ++ .../src/widgets/Menu/components/Logo.tsx | 19 +++++++++++++++++- 4 files changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx b/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx index 48491ab47..c4637fc8a 100644 --- a/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx @@ -114,10 +114,12 @@ it("renders correctly", () => { fill-rule="evenodd" /> diff --git a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx index 90fb3c2a6..73c72c6f1 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx @@ -288,6 +288,24 @@ it("renders correctly", () => { display: none; } + .c6 .right-eye { + -webkit-animation-delay: 20ms; + animation-delay: 20ms; + } + + .c6:hover .left-eye, + .c6:hover .right-eye { + -webkit-transform-origin: center 60%; + -ms-transform-origin: center 60%; + transform-origin: center 60%; + -webkit-animation-name: beoKdG; + animation-name: beoKdG; + -webkit-animation-duration: 350ms; + animation-duration: 350ms; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + .c18 { color: #ED4B9E; font-size: 14px; @@ -677,10 +695,12 @@ it("renders correctly", () => { fill-rule="evenodd" /> diff --git a/packages/pancake-uikit/src/components/Svg/Icons/Logo.tsx b/packages/pancake-uikit/src/components/Svg/Icons/Logo.tsx index 290def376..cd0fbe96a 100644 --- a/packages/pancake-uikit/src/components/Svg/Icons/Logo.tsx +++ b/packages/pancake-uikit/src/components/Svg/Icons/Logo.tsx @@ -22,10 +22,12 @@ const Icon: React.FC = (props) => { fill="#D1884F" /> diff --git a/packages/pancake-uikit/src/widgets/Menu/components/Logo.tsx b/packages/pancake-uikit/src/widgets/Menu/components/Logo.tsx index d8fb6a570..2ccbfe051 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/Logo.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/Logo.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "styled-components"; +import styled, { keyframes } from "styled-components"; import { Link } from "react-router-dom"; import { LogoIcon } from "../../../components/Svg"; import Flex from "../../../components/Box/Flex"; @@ -13,6 +13,11 @@ interface Props { href: string; } +const blink = keyframes` + 0%, 100% { transform: scaleY(1); } + 50% { transform: scaleY(0.1); } +`; + const StyledLink = styled(Link)` display: flex; align-items: center; @@ -29,6 +34,18 @@ const StyledLink = styled(Link)` display: block; } } + .right-eye { + animation-delay: 20ms; + } + &:hover { + .left-eye, + .right-eye { + transform-origin: center 60%; + animation-name: ${blink}; + animation-duration: 350ms; + animation-iteration-count: 1; + } + } `; const Logo: React.FC = ({ isPushed, togglePush, isDark, href }) => { From cd72472aed726a79716f3e54df3869936942bc60 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 12 Apr 2021 09:12:42 +0200 Subject: [PATCH 3/3] fix: :art: Added missing className to desktop logo --- packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx | 2 ++ packages/pancake-uikit/src/widgets/Menu/icons/Logo.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx index 73c72c6f1..6be7f181b 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx @@ -773,10 +773,12 @@ it("renders correctly", () => { fill-rule="evenodd" /> diff --git a/packages/pancake-uikit/src/widgets/Menu/icons/Logo.tsx b/packages/pancake-uikit/src/widgets/Menu/icons/Logo.tsx index fb898e0e1..2a8749ab3 100644 --- a/packages/pancake-uikit/src/widgets/Menu/icons/Logo.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/icons/Logo.tsx @@ -71,10 +71,12 @@ const Logo: React.FC = ({ isDark, ...props }) => { fill="#D1884F" />