brought styling to Figma design

src/apps/Organization/Address.js

@@ -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')}
+      `}
+    >
+      {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

src/apps/Organization/Apps.js

@@ -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)
+
+  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

src/apps/Organization/BasicInfo.js

@@ -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)
+  }
+
+  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

src/apps/Organization/Brand.js

@@ -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'};
+                    `}
+                  >
+                    <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)}>
+              {({ 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

src/apps/Organization/Label.js

@@ -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}
+    </label>
+  )
+}
+
+Label.defaultProps = {
+  block: false,
+}
+
+Label.propTypes = {
+  text: PropTypes.string.isRequired,
+  block: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+}
+
+export default Label