From 56865047fda9ca09585f085a723df35fd8a13400 Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Sun, 26 Apr 2020 12:43:58 +0200 Subject: [PATCH] Collection primary buttons --- client/common/Icon.jsx | 5 ++++- client/images/sort-arrow-down.svg | 9 ++++----- client/images/sort-arrow-up.svg | 9 ++++----- client/modules/User/components/APIKeyForm.jsx | 2 +- client/modules/User/components/Collection.jsx | 20 +++++++++---------- .../User/components/CollectionCreate.jsx | 3 ++- client/styles/components/_collection.scss | 15 -------------- client/styles/components/_sketch-list.scss | 5 +++++ 8 files changed, 30 insertions(+), 38 deletions(-) diff --git a/client/common/Icon.jsx b/client/common/Icon.jsx index 4a78e2be..66863101 100644 --- a/client/common/Icon.jsx +++ b/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 --git a/client/images/sort-arrow-down.svg b/client/images/sort-arrow-down.svg index f9a1fc8e..574bbc25 100644 --- a/client/images/sort-arrow-down.svg +++ b/client/images/sort-arrow-down.svg @@ -1,9 +1,8 @@ - - - - + + + + diff --git a/client/images/sort-arrow-up.svg b/client/images/sort-arrow-up.svg index 4fc7ca5d..60635a84 100644 --- a/client/images/sort-arrow-up.svg +++ b/client/images/sort-arrow-up.svg @@ -1,9 +1,8 @@ - - - - + + + + diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.jsx index 76dd6297..acef4e38 100644 --- a/client/modules/User/components/APIKeyForm.jsx +++ b/client/modules/User/components/APIKeyForm.jsx @@ -87,7 +87,7 @@ class APIKeyForm extends React.Component { type="submit" label="Create new key" > - + Create diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 0c8723b0..620901a7 100644 --- a/client/modules/User/components/Collection.jsx +++ b/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 (
- + >Share + + { showURL &&
@@ -263,9 +263,9 @@ class Collection extends React.Component {

{ this.isOwner() && - + }
@@ -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 --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx index b5821223..cf679ccc 100644 --- a/client/modules/User/components/CollectionCreate.jsx +++ b/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" />

- + diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index ff488192..dbfaf7dc 100644 --- a/client/styles/components/_collection.scss +++ b/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; diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss index 87162305..98c95f72 100644 --- a/client/styles/components/_sketch-list.scss +++ b/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')