on master help sign in
points-view: empty state

Show a placeholder when there are no points available

commitbb222851633c9dc101114359ac5073972452c90f authortomholford <tomholford@users.noreply.github.com> dateWed 8 Dec 2021, 08:26 (5 years ago) parent5197e40
2 files changed+22−3
src/views/Points.scss+17 src/views/Points.tsx+5−3
src/views/Points.scssnew file+17
@@ -0,0 +1,17 @@
1+.empty-points-container {
2+ border-width: 2px;
3+ border-color: rgba(0,0,0,0.1);
4+ border-style: dashed;
5+ border-radius: 5px;
6+ min-height: 350px;
7+ display: flex;
8+ flex-flow: column nowrap;
9+ justify-content: center;
10+ align-items: center;
11+
12+ .empty-points-text {
13+ font-size: 14px;
14+ color: rgba(0,0,0,0.5);
15+ font-family: 'Inter';
16+ }
17+}
src/views/Points.tsx+5−3
@@ -28,6 +28,9 @@ import NavHeader from 'components/NavHeader';
2828import L2PointHeader from 'components/L2/Headers/L2PointHeader';
2929import IncomingPoint from 'components/L2/Points/IncomingPoint';
3030import LoadingOverlay from 'components/L2/LoadingOverlay';
31+import { Box, Text } from '@tlon/indigo-react';
32+
33+import './Points.scss';
3134
3235export const maybeGetResult = (obj, key, defaultValue) =>
3336 obj.matchWith({
@@ -304,9 +307,8 @@ export default function Points() {
304307 ))}
305308 <Grid>
306309 {displayEmptyState && (
307− <Grid.Item full as={HelpText} className="mt8 t-center">
308− No points to display. This wallet is not the owner or proxy for any
309− points.
310+ <Grid.Item full as={Box} className="empty-points-container">
311+ <Text className="empty-points-text">No Urbit IDs here yet</Text>
310312 </Grid.Item>
311313 )}
312314