Merge pull request #540 from forbole/animation/starred-menu

#478,437/starred-menu-animation
forbole · Jan 4, 2022 · be7f88c · be7f88c
2 parents 4c7d436 + 583a4cb
commit be7f88c
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 9 deletions.
diff --git a/assets/lotties/starred-account-animation-dark.json b/assets/lotties/starred-account-animation-dark.json
diff --git a/assets/lotties/starred-account-animation-light.json b/assets/lotties/starred-account-animation-light.json
diff --git a/components/Layout/LeftMenu.tsx b/components/Layout/LeftMenu.tsx
@@ -11,6 +11,9 @@ import {
   useTheme,
 } from '@material-ui/core'
 import Link from 'next/link'
+import { Lottie } from '@alfonmga/react-lottie-light-ts'
+import DarkModeAnimationJsonData from '../../assets/lotties/starred-account-animation-dark.json'
+import LightModeAnimationJsonData from '../../assets/lotties/starred-account-animation-light.json'
 import OverviewIcon from '../../assets/images/icons/icon_overview.svg'
 import WalletManageIcon from '../../assets/images/icons/icon_wallet_manage.svg'
 import DelegateIcon from '../../assets/images/icons/icon_delegate_08.svg'
@@ -155,12 +158,27 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
               color: 'textSecondary',
             }}
             className={classes.starredAccounts}
-            style={{ display: isMenuExpanded ? 'block' : 'none' }}
+            style={{
+              display: isMenuExpanded ? 'block' : 'none',
+              marginBottom: favAccount ? 0 : themeStyle.spacing(1),
+            }}
+          />
+          <Lottie
+            width="auto"
+            height="auto"
+            className="lottie-container basic"
+            style={{ display: favAccount || !isMenuExpanded ? 'none' : 'block' }}
+            config={{
+              animationData:
+                theme === 'light' ? LightModeAnimationJsonData : DarkModeAnimationJsonData,
+              loop: true,
+              autoplay: true,
+            }}
           />
           <ListItemText
             primary={t('manageAccounts')}
             primaryTypographyProps={{
-              variant: 'h6',
+              variant: 'body1',
               color: 'textSecondary',
             }}
             style={{ display: favAccount || !isMenuExpanded ? 'none' : 'block' }}

diff --git a/components/Layout/styles.ts b/components/Layout/styles.ts
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
       height: '100%',
     },
     menuItems: {
-      height: '70%',
+      height: '60%',
       overflowY: 'auto',
       overflowX: 'hidden',
     },
