[rewrite branch] Change the unsynced notes icon to a less-scary one (#…

…2218)

This changes the icon when a note has unsynced changes to the cloud sync icon.

Also changes it to blue and changes both this and the pin to simplenote-blue-20 in dark mode.

lib/icons/cloud-sync.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function CloudSyncIcon() {
+  return (
+    <svg
+      className="icon-cloud-sync"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <rect x="0" fill="none" width="24" height="24" />
+      <g>
+        <path d="M16.69,21.5l0-3.6-3.6,0,1,1a2.23,2.23,0,0,1-3.53-.73L8.67,19a4.25,4.25,0,0,0,6.81,1.35Z" />
+        <path d="M12.55,12.29A4.23,4.23,0,0,0,9.13,14l-1-1,0,3.6,3.6,0-1.11-1.1a2.18,2.18,0,0,1,1.94-1.18,2.21,2.21,0,0,1,2.1,1.45l1.88-.67A4.22,4.22,0,0,0,12.55,12.29Z" />
+        <path d="M17.81,16.75v-2a2.34,2.34,0,0,0,.38,0,2.73,2.73,0,0,0-.38-5.43H16l0-1a3.85,3.85,0,0,0-7.59-.85l-.18.77H6.72a3.26,3.26,0,0,0-.65,6.45,2.94,2.94,0,0,0,.65.07v2a5.35,5.35,0,0,1-1-.11,5.26,5.26,0,0,1,1-10.41A5.84,5.84,0,0,1,12.11,2.5a5.92,5.92,0,0,1,5.75,4.79,4.73,4.73,0,0,1,.62,9.41A4.91,4.91,0,0,1,17.81,16.75Z" />
+      </g>
+    </svg>
+  );
+}

lib/note-list/note-cell.tsx

@@ -2,7 +2,7 @@ import React, { Component, CSSProperties } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 
-import AttentionIcon from '../icons/attention';
+import CloudSyncIcon from '../icons/cloud-sync';
 import PublishIcon from '../icons/feed';
 import PinnedIcon from '../icons/pinned';
 import { decorateWith, makeFilterDecorator } from './decorators';
@@ -107,7 +107,7 @@ export class NoteCell extends Component<Props> {
             <PinnedIcon />
           </div>
           <div className="note-list-item-pending-changes">
-            {hasPendingChanges && <AttentionIcon />}
+            {hasPendingChanges && <CloudSyncIcon />}
           </div>
         </div>
 

lib/note-list/style.scss

@@ -93,16 +93,13 @@
     color: transparent;
   }
 
-  .note-list-item-pinner:hover {
-    color: $studio-simplenote-blue-50;
-  }
-
-  .note-list-item-pinner.note-list-item-pinned {
+  .note-list-item-pinner:hover,
+  .note-list-item-pinner.note-list-item-pinned,
+  .note-list-item-pending-changes {
     color: $studio-simplenote-blue-50;
   }
 
   .note-list-item-pending-changes {
-    color: $studio-orange-30;
     margin-top: 10px;
   }
 

scss/theme.scss

@@ -202,6 +202,12 @@
     }
   }
 
+  .note-list-item-pinner:hover,
+  .note-list-item-pinner.note-list-item-pinned,
+  .note-list-item-pending-changes {
+    color: $studio-simplenote-blue-20;
+  }
+
   .note-detail-markdown {
     @import '../node_modules/highlight.js/scss/solarized-dark.scss';