From adeb42f58b6ca61e2dff5a88546b1915943f479f Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 10:44:13 -0700 Subject: [PATCH 01/11] Match header colours --- src/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index c13be2b0..ab80be26 100644 --- a/src/index.css +++ b/src/index.css @@ -16,9 +16,10 @@ body { } header { - background-color: #fff; + background-color: #596362; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22); height: 54px; + border-bottom:2px solid #3ab7a5; position: fixed; width: 100%; z-index: 999; From feb824b7a4fc058acf254264f2e827904b9bc732 Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 10:49:46 -0700 Subject: [PATCH 02/11] Match search bar to colour scheme --- src/containers/FindBar.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/containers/FindBar.css b/src/containers/FindBar.css index 5f31c520..7cca55a2 100644 --- a/src/containers/FindBar.css +++ b/src/containers/FindBar.css @@ -1,9 +1,9 @@ :root { - --foregroundColor: #555; - --backgroundColor: rgba(245, 245, 245, 0.98); + --foregroundColor: #fff; + --backgroundColor: #596362; --textFieldBorderColor: #e7e7e7; - --highlightFGColor: #444; - --highlightBGColor: #d2dee4; + --highlightFGColor: #fff; + --highlightBGColor: #3ab7a5; } .root { From 01b113a1d69262a4445c21784c8516ca45c8bd91 Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 10:53:31 -0700 Subject: [PATCH 03/11] Grabbed font declaration list --- src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.css b/src/index.css index ab80be26..bbf9d6ba 100644 --- a/src/index.css +++ b/src/index.css @@ -3,6 +3,7 @@ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; + font-family: Roboto,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif; } *, *:before, *:after { box-sizing: inherit; From d972418dae1e5ac6c2ad9891f1412200d9cb713d Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 10:54:12 -0700 Subject: [PATCH 04/11] Set main bg and foreground colours --- src/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index bbf9d6ba..8284730b 100644 --- a/src/index.css +++ b/src/index.css @@ -12,7 +12,8 @@ html { body { font-family: 'Roboto', sans-serif; height: 100%; - background-color: #fafafa; + background-color: #f2f5f4; + color:#7c8382; margin: 0; } From ae2b7ad45c7b1788807b123cd9f644e1872002cd Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 11:05:03 -0700 Subject: [PATCH 05/11] Match header styles --- src/index.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/index.css b/src/index.css index 8284730b..a2d11d46 100644 --- a/src/index.css +++ b/src/index.css @@ -34,3 +34,11 @@ header { h1, h2, h3, h4, h5, h6, p { margin: 0; } + +h1{ + color: #3ab7a5; + border-bottom: 1px solid #3ab7a5; + margin: 30px auto 25px; + padding-bottom: 15px; + font-size: 25px; +} From bf87ac15b529447a0906f47fdeeb842faa5739ff Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 11:08:53 -0700 Subject: [PATCH 06/11] Make cards have h2s not h1s --- src/components/Cards/ImageCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Cards/ImageCard.js b/src/components/Cards/ImageCard.js index 307b63a9..9473ca61 100644 --- a/src/components/Cards/ImageCard.js +++ b/src/components/Cards/ImageCard.js @@ -9,7 +9,7 @@ export default class ImageCard extends React.Component { return ( -

{text}

+

{text}

{description ?

{description}

: null} From 81e27632becbe1e4b29c655a8a5c6cbc2a3e9c62 Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 12:11:14 -0700 Subject: [PATCH 07/11] Made the image upload button stand out as a drag target --- src/components/EntryEditor.js | 5 ++++- src/components/Widgets/ImageControl.js | 14 ++++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js index 1ab0f003..30d405cd 100644 --- a/src/components/EntryEditor.js +++ b/src/components/EntryEditor.js @@ -8,7 +8,7 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA

Entry in {collection.get('label')}

{entry && entry.get('title')}

-
+
- - {imageName ? imageName : 'Click or drop image here.'} + + {imageName ? imageName : 'Click here to upload from your file browser, or drag an image directly into this box from your desktop'} Date: Wed, 31 Aug 2016 13:06:23 -0700 Subject: [PATCH 08/11] Copy drag image style a bit more from ember version --- src/components/Widgets/ImageControl.js | 11 ++++++----- src/index.css | 12 ++++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js index f0c5ee06..6753f91d 100644 --- a/src/components/Widgets/ImageControl.js +++ b/src/components/Widgets/ImageControl.js @@ -98,14 +98,15 @@ const styles = { display: 'none' }, imageUpload: { - backgroundColor: '#3ab7a5', + backgroundColor: '#fff', textAlign: 'center', - color: '#fff', - padding: '10px', + color: '#888', + padding: '20px', display: 'block', margin: '10px', - boxShadow: '0px 9px 8px -5px rgba(0,0,0,0.75)', - cursor: 'pointer' + border: '1px dashed #eee', + cursor: 'pointer', + fontSize: '12px' } }; diff --git a/src/index.css b/src/index.css index a2d11d46..af9ba209 100644 --- a/src/index.css +++ b/src/index.css @@ -42,3 +42,15 @@ h1{ padding-bottom: 15px; font-size: 25px; } +input{ + width:100%; + padding:3px; +} +button{ + border: 1px solid #3ab7a5; + padding: 3px 20px; + font-size: 12px; + line-height: 18px; + background-color:#fff; + cursor: pointer; +} \ No newline at end of file From c49cfc5fce92cb689d353bd7a504624386d1cc4b Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 13:08:14 -0700 Subject: [PATCH 09/11] Knock back tip text --- src/components/Widgets/ImageControl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js index 6753f91d..99a94adb 100644 --- a/src/components/Widgets/ImageControl.js +++ b/src/components/Widgets/ImageControl.js @@ -79,7 +79,7 @@ export default class ImageControl extends React.Component { onDrop={this.handleChange} > - {imageName ? imageName : 'Click here to upload from your file browser, or drag an image directly into this box from your desktop'} + {imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'} Date: Wed, 31 Aug 2016 13:18:18 -0700 Subject: [PATCH 10/11] Add a bit of padding to inputs --- src/components/EntryEditor.js | 4 +++- src/components/Widgets/ImageControl.js | 1 - src/containers/FindBar.css | 1 + src/index.css | 6 ++++++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js index 30d405cd..6ae93edd 100644 --- a/src/components/EntryEditor.js +++ b/src/components/EntryEditor.js @@ -31,7 +31,9 @@ const styles = { display: 'flex' }, controlPane: { - width: '50%' + width: '50%', + paddingLeft: '10px', + paddingRight: '10px' }, pane: { width: '50%' diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js index 99a94adb..12b250e4 100644 --- a/src/components/Widgets/ImageControl.js +++ b/src/components/Widgets/ImageControl.js @@ -103,7 +103,6 @@ const styles = { color: '#999', padding: '20px', display: 'block', - margin: '10px', border: '1px dashed #eee', cursor: 'pointer', fontSize: '12px' diff --git a/src/containers/FindBar.css b/src/containers/FindBar.css index 7cca55a2..e370c63b 100644 --- a/src/containers/FindBar.css +++ b/src/containers/FindBar.css @@ -30,6 +30,7 @@ white-space: nowrap; vertical-align: middle; border-right: 1px solid var(--textFieldBorderColor); + margin:0; } .inputField { diff --git a/src/index.css b/src/index.css index af9ba209..00fd30e3 100644 --- a/src/index.css +++ b/src/index.css @@ -42,9 +42,15 @@ h1{ padding-bottom: 15px; font-size: 25px; } + input{ width:100%; padding:3px; + font-size:14px; + margin-bottom:10px; +} +header input{ + margin-bottom:0; } button{ border: 1px solid #3ab7a5; From 8112a62010021f9e738f724f2e497d655112be43 Mon Sep 17 00:00:00 2001 From: Frances Berriman Date: Wed, 31 Aug 2016 13:24:54 -0700 Subject: [PATCH 11/11] Apply the correct shade of grey to header --- src/containers/FindBar.css | 2 +- src/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/FindBar.css b/src/containers/FindBar.css index e370c63b..be0abe88 100644 --- a/src/containers/FindBar.css +++ b/src/containers/FindBar.css @@ -1,6 +1,6 @@ :root { --foregroundColor: #fff; - --backgroundColor: #596362; + --backgroundColor: #272e30; --textFieldBorderColor: #e7e7e7; --highlightFGColor: #fff; --highlightBGColor: #3ab7a5; diff --git a/src/index.css b/src/index.css index 00fd30e3..cd5e3545 100644 --- a/src/index.css +++ b/src/index.css @@ -18,7 +18,7 @@ body { } header { - background-color: #596362; + background-color: #272e30; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22); height: 54px; border-bottom:2px solid #3ab7a5;