fix: app crashing due to invalid hex (#11542)

packages/lib/getBrandColours.tsx

@@ -31,6 +31,15 @@ export function isValidHexCode(hexColor: string): boolean {
   return isHexColor;
 }
 
+// credit : https://github.com/validatorjs/validator.js/blob/master/src/lib/isHexColor.js
+const getValidHEX = (hex: string, defaultHex: string): string => {
+  const hexColor = /^#?([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(hex.replace("##", "#"));
+  if (hexColor) {
+    return hex;
+  }
+  return defaultHex;
+};
+
 function hexToRgb(hex: string): Rgb {
   const sanitizedHex = hex.replace("##", "#");
   const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
@@ -174,8 +183,8 @@ const useGetBrandingColours = ({
 
   darkVal = normalizeHexCode(darkVal, true);
 
-  const lightColourMap = createColorMap(lightVal);
-  const darkColourMap = createColorMap(darkVal);
+  const lightColourMap = createColorMap(getValidHEX(lightVal, BRAND_COLOR));
+  const darkColourMap = createColorMap(getValidHEX(darkVal, DARK_BRAND_COLOR));
 
   const theme = {
     light: {