Update/visual style for parity (#25)

* Updating visual consistency - Adjusting Spacing - Adjusting Font Weight - Switching “Save to Pocket” to “Save” on recommendations * Removing Letter Spacing * Updating spacing and colors on panel and tags
Pocket · Feb 9, 2018 · 789ad37 · 789ad37
1 parent a05e07d
commit 789ad37
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 27 deletions.
diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
@@ -3,6 +3,7 @@
 .actions {
     float: right;
     text-align: right;
+    padding: 3px 0;
 }
 
 .overflowList {

diff --git a/src/containers/save/recommendations/header/header.scss b/src/containers/save/recommendations/header/header.scss
@@ -2,8 +2,8 @@
 
 .header {
     color: $darksmoke;
-    font-size: 11px;
-    font-weight: 200;
+    font-size: 12px;
+    font-weight: 400;
     letter-spacing: 0.1px;
     line-height: 16px;
     margin: 0;

diff --git a/src/containers/save/recommendations/list/item.js b/src/containers/save/recommendations/list/item.js
@@ -8,7 +8,7 @@ import { localize } from '../../../../common/_locales/locales'
 
 const cx = classNames.bind(styles)
 const copy = {
-    idle: localize('recommendations', 'save_to_pocket'),
+    idle: localize('actions', 'save'),
     saving: localize('recommendations', 'saving'),
     saved: localize('recommendations', 'saved')
 }

diff --git a/src/containers/save/toolbar/tagging/chips/chips.scss b/src/containers/save/toolbar/tagging/chips/chips.scss
@@ -20,13 +20,14 @@
     display: inline-block;
     font-weight: 300;
     line-height: 16px;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
     margin-right: 3px;
+    margin-top: 2px;
     padding: 2px 12px;
     text-transform: lowercase;
 
     &:first-child {
-        margin-left: 16px;
+        margin-left: 20px;
     }
 
     span {

diff --git a/src/containers/save/toolbar/tagging/suggestions/suggestions.scss b/src/containers/save/toolbar/tagging/suggestions/suggestions.scss
@@ -6,7 +6,6 @@
     display: block;
     font-size: 13px;
     line-height: 17px;
-    margin-top: 2px;
     text-align: left;
     width: 100%;
 }
@@ -23,30 +22,32 @@
     flex-wrap: wrap;
     list-style-type: none;
     margin: 0;
-    padding: 8px 0 0;
+    padding: 10px 0 0;
     text-align: left;
 }
 
 .suggestion {
-    background-color: $smoke;
+    background-color: $snow;
+    border: 1px solid $silver;
     border-radius: 3px;
     color: $tar;
     cursor: pointer;
     display: inline-block;
-    flex-grow: 1;
+    // flex-grow: 1;
     font-weight: 300;
     letter-spacing: 0.05em;
     line-height: 16px;
-    margin-bottom: 5px;
-    margin-right: 3px;
+    margin-bottom: 4px;
+    margin-right: 6px;
     min-width: 15%;
-    padding: 1px 8px;
+    padding: 2px 8px;
     text-align: center;
     text-transform: lowercase;
     transform: translateZ(0.1);
 
     &:hover {
-        background-color: $teal;
+        border-color: $overcast;
+        background-color: $darksmoke;
         color: $white;
     }
 }

diff --git a/src/containers/save/toolbar/tagging/tagging.scss b/src/containers/save/toolbar/tagging/tagging.scss
@@ -10,16 +10,16 @@
 .well {
     background: $white;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#999999"><path d="M83.38 54.6L43.8 17.02H17.41V43.4l39.58 39.58L83.38 54.6zM30.95 36.81c-3.45 0-6.25-2.67-6.25-5.96s2.8-5.97 6.25-5.97 6.25 2.67 6.25 5.97c0 3.29-2.8 5.96-6.25 5.96z"/></svg>');
-    background-position: 4px 4px;
+    background-position: 4px 7px;
     background-repeat: no-repeat;
     background-size: 22px;
     border: 1px solid $smoke;
     border-radius: 3px;
     box-sizing: border-box;
     font-size: 13px;
-    line-height: 17px;
+    line-height: 16px;
     margin: 0;
-    padding: 4px 10px 2px;
+    padding: 4px 10px;
     position: relative;
     text-align: left;
 
@@ -29,11 +29,10 @@
 
 .placeholder {
     color: $overcast;
-    font-style: italic;
-    left: 28px;
+    left: 29px;
     // pointer-events: none;
     position: absolute;
-    top: 6px;
+    top: 10px;
 }
 
 .typeaheadWrapper {

diff --git a/src/containers/save/toolbar/tagging/taginput/taginput.scss b/src/containers/save/toolbar/tagging/taginput/taginput.scss
@@ -4,10 +4,12 @@ input.tagInput {
     all: unset;
     color: $pitch;
     display: inline-block;
-    margin-bottom: 2px;
+    margin-top: 3px;
+    margin-bottom: 3px;
     margin-left: 16px;
     margin-right: 3px;
     min-width: 0.3em;
+    line-height: 16px;
     padding: 2px 4px;
 
     &.active {

diff --git a/src/containers/save/toolbar/toolbar.main.js b/src/containers/save/toolbar/toolbar.main.js
@@ -51,8 +51,12 @@ class Toolbar extends Component {
 
         return (
             <div className={styles.toolbar}>
-                {Icon.PocketLogo({ width: '18px', height: '18px' })}
-                {this.statusText}
+                {Icon.PocketLogo({
+                    width: '22px',
+                    height: '22px',
+                    marginRight: '8px'
+                })}
+                <span className={styles.statusText}>{this.statusText}</span>
 
                 {status === 'error' && <ToolbarError />}
 

diff --git a/src/containers/save/toolbar/toolbar.scss b/src/containers/save/toolbar/toolbar.scss
@@ -12,15 +12,20 @@
     color: $pitch;
     font-family: $fontstack-default;
     font-size: 16px;
-    font-weight: 300;
-    letter-spacing: 1.05;
-    line-height: 1.25;
-    padding: 5px 10px;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 8px 10px;
     position: relative;
     text-align: left;
     z-index: 100;
 }
 
+.statusText {
+    display: inline-block;
+    font-weight: 600;
+    padding: 3px 0;
+}
+
 .error {
     background-color: $snow;
     border-radius: 4px;

diff --git a/src/manifest.yml b/src/manifest.yml
@@ -1,5 +1,5 @@
 name: 'Save to Pocket'
-version: 3.0.0.5
+version: 3.0.0.8
 options_page: options.html
 description: __MSG_extDescriptionGoogleChrome__
 default_locale: "en"