Customise colors

Dockerfile

@@ -18,13 +18,13 @@ FROM base AS builder
 WORKDIR /app/orchestrator-core-gui
 RUN yarn --network-concurrency 1 --frozen-lockfile
 RUN rm -rf src/custom
+
+# Apply GÉANT customisations
 COPY custom src/custom
 COPY logo.svg src/images/logo.svg
-COPY css/colors.ts src/stylesheets/emotion/colors.ts
-COPY css/dark.css public/dark.css
-COPY css/light.css public/light.css
-COPY css/eui_theme_light.css public/eui_theme_light.css
-COPY css/eui_theme_dark.css public/eui_theme_dark.css
+COPY favicon.ico public/favicon.ico
+COPY colors.ts src/stylesheets/emotion/colors.ts
+
 RUN yarn build
 
 ########################

css/colors.ts → colors.ts

@@ -5,36 +5,36 @@ export const DARK_ROW_BORDER_COLOR = "#555555";
 export const LIGHT_ROW_BORDER_COLOR = "#cccccc";
 export const DARK_BACKGROUND_COLOR = "#1D1E24";
 export const LIGHT_BACKGROUND_COLOR = "#f6f6f6";
-export const DARK_SELECTED_FONT_COLOR = "#0799fc";
-export const LIGHT_SELECTED_FONT_COLOR = "#0077CCFF";
+export const DARK_SELECTED_FONT_COLOR = "#81a0af";
+export const LIGHT_SELECTED_FONT_COLOR = "#4d798f";
 
 /* Copy of EUI colors */
-export const PRIMARY_COLOR = "#106C96";
-export const ACCENT = "#274b72";
-export const SUCCESS = "#00bfb3";
-export const WARNING = "#fec514";
+export const PRIMARY_COLOR = "#ed1556";
+export const ACCENT = "#003f5f";
+export const SUCCESS = "#3aca38";
+export const WARNING = "#e39846";
 export const DANGER = "#bd271e";
 
 /* Todo: sort remaining colors and investigate if we need them all (we could use `shadeColor()`) */
 export const LIGHTEST_SUCCESS = "#e5ffed";
-export const LIGHT_PRIMARY_COLOR = "#cbe7fb";
-export const LIGHTEST_PRIMARY_COLOR = "#fcfdff";
-export const DARKEST_PRIMARY_COLOR = "#08314bff";
-export const LIGHTER_PRIMARY = "#a8d9e6";
-export const LIGHT_DANGER = "#ffcdc6";
-export const LIGHTEST_DANGER = "#ffddd6";
-export const DARK_SUCCESS_COLOR = "#034b43";
+export const LIGHT_PRIMARY_COLOR = "#ed1556";
+export const LIGHTEST_PRIMARY_COLOR = "#b2c6cf";
+export const DARKEST_PRIMARY_COLOR = "#003f5f";
+export const LIGHTER_PRIMARY = "#4d798f";
+export const LIGHT_DANGER = "#d85ea3";
+export const LIGHTEST_DANGER = "#e38bba";
+export const DARK_SUCCESS_COLOR = "#025d00";
 export const LIGHT_SUCCESS_COLOR = "#d0ffd9";
-export const DARKER_PRIMARY = "#106C96";
+export const DARKER_PRIMARY = "#002f47";
 export const GOLD = "#d4af37";
 export const DARK_GOLD_COLOR = "#524217";
-export const LIGHT_WARNING = "#ffe4ab";
+export const LIGHT_WARNING = "#ea7e66";
 export const LIGHT_GOLD_COLOR = "#fdf6d4";
 export const BACKGROUND_COLOR = "#f9f9f9";
 export const LIGHTEST_GOLD = "#fdfde3";
-export const MEDIUM_GREY_COLOR = "#a6b6be";
+export const MEDIUM_GREY_COLOR = "#a7b3b4";
 export const DARK_GREY_COLOR = "#565656";
 export const DARKEST_GREY = "#414141";
-export const LIGHT_GREY_COLOR = "#eff2f3";
-export const LIGHTER_GREY_COLOR = "#d9d9d8";
-export const LIGHTEST_GREY = "#fbfbfb";
+export const LIGHT_GREY_COLOR = "#c1cac9";
+export const LIGHTER_GREY_COLOR = "#d4dada";
+export const LIGHTEST_GREY = "#e5e8e8";

css/dark.css

-body {
-    font-family: "Roboto", Sans-serif;
-    font-size: 15px;
-    line-height: 18px;
-    -webkit-font-smoothing: antialiased;
-    color: #e83765;
-    background-color: #1D1E24;
-}
-
-a {
-    cursor: pointer;
-    color: #33abff;
-    font-weight: bold;
-}
-
-.euiLink--primary {
-    color: #33abff;
-    font-weight: bold;
-}

css/light.css

-body {
-    font-family: "Roboto", Sans-serif;
-    font-size: 15px;
-    line-height: 18px;
-    -webkit-font-smoothing: antialiased;
-    color: #e83765;
-    background-color: #ffffff;
-}
-.euiLink--primary {
-    color: #33abff;
-    font-weight: bold;
-}