git.iko.soy/bridge
on master help sign in
ui: incorporate design feedback

- create AlertBox component - match colors to design spec - add @tlon/indigo-react Icon - add CSS to wrap icon with a circular background

commit252d95ad81df72d3dde8753455da5794bdbf63e9 authortomholford <tomholford@users.noreply.github.com> dateFri 9 Jul 2021, 16:43 (5 years ago) parent495e4fe
4 files changed+50−4
compare with master
unifiedsplit
src/components/AlertBox.tsx+20 src/indigo-react/indigo.css+16 src/style/bridge.scss+8 src/views/UrbitOS/Home.tsx+6−4
src/components/AlertBox.tsxnew file+20
@@ -0,0 +1,20 @@
1+import React from 'react';
2+import cn from 'classnames';
3+import { Flex, Text } from 'indigo-react';
4+import { Icon } from '@tlon/indigo-react';
5+
6+export default function AlertBox({ className, children }) {
7+ return (
8+ <Flex className={cn('bg-red5 pv3 ph4', className)} align="center">
9+ <span className="circular-icon-bg bg-red6">
10+ <Icon
11+ display="inline-block"
12+ icon="ExclaimationMark"
13+ size="18px"
14+ color={'white'}
15+ />
16+ </span>
17+ <Text className="f6 fw-bolder red5">{children}</Text>
18+ </Flex>
19+ );
20+}
src/indigo-react/indigo.css+16
@@ -512,6 +512,10 @@ caption,
512512.fw-bold {
513513 font-weight: 600; }
514514
515+.fw-bolder {
516+ font-weight: 700;
517+}
518+
515519@media only screen and (min-width: 550px) {
516520 .fw-thin-ns {
517521 font-weight: 200; }
@@ -1015,6 +1019,14 @@ caption,
10151019.bg-blue1 {
10161020 background-color: #ecf6ff; }
10171021
1022+.bg-red6 {
1023+ background-color: #FF4136;
1024+}
1025+
1026+.bg-red5 {
1027+ background-color: #FFC6C3;
1028+}
1029+
10181030.bg-red4 {
10191031 background-color: #c10d30; }
10201032
@@ -1090,6 +1102,10 @@ caption,
10901102.blue1 {
10911103 color: #ecf6ff; }
10921104
1105+.red5 {
1106+ color: #FF4136;
1107+}
1108+
10931109.red4 {
10941110 color: #c10d30; }
10951111
src/style/bridge.scss+8
@@ -14,3 +14,11 @@ body {
1414.animated-width {
1515 transition: width 500ms ease-out;
1616}
17+
18+// Wrap a @tlon/indigo-react Icon with a circular background
19+span.circular-icon-bg {
20+ height: 18px;
21+ width: 18px;
22+ margin-right: 8px;
23+ border-radius: 50%;
24+}
src/views/UrbitOS/Home.tsx+6−4
@@ -13,7 +13,7 @@ import NetworkingKeys from 'components/NetworkingKeys';
1313
1414import { useLocalRouter } from 'lib/LocalRouter';
1515import { PointDetails } from 'types/pointDetailsType';
16−import WarningBox from 'components/WarningBox';
16+import AlertBox from 'components/AlertBox';
1717
1818export default function UrbitOSHome({ manualNetworkSeed }) {
1919 const { pointCursor } = usePointCursor();
@@ -83,9 +83,11 @@ export default function UrbitOSHome({ manualNetworkSeed }) {
8383 </>
8484 )}
8585 {!hasSetNetworkingKeys && (
86− <Grid.Item full as={WarningBox} className="mt4">
87− Networking Keys are required to generate a keyfile
88− </Grid.Item>
86+ <>
87+ <Grid.Item full as={AlertBox} className="mt4">
88+ Networking Keys are required to generate a keyfile
89+ </Grid.Item>
90+ </>
8991 )}
9092 </Grid>
9193 </>