803 advanced organization settings #23
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { Box, Info, GU, textStyle } from '@aragon/ui' | ||
| import LocalIdentityBadge from '../../components/IdentityBadge/LocalIdentityBadge' | ||
| import { network } from '../../environment' | ||
|
|
||
| const Address = ({ | ||
| checksummedDaoAddr, | ||
| shortAddresses, | ||
| depositFundsHelpText, | ||
| }) => ( | ||
| <Box padding={3 * GU} heading="Organization address"> | ||
| <p | ||
| css={` | ||
| ${textStyle('body2')} | ||
| `} | ||
|
There was a problem hiding this comment. I see this didn't change, but since git's diffing tools aren't helpful in showing that, I wonder if now is a good time to simplify this to something like: <p css={textStyle('body2')}> |
||
| > | ||
| {checksummedDaoAddr | ||
| ? `This organization is deployed on the Ethereum ${network.name}.` | ||
| : 'Resolving DAO address…'} | ||
| </p> | ||
| {checksummedDaoAddr && ( | ||
| <React.Fragment> | ||
| <div | ||
| css={` | ||
| margin-top: ${2 * GU}px; | ||
| margin-bottom: ${3 * GU}px; | ||
| `} | ||
| > | ||
| <LocalIdentityBadge | ||
| entity={checksummedDaoAddr} | ||
| shorten={shortAddresses} | ||
| /> | ||
| </div> | ||
| <Info> | ||
| <strong css="font-weight: 800"> | ||
| Do not send ETH or ERC20 tokens to this address. | ||
| </strong>{' '} | ||
| {depositFundsHelpText} | ||
| </Info> | ||
| </React.Fragment> | ||
| )} | ||
| </Box> | ||
| ) | ||
|
|
||
| Address.propTypes = { | ||
| checksummedDaoAddr: PropTypes.string.isRequired, | ||
| shortAddresses: PropTypes.bool.isRequired, | ||
| depositFundsHelpText: PropTypes.string.isRequired, | ||
| } | ||
|
|
||
| export default Address | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { Box, GU, textStyle } from '@aragon/ui' | ||
| import LocalIdentityBadge from '../../components/IdentityBadge/LocalIdentityBadge' | ||
| import { AppType } from '../../prop-types' | ||
| import Label from './Label' | ||
|
|
||
| const Apps = ({ appsLoading, apps, shortAddresses }) => { | ||
| const apmApps = apps.filter(app => !app.isAragonOsInternalApp) | ||
|
There was a problem hiding this comment. For the other components here, we do this sort of filtering in |
||
|
|
||
| return appsLoading ? ( | ||
| <Box padding={3 * GU} heading="Installed Aragon apps"> | ||
| <div | ||
| css={` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: ${22 * GU}px; | ||
| ${textStyle('body2')} | ||
| `} | ||
| > | ||
| Loading apps… | ||
| </div> | ||
| </Box> | ||
| ) : ( | ||
| <Box padding={3 * GU} heading="Installed Aragon apps"> | ||
| <ul | ||
| css={` | ||
| list-style: none; | ||
| display: grid; | ||
| grid-template-columns: minmax(50%, 1fr) minmax(50%, 1fr); | ||
| grid-column-gap: ${2 * GU}px; | ||
| margin-bottom: -${3 * GU}px; | ||
| `} | ||
| > | ||
| {apmApps.map(({ appId, description, name, proxyAddress, tags }) => ( | ||
| <li | ||
| key={proxyAddress} | ||
| css={` | ||
| margin-bottom: ${3 * GU}px; | ||
| `} | ||
| > | ||
| <Label text={name}> | ||
| {tags.length > 0 ? ` (${tags.join(', ')})` : ''} | ||
| </Label> | ||
| <div | ||
| css={` | ||
| margin-top: ${1 * GU}px; | ||
| `} | ||
| > | ||
| <LocalIdentityBadge | ||
| entity={proxyAddress} | ||
| shorten={shortAddresses} | ||
| /> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| Apps.propTypes = { | ||
| apps: PropTypes.arrayOf(AppType).isRequired, | ||
| appsLoading: PropTypes.bool.isRequired, | ||
| shortAddresses: PropTypes.bool.isRequired, | ||
| } | ||
|
|
||
| export default Apps | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React, { useState } from 'react' | ||
| import { Box, Button, GU, TextInput } from '@aragon/ui' | ||
| import Label from './Label' | ||
|
|
||
| const BasicInfo = () => { | ||
| const [basicInfo, setBasicInfo] = useState({ | ||
| name: '', | ||
| website: '', | ||
| description: '', | ||
| }) | ||
|
|
||
| const changeBasicInfo = ({ target: { name, value } }) => { | ||
| const newBasicInfo = { ...basicInfo } | ||
| newBasicInfo[name] = value | ||
| setBasicInfo(newBasicInfo) | ||
|
There was a problem hiding this comment. Consider rewriting this as: setBasicInfo({
...basicInfo,
[name]: value
}) |
||
| } | ||
|
|
||
| const saveBasicInfo = () => { | ||
| console.log('save basic info:', basicInfo) | ||
| } | ||
|
|
||
| return ( | ||
| <Box padding={3 * GU} heading="Basic"> | ||
| <div css="display: flex; width: 100%; margin-bottom: 12px"> | ||
| <div css="width: 50%; padding-right: 12px"> | ||
| <Label text="Name"> | ||
| <TextInput | ||
| name="name" | ||
| value={basicInfo.name} | ||
| onChange={changeBasicInfo} | ||
| wide | ||
| /> | ||
| </Label> | ||
| </div> | ||
|
|
||
| <div css="width: 50%; padding-left: 12px"> | ||
| <Label text="Website"> | ||
| <TextInput | ||
| name="website" | ||
| value={basicInfo.website} | ||
| onChange={changeBasicInfo} | ||
| wide | ||
| /> | ||
| </Label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div css="width: 100%; margin-bottom: 24px"> | ||
| <Label text="Description"> | ||
| <TextInput.Multiline | ||
| name="description" | ||
| value={basicInfo.description} | ||
| onChange={changeBasicInfo} | ||
| wide | ||
| /> | ||
| </Label> | ||
| </div> | ||
|
|
||
| <Button mode="strong" onClick={saveBasicInfo}> | ||
| Save changes | ||
| </Button> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default BasicInfo | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import React, { useState } from 'react' | ||
| import Dropzone from 'react-dropzone' | ||
| import { | ||
| Box, | ||
| Button, | ||
| DropDown, | ||
| GU, | ||
| Info, | ||
| Text, | ||
| TextInput, | ||
| useTheme, | ||
| } from '@aragon/ui' | ||
| import organizationLogoPlaceholder from '../../assets/organization-logo-placeholder.png' | ||
| import organizationBackground from '../../assets/organization-background.png' | ||
| import Label from './Label' | ||
|
|
||
| const Brand = () => { | ||
| const theme = useTheme() | ||
| const [accentColor, setAccentColor] = useState('') | ||
| const [preferredTheme, setPreferredTheme] = useState(0) | ||
| const changePreferredTheme = index => setPreferredTheme(index) | ||
| const changeAccentColor = e => setAccentColor(e.target.value) | ||
| const saveColors = () => { | ||
| console.log('save accent color:', accentColor, 'theme:', preferredTheme) | ||
| } | ||
| const colorRX = /^#(([a-f0-9]{3}){1,2})$/i | ||
|
|
||
| const colorError = accentColor && !colorRX.test(accentColor) | ||
|
|
||
| return ( | ||
| <Box padding={3 * GU} heading="Brand"> | ||
| <div css="display: flex; width: 100%"> | ||
| <div css="display: flex; flex-direction: column; width: 50%; padding-right: 12px"> | ||
| <Label text="Logo" /> | ||
|
|
||
| <div css="margin-bottom: 20px"> | ||
| <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}> | ||
| {({ getRootProps, getInputProps, isDragActive }) => ( | ||
| <div {...getRootProps()} css="outline: none"> | ||
| <input {...getInputProps()} /> | ||
| <div | ||
| css={` | ||
| background: ${theme.surfaceUnder}; | ||
| width: 217px; | ||
| height: 217px; | ||
| padding: 30px; | ||
| margin-bottom: 10px; | ||
| border: ${isDragActive | ||
| ? '1px dashed green' | ||
| : '1px solid white'}; | ||
|
There was a problem hiding this comment. We probably want to use theme colors for these. Let's ask Javi which ones. |
||
| `} | ||
| > | ||
| <img | ||
| css={` | ||
| width: 157px; | ||
| height: 157px; | ||
| border: 0; | ||
| border-radius: 50%; | ||
| `} | ||
| src={organizationLogoPlaceholder} | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <Button | ||
| mode="outline" | ||
| css="margin-right: 10px; font-weight: bold" | ||
| > | ||
| Upload new | ||
| </Button> | ||
| <Button mode="outline" css="font-weight: bold"> | ||
| Revert to default | ||
| </Button> | ||
| <Text css="display: block; margin-top: 8px" size="small"> | ||
| Please keep 1:1 ratio | ||
| </Text> | ||
| </div> | ||
| )} | ||
| </Dropzone> | ||
| </div> | ||
|
|
||
| <Label text="Accent color hex" block> | ||
| <TextInput | ||
| css={` | ||
| display: block; | ||
| border: 1px solid ${colorError ? 'red' : '#DDE4E9'}; | ||
| `} | ||
| value={accentColor} | ||
| onChange={changeAccentColor} | ||
| /> | ||
| </Label> | ||
|
|
||
| {colorError && ( | ||
| <Text css="margin-top: 3px" color="#F22" size="xsmall"> | ||
| Please use #123 or #123456 format | ||
| </Text> | ||
| )} | ||
|
|
||
| <Info css="margin: 20px 0"> | ||
| When empty, the accent color sets itself to the default. Try adding | ||
| a custom hex value and see the change reflected on the button below | ||
| as a preview. | ||
| </Info> | ||
| </div> | ||
|
|
||
| <div css="display: flex; flex-direction: column; width: 50%; padding-left: 12px"> | ||
| <Label text="Placeholder image" /> | ||
|
|
||
| <div css="margin-bottom: 20px"> | ||
| <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}> | ||
|
There was a problem hiding this comment. I think it would increase the visibility of this placeholder function if we move it up next to the |
||
| {({ getRootProps, getInputProps, isDragActive }) => ( | ||
| <div {...getRootProps()} css="outline: none"> | ||
| <input {...getInputProps()} /> | ||
| <div | ||
| css={` | ||
| margin-bottom: 10px; | ||
| height: 217px; | ||
| border: ${isDragActive | ||
| ? '1px dashed green' | ||
| : '1px solid white'}; | ||
| `} | ||
| > | ||
| <img | ||
| css="width: 321px; height: 217px" | ||
| src={organizationBackground} | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <Button | ||
| mode="outline" | ||
| css="margin-right: 10px; font-weight: bold" | ||
| > | ||
| Upload new | ||
| </Button> | ||
| <Button mode="outline" css="font-weight: bold"> | ||
| Revert to default | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </Dropzone> | ||
| </div> | ||
|
|
||
| <Label text="Theme" block> | ||
| <DropDown | ||
| css="display: block" | ||
| selected={preferredTheme} | ||
| items={['Light Theme', 'Dark Theme']} | ||
| onChange={changePreferredTheme} | ||
| /> | ||
| </Label> | ||
| </div> | ||
| </div> | ||
| <Button | ||
| mode="strong" | ||
| onClick={saveColors} | ||
| css={` | ||
| ${accentColor && !colorError && { background: accentColor }}; | ||
| `} | ||
| > | ||
| Save changes | ||
| </Button> | ||
| <Button mode="outline" css="margin-left: 10px; font-weight: bold"> | ||
| Reset brand | ||
| </Button> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default Brand | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { textStyle, unselectable, useTheme } from '@aragon/ui' | ||
|
|
||
| const Label = ({ text, block, children }) => { | ||
| const theme = useTheme() | ||
| return ( | ||
| <label | ||
| css={` | ||
| ${textStyle('label2')}; | ||
| ${unselectable()}; | ||
|
|
||
| color: ${theme.surfaceContentSecondary}; | ||
| display: ${block ? 'block' : 'initial'}; | ||
| `} | ||
| > | ||
| {text} | ||
| {children && children} | ||
|
There was a problem hiding this comment. If the first value is truthy, the
If the first value is falsey, the
All this to say: I don't think |
||
| </label> | ||
| ) | ||
| } | ||
|
|
||
| Label.defaultProps = { | ||
| block: false, | ||
| } | ||
|
|
||
| Label.propTypes = { | ||
| text: PropTypes.string.isRequired, | ||
| block: PropTypes.bool.isRequired, | ||
| children: PropTypes.node, | ||
| } | ||
|
|
||
| export default Label | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why did this go away? I don't see it added anywhere else in this PR.