- Add JSDoc and use css varialble for pixels

Client/src/Components/Inputs/Field/index.css

@@ -1,13 +1,13 @@
 .field {
-	min-width: 250px;
+	min-width: var(--env-var-width-3);
 }
 
 .field-infrastructure-alert {
-	max-width: 100px;
+	max-width: var(--env-var-width-4);
 }
 
 .field-infrastructure-alert .MuiInputBase-root:has(input) {
-	height: 34px;
+	height: var(--env-var-height-2);
 }
 
 .field h3.MuiTypography-root,
@@ -23,7 +23,7 @@
 	padding-right: var(--env-var-spacing-1-minus);
 }
 .field .MuiInputBase-root:has(input) {
-	height: 34px;
+	height: var(--env-var-height-2);
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
 	padding-right: var(--env-var-spacing-1-minus);

Client/src/Utils/stringUtils.js

@@ -1,3 +1,8 @@
+/**
+ * Helper function to get first letter capitalized string
+ * @param {string} str String whose first letter is to be capitalized
+ * @returns A string with first letter capitalized
+ */
 export const capitalizeFirstLetter = (str) =>{
-  return  str.charAt(0).toUpperCase() + str.slice(1);
+  return  str?.charAt(0).toUpperCase() + str.slice(1);
 }

Client/src/index.css

@@ -20,6 +20,8 @@ html {
 
 	--env-var-width-1: 100vw;
 	--env-var-width-2: 360px;
+	--env-var-width-3: 250px;
+	--env-var-width-4: 100px;
 
 	--env-var-height-1: 100vh;
 	--env-var-height-2: 34px;