Import and use color constants from colors module

2 files changed, 9 insertions, 7 deletions

diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index edc236b13a..1da3fd77c8 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, Component, Styles, Text, Types, View } from 'reactxp';
+import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import ImageView from './ImageView';
 
@@ -36,16 +37,16 @@ const headerBarStyles = {
   }),
   barStyle: {
     default: Styles.createViewStyle({
-      backgroundColor: 'rgb(41, 77, 115)', // colors.blue
+      backgroundColor: colors.blue,
     }),
     defaultDark: Styles.createViewStyle({
-      backgroundColor: 'rgb(25, 46, 69)', // colors.darkBlue
+      backgroundColor: colors.darkBlue,
     }),
     error: Styles.createViewStyle({
-      backgroundColor: 'rgb(227, 64, 57)', // colors.red
+      backgroundColor: colors.red,
     }),
     success: Styles.createViewStyle({
-      backgroundColor: 'rgb(68, 173, 77)', // colors.green
+      backgroundColor: colors.green,
     }),
   },
 };
@@ -83,7 +84,7 @@ const brandStyles = {
     fontWeight: '900',
     lineHeight: 30,
     letterSpacing: -0.5,
-    color: 'rgba(255, 255, 255, 0.8)', // colors.white80
+    color: colors.white80,
     marginLeft: 8,
   }),
 };
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index d7af1f9023..57be8653c4 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Component, Styles, Text, Types, View } from 'reactxp';
+import { colors } from '../../config.json';
 
 const styles = {
   header: {
@@ -16,7 +17,7 @@ const styles = {
     fontSize: 32,
     fontWeight: '900',
     lineHeight: 36,
-    color: 'rgb(255, 255, 255)',
+    color: colors.white,
   }),
   subtitle: Styles.createTextStyle({
     marginTop: 8,
@@ -24,7 +25,7 @@ const styles = {
     fontSize: 13,
     fontWeight: '600',
     overflow: 'visible',
-    color: 'rgba(255, 255, 255, 0.8)', // colors.white80
+    color: colors.white80,
     lineHeight: 20,
     letterSpacing: -0.2,
   }),