Skip to content
Permalink
Browse files

Improve LikeList style

  • Loading branch information
riggraz committed Sep 30, 2019
1 parent 84263b9 commit 551feef79ea5217c56215ed9a9fab5cf7a5320b0
@@ -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<ILike>;
@@ -11,16 +16,21 @@ interface Props {
}

const LikeList = ({ likes, areLoading, error}: Props) => (
<div className="likeList">
<div className="likeListContainer">
<TitleText>People who liked:</TitleText>
{ areLoading ? <Spinner /> : null }
{ error ? <DangerText>{error}</DangerText> : null }
{
likes.map((like, i) => (
<div className="like" key={i}>
{like.fullName}
</div>
))
}
<div className="likeList">
{ likes.length === 0 ? <CenteredMutedText>There are not likes yet.</CenteredMutedText> : null }
{
likes.map((like, i) => (
<div className="likeListItem" key={i}>
<Gravatar email={like.email} size={28} className="gravatar" />
<span className="likeListItemName">{like.fullName}</span>
</div>
))
}
</div>
</div>
);

@@ -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;
}
}
}
}
}

@@ -13,7 +13,7 @@
}

.gravatar {
border-radius: 16px;
border-radius: 100%;
}

.dot {
@@ -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",
@@ -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"

0 comments on commit 551feef

Please sign in to comment.
You can’t perform that action at this time.