add additional custom ui components + complete name lookup style

app/components/ens/nameLookup.js

@@ -1,13 +1,21 @@
 import React, { Fragment } from 'react';
-import Field from '../../ui/components/Field'
-import TextInput from '../../ui/components/TextInput'
+import { Button, Field, TextInput, Card } from '../../ui/components'
+
+const cardStyle = {
+  width: '75%',
+  marginLeft: '15%',
+  padding: '30px'
+}
 
 const NameLookup = () => (
-  <div>
+  <Card style={cardStyle}>
     <Field label="Enter Domain or Status Name" wide>
       <TextInput wide required />
     </Field>
-  </div>
+    <Button mode="strong" type="submit" wide>
+      Get Address
+    </Button>
+  </Card>
 )
 
 export default NameLookup;

app/ui/components/Button/Button.js

@@ -0,0 +1,221 @@
+import styled, { css } from 'styled-components'
+import SafeLink from '../SafeLink'
+import theme from '../../theme'
+import { font, unselectable } from '../../utils/styles'
+import PublicUrl, { styledUrl } from '../../providers/PublicUrl'
+import cross from './assets/cross.svg'
+import check from './assets/check.svg'
+import crossWhite from './assets/cross-white.svg'
+import checkWhite from './assets/check-white.svg'
+
+const {
+  gradientStart,
+  gradientEnd,
+  gradientStartActive,
+  gradientEndActive,
+  gradientText,
+  contentBackground,
+  contentBorder,
+  contentBorderActive,
+  secondaryBackground,
+  textPrimary,
+  textSecondary,
+  disabled: disabledColor,
+  disabledText,
+} = theme
+
+// Plain button = normal or strong
+const plainButtonStyles = css`
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
+  &:after {
+    content: '';
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  ${({ disabled }) =>
+    disabled
+      ? ''
+      : css`
+          &:hover,
+          &:focus {
+            box-shadow: ${({ disabled }) =>
+              disabled ? 'none' : '0 1px 1px rgba(0, 0, 0, 0.2)'};
+          }
+          &:active {
+            transform: translateY(1px);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
+            &:after {
+              opacity: 1;
+            }
+          }
+        `};
+`
+
+const modeNormal = css`
+  ${plainButtonStyles};
+  &:active {
+    color: ${textPrimary};
+  }
+`
+
+const modeSecondary = css`
+  ${plainButtonStyles};
+  background: ${secondaryBackground};
+  &:hover,
+  &:focus {
+    box-shadow: none;
+  }
+`
+
+const modeStrong = css`
+  ${plainButtonStyles};
+  ${font({ size: 'small', weight: 'bold' })};
+
+  ${({ disabled }) =>
+    disabled
+      ? css`
+          color: ${disabledText};
+          background-color: ${disabledColor};
+          background-image: none;
+        `
+      : css`
+          color: ${gradientText};
+          background-color: transparent;
+          background-image: linear-gradient(
+            130deg,
+            ${gradientStart},
+            ${gradientEnd}
+          )};
+
+          &:after {
+            background-image: linear-gradient(
+              130deg,
+              ${gradientStartActive},
+              ${gradientEndActive}
+            );
+          }
+  `};
+`
+
+const modeOutline = css`
+  background: transparent;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  border: 1px solid ${contentBorder};
+  &:hover,
+  &:focus {
+    border-color: ${contentBorderActive};
+  }
+  &:active {
+    color: ${textPrimary};
+    border-color: ${textPrimary};
+  }
+`
+
+const modeText = css`
+  padding: 10px;
+  background: transparent;
+  &:active,
+  &:focus {
+    color: ${textPrimary};
+  }
+`
+
+const compactStyle = css`
+  padding: ${({ mode }) => (mode === 'outline' ? '4px 14px' : '5px 15px')};
+`
+
+const positiveStyle = css`
+  padding-left: 34px;
+  background: url(${styledUrl(check)}) no-repeat 12px calc(50% - 1px);
+  ${({ mode }) => {
+    if (mode !== 'strong') return ''
+    return css`
+      &,
+      &:active {
+        background-image: url(${styledUrl(checkWhite)});
+        background-color: ${theme.positive};
+      }
+      &:after {
+        background: none;
+      }
+    `
+  }};
+`
+
+const negativeStyle = css`
+  padding-left: 30px;
+  background: url(${styledUrl(cross)}) no-repeat 10px calc(50% - 1px);
+  ${({ mode }) => {
+    if (mode !== 'strong') return ''
+    return css`
+      &,
+      &:active {
+        background-image: url(${styledUrl(crossWhite)});
+        background-color: ${theme.negative};
+      }
+      &:after {
+        background: none;
+      }
+    `
+  }};
+`
+
+const StyledButton = styled.button.attrs({ type: 'button' })`
+  width: ${({ wide }) => (wide ? '100%' : 'auto')};
+  padding: 10px 15px;
+  white-space: nowrap;
+  ${font({ size: 'small', weight: 'normal' })};
+  color: ${textSecondary};
+  background: ${contentBackground};
+  border: 0;
+  border-radius: 3px;
+  outline: 0;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  &,
+  &:after {
+    transition-property: all;
+    transition-duration: 100ms;
+    transition-timing-function: ease-in-out;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  ${({ mode }) => {
+    if (mode === 'secondary') return modeSecondary
+    if (mode === 'strong') return modeStrong
+    if (mode === 'outline') return modeOutline
+    if (mode === 'text') return modeText
+    return modeNormal
+  }};
+
+  ${({ compact }) => (compact ? compactStyle : '')};
+
+  ${({ emphasis }) => {
+    if (emphasis === 'positive') return positiveStyle
+    if (emphasis === 'negative') return negativeStyle
+    return ''
+  }};
+`
+
+const Button = PublicUrl.hocWrap(StyledButton)
+const Anchor = PublicUrl.hocWrap(
+  StyledButton.withComponent(SafeLink).extend`
+    ${unselectable};
+    display: inline-block;
+    text-decoration: none;
+  `
+)
+
+Button.Anchor = Anchor
+
+export default Button

