Collection primary buttons

Author: andrewn

Diff for: 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'),
 };
 
 /*

Diff for: client/images/sort-arrow-down.svg

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

Diff for: client/images/sort-arrow-up.svg

@@ -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
-        className="collection-share__button"
+      <Button
         onClick={() => setShowURL(!showURL)}
-      >
-        <span>Share</span>
-        <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
-      </button>
+      ><span>Share</span>
+        <Icon name={Icon.names.sortArrowDown} />
+      </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 (

Diff for: client/modules/User/components/APIKeyForm.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>

Diff for: client/modules/User/components/Collection.jsx

@@ -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;

Diff for: client/modules/User/components/CollectionCreate.jsx

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