diff --git a/web/package.json b/web/package.json index 0b0a573..44d321a 100644 --- a/web/package.json +++ b/web/package.json @@ -13,6 +13,7 @@ "dependencies": { "@sentry/browser": "^5.12.1", "fetch-suspense": "^1.2.0", + "framer-motion": "^1.8.4", "i18next": ">=19.1.0", "i18next-browser-languagedetector": "^4.0.1", "i18next-chained-backend": "^2.0.1", diff --git a/web/src/components/Suggestion.tsx b/web/src/components/Suggestion.tsx index 720ac0e..4a6ae09 100644 --- a/web/src/components/Suggestion.tsx +++ b/web/src/components/Suggestion.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import {useTranslation} from 'react-i18next'; import fetch from 'isomorphic-unfetch'; import {TiArrowSync} from 'react-icons/ti'; +import {motion} from 'framer-motion'; import {capitalize, stem, germanify, njoin, lower, upper} from '../util/text'; import {sampleFromArray, fillArray} from '../util/array'; @@ -217,9 +218,9 @@ const Suggestion: React.FC<{ ))} - + ); }; @@ -264,8 +265,7 @@ const Items = styled.div` `; const Item = styled.div` - margin-top: 10px; - margin: 10px 12px 0; + margin: 10px 10px 0; cursor: pointer; font-weight: bold; font-family: inherit; @@ -280,9 +280,12 @@ const Item = styled.div` } `; -const Icon = styled(Item)` +const Button = styled(motion.div).attrs({ + whileHover: {scale: 1.1}, + whileTap: {scale: 0.9}, +})` margin: 15px 0 0 0; - padding: 8px 9px; + padding: 8px 12px; display: flex; align-items: center; border-bottom: none; @@ -292,6 +295,7 @@ const Icon = styled(Item)` user-select: none; background: #5610ff; transition: background 0.1s ease-out; + cursor: pointer; &:hover { background: #723df3; diff --git a/yarn.lock b/yarn.lock index ee4e133..0fdce72 100644 --- a/yarn.lock +++ b/yarn.lock @@ -943,7 +943,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== -"@emotion/is-prop-valid@^0.8.3": +"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.3": version "0.8.6" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c" integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ== @@ -1194,6 +1194,22 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@popmotion/easing@^1.0.1", "@popmotion/easing@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4" + integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw== + +"@popmotion/popcorn@^0.4.2", "@popmotion/popcorn@^0.4.4": + version "0.4.4" + resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.4.4.tgz#a5f906fccdff84526e3fcb892712d7d8a98d6adc" + integrity sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg== + dependencies: + "@popmotion/easing" "^1.0.1" + framesync "^4.0.1" + hey-listen "^1.0.8" + style-value-types "^3.1.7" + tslib "^1.10.0" + "@sentry/browser@^5.12.1": version "5.12.1" resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.12.1.tgz#dc1f268595269fb7277f55eb625c7e92d76dc01b" @@ -4943,6 +4959,30 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +framer-motion@^1.8.4: + version "1.8.4" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-1.8.4.tgz#5772ff9cbd3b9d154e2c242461893c04a5f0cb26" + integrity sha512-MMtJ3m0UpSb+val+aL8snz57p47LJS8lBSzvybhXjJgQHpufTZEzbp62eXNVdBlCHnC02J5+NmHRz4AAN6J9Qg== + dependencies: + "@popmotion/easing" "^1.0.2" + "@popmotion/popcorn" "^0.4.2" + framesync "^4.0.4" + hey-listen "^1.0.8" + popmotion "9.0.0-beta-8" + style-value-types "^3.1.6" + stylefire "^7.0.2" + tslib "^1.10.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + +framesync@^4.0.0, framesync@^4.0.1, framesync@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.0.4.tgz#79c42c0118f26821c078570db0ff81fb863516a2" + integrity sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ== + dependencies: + hey-listen "^1.0.8" + tslib "^1.10.0" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -5352,6 +5392,11 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== +hey-listen@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" + integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== + history@^4.9.0: version "4.10.1" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" @@ -8374,6 +8419,18 @@ pnp-webpack-plugin@1.6.0: dependencies: ts-pnp "^1.1.2" +popmotion@9.0.0-beta-8: + version "9.0.0-beta-8" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-beta-8.tgz#f5a709f11737734e84f2a6b73f9bcf25ee30c388" + integrity sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA== + dependencies: + "@popmotion/easing" "^1.0.1" + "@popmotion/popcorn" "^0.4.2" + framesync "^4.0.4" + hey-listen "^1.0.8" + style-value-types "^3.1.6" + tslib "^1.10.0" + popper.js@^1.11.1: version "1.16.1" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" @@ -10796,6 +10853,14 @@ style-loader@1.1.3: loader-utils "^1.2.3" schema-utils "^2.6.4" +style-value-types@^3.1.6, style-value-types@^3.1.7: + version "3.1.7" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.7.tgz#3d7d3cf9cb9f9ee86c00e19ba65d6a181a0db33a" + integrity sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg== + dependencies: + hey-listen "^1.0.8" + tslib "^1.10.0" + styled-components@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.1.tgz#57782a6471031abefb2db5820a1876ae853bc619" @@ -10812,6 +10877,17 @@ styled-components@^5.0.1: shallowequal "^1.1.0" supports-color "^5.5.0" +stylefire@^7.0.2: + version "7.0.2" + resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-7.0.2.tgz#874a82dd2bcada39c13e75e0c67b70009e06f556" + integrity sha512-LFIBP6fIA+EMqLSvM4V6zLa+O/iAcHoNJVuXkkZ5G8+T+Pd3KaQLqgxrpkeo1bwWQHqzgab8U3V3gudO231fZA== + dependencies: + "@popmotion/popcorn" "^0.4.4" + framesync "^4.0.0" + hey-listen "^1.0.8" + style-value-types "^3.1.7" + tslib "^1.10.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -11133,7 +11209,7 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec" integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA== -tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: +tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==