app/ui/components/Button/README.md

@@ -0,0 +1,97 @@
+# Button
+
+A simple Button component.
+
+## Usage
+
+```jsx
+import { Button } from '@aragon/ui'
+
+const App = () => (
+  <Button>Hello World</Button>
+)
+```
+
+## Properties
+
+### `mode`
+
+- Type: `String`
+- Values: `normal` (default), `secondary`, `outline`, `strong` or `text`.
+
+Set this property to the desired visual variant.
+
+#### Example:
+
+```jsx
+const App = () => (
+  <div>
+    <Button mode="outline">Cancel</Button>
+    <Button mode="strong">Accept</Button>
+  </div>
+)
+```
+
+### `emphasis`
+
+- Type: `String`
+- Values: `positive` or `negative`.
+
+Set this property to provide positive or negative visual cues.
+
+#### Example:
+
+```jsx
+const App = () => (
+  <div>
+    <Button emphasis="negative">Cancel</Button>
+    <Button emphasis="positive">Accept</Button>
+  </div>
+)
+```
+
+### `compact`
+
+- Type: `Boolean`
+- Default: `false`
+
+Set to true to obtain a button that contains less padding than normal buttons.
+
+#### Example:
+
+```jsx
+const MyButton = () => (
+  <Button compact>Accept</Button>
+)
+```
+
+### `wide`
+
+- Type: `Boolean`
+- Default: `false`
+
+Set to true to obtain a button that expands horizontally.
+
+#### Example:
+
+```jsx
+const MyButton = () => (
+  <Button wide>Accept</Button>
+)
+```
+
+## Attached Components
+
+### `Anchor`
+
+An `<a>` styled to be visually similar to Buttons, supporting the same properties.
+
+#### Example:
+
+```jsx
+const LinkButton = () => (
+  <Button.Anchor mode="strong" href="https://aragon.one/" target="_blank">
+    Aragon
+  </Button.Anchor>
+)
+```

app/ui/components/Button/assets/check-white.svg

@@ -0,0 +1 @@
+<svg width="14" height="10" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg"><path d="M4.176 7.956L12.114 0l1.062 1.062-9 9L0 5.886l1.044-1.062z" fill="#FFF" fill-rule="evenodd"/></svg>

