added logic to change text color and hex validator

Author: ataymo1

src/APIFunctions/Profile.js

@@ -16,3 +16,24 @@ export function formatFirstAndLastName(user) {
     user.lastName.slice(1, user.lastName.length)
   );
 }
+
+export function isValidHexColor(backgroundColor) {
+  const hexAlphaRegex = /^#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+  return hexAlphaRegex.test(backgroundColor);
+}
+
+export function selectCorrectColor(backgroundColor) {
+  let color = (backgroundColor.charAt(0) === '#') ? backgroundColor.substring(1, 7) : backgroundColor;
+  let r = parseInt(color.substring(0, 2), 16); // hexToR
+  let g = parseInt(color.substring(2, 4), 16); // hexToG
+  let b = parseInt(color.substring(4, 6), 16); // hexToB
+  let uicolors = [r / 255, g / 255, b / 255];
+  let c = uicolors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+  let isDark = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]) <= 0.179;
+  return isDark ? '#FFFFFF' : '#000000';
+}

src/Components/Navbar/UserNavbar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isValidHexColor, selectCorrectColor } from '../../APIFunctions/Profile';
 import { membershipState } from '../../Enums';
 
 export default function UserNavBar(props) {
@@ -7,11 +8,11 @@ export default function UserNavBar(props) {
     initials = props.user.firstName[0] + props.user.lastName[0];
   }
 
-  let color = '';
-  if(props.user.backgroundColor) {
-    color = props.user.backgroundColor;
+  let iconColor = '';
+  if(isValidHexColor(props.user.backgroundColor)) {
+    iconColor = props.user.backgroundColor;
   } else {
-    color = '#15191e';
+    iconColor = '#15191e';
   }
 
   const unauthedRoutes = [
@@ -93,8 +94,8 @@ export default function UserNavBar(props) {
 
             <div className="dropdown dropdown-bottom dropdown-end">
               <summary tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar placeholder">
-                <div className="w-12 rounded-full bg-neutral text-neutral-content" style={{backgroundColor: color}}>
-                  <span>{initials}</span>
+                <div className="w-12 rounded-full bg-neutral text-neutral-content" style={{backgroundColor: iconColor }}>
+                  <span style={{color: selectCorrectColor(iconColor)}}>{initials}</span>
                 </div>
               </summary>
               <div className='p-2 shadow menu dropdown-content z-[1] bg-base-100 w-52'>

src/Pages/UserManager/EditUserInfo.js

@@ -62,7 +62,7 @@ export default function EditUserInfo(props) {
           new Date(result.responseData.membershipValidUntil)
         );
         setDiscordId(result.responseData.discordID);
-        setBackgroundColor(result.responseData.backgroundColor || '#15191e');
+        setBackgroundColor(result.responseData.backgroundColor);
         setEmail(result.responseData.email);
       }
       setLoading(false);