cloudmr-ux 0.0.1

package/src/common/components/Cmr-components/double-slider/InvertibleDualSlider.tsx

@@ -0,0 +1,224 @@
+import {Box} from "@mui/material";
+import {useEffect, useRef, useState} from "react";
+
+/**
+ * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
+ * The rendered interval (and number control) can be masked by a transformation - inverse pair.
+ * @param name
+ * @param min
+ * @param max
+ * @param setMin
+ * @param setMax
+ * @param reverse
+ * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
+ * @constructor
+ */
+export const InvertibleDualSlider = ({name,min,max,setMin,setMax, reverse=false,
+                               transform=x=>x,inverse=x=>x,onFinalize}:
+                               {name:string,min:number,max:number, setMin?:(min:number)=>void,
+                                   setMax?:(max:number)=>void,reverse?:boolean,transform?:(x:number)=>number,
+                                   inverse?:(x:number)=>number,onFinalize?: ()=>void} )=>{
+    const [leftSliderPosition, setLeftSliderPosition] = useState(0); // Initial percentage for the left slider
+    const [rightSliderPosition, setRightSliderPosition] = useState(100); // Initial percentage for the right slider
+    useEffect(() => {//Initialize parent min/max values upon initialization
+        setMin&&setMin(min);
+        setMax&&setMax(max);
+        setLeftSliderPosition(0);
+        setRightSliderPosition(100);
+    }, [min,max]);
+    const [isHovering, setIsHovering] = useState(false);
+    const [leftEditing, setLeftEditing] = useState(false);
+
+    const [minOverride, setMinOverride] = useState<any>(undefined);
+    const [maxOverride, setMaxOverride] = useState<any>(undefined);
+
+    if(minOverride)
+        min = minOverride;
+    if(maxOverride)
+        max = maxOverride;
+
+    const a = transform((max-min)*leftSliderPosition/100+min);
+    const b = transform((max-min)*rightSliderPosition/100+min);
+    const left = Math.min(a,b);
+    const right = Math.max(a,b);
+
+    const sliderRef = useRef(null); // Ref for the parent box
+
+    const handleDragStart = (e:any, slider:string) => {
+        // Prevent default behavior
+        e.preventDefault();
+        setLeftEditing(false);
+        setLeftIsNaN(false)
+        leftRef.current.blur();
+
+        setRightEditing(false);
+        setRightIsNaN(false);
+        rightRef.current.blur();
+
+        // Calculate initial positions
+        const startX = e.clientX;
+        // @ts-ignore
+        const sliderWidth = sliderRef.current.offsetWidth;
+
+        const handleMouseMove = (e:any) => {
+            const moveX = e.clientX - startX;
+            const newPosition = ((moveX / sliderWidth) * 100) + (slider === 'left' ? leftSliderPosition : rightSliderPosition);
+
+
+            // Prevent the slider from going outside the parent box
+            const clampedPosition = Math.min(100, Math.max(0, newPosition));
+            // Update the position of the slider
+            if (slider === 'left') {
+                setLeftSliderPosition(clampedPosition);
+                const a = (max-min)*clampedPosition/100+min;
+                const b = (max-min)*rightSliderPosition/100+min;
+                setMin&&setMin(Math.min(a,b));
+                setMax&&setMax(Math.max(a,b));
+
+            } else if (slider === 'right') {
+                setRightSliderPosition(clampedPosition);
+                const a = (max-min)*leftSliderPosition/100+min;
+                const b = (max-min)*clampedPosition/100+min;
+                setMin&&setMin(Math.min(a,b));
+                setMax&&setMax(Math.max(a,b));
+            }
+
+        };
+
+        const handleMouseUp = () => {
+            // Remove event listeners once dragging is complete
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            onFinalize&&onFinalize();
+        };
+
+        // Add mouse move and mouse up listeners to document to handle drag
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const leftText = Math.abs(left)<0.01&&left!=0?Number(left).toExponential(3).toUpperCase():Number(left).toFixed(3);
+    const [leftEditedText,setLeftEditedText] = useState('');
+    const [leftIsNaN, setLeftIsNaN] = useState(false);
+    const leftRef = useRef<any>(null);
+
+    const [rightEditing, setRightEditing] = useState(false);
+    const [rightEditedText, setRightEditedText] = useState('');
+    const [rightIsNaN, setRightIsNaN] = useState(false);
+    const rightRef = useRef<any>(null);
+
+    // Logic to handle right value box editing...
+    const rightText = Math.abs(right) < 0.01 && right != 0 ? Number(right).toExponential(3).toUpperCase() : Number(right).toFixed(3);
+
+    return <Box sx={{display:'flex',flexDirection:'row', paddingLeft:'4px',paddingRight:'4px'}} height={27}>
+        {name!=''&&<Box fontSize={16} marginRight={'5pt'} color={'white'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
+                        fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
+            {name}
+        </Box>}
+        <Box sx={{display:'flex',flexDirection:'row'}} flex={1}>
+            <input ref={leftRef} style={{backgroundColor:'#ffffff',width:'45px', borderRadius:'2px', outline:"none",borderStyle:'none',paddingLeft:'3px',paddingRight:'3px', lineHeight:'20px',
+                whiteSpace:'nowrap',fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',fontSize:'11px',color:leftIsNaN?'red':'black'}} value={
+                (leftEditing)?leftEditedText:leftText
+            } onKeyDown={(e) => {
+                if (e.key === 'Enter'&&!leftIsNaN) {
+                    //@ts-ignore
+                    e.target.blur(); // This will cause the input to lose focus
+                }
+            }} onFocus={(e)=>{
+                setLeftEditedText(e.target.value);
+                setLeftEditing(true);
+            }} onChange={(event)=>{
+                setLeftIsNaN(isNaN(Number(event.target.value)));
+                setLeftEditedText(event.target.value);
+            }} onBlur={(e)=>{
+                    let val = inverse(Number(leftEditedText));
+                    if(isNaN(val)) {
+                        return e.preventDefault();
+                    }
+                    setLeftEditing(false);
+                    setMin&&setMin(val);
+                    let newMin = min;
+                    if(val<min) {
+                        setMinOverride(val);
+                        newMin = val;
+                    }
+                    let leftPosition = (val-newMin)/(max-newMin)*100;
+                    setLeftSliderPosition(leftPosition);
+                    onFinalize&&onFinalize();
+            }}/>
+
+            <Box sx={{ backgroundColor: '#ffffff', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
+                overflow:'hidden'
+            }} ref={sliderRef}
+                 onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+                {/* Central gray block with two vertical black components */}
+
+
+                {!reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
+                    height:'100%',position:'absolute',
+                    left:`calc(${Math.min(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
+                    right:`calc(${(100 - Math.max(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
+                    zIndex:1}}/>}
+                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
+                    height:'100%',position:'absolute',
+                    left:`calc(${Math.max(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
+                    right:`0`,
+                    zIndex:1}}/>}
+                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
+                    height:'100%',position:'absolute',
+                    left:`0`,
+                    right:`calc(${(100 - Math.min(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
+                    zIndex:1}}/>}
+                <Box sx={{ position: 'absolute', left: `calc(${leftSliderPosition*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
+                     onMouseDown={(e) => handleDragStart(e, 'left')}>
+                    {/* Visual representation of the slider */}
+                    <Box sx={{ position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' }} />
+                </Box>
+
+                {/* Transparent hitbox for the right slider */}
+                <Box sx={{ position: 'absolute', right: `calc(${(100 - rightSliderPosition)*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
+                     onMouseDown={(e) => handleDragStart(e, 'right')}>
+                    {/* Visual representation of the slider */}
+                    <Box sx={{ position: 'absolute', right: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' }} />
+                </Box>
+            </Box>
+
+            <input style={{backgroundColor: '#ffffff', width: '45px', borderRadius: '2px', outline: "none", borderStyle: 'none', paddingLeft: '3px', paddingRight: '3px', lineHeight: '20px',
+                whiteSpace: 'nowrap', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif', fontSize: '11px', color: rightIsNaN ? 'red' : 'black'}}
+                 value={(rightEditing) ? rightEditedText : rightText}
+                 ref={rightRef}
+                 onKeyDown={(e) => {
+                     if (e.key === 'Enter' && !rightIsNaN) {
+                         //@ts-ignore
+                         e.target.blur(); // This will cause the input to lose focus
+                     }
+                 }}
+                 onFocus={(e) => {
+                     setRightEditedText(e.target.value);
+                     setRightEditing(true);
+                 }}
+                 onChange={(event) => {
+                     setRightIsNaN(isNaN(Number(event.target.value)));
+                     setRightEditedText(event.target.value);
+                 }}
+                 onBlur={(e) => {
+                     let val = inverse(Number(rightEditedText));
+                     if (isNaN(val)) {
+                         return e.preventDefault();
+                     }
+                     setRightEditing(false);
+                     setMax && setMax(val);
+                     let newMax = max;
+                     if (val > max) {
+                         setMaxOverride(val);
+                         newMax = val;
+                     }
+                     let rightPosition = (val - min) / (newMax - min) * 100;
+                     setRightSliderPosition(rightPosition);
+                     onFinalize&&onFinalize();
+                 }}
+            />
+        </Box>
+    </Box>
+}

package/src/common/components/Cmr-components/dropdown/Dropdown.scss

@@ -0,0 +1,36 @@
+.select-box {
+  position: relative;
+  outline: none;
+}
+
+.select-box .ant-select {
+  color: #888080;
+  width: 205px;
+  background: #ffffff;
+  box-sizing: border-box;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-outline: none;
+  outline: none;
+}
+
+.select-box > .ant-select > .ant-select-selector {
+  border: 1px solid #e5e5e5;
+}
+
+.select-box
+> .ant-select
+> .ant-select-selector
+> .ant-select-selection-placeholder,
+.ant-select-selection-item {
+  font-size: 12px;
+  line-height: 30px;
+  color: #999999;
+  font-weight: normal;
+  letter-spacing: 0.1px;
+}
+
+.select-box > .ant-select > .ant-select-arrow {
+  top: 65%;
+}

package/src/common/components/Cmr-components/dropdown/Dropdown.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Select } from 'antd';
+import './DropDown.scss';
+
+const { Option } = Select;
+
+const CmrDropDown = (props: any) => {
+    const [DropdownCaret, setDropdownCaret] = useState(false);
+    const onCaretChange = () => {
+        setDropdownCaret(!DropdownCaret);
+    };
+
+    return (
+        <div className="select-box">
+            <Select
+                onFocus={onCaretChange}
+                onBlur={onCaretChange}
+                suffixIcon={
+                    <>
+                        <svg
+                            style={{ display: DropdownCaret ? 'none' : 'block' }}
+                            width="6"
+                            height="3"
+                            viewBox="0 0 6 3"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M5.79875 0H0.20125C0.0333594 0 -0.0603867 0.147179 0.0435863 0.247656L2.84234 2.94215C2.92245 3.01928 3.0767 3.01928 3.15766 2.94215L5.95641 0.247656C6.06039 0.147179 5.96664 0 5.79875 0Z"
+                                fill="#999999"
+                            />
+                        </svg>
+                        <svg
+                            style={{ display: DropdownCaret ? 'block' : 'none' }}
+                            width="6"
+                            height="3"
+                            viewBox="0 0 6 3"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M5.79875 3H0.20125C0.0333594 3 -0.0603867 2.85282 0.0435863 2.75234L2.84234 0.0578451C2.92245 -0.0192819 3.0767 -0.0192819 3.15766 0.0578451L5.95641 2.75234C6.06039 2.85282 5.96664 3 5.79875 3Z"
+                                fill="#999999"
+                            />
+                        </svg>
+                    </>
+                }
+                id=""
+                disabled={props.disabled}
+                className={props.className}
+                placeholder={props.placeholder}
+                value={props.value}
+                onChange={props.onChange}
+                dropdownClassName={props.dropdownClassName}
+                dropdownStyle={props.dropdownStyle}
+                defaultValue={props.defaultValue}
+                onSelect={props.onSelect}
+                showSearch={props.showSearch}
+                onSearch={props.onSearch}
+                dropdownAlign={{
+                    offset: [0, 0],
+                    overflow: {
+                        adjustY: 0,
+                    },
+                }}
+            >
+                {props.isOptionsObj
+                    ? props.options.map((obj: any, i: any) => (
+                          <Option key={i} value={obj.value}>
+                              {obj.label}
+                          </Option>
+                      ))
+                    : props.options.map((opt: any, ind: any) => (
+                          <Option key={ind} value={props.options[ind]}>
+                              {props.options[ind]}
+                          </Option>
+                      ))}
+            </Select>
+        </div>
+    );
+};
+
+export default CmrDropDown;

package/src/common/components/Cmr-components/gui-slider/ControlledSlider.tsx

@@ -0,0 +1,139 @@
+import { Box } from "@mui/material";
+import { useRef, useState } from "react";
+
+export const ControlledSlider = ({
+                                     name,
+                                     min,
+                                     max,
+                                     setValue,
+                                     transform = x => x,
+                                     inverse = x => x,
+                                     value
+                                 }: {
+    name: string,
+    min: number,
+    max: number,
+    setValue?: (value: number) => void,
+    transform?: (x: number) => number,
+    inverse?: (x: number) => number,
+    value: number
+}) => {
+    const sliderPosition = (value - min) / (max - min) * 100;
+    const sliderRef = useRef(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedValue, setEditedValue] = useState('');
+    const [textIsNaN, setIsNaN] = useState(false);
+
+    const handleDragStart = (e: any) => {
+        e.preventDefault();
+
+        const startX = e.clientX;
+        //@ts-ignore
+        const sliderWidth = sliderRef.current.offsetWidth;
+
+        const handleMouseMove = (e: any) => {
+            const moveX = e.clientX - startX;
+            const newPosition = ((moveX / sliderWidth) * 100) + sliderPosition;
+            const clampedPosition = Math.min(100, Math.max(0, newPosition));
+            const newValue = (max - min) * clampedPosition / 100 + min;
+            setValue && setValue(newValue);
+        };
+
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setIsNaN(isNaN(Number(e.target.value)));
+        setEditedValue(e.target.value);
+    };
+
+    const handleInputBlur = (e:any) => {
+        let val = inverse(Number(editedValue));
+        if (isNaN(val)) {
+            return e.preventDefault();
+        }
+        setIsEditing(false);
+        setValue&&setValue(val)
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter'&&!textIsNaN) {
+            e.currentTarget.blur();
+        }
+    };
+
+    const formatText=(value:number)=>{
+        return  Math.abs(value)<0.01&&value!=0?
+                    Number(value).toExponential(3).toUpperCase():
+                    Number(value).toFixed(3);
+    }
+
+    const displayValue = isEditing ? editedValue : formatText(value);
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px' }} height={20}>
+            <Box flex={0.77} fontSize={16} color={'#3D3D3D'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
+                 fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
+                {name}
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'row' }} flex={1}>
+                <Box
+                    sx={{
+                        backgroundColor: '#f0f0f0',
+                        flex: 1,
+                        marginLeft: '4px',
+                        marginRight: '4px',
+                        borderRadius: '2px',
+                        position: 'relative',
+                        overflow: 'hidden'
+                    }}
+                    ref={sliderRef}
+                    onMouseDown={handleDragStart}
+                >
+                    <Box
+                        sx={{
+                            position: 'absolute',
+                            left: `calc(${sliderPosition * 0.98}% - 10px)`,
+                            width: '20px',
+                            height: '100%',
+                            cursor: 'ew-resize',
+                            zIndex: 1
+                        }}
+                    >
+                        <Box sx={{ position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: 'black' }} />
+                    </Box>
+                </Box>
+                <input
+                    style={{
+                        backgroundColor: '#f0f0f0',
+                        width: '45px',
+                        borderRadius: '2px',
+                        outline: "none",
+                        borderStyle: 'none',
+                        paddingLeft: '3px',
+                        paddingRight: '3px',
+                        lineHeight: '20px',
+                        whiteSpace: 'nowrap',
+                        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
+                        fontSize: '11px',
+                        color: textIsNaN?'red':'black'
+                    }}
+                    value={displayValue}
+                    onChange={handleInputChange}
+                    onBlur={handleInputBlur}
+                    onKeyDown={handleInputKeyDown}
+                    onFocus={(e) => {
+                        setEditedValue(e.target.value);
+                        setIsEditing(true)
+                    }}
+                />
+            </Box>
+        </Box>
+    );
+};

package/src/common/components/Cmr-components/gui-slider/Slider.tsx

@@ -0,0 +1,170 @@
+import { Box } from "@mui/material";
+import {useEffect, useRef, useState} from "react";
+
+/**
+ * This slider allows users to control a single value within a given range.
+ * The rendered value can be masked by a transformation.
+ * @param name
+ * @param min
+ * @param max
+ * @param setValue
+ * @param transform transform is used to mask the rendered value by a transformation
+ * @param inverse transform is used to unmask the value to its original form
+ * @constructor
+ */
+export const Slider = ({
+                           name,
+                           min,
+                           max,
+                           setValue,
+                           transform = x => x,
+                           inverse = x => x,
+                            value
+                       }: {
+    name: string,
+    min: number,
+    max: number,
+    setValue?: (value: number) => void,
+    transform?: (x: number) => number,
+    inverse?: (x: number) => number,
+    value?:number
+}) => {
+    useEffect(() => {
+        if(value!=undefined){
+            setSliderPosition((value-min)/(max-min)*100);
+        }
+    }, [value]);
+    const [sliderPosition, setSliderPosition] = useState(50); // Initial percentage for the slider
+
+    const sliderRef = useRef(null); // Ref for the parent box
+
+    const handleDragStart = (e: any) => {
+        // Prevent default behavior
+        e.preventDefault();
+
+        // Calculate initial positions
+        const startX = e.clientX;
+        // @ts-ignore
+        const sliderWidth = sliderRef.current.offsetWidth;
+
+        const handleMouseMove = (e: any) => {
+            const moveX = e.clientX - startX;
+            const newPosition = ((moveX / sliderWidth) * 100)+sliderPosition;
+
+            // Prevent the slider from going outside the parent box
+            const clampedPosition = Math.min(100, Math.max(0, newPosition));
+
+            // Update the position of the slider
+            setSliderPosition(clampedPosition);
+            const value = transform((max - min) * clampedPosition / 100 + min);
+            setValue && setValue(value);
+        };
+
+        const handleMouseUp = () => {
+            // Remove event listeners once dragging is complete
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+
+        // Add mouse move and mouse up listeners to document to handle drag
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+
+
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedValue, setEditedValue] = useState('');
+    const [textIsNaN, setIsNaN] = useState(false);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setIsNaN(isNaN(Number(e.target.value)));
+        setEditedValue(e.target.value);
+    };
+
+    const handleInputBlur = (e:any) => {
+        let val = inverse(Number(editedValue));
+        if (isNaN(val)) {
+            return e.preventDefault();
+        }
+        setIsEditing(false);
+        setValue&&setValue(val)
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter'&&!textIsNaN) {
+            e.currentTarget.blur();
+        }
+    };
+
+    const formatText=(value:number)=>{
+        return  Math.abs(value)<0.01&&value!=0?
+            Number(value).toExponential(3).toUpperCase():
+            Number(value).toFixed(3);
+    }
+
+    const val = transform((max - min) * sliderPosition / 100 + min);
+    const displayValue = isEditing ? editedValue : formatText(val);
+
+    return <Box sx={{display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px',marginBottom:'4px'
+    }} height={20}>
+        <Box flex={0.77} fontSize={16} color={'#3D3D3D'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
+             fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
+            {name}
+        </Box>
+        <Box sx={{display: 'flex', flexDirection: 'row'}} flex={1}>
+            <Box sx={{
+                backgroundColor: '#f0f0f0',
+                flex: 1,
+                marginLeft: '4px',
+                marginRight: '4px',
+                borderRadius: '2px',
+                position: 'relative',
+                overflow: 'hidden'
+            }} ref={sliderRef}
+                 onMouseDown={handleDragStart}>
+                {/* Visual representation of the slider */}
+                <Box sx={{
+                    position: 'absolute',
+                    left: `calc(${sliderPosition*0.98}% - 10px)`,
+                    width: '20px',
+                    height: '100%',
+                    cursor: 'ew-resize',
+                    zIndex: 1
+                }}>
+                    <Box sx={{
+                        position: 'absolute',
+                        left: '10px',
+                        width: '2px',
+                        height: '100%',
+                        backgroundColor: 'black'
+                    }}/>
+                </Box>
+            </Box>
+
+            <input
+                style={{
+                    backgroundColor: '#f0f0f0',
+                    width: '45px',
+                    borderRadius: '2px',
+                    outline: "none",
+                    borderStyle: 'none',
+                    paddingLeft: '3px',
+                    paddingRight: '3px',
+                    lineHeight: '20px',
+                    whiteSpace: 'nowrap',
+                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
+                    fontSize: '11px',
+                    color: textIsNaN?'red':'black'
+                }}
+                value={displayValue}
+                onChange={handleInputChange}
+                onBlur={handleInputBlur}
+                onKeyDown={handleInputKeyDown}
+                onFocus={(e) => {
+                    setEditedValue(e.target.value);
+                    setIsEditing(true)
+                }}
+            />
+        </Box>
+    </Box>;
+}

package/src/common/components/Cmr-components/header/Header.scss

@@ -0,0 +1,20 @@
+@import url(https://fonts.googleapis.com/css?family=Nunito);
+
+:root {
+  --bs-dark-rgb: 0, 0, 0; /* change these values to your preferred RGB color */
+}
+
+.small-margin{
+  margin-left: 25pt;
+  margin-right: 25pt;
+}
+
+.navbar-nav > .active > a {
+  color: white;
+  font-weight: 500;
+}
+
+.navbar-brand {
+  font-family: 'Nunito', sans-serif;
+
+}