app/ui/components/Button/assets/check.svg

@@ -0,0 +1 @@
+<svg width="14" height="10" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg"><path d="M4.176 7.956L12.114 0l1.062 1.062-9 9L0 5.886l1.044-1.062z" fill="#21D48E" fill-rule="evenodd"/></svg>

app/ui/components/Button/assets/cross-white.svg

@@ -0,0 +1 @@
+<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M10.476 1.062L6.3 5.238l4.176 4.176-1.062 1.062L5.238 6.3l-4.176 4.176L0 9.414l4.176-4.176L0 1.062 1.062 0l4.176 4.176L9.414 0z" fill="#FFF" fill-rule="evenodd"/></svg>

app/ui/components/Button/assets/cross.svg

@@ -0,0 +1 @@
+<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M10.476 1.524L6.3 5.7l4.176 4.176-1.062 1.062-4.176-4.176-4.176 4.176L0 9.876 4.176 5.7 0 1.524 1.062.462l4.176 4.176L9.414.462z" fill="#FB7777" fill-rule="evenodd"/></svg>

app/ui/components/Button/assets/index.js

@@ -0,0 +1,2 @@
+// @create-index
+

app/ui/components/Button/index.js

@@ -0,0 +1,5 @@
+// @create-index
+
+export { default as Button } from './Button.js';
+export { default as assets } from './assets';
+

app/ui/components/SafeLink.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+const SafeLink = styled.a.attrs({
+  // See https://mathiasbynens.github.io/rel-noopener
+  rel: 'noopener noreferrer',
+})``
+
+export default SafeLink

app/ui/components/index.js

@@ -0,0 +1,8 @@
+// @create-index
+
+export * from './Button';
+export { default as Card } from './Card.js';
+export { default as Field } from './Field.js';
+export { default as Text } from './Text.js';
+export { default as TextInput } from './TextInput.js';
+

app/ui/index.js

@@ -1,2 +1,7 @@
-export { default as Card } from './components/Card'
-export { default as Field } from './components/Field.js'
+// @create-index
+
+export { default as components } from './components';
+export { default as providers } from './providers';
+export { default as theme } from './theme';
+export { default as utils } from './utils';
+

app/ui/providers/PublicUrl/PublicUrl.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { prefixUrl } from '../../utils/url'
+
+const DEFAULT_URL = ''
+
+const { Provider, Consumer: PublicUrl } = React.createContext(DEFAULT_URL)
+
+const PublicUrlProvider = ({ url, children }) => {
+  return <Provider value={url}>{children}</Provider>
+}
+PublicUrlProvider.propTypes = {
+  url: PropTypes.string,
+  children: PropTypes.node,
+}
+
+// HOC wrapper
+const hocWrap = Component => props => (
+  <PublicUrl>
+    {publicUrl => <Component {...props} publicUrl={publicUrl} />}
+  </PublicUrl>
+)
+
+// styled-components utility for URLs
+const styledUrl = url => ({ publicUrl }) => prefixUrl(url, publicUrl)
+
+PublicUrl.Provider = PublicUrlProvider
+PublicUrl.hocWrap = hocWrap
+PublicUrl.styledUrl = styledUrl
+
+export { PublicUrl, Provider, hocWrap, styledUrl }
+export default PublicUrl

app/ui/providers/PublicUrl/index.js

@@ -0,0 +1,2 @@
+export { default } from './PublicUrl'
+export * from './PublicUrl'

app/ui/providers/index.js

@@ -0,0 +1,4 @@
+// @create-index
+
+export { default as PublicUrl } from './PublicUrl';
+

app/ui/utils/index.js

@@ -0,0 +1,5 @@
+// @create-index
+
+export { default as styles } from './styles';
+export { default as url } from './url.js';
+

app/ui/utils/styles/index.js

@@ -1,3 +1,4 @@
+export * from './font'
 export const unselectable = () => `
   -webkit-touch-callout: none;
   -webkit-user-select: none;

app/ui/utils/url.js

@@ -0,0 +1,5 @@
+// prefix helper
+const prefixUrl = (url, publicUrl) =>
+      url.startsWith('data:') ? url : publicUrl + url
+
+export { prefixUrl }