Merge pull request #262 from codaco/feature/color-code-thumbnails

protocol thumbnail color based on schema

src/renderer/components/ProtocolThumbnail.js

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
 import { NavLink } from 'react-router-dom';
+import cx from 'classnames';
+import { replace } from 'lodash';
 
 import Types from '../types';
 
@@ -11,11 +13,27 @@ class ProtocolThumbnail extends PureComponent {
     this.state = { hover: false };
   }
 
+  getSchemaColorIndex = (version) => {
+    const parsedVersion = parseInt(replace(version, /\./g, ''), 10);
+    if (isNaN(parsedVersion)) {
+      return 0;
+    }
+    return (parsedVersion % 9) + 1;
+  }
+
   render() {
     const { protocol } = this.props;
+    const schemaColorIndex = this.getSchemaColorIndex(protocol.schemaVersion);
+    const protocolColorClasses = cx(
+      'protocol-thumbnail',
+      {
+        [`protocol-thumbnail__schema-color-seq-${schemaColorIndex}`]: schemaColorIndex,
+      },
+    );
+
     return (
       <NavLink
-        className="protocol-thumbnail"
+        className={protocolColorClasses}
         activeClassName="protocol-thumbnail--active"
         to={`/workspaces/${protocol.id}`}
       >

src/renderer/components/__tests__/ProtocolThumbnail-test.js

@@ -8,7 +8,7 @@ describe('<ProtocolThumbnail />', () => {
   let mockProtocol;
   let wrapper;
   beforeEach(() => {
-    mockProtocol = { id: '1', name: 'MyProtocol', createdAt: new Date(), version: '2.0' };
+    mockProtocol = { id: '1', name: 'MyProtocol', createdAt: new Date(), schemaVersion: '2.0' };
     wrapper = shallow(<ProtocolThumbnail protocol={mockProtocol} />);
   });
 
@@ -25,4 +25,14 @@ describe('<ProtocolThumbnail />', () => {
     expect(navText).toMatch(new RegExp(`^${mockProtocol.name.substring(0, 1)}`));
     expect(navText).toHaveLength(2);
   });
+
+  it('uses color classes based on schema', () => {
+    expect(wrapper.find('NavLink').prop('className')).toMatch('protocol-thumbnail protocol-thumbnail__schema-color-seq-3');
+  });
+
+  it('uses different color classes', () => {
+    mockProtocol = { id: '1', name: 'MyProtocol', createdAt: new Date(), schemaVersion: '3.0' };
+    wrapper = shallow(<ProtocolThumbnail protocol={mockProtocol} />);
+    expect(wrapper.find('NavLink').prop('className')).toMatch('protocol-thumbnail protocol-thumbnail__schema-color-seq-4');
+  });
 });

src/renderer/styles/components/_protocol-thumbnail.scss

@@ -1,13 +1,21 @@
 .protocol-thumbnail {
-  $protocol-border-highlight: rgba(255, 255, 255, 0.15);
+  $protocol-border-selected: rgba(255, 255, 255, 0.5);
+  $protocol-border-highlight: rgba(255, 255, 255, 0.2);
   $protocol-border-transparent: rgba(255, 255, 255, 0);
 
+  --border-selected: #{$protocol-border-selected};
   --border-highlight: #{$protocol-border-highlight};
   --border-transparent: #{$protocol-border-transparent};
   --border-width: 6px;
   --thumbnail-size: calc(var(--app-sidebar-width) * 0.6);
 
   background-color: var(--color-cyber-grape);
+  @for $i from 1 through 9 {
+    &.protocol-thumbnail__schema-color-seq-#{$i} {
+      background-color: var(--schema-color-seq-#{$i});
+    }
+  }
+
   border: var(--border-width) solid var(--border-transparent);
   border-radius: 0.75rem;
   color: var(--color-white);
@@ -26,7 +34,7 @@
   width: var(--thumbnail-size);
 
   @include modifier(active) {
-    background-color: var(--color-sea-green);
+    border-color: var(--border-selected);
   }
 
   @include modifier(add) {
@@ -39,7 +47,7 @@
     }
   }
 
-  &:hover {
+  &:hover:not(.protocol-thumbnail--active) {
     border-color: var(--border-highlight);
   }
 }