fix: 🔥 UI updates: button click animation, menu closing fix, men… (#63)

* fix: 🔥 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 * feat: 🎨 Logo blinking animation Eyes will blink when the logo is being hovered * fix: 🎨 Added missing className to desktop logo
pancakeswap · Apr 13, 2021 · 3d9ba48 · 3d9ba48
1 parent 7179eb1
commit 3d9ba48
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 7 deletions.
diff --git 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
@@ -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__/components/fallingbunnies.test.tsx b/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx
@@ -114,10 +114,12 @@ it("renders correctly", () => {
               fill-rule="evenodd"
             />
             <path
+              class="left-eye"
               d="M11.9595 18.9091C11.9595 20.248 11.2359 21.3333 10.3433 21.3333C9.45075 21.3333 8.72717 20.248 8.72717 18.9091C8.72717 17.5702 9.45075 16.4849 10.3433 16.4849C11.2359 16.4849 11.9595 17.5702 11.9595 18.9091Z"
               fill="#633001"
             />
             <path
+              class="right-eye"
               d="M23.1111 18.9091C23.1111 20.248 22.3875 21.3333 21.4949 21.3333C20.6024 21.3333 19.8788 20.248 19.8788 18.9091C19.8788 17.5702 20.6024 16.4849 21.4949 16.4849C22.3875 16.4849 23.1111 17.5702 23.1111 18.9091Z"
               fill="#633001"
             />

diff --git 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,
@@ -276,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;
@@ -409,6 +439,7 @@ it("renders correctly", () => {
       border-color: #ED4B9E;
       box-shadow: none;
       color: #ED4B9E;
+      margin-left: 8px;
     }
 
     .c21 {
@@ -418,6 +449,7 @@ it("renders correctly", () => {
       border-color: #FFB237;
       box-shadow: none;
       color: #FFB237;
+      margin-left: 8px;
     }
 
     .c15 {
@@ -502,14 +534,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 +594,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);
@@ -661,10 +694,12 @@ it("renders correctly", () => {
                   fill-rule="evenodd"
                 />
                 <path
+                  class="left-eye"
                   d="M11.9595 18.9091C11.9595 20.248 11.2359 21.3333 10.3433 21.3333C9.45075 21.3333 8.72717 20.248 8.72717 18.9091C8.72717 17.5702 9.45075 16.4849 10.3433 16.4849C11.2359 16.4849 11.9595 17.5702 11.9595 18.9091Z"
                   fill="#633001"
                 />
                 <path
+                  class="right-eye"
                   d="M23.1111 18.9091C23.1111 20.248 22.3875 21.3333 21.4949 21.3333C20.6024 21.3333 19.8788 20.248 19.8788 18.9091C19.8788 17.5702 20.6024 16.4849 21.4949 16.4849C22.3875 16.4849 23.1111 17.5702 23.1111 18.9091Z"
                   fill="#633001"
                 />
@@ -737,10 +772,12 @@ it("renders correctly", () => {
                   fill-rule="evenodd"
                 />
                 <path
+                  class="left-eye"
                   d="M9.11817 15.2485C9.11817 16.2833 8.55896 17.1221 7.86914 17.1221C7.17932 17.1221 6.62012 16.2833 6.62012 15.2485C6.62012 14.2138 7.17932 13.375 7.86914 13.375C8.55896 13.375 9.11817 14.2138 9.11817 15.2485Z"
                   fill="#633001"
                 />
                 <path
+                  class="right-eye"
                   d="M17.7363 15.2485C17.7363 16.2833 17.1771 17.1221 16.4873 17.1221C15.7975 17.1221 15.2383 16.2833 15.2383 15.2485C15.2383 14.2138 15.7975 13.375 16.4873 13.375C17.1771 13.375 17.7363 14.2138 17.7363 15.2485Z"
                   fill="#633001"
                 />

diff --git 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
@@ -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
@@ -66,6 +66,8 @@ const StyledButton = styled.button<BaseButtonProps>`
 
   &: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/components/Svg/Icons/Logo.tsx b/packages/pancake-uikit/src/components/Svg/Icons/Logo.tsx
@@ -22,10 +22,12 @@ const Icon: React.FC<SvgProps> = (props) => {
         fill="#D1884F"
       />
       <path
+        className="left-eye"
         d="M11.9595 18.9091C11.9595 20.248 11.2359 21.3333 10.3433 21.3333C9.45075 21.3333 8.72717 20.248 8.72717 18.9091C8.72717 17.5702 9.45075 16.4849 10.3433 16.4849C11.2359 16.4849 11.9595 17.5702 11.9595 18.9091Z"
         fill="#633001"
       />
       <path
+        className="right-eye"
         d="M23.1111 18.9091C23.1111 20.248 22.3875 21.3333 21.4949 21.3333C20.6024 21.3333 19.8788 20.248 19.8788 18.9091C19.8788 17.5702 20.6024 16.4849 21.4949 16.4849C22.3875 16.4849 23.1111 17.5702 23.1111 18.9091Z"
         fill="#633001"
       />

diff --git 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/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<Props> = ({ isPushed, togglePush, isDark, href }) => {

diff --git 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
@@ -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} {
     border-right: 2px solid rgba(133, 133, 133, 0.1);

diff --git 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<LogoProps> = ({ isDark, ...props }) => {
         fill="#D1884F"
       />
       <path
+        className="left-eye"
         d="M9.11817 15.2485C9.11817 16.2833 8.55896 17.1221 7.86914 17.1221C7.17932 17.1221 6.62012 16.2833 6.62012 15.2485C6.62012 14.2138 7.17932 13.375 7.86914 13.375C8.55896 13.375 9.11817 14.2138 9.11817 15.2485Z"
         fill="#633001"
       />
       <path
+        className="right-eye"
         d="M17.7363 15.2485C17.7363 16.2833 17.1771 17.1221 16.4873 17.1221C15.7975 17.1221 15.2383 16.2833 15.2383 15.2485C15.2383 14.2138 15.7975 13.375 16.4873 13.375C17.1771 13.375 17.7363 14.2138 17.7363 15.2485Z"
         fill="#633001"
       />