@@ -35,9 +35,10 @@ const useStyles = makeStyles(
       whiteSpace: 'nowrap',
     },
     favMenu: {
-      height: '30%',
+      height: '40%',
       overflowY: 'auto',
       overflowX: 'hidden',
+      marginBottom: theme.spacing(4),
     },
     starredAccounts: {
       transition: 'display 0.2s ease-in-out',
@@ -60,7 +61,7 @@ const useStyles = makeStyles(
       hyphens: 'auto',
     },
     starButton: {
-      marginTop: theme.spacing(3),
+      marginTop: theme.spacing(2),
       marginLeft: theme.spacing(2),
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@alfonmga/react-lottie-light-ts": "^0.0.1",
     "@apollo/client": "^3.3.12",
     "@cosmjs/crypto": "^0.26.0",
     "@cosmjs/ledger-amino": "^0.26.0",
@@ -73,6 +74,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.3.1",
     "jest-chrome": "^0.7.0",
     "jest-dom": "^4.0.0",
     "jest-localstorage-mock": "^2.4.6",

diff --git a/setupTests.js b/setupTests.js
@@ -1,4 +1,4 @@
 import '@testing-library/jest-dom/extend-expect'
 import 'jest-localstorage-mock'
 
-Object.assign(global, require('jest-chrome'))
+Object.assign(global, require('jest-chrome'), require('jest-canvas-mock'))
diff --git a/tests/components/Layout/__snapshots__/LeftMenu.test.tsx.snap b/tests/components/Layout/__snapshots__/LeftMenu.test.tsx.snap
@@ -293,6 +293,7 @@ exports[`component: Layout - LeftMenu renders activeItem "/" correctly 1`] = `
         style={
           Object {
             "display": "block",
+            "marginBottom": 8,
           }
         }
       >
@@ -302,6 +303,16 @@ exports[`component: Layout - LeftMenu renders activeItem "/" correctly 1`] = `
           common:starredAccounts
         </span>
       </div>
+      <div
+        className="lottie-container basic"
+        style={
+          Object {
+            "display": "block",
+            "height": "auto",
+            "width": "auto",
+          }
+        }
+      />
       <div
         className="MuiListItemText-root HookGlobalStyles-manageAccounts-8"
         style={
@@ -311,7 +322,7 @@ exports[`component: Layout - LeftMenu renders activeItem "/" correctly 1`] = `
         }
       >
         <span
-          className="MuiTypography-root MuiListItemText-primary MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+          className="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
         >
           common:manageAccounts
         </span>
@@ -629,6 +640,7 @@ exports[`component: Layout - LeftMenu renders no matching activeItem correctly 1
         style={
           Object {
             "display": "block",
+            "marginBottom": 8,
           }
         }
       >
@@ -638,6 +650,16 @@ exports[`component: Layout - LeftMenu renders no matching activeItem correctly 1
           common:starredAccounts
         </span>
       </div>
+      <div
+        className="lottie-container basic"
+        style={
+          Object {
+            "display": "block",
+            "height": "auto",
+            "width": "auto",
+          }
+        }
+      />
       <div
         className="MuiListItemText-root HookGlobalStyles-manageAccounts-8"
         style={
@@ -647,7 +669,7 @@ exports[`component: Layout - LeftMenu renders no matching activeItem correctly 1
         }
       >
         <span
-          className="MuiTypography-root MuiListItemText-primary MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
+          className="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
         >
           common:manageAccounts
         </span>

diff --git a/yarn.lock b/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@alfonmga/react-lottie-light-ts@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@alfonmga/react-lottie-light-ts/-/react-lottie-light-ts-0.0.1.tgz#06f99ba72c0b9d148004d7261893e909dd786d45"
+  integrity sha512-rdSuaCyWZ2Tq/UR9w3kkrTSoQCcUJjf/jSG2RNEL8615T1pgMk92kKJOxY0Y3rmuWj5Nn8S7/IQ4mDTNWXCjgQ==
+  dependencies:
+    lottie-web "5.5.9"
+
 "@apollo/client@^3.3.12":
   version "3.4.16"
   resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.4.16.tgz#67090d5655aa843fa64d26f1913315e384a5fa0f"
@@ -3533,7 +3540,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3809,6 +3816,11 @@ css@^3.0.0:
     source-map "^0.6.1"
     source-map-resolve "^0.6.0"
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 cssnano-preset-simple@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe"
@@ -5940,6 +5952,14 @@ iterall@^1.2.1:
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
 
+jest-canvas-mock@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.1.tgz#9535d14bc18ccf1493be36ac37dd349928387826"
+  integrity sha512-5FnSZPrX3Q2ZfsbYNE3wqKR3+XorN8qFzDzB5o0golWgt6EOX1+emBnpOc9IAQ+NXFj8Nzm3h7ZdE/9H0ylBcg==
+  dependencies:
+    cssfontparser "^1.2.1"
+    moo-color "^1.0.2"
+
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
@@ -6907,6 +6927,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@5.5.9:
+  version "5.5.9"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.5.9.tgz#f8775e8c36dfada428f9acea826ab674750419a8"
+  integrity sha512-3Zdxnuyi6WXnMj+0ZfwDd17EXCM87Hcbhd+sVFq6EPGfkVoGzoIkZt9OafcgXw4mzjyILOkPDLaBumrgGKoCaw==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -7097,6 +7122,13 @@ moment@^2.29.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
+moo-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
+  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
+  dependencies:
+    color-name "^1.1.4"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"