From 05963ad163b067fcf65d6e237968891090c778a2 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 10 Sep 2018 12:02:11 -0700
Subject: [PATCH] SHIBUI-811 Added documentation for changing theme

---
 ui/README.md               | 60 ++++++++++++++++++++++++++++++++++++++
 ui/src/brand.scss          | 13 +++++++++
 ui/src/theme/_palette.scss | 26 ++++++++++++-----
 3 files changed, 91 insertions(+), 8 deletions(-)

diff --git a/ui/README.md b/ui/README.md
index a24915b12..172506219 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -30,6 +30,66 @@ For Providers and Filters, the forms in SHIB-UI are built based on the standard
 
 [Bootstrap](http://getbootstrap.com/) 4 is used for the css framework in SHIB-UI, and provides our base theme, a responsive grid system, consistent styling across all major browsers, and pre-styled components which are connected to Angular using ng-bootstrap, a 3rd party framework.
 
+# Customizing UI
+
+Within the `ui > src` folder, there are two files which can be used to customize the user interface quickly.
+
+### Color Scheme
+The `Brand.scss` contains the palette information used by bootstrap to color the user interface buttons and other components. Uncomment the color you wish to override and change the hex value accordingly and rebuild the user interface.
+
+For example:
+
+`// $blue: #00355f;`
+
+change to...
+
+`$blue: #0000FF;`
+
+If you wish to change the __"primary"__ color or any other mapping according to Bootstrap's conventions, there is a block of mappings at the bottom of the `Brand.scss` file to accomodate this as well. Uncomment and change the value allocated to the corresponding aspect of the theme you wish to change.
+
+The supported values are:
+
+`$brand-primary: $blue;` - The primary color used throughout the site. Default: dark blue.
+
+`$brand-secondary: $gray-700;` - An accept color used throughout the site. Default: dark gray.
+
+`$brand-success: $green;` - Indicates success or some other positive action. Default: green.
+
+`$brand-info: $light-blue;` - Indicates some sort of informative text or action for the user. Default: light blue.
+
+`$brand-warning: $yellow;` - Indicates a warning to the user. Default: yellow.
+
+`$brand-danger: $red;` - Indicates a dangerous action or error. Default: red.
+
+`$brand-light: $light-grey;` - Color used for accents, text, etc throughout application. Default: light grey.
+
+`$brand-dark: $dark-grey;` - Color used for accents, text, etc throughout application. Default: dark grey.
+
+### Logos / Footer
+The `Brand.ts` contains the links, text, and image paths to modify the logos, text, and links found within the header and footer. Override the values within this Typescript file and rebuild the user interface to view changes.
+
+For example:
+
+`export const brand = {};`
+
+change to...
+
+`export const brand = {
+    header: 'Metadata Management'
+};`
+
+### Sitewide text
+Finally, this project has support for internationalization (i18n). In the folder `backend > src > main > resources > i18n` folder there is a group of files which can be used to modify the text seen throughout the application. In order to change the default value, you can override the text in the messages_en file with the desired text.
+
+For example:
+
+`action.logout=Logout`
+
+change to...
+
+`action.logout=Sign Out`
+
+
 # Development
 
 ## Scaffolding
diff --git a/ui/src/brand.scss b/ui/src/brand.scss
index 874fb4337..d94e75b5c 100644
--- a/ui/src/brand.scss
+++ b/ui/src/brand.scss
@@ -29,3 +29,16 @@
 
 // $dark-grey: #666666;
 // $light-grey: #EEEEEE;
+
+/*
+*** Brand definitions
+*/
+
+// $brand-primary: $blue;
+$brand-secondary: $gray-700;
+$brand-success: $green;
+$brand-info: $light-blue;
+$brand-warning: $yellow;
+$brand-danger: $red;
+$brand-light: $light-grey;
+$brand-dark: $dark-grey;
diff --git a/ui/src/theme/_palette.scss b/ui/src/theme/_palette.scss
index 640b15603..b0ecdfba8 100644
--- a/ui/src/theme/_palette.scss
+++ b/ui/src/theme/_palette.scss
@@ -29,6 +29,16 @@ $cyan:    #17a2b8;
 $dark-grey: #666666;
 $light-grey: #EEEEEE;
 
+
+$brand-primary: $blue;
+$brand-secondary: $gray-700;
+$brand-success: $green;
+$brand-info: $light-blue;
+$brand-warning: $yellow;
+$brand-danger: $red;
+$brand-light: $light-grey;
+$brand-dark: $dark-grey;
+
 @import "../brand";
 
 $grays: (
@@ -60,14 +70,14 @@ $colors: (
 );
 
 $theme-colors: (
-  primary: $blue,
-  secondary: $gray-700,
-  success: $green,
-  info: $light-blue,
-  warning: $yellow,
-  danger: $red,
-  light: $light-grey,
-  dark: $dark-grey
+  primary: $brand-primary,
+  secondary: $brand-secondary,
+  success: $brand-success,
+  info: $brand-info,
+  warning: $brand-warning,
+  danger: $brand-danger,
+  light: $brand-light,
+  dark: $brand-dark
 );
 
 // Set a specific jump point for requesting color jumps