Collection primary buttons

client/common/Icon.jsx

@@ -5,9 +5,12 @@ import React from 'react';
 import lodash from 'lodash';
 
 const icons = {
+  sortArrowUp: require('../images/sort-arrow-up.svg'),
+  sortArrowDown: require('../images/sort-arrow-down.svg'),
   github: require('../images/github.svg'),
   google: require('../images/google.svg'),
-  plusIcon: require('../images/plus-icon.svg'),
+  plus: require('../images/plus-icon.svg'),
+  close: require('../images/close.svg'),
 };
 
 /*

client/images/sort-arrow-down.svg

@@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg width="10px" height="9px" viewBox="0 0 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	 width="40px" height="30px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+	<g transform="translate(0.666667, 0.333333)">
-<g>
+		<polygon points="4.56711429 7.96345714 0.103114286 0.1872 8.99022857 0.1872"></polygon>
-	<path d="M49.761,67.969l-17.36-30.241h34.561L49.761,67.969z"/>
+	</g>
-</g>
 </svg>

client/images/sort-arrow-up.svg

@@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg width="10px" height="9px" viewBox="0 0 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	 width="40px" height="30px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+	<g transform="translate(-0.200000, -0.200000)" >
-<g>
+		<polygon points="4.93361111 0.202222222 9.75583333 8.6025 0.155833333 8.6025"></polygon>
-	<path d="M49.761,37.728l17.36,30.241H32.561L49.761,37.728z"/>
+	</g>
-</g>
 </svg>

client/modules/User/components/APIKeyForm.jsx

@@ -87,7 +87,7 @@ class APIKeyForm extends React.Component {
               type="submit"
               label="Create new key"
             >
-              <Icon name={Icon.names.plusIcon} />
+              <Icon name={Icon.names.plus} />
               <span>Create</span>
             </Button>
           </form>

client/modules/User/components/Collection.jsx

@@ -7,6 +7,9 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
+
+import Button from '../../../common/Button';
+import Icon from '../../../common/Icon';
 import * as ProjectActions from '../../IDE/actions/project';
 import * as ProjectsActions from '../../IDE/actions/projects';
 import * as CollectionsActions from '../../IDE/actions/collections';
@@ -20,7 +23,6 @@ import Overlay from '../../App/components/Overlay';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
-import dropdownArrow from '../../../images/down-arrow.svg';
 
 const arrowUp = require('../../../images/sort-arrow-up.svg');
 const arrowDown = require('../../../images/sort-arrow-down.svg');
@@ -51,13 +53,11 @@ const ShareURL = ({ value }) => {
 
   return (
     <div className="collection-share" ref={node}>
-      <button
+      <Button
-        className="collection-share__button"
         onClick={() => setShowURL(!showURL)}
-      >
+      ><span>Share</span>
-        <span>Share</span>
+        <Icon name={Icon.names.sortArrowDown} />
-        <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
+      </Button>
-      </button>
       { showURL &&
         <div className="collection__share-dropdown">
           <CopyableInput value={value} label="Link to Collection" />
@@ -263,9 +263,9 @@ class Collection extends React.Component {
             </p>
             {
               this.isOwner() &&
-              <button className="collection-metadata__add-button" onClick={this.showAddSketches}>
+              <Button onClick={this.showAddSketches}>
                 Add Sketch
-              </button>
+              </Button>
             }
           </div>
         </div>
@@ -299,7 +299,7 @@ class Collection extends React.Component {
   _renderFieldHeader(fieldName, displayName) {
     const { field, direction } = this.props.sorting;
     const headerClass = classNames({
-      'sketches-table__header': true,
+      'arrowDown': true,
       'sketches-table__header--selected': field === fieldName
     });
     return (

client/modules/User/components/CollectionCreate.jsx

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
 import * as CollectionsActions from '../../IDE/actions/collections';
 
 import { generateCollectionName } from '../../../utils/generateRandomName';
+import Button from '../../../common/Button';
 
 class CollectionCreate extends React.Component {
   constructor() {
@@ -81,7 +82,7 @@ class CollectionCreate extends React.Component {
                 rows="4"
               />
             </p>
-            <input type="submit" disabled={invalid} value="Create collection" aria-label="create collection" />
+            <Button type="submit" disabled={invalid}>Create collection</Button>
           </form>
         </div>
       </div>

client/styles/components/_collection.scss

@@ -92,16 +92,6 @@
   position: relative;
 }
 
-.collection-share__button {
-  @extend %button;
-  display: flex;
-  align-items: center;
-}
-
-.collection-share__arrow {
-  margin-left: #{5 / $base-font-size}rem;
-}
-
 .collection-share .copyable-input {
   padding-bottom: 0;
 }
@@ -112,11 +102,6 @@
   width: #{350 / $base-font-size}rem;
 }
 
-.collection-metadata__add-button {
-  @extend %button;
-  flex-grow: 0;
-}
-
 .collection-content {
   display: flex;
   flex-direction: column;

client/styles/components/_sketch-list.scss

@@ -28,6 +28,11 @@
   display: flex;
   align-items: center;
   height: #{35 / $base-font-size}rem;
+
+  & .isvg {
+    margin-left: #{8 / $base-font-size}rem;
+  }
+
   & svg {
     @include themify() {
       fill: getThemifyVariable('inactive-text-color')