From 9b1031d0099297373098b7bb529baba4e78c2ed8 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Tue, 15 Mar 2022 16:15:08 +0530
Subject: [PATCH] Added 3 digit hex compatibility for Custom Brand colors
 (#2152)

* Added 3 digit hex compatibility

* fix for compatibility
---
 apps/web/components/CustomBranding.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/apps/web/components/CustomBranding.tsx b/apps/web/components/CustomBranding.tsx
index 63cd2ad9..66377f8f 100644
--- a/apps/web/components/CustomBranding.tsx
+++ b/apps/web/components/CustomBranding.tsx
@@ -175,6 +175,22 @@ function hexToRGB(hex: string) {
   return [parseInt(color.slice(0, 2), 16), parseInt(color.slice(2, 4), 16), parseInt(color.slice(4, 6), 16)];
 }
 
+function normalizeHexCode(hex: string | null, dark: boolean) {
+  if (!hex) {
+    return !dark ? brandColor : darkBrandColor;
+  }
+  hex = hex.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map(function (hex) {
+        return hex + hex;
+      })
+      .join("");
+  }
+  return hex;
+}
+
 function getContrastingTextColor(bgColor: string | null, dark: boolean): string {
   bgColor = bgColor == "" || bgColor == null ? (dark ? darkBrandColor : brandColor) : bgColor;
   const rgb = hexToRGB(bgColor);
@@ -204,6 +220,9 @@ const BrandColor = ({
   lightVal: string | undefined | null;
   darkVal: string | undefined | null;
 }) => {
+  // convert to 6 digit equivalent if 3 digit code is entered
+  lightVal = normalizeHexCode(lightVal, false);
+  darkVal = normalizeHexCode(darkVal, true);
   // ensure acceptable hex-code
   lightVal = isValidHexCode(lightVal)
     ? lightVal?.indexOf("#") === 0