refactor(colors): add news colors

ph1p · May 23, 2020 · 2cee787 · 2cee787
1 parent bb14fdf
commit 2cee787
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from 'react';
 import TimeAgo from 'react-timeago';
 import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';
 import nowStrings from 'react-timeago/lib/language-strings/en';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { colors } from '../shared/constants';
 import { sendMainMessage } from '../shared/utils';
 
@@ -56,9 +56,7 @@ const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
                 sendMainMessage('focus-nodes', selectionData);
               }}
             >
-              {data.message.text && (
-                <div>{data.message.text}</div>
-              )}
+              {data.message.text && <div>{data.message.text}</div>}
               <button className="selection button button--secondary">
                 {pageName ? pageName + ' - ' : ''}
                 focus {selectionCount} element
@@ -156,7 +154,21 @@ const MessageContainer = styled.div`
     }
   }
 
-  &.lightblue header {
+  ${Object.keys(colors).map(
+    (color) => css`
+      &.${colors[color]} {
+        color: #fff;
+        background-color: ${color};
+        header {
+          color: #fff;
+        }
+        .selection {
+          border-color: #fff;
+          color: #fff;
+        }
+      }
+    `
+  )}/* &.lightblue header {
     color: #1c4856;
   }
   &.lightblue .selection {
@@ -249,7 +261,7 @@ const MessageContainer = styled.div`
   &.pink {
     background-color: #f47e9a;
     color: #ffffff;
-  }
+  } */
 `;
 
 export default Message;
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -3,13 +3,13 @@ export const DEFAULT_SERVER_URL = 'https://figma-chat.ph1p.dev/';
 export const MAX_MESSAGES = 10;
 export const colors = {
   '#4F4F4F': 'gray',
-  '#18A0FB': 'blue',
-  '#56CCF2': 'lightblue',
-  '#5751FF': 'purple',
+  '#493AC6': 'blue',
+  '#00B5CE': 'lightblue',
+  '#907CFF': 'purple',
   '#1BC47D': 'green',
-  '#6fcf97': 'lightgreen',
-  '#F24822': 'red',
-  '#F2994A': 'orange',
-  '#E7B889': 'beige',
-  '#F47E9A': 'pink'
+  '#FFC8B9': 'skintone',
+  '#EF596F': 'red',
+  '#F0C75F': 'yellow',
+  '#F3846B': 'orange',
+  '#87BBB7': 'forest'
 };