1cf45c8 · bridge · git.iko.soy

git.iko.soy/bridge

address design issues

commit1cf45c8ab7180b9f363e9c13eb0d0890f530c581 authorLiam Fitzgerald <liam@urizen.co> dateFri 10 Jan 2020, 11:19 (7 years ago) parent3bc0841

7 files changed+54−38

compare with master

unifiedsplit

src/components/Chip.js+2−4 src/components/InviteSigilList.js+1−1 src/indigo-react/components/Button.js+7−2 src/views/Invite/Cohort.js+23−13 src/views/Invite/Email.js+1−1 src/views/Invite/Url.js+14−13 src/views/Point.js+6−4

src/components/Chip.js+2−4

@@ -1,14 +1,12 @@

11import React from 'react';

22import cn from 'classnames';

4−export default function Chip({ children, color, className }) {

5− const bgColor = `bg-${color}1`;

6− const fgColor = `${color}4`;

4+export default function Chip({ children, bgColor, fgColor, className }) {

75 return (

86 <div

97 className={cn(

108 className,

11− 'h6 r-full flex-center ph2 mh2',

9+ 'h6 r-full flex-center ph2 mh2 f6',

1210 bgColor,

1311 fgColor

1412 )}>

src/components/InviteSigilList.js+1−1

@@ -44,7 +44,7 @@ const InviteSigilList = ({ className, pendingPoints, acceptedPoints }) => {

4444 <div className={cn('flex justify-between', className)}>

4545 {renderSigil(_acceptedPoints, ['#000000', '#FFFFFF'])}

4646 {renderSigil(_pendingPoints, ['#ee892b', '#FFFFFF'])}

47− {renderSigil(empty, [], 'b1 b-black b-dashed')}

47+ {renderSigil(empty, [], 'b1 b-gray3 b-dashed')}

4848 </div>

4949 );

5050};

src/indigo-react/components/Button.js+7−2

@@ -19,6 +19,7 @@ export default function Button({

1919 background,

2020 type,

2121 children,

22+ center = false,

2223 ...rest

2324}) {

2425 const handleKeyPress = e => {

@@ -60,10 +61,14 @@ export default function Button({

6061 onClick={!disabled && onClick ? onClick : undefined}

6162 {...rest}>

6263 {background}

63− <Grid.Item full as={Flex} justify="between" className="z2">

64+ <Grid.Item

65+ full

66+ as={Flex}

67+ justify="between"

68+ className={cn('z2', { 'flex-center': center })}>

6469 <span>{children}</span>

6570 {type && <button type={type} style={{ display: 'none' }}></button>}

66− <div className={cn('pl4')}>{accessory}</div>

71+ {!center && <div className={cn('pl4')}>{accessory}</div>}

6772 </Grid.Item>

6873 {detail && (

6974 <Grid.Item full as={HelpText} className={cn('z2', detailClassName)}>

src/views/Invite/Cohort.js+23−13

@@ -1,5 +1,5 @@

11import React, { useMemo, useEffect, useCallback, useState } from 'react';

2−import { Grid, Flex } from 'indigo-react';

2+import { Grid, Flex, Button } from 'indigo-react';

33import * as ob from 'urbit-ob';

44import { Just } from 'folktale/maybe';

55import cn from 'classnames';

@@ -9,9 +9,9 @@ import { usePointCache } from 'store/pointCache';

1010import View from 'components/View';

1111import BarGraph from 'components/BarGraph';

12−import InviteSigilList from 'components/InviteSigilList';

1312import MaybeSigil from 'components/MaybeSigil';

1413import { matchBlinky } from 'components/Blinky';

14+import { ForwardButton } from 'components/Buttons';

1515import Chip from 'components/Chip';

1616import Crumbs from 'components/Crumbs';

1717

@@ -19,6 +19,8 @@ import { useLocalRouter } from 'lib/LocalRouter';

1919import useInvites from 'lib/useInvites';

2020import * as need from 'lib/need';

2121

22+import Inviter from 'views/Invite/Inviter';

23+

2224import { ReactComponent as SearchIcon } from 'assets/search.svg';

2325

2426function CohortMember({ point, className }) {

@@ -73,8 +75,8 @@ function CohortList({ points, className }) {

7375 return (

7476 <Grid gap={3} className={cn('mt1', className)}>

7577 <Grid.Item align="center" full as={Flex} className="b b-gray2 b1">

76− <Flex.Item>

77− <SearchIcon className="p2" />

78+ <Flex.Item className="p2">

79+ <SearchIcon />

7880 </Flex.Item>

7981

8082 <Flex.Item

@@ -82,7 +84,7 @@ function CohortList({ points, className }) {

8284 as={'input'}

8385 value={query}

8486 onChange={handleChange}

85− className="b-none"

87+ className="b-none h7"

8688 />

8789 </Grid.Item>

8890 <>

@@ -113,6 +115,8 @@ export default function InviteCohort() {

113115 sentInvites,

114116 } = useInvites(point);

115117

118+ const [showInviteForm, setShowInviteForm] = useState(false);

119+

116120 const _acceptedPoints = acceptedPoints.getOrElse([]);

117121 const _pendingPoints = pendingPoints.getOrElse([]);

118122 const _pendingInvites = _pendingPoints.length;

@@ -140,8 +144,8 @@ export default function InviteCohort() {

140144 <Flex.Item>

141145 {_acceptedInvites + _pendingInvites} / {_totalInvites}

142146 </Flex.Item>

143− {_pendingInvites && (

144− <Flex.Item as={Chip} color="yellow">

147+ {_pendingInvites !== 0 && (

148+ <Flex.Item as={Chip} className="bg-yellow4 white">

145149 {_pendingInvites} pending

146150 </Flex.Item>

147151 )}

@@ -154,12 +158,18 @@ export default function InviteCohort() {

154158 sent={sentInvites}

155159 accepted={acceptedInvites}

156160 />

157− <Grid.Item

158− full

159− as={InviteSigilList}

160− pendingPoints={pendingPoints}

161− acceptedPoints={acceptedPoints}

162− />

161+ {availableInvites.getOrElse(0) !== 0 && !showInviteForm && (

162+ <Grid.Item

163+ full

164+ solid

165+ center

166+ as={Button}

167+ onClick={() => setShowInviteForm(true)}>

168+ Add Members

169+ </Grid.Item>

170+ )}

171+ {showInviteForm && <Inviter />}

172+

163173 <Grid.Item full as={CohortList} points={_acceptedPoints} />

164174 </Grid>

165175 </View>

src/views/Invite/Email.js+1−1

@@ -92,7 +92,7 @@ const InviteMail = ({ setSubmitting }) => {

9292 setSubmitting(false);

9393 setStatus(STATUS.SUCCESS);

9494 },

95− [generateInvites, setCount, setStatus, sendInvites]

95+ [generateInvites, setCount, setStatus, sendInvites, setSubmitting]

9696 );

9797

9898 const validateHasReceived = useCallback(

src/views/Invite/Url.js+14−13

@@ -1,5 +1,5 @@

11import React, { useCallback, useState } from 'react';

2−import { Grid, ErrorText } from 'indigo-react';

2+import { Grid, ErrorText, Flex } from 'indigo-react';

33import { get } from 'lodash';

44import { FORM_ERROR } from 'final-form';

@@ -30,7 +30,8 @@ const InviteUrl = ({ setSubmitting }) => {

3030 if (hasErrors(errors)) {

3131 setError(errors);

3232 }

33− }, [generateInvites]);

33+ setSubmitting(false);

34+ }, [generateInvites, setSubmitting]);

3435

3536 const renderGenerateButton = useCallback(() => {

3637 if (error) {

@@ -75,21 +76,21 @@ const InviteUrl = ({ setSubmitting }) => {

7576 const [doCopy, didCopy] = useCopiable(url);

7677

7778 return (

78− <Grid.Item full as={Grid}>

79+ <Grid.Item full as={Grid} gap={3}>

7980 {invites.length > 0 && (

80− <>

81− <Grid.Item full className="b-gray3 b1 mv4 p1 flex flex-center">

82− <div className="flex1 ml1">{url}</div>

83− <Grid.Item

84− className="pv3 ph4 bg-black white"

81+ <Grid.Item as={Flex} full col>

82+ <Flex.Item full className="b-gray3 b1 mt4 mb1 p1 flex flex-center">

83+ <div className="flex1 ml1 f6">{url}</div>

84+ <Flex.Item

85+ className="p2 bg-black white pointer-hover f6"

8586 onClick={() => doCopy()}>

8687 {didCopy ? 'Copied' : 'Copy'}

87− </Grid.Item>

88− </Grid.Item>

89− <Grid.Item full>

88+ </Flex.Item>

89+ </Flex.Item>

90+ <Flex.Item full className="f6 mb4 gray5">

9091 Your invite link expires after consumption.

91− </Grid.Item>

92− </>

92+ </Flex.Item>

93+ </Grid.Item>

9394 )}

9495 {invites.length === 0 && renderGenerateButton()}

9596 {needFunds && <Grid.Item full as={NeedFundsNotice} {...needFunds} />}

src/views/Point.js+6−4

@@ -1,7 +1,7 @@

11import React, { useCallback, useState } from 'react';

22import cn from 'classnames';

33import { Just } from 'folktale/maybe';

4−import { Grid, Flex } from 'indigo-react';

4+import { Grid, Flex, Button } from 'indigo-react';

55import { azimuth } from 'azimuth-js';

77import { usePointCursor } from 'store/pointCursor';

@@ -149,7 +149,7 @@ export default function Point() {

149149 </Grid.Item>

150150

151151 <Grid.Item

152− className={cn('t-right underline', {

152+ className={cn('t-right underline pointer-hover', {

153153 gray4: sentInvites.getOrElse(0) === 0,

154154 })}

155155 onClick={goCohort}

@@ -163,7 +163,7 @@ export default function Point() {

163163 {_totalInvites}

164164 </Flex.Item>

165165 {_pendingInvites > 0 && (

166− <Flex.Item as={Chip} color="yellow">

166+ <Flex.Item as={Chip} className="bg-yellow1 yellow4">

167167 {_pendingInvites} pending

168168 </Flex.Item>

169169 )}

@@ -200,12 +200,14 @@ export default function Point() {

200200 <Grid.Item

201201 full

202202 solid

203− as={ForwardButton}

203+ as={Button}

204+ center

204205 onClick={() => setShowInviteForm(true)}>

205206 Add Members

206207 </Grid.Item>

207208 )}

208209 {showInviteForm && <Inviter />}

210+ <Grid.Item full className="mb2" />

209211 </>

210212 )}

211213 {!loadedInvites && isPlanet && (