Add more custom branding

6 files changed, 11 insertions, 10 deletions

diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 0f02fa3c8..53f810f00 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -11,7 +11,7 @@ export interface IStyleTypes {
   };
 }
 
-export const brandPrimary = '#3498db';
+export const brandPrimary = '#7367F0';
 export const brandSuccess = '#5cb85c';
 export const brandInfo = '#5bc0de';
 export const brandWarning = '#FF9F00';
diff --git a/packages/theme/src/themes/legacy/index.ts b/packages/theme/src/themes/legacy/index.ts
index 2114b92c1..5a2d56a84 100644
--- a/packages/theme/src/themes/legacy/index.ts
+++ b/packages/theme/src/themes/legacy/index.ts
@@ -1,13 +1,13 @@
 /* legacy config, injected into sass */
-export const themeBrandPrimary = '#3498db';
+export const themeBrandPrimary = '#7367F0';
 export const themeBrandSuccess = '#5cb85c';
 export const themeBrandInfo = '#5bc0de';
 export const themeBrandWarning = '#FF9F00';
 export const themeBrandDanger = '#d9534f';
 
-export const themeGrayDark = '#373a3c';
-export const themeGray = '#55595c';
-export const themeGrayLight = '#818a91';
+export const themeGrayDark = '#7367F0';
+export const themeGray = '#7367F0';
+export const themeGrayLight = '#CE9FFC';
 export const themeGrayLighter = '#eceeef';
 export const themeGrayLightest = '#f7f7f9';
 
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index ffc7f7051..e2d7cea83 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -69,7 +69,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#373a3c'}
+          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index 64d24e4ce..d516781a8 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,6 +4,7 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
+    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index f73296bb6..de8769b6c 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -16,7 +16,7 @@ export default class LoaderComponent extends Component {
     children: null,
     loaded: false,
     className: '',
-    color: '#373a3c',
+    color: '#7367F0',
   };
 
   render() {
diff --git a/src/theme/default/legacy.js b/src/theme/default/legacy.js
index 46847c60b..44496948d 100644
--- a/src/theme/default/legacy.js
+++ b/src/theme/default/legacy.js
@@ -5,9 +5,9 @@ export const themeBrandInfo = '#5bc0de';
 export const themeBrandWarning = '#FF9F00';
 export const themeBrandDanger = '#d9534f';
 
-export const themeGrayDark = '#373a3c';
-export const themeGray = '#55595c';
-export const themeGrayLight = '#818a91';
+export const themeGrayDark = '#7367F0';
+export const themeGray = '#7367F0';
+export const themeGrayLight = '#CE9FFC';
 export const themeGrayLighter = '#eceeef';
 export const themeGrayLightest = '#f7f7f9';