git.iko.soy/bridge
on master help sign in
ui: incorporate design feedback
252d95atomholford
src/components/AlertBox.tsxnew file+20
compare with master
unifiedsplit
@@ -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,
512.fw-bold {
512.fw-bold {
513 font-weight: 600; }
513 font-weight: 600; }
514
514
515+.fw-bolder {
516+ font-weight: 700;
517+}
518+
515@media only screen and (min-width: 550px) {
519@media only screen and (min-width: 550px) {
516 .fw-thin-ns {
520 .fw-thin-ns {
517 font-weight: 200; }
521 font-weight: 200; }
@@ -1015,6 +1019,14 @@ caption,
1015.bg-blue1 {
1019.bg-blue1 {
1016 background-color: #ecf6ff; }
1020 background-color: #ecf6ff; }
1017
1021
1022+.bg-red6 {
1023+ background-color: #FF4136;
1024+}
1025+
1026+.bg-red5 {
1027+ background-color: #FFC6C3;
1028+}
1029+
1018.bg-red4 {
1030.bg-red4 {
1019 background-color: #c10d30; }
1031 background-color: #c10d30; }
1020
1032
@@ -1090,6 +1102,10 @@ caption,
1090.blue1 {
1102.blue1 {
1091 color: #ecf6ff; }
1103 color: #ecf6ff; }
1092
1104
1105+.red5 {
1106+ color: #FF4136;
1107+}
1108+
1093.red4 {
1109.red4 {
1094 color: #c10d30; }
1110 color: #c10d30; }
1095
1111
src/style/bridge.scss+8
@@ -14,3 +14,11 @@ body {
14.animated-width {
14.animated-width {
15 transition: width 500ms ease-out;
15 transition: width 500ms ease-out;
16}
16}
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';
13
13
14import { useLocalRouter } from 'lib/LocalRouter';
14import { useLocalRouter } from 'lib/LocalRouter';
15import { PointDetails } from 'types/pointDetailsType';
15import { PointDetails } from 'types/pointDetailsType';
16−import WarningBox from 'components/WarningBox';
16+import AlertBox from 'components/AlertBox';
17
17
18export default function UrbitOSHome({ manualNetworkSeed }) {
18export default function UrbitOSHome({ manualNetworkSeed }) {
19 const { pointCursor } = usePointCursor();
19 const { pointCursor } = usePointCursor();
@@ -83,9 +83,11 @@ export default function UrbitOSHome({ manualNetworkSeed }) {
83 </>
83 </>
84 )}
84 )}
85 {!hasSetNetworkingKeys && (
85 {!hasSetNetworkingKeys && (
86+ <>
86− <Grid.Item full as={WarningBox} className="mt4">
87+ <Grid.Item full as={AlertBox} className="mt4">
87− Networking Keys are required to generate a keyfile
88+ Networking Keys are required to generate a keyfile
88− </Grid.Item>
89+ </Grid.Item>
90+ </>
89 )}
91 )}
90 </Grid>
92 </Grid>
91 </>
93 </>