cleanup (color): consistent theme

client/components/breadcrumb.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom'
-import { theme } from '../utilities/theme';
+import { theme, to_rgba } from '../utilities/theme';
 import { NgIf, Icon } from '../utilities/';
 import { EventEmitter, EventReceiver } from '../data';
 
@@ -138,8 +138,8 @@ export class PathElementWrapper extends React.Component {
             fontWeight: this.props.isLast ? '100': ''
         };
         if(this.props.highlight === true){
-            style.background = 'rgba(209, 255, 255,0.5)';
-            style.border = '2px solid #38a6a6';
+            style.background = to_rgba(theme.colors.primary, 0.5);
+            style.border = '2px solid '+theme.colors.primary;
             style.borderRadius = '2px';
             style.padding = '3px 20px';
         }

client/pages/connectpage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Card, NgIf, Input, Button, Textarea, Loader, Notification, encrypt, decrypt } from '../utilities';
+import { Container, Card, NgIf, Input, Button, Textarea, Loader, Notification, encrypt, decrypt, theme } from '../utilities';
 import { Session, invalidate, password } from '../data';
 import { Uploader } from '../utilities';
 
@@ -191,7 +191,7 @@ export class ConnectPage extends React.Component {
             top: {minWidth: '80px', borderTopLeftRadius: 0, borderTopRightRadius: 0, padding: '8px 5px'}
         }
         return (
-            <div style={{background: '#f89e6b'}}>
+            <div style={{background: theme.colors.primary}}>
             <ForkMe repo="https://github.com/mickael-kerjean/nuage" />  
             <Container maxWidth="565px">
               <NgIf cond={this.state.loading === true}>

client/pages/filespage/existingthing.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card, NgIf, Icon, pathBuilder } from '../../utilities';
+import { Card, NgIf, Icon, pathBuilder, theme, to_rgba } from '../../utilities';
 import { EventEmitter } from '../../data';
 import { DragSource, DropTarget } from 'react-dnd';
 
@@ -152,8 +152,8 @@ export class ExistingThing extends React.Component {
         let dragStyle = {whiteSpace: 'nowrap'};
         if(this.props.isDragging) { dragStyle.opacity = 0.15; }
         if((this.props.fileIsOver && this.props.canDropFile) || (this.props.nativeFileIsOver && this.props.canDropNativeFile)) {
-            dragStyle.background = 'rgba(209, 255, 255,0.5)';
-            dragStyle.border = '2px solid #38a6a6';
+            dragStyle.background = to_rgba(theme.colors.primary, 0.5);
+            dragStyle.border = '2px solid '+theme.colors.primary;
         }
 
         return connectDragSource(connectDropNativeFile(connectDropFile(

client/pages/filespage/filezone.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DropTarget } from 'react-dnd';
 import { EventEmitter }  from '../../data';
+import { theme, to_rgba } from '../../utilities';
 
 
 @EventEmitter
@@ -30,11 +31,13 @@ export class FileZone extends React.Component{
             border: '2px dashed',
             padding: '25px 0',
             marginBottom: '10px',
-            textAlign: 'center'
+            textAlign: 'center',
+            fontWeight: 'bold'
         }
         if(this.props.fileIsOver){
-            style.background = 'rgba(209, 255, 255,0.5)';
-            style.border = '2px dashed #38a6a6';
+            style.background = to_rgba(theme.colors.primary, 0.5);
+            style.border = '2px dashed '+theme.colors.primary;
+            style.color = 'white'
         }
         return this.props.connectDropFile(
             <div style={style}>

client/utilities/index.js

@@ -13,6 +13,6 @@ export { Fab } from './fab';
 export { Icon } from './icon';
 export { Notification } from './notification';
 export { Uploader } from './uploader';
-export { theme }  from './theme';
+export { theme, to_rgba }  from './theme';
 export { encrypt, decrypt } from './crypto'
 export { pathBuilder } from './path';

client/utilities/theme.js

@@ -1,6 +1,6 @@
 export const theme = {
     colors: {
-        primary: '#f89e6b',
+        primary: '#9AD1ED',
         secondary: '#466372',
         emphasis: '#375160',
         error: '#ff0000',
@@ -16,3 +16,14 @@ export const theme = {
         shadow_large: 'rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px'
     }
 }
+
+
+
+export const to_rgba = function(color, alpha){
+    const bigint = parseInt(color.replace(/^\#/, ''), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+
+    return "rgba("+r+","+g+","+b+","+alpha+")";
+}