diff --git a/app/javascript/components/Post/LikeList.tsx b/app/javascript/components/Post/LikeList.tsx index d651905a..1f610e6c 100644 --- a/app/javascript/components/Post/LikeList.tsx +++ b/app/javascript/components/Post/LikeList.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; +import Gravatar from 'react-gravatar'; import ILike from '../../interfaces/ILike'; import Spinner from '../shared/Spinner'; -import { DangerText } from '../shared/CustomTexts'; +import { + TitleText, + DangerText, + CenteredMutedText +} from '../shared/CustomTexts'; interface Props { likes: Array; @@ -11,16 +16,21 @@ interface Props { } const LikeList = ({ likes, areLoading, error}: Props) => ( -
+
+ People who liked: { areLoading ? : null } { error ? {error} : null } - { - likes.map((like, i) => ( -
- {like.fullName} -
- )) - } +
+ { likes.length === 0 ? There are not likes yet. : null } + { + likes.map((like, i) => ( +
+ + {like.fullName} +
+ )) + } +
); diff --git a/app/javascript/stylesheets/components/Post.scss b/app/javascript/stylesheets/components/Post.scss index c74451d4..f5056456 100644 --- a/app/javascript/stylesheets/components/Post.scss +++ b/app/javascript/stylesheets/components/Post.scss @@ -13,8 +13,25 @@ } .sidebar { - .likeList { + .likeListContainer { @extend .sidebarCard; + + .likeList { + @extend .w-100; + + max-height: 170px; + overflow-y: scroll; + + .likeListItem { + @extend + .p-2, + .my-1; + + .likeListItemName { + @extend .ml-2; + } + } + } } } diff --git a/app/javascript/stylesheets/general/_index.scss b/app/javascript/stylesheets/general/_index.scss index c1ec7eb2..57ea335a 100644 --- a/app/javascript/stylesheets/general/_index.scss +++ b/app/javascript/stylesheets/general/_index.scss @@ -13,7 +13,7 @@ } .gravatar { - border-radius: 16px; + border-radius: 100%; } .dot { diff --git a/package.json b/package.json index 35b6e956..d9926e2a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "prop-types": "^15.7.2", "react": "^16.9.0", "react-dom": "^16.9.0", + "react-gravatar": "^2.6.3", "react-infinite-scroller": "^1.2.4", "react-redux": "^7.1.1", "react_ujs": "^2.6.0", diff --git a/yarn.lock b/yarn.lock index 814223be..8377e1d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1693,6 +1693,11 @@ chalk@^1.1.1: strip-ansi "^3.0.0" supports-color "^2.0.0" +charenc@~0.0.1: + version "0.0.2" + resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667" + integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc= + chokidar@^2.0.2, chokidar@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.6.tgz#b6cad653a929e244ce8a834244164d241fa954c5" @@ -2048,6 +2053,11 @@ cross-spawn@^3.0.0: lru-cache "^4.0.1" which "^1.2.9" +crypt@~0.0.1: + version "0.0.2" + resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b" + integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs= + crypto-browserify@^3.11.0: version "3.12.0" resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec" @@ -3573,7 +3583,7 @@ is-binary-path@^1.0.0: dependencies: binary-extensions "^1.0.0" -is-buffer@^1.1.5: +is-buffer@^1.1.5, is-buffer@~1.1.1: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== @@ -3747,6 +3757,11 @@ is-resolvable@^1.0.0: resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88" integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg== +is-retina@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/is-retina/-/is-retina-1.0.3.tgz#d7401b286bea2ae37f62477588de504d0b8647e3" + integrity sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M= + is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" @@ -4115,6 +4130,15 @@ md5.js@^1.3.4: inherits "^2.0.1" safe-buffer "^5.1.2" +md5@^2.1.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9" + integrity sha1-U6s41f48iJG6RlMp6iP6wFQBJvk= + dependencies: + charenc "~0.0.1" + crypt "~0.0.1" + is-buffer "~1.1.1" + mdn-data@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b" @@ -5764,7 +5788,7 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== -query-string@^4.1.0: +query-string@^4.1.0, query-string@^4.2.2: version "4.3.4" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= @@ -5837,6 +5861,15 @@ react-dom@^16.9.0: prop-types "^15.6.2" scheduler "^0.15.0" +react-gravatar@^2.6.3: + version "2.6.3" + resolved "https://registry.yarnpkg.com/react-gravatar/-/react-gravatar-2.6.3.tgz#5407eb6ac87e830e2a34deb760d2a4c404eb1dac" + integrity sha1-VAfrash+gw4qNN63YNKkxATrHaw= + dependencies: + is-retina "^1.0.3" + md5 "^2.1.0" + query-string "^4.2.2" + react-infinite-scroller@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"