This PR is to resolve : [EPIC] Allow users to be able to edit palette and default color theme in existing design system #820

.github/workflows/publish-docker.yml

@@ -6,6 +6,7 @@ on:
     branches:
       - 'main'
       - 'dev'
+      - 'epic-820'
     paths:
       - 'code/src/**'
       - 'code/package.json'

code/src/ui/src/App.css

@@ -73,6 +73,7 @@ p a:hover {
 */
 
 .button-area {
+
     justify-content: flex-start;
     display: flex;
     padding-top: 20px;
@@ -101,8 +102,18 @@ p a:hover {
     margin: 8px 0;
 }
 
-.darkmode .background,
-.darkmode.background {
+
+.collapsable-Container{
+    margin-left: 32px;
+    border: 1px;
+    border-style: solid;
+    border-radius: 8px;
+    border-color: #91919F;
+
+
+}
+.darkmode .background, .darkmode.background {
+
     background: var(--dm-background) !important;
     color: var(--dm-on-background) !important;
 }

code/src/ui/src/components/BottomStrip.tsx

@@ -0,0 +1,47 @@
+/**
+ * SPDX-License-Identifier: Apache-2.0
+ * Copyright 2024 FINOS A11y Theme Builder contributors - see NOTICE file
+ */
+import React from 'react';
+import Button from '@mui/material/Button';
+
+interface BottomStripProps {
+    onBack: () => void;
+    onSave: () => void;
+    onSaveAndContinue: () => void;
+    numOfColors: Number
+}
+
+export const BottomStrip: React.FC<BottomStripProps> = ({ onBack, onSave, onSaveAndContinue, numOfColors }) => {
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                bottom: 0,
+                width: '100%',
+                maxWidth: '100%',
+                margin: '0 auto',
+                display: 'flex',
+                gap:"8px",
+                // justifyContent: 'space-between',
+                padding: '8px',
+                backgroundColor: '#fff',
+                boxShadow: '0 -2px 5px rgba(0,0,0,0.1)',
+                zIndex: 10, // Ensure it stays on top of other content
+            }}
+        >
+            <Button variant="text" onClick={onBack}>
+                Back
+            </Button>
+
+            <Button variant="outlined"  onClick={onSave} style={{ marginRight: '8px' }} disabled={numOfColors === 0} >
+                Save
+            </Button>
+            <Button variant="contained"  onClick={onSaveAndContinue} disabled={numOfColors === 0} >
+                Save and Continue
+            </Button>
+
+        </div>
+    );
+};
+

code/src/ui/src/components/ColorSelect.tsx

@@ -27,6 +27,7 @@ interface Props {
     baseColorHex?: Set<string>;
     label?: string;
     defaultValue?: string;
+    optional?:boolean;
 }
 
 class GridShade {
@@ -46,6 +47,7 @@ export const ColorSelect: React.FC<Props> = ({
     baseColorHex,
     label,
     defaultValue,
+    optional,
 }) => {
     const [_selectedValue, _setSelectedValue] = useState<string>(
         defaultValue || ''
@@ -56,6 +58,7 @@ export const ColorSelect: React.FC<Props> = ({
     const [_longestRow, _setLongestRow] = useState<number>(0);
     const [_disabled, _setDisabled] = useState<boolean>(false);
     const [_shadeLabel, _setShadeLabel] = useState<string>('');
+    const [_selectedBaseColorName, _setSelectedBaseColorName ] = useState<string>('');
 
     useEffect(() => {
         if (value) {
@@ -149,6 +152,7 @@ export const ColorSelect: React.FC<Props> = ({
                 _selectableValues[indexOfSelectedItem].shade;
             value.setValue(newSelectedValue);
             _setSelectedValue(selectedValue);
+            _setSelectedBaseColorName(newSelectedValue.getMode().color.name);
             _setShadeLabel(_getShadeLabel(newSelectedValue));
             console.log(`Color changed by UI to ${value}`);
         }
@@ -181,10 +185,20 @@ export const ColorSelect: React.FC<Props> = ({
         return (
             <div>
                 {label && (
-                    <InputLabel className="caption" htmlFor="outlined-select">
+                    <InputLabel  htmlFor="outlined-select" style={{fontWeight:"bold"}}>
                         {label}
                     </InputLabel>
                 )}
+                {optional? (
+                    <InputLabel className="caption" htmlFor="outlined-select">
+                    Optional
+                </InputLabel>
+                ):(
+                    <InputLabel className="caption" htmlFor="outlined-select" style={{visibility:"hidden"}}>
+                    Optional
+                </InputLabel>
+                  )
+                }
                 <Select
                     onChange={handleColorChange}
                     displayEmpty={true}
@@ -203,7 +217,7 @@ export const ColorSelect: React.FC<Props> = ({
                                         : '' || ''
                                 }
                             />
-                        </Box>
+                                                    </Box>
                     )}
                     MenuProps={{
                         anchorOrigin: {
@@ -264,6 +278,17 @@ export const ColorSelect: React.FC<Props> = ({
                             );
                         })}
                 </Select>
+                {
+                    _selectedValue!=""?(
+                    <InputLabel  className="caption" htmlFor="outlined-select" style={{paddingTop:"8px"}}>
+                        {_selectedBaseColorName}-{_shadeLabel}
+                    </InputLabel>
+                    ):(
+                        <InputLabel  htmlFor="outlined-select" style={{visibility:"hidden"}}>
+                            Not selected
+                        </InputLabel>
+                        )
+                }                
             </div>
         );
     } else {

code/src/ui/src/components/ColorShade.tsx

@@ -68,7 +68,6 @@ export const ColorShade: React.FC<Props> = ({
                         color: _shade.getOnShade().getHexOrRGBA(),
                     }}
                 >
-                    Aa
                 </div>
                 {showDetails && (
                     <div className="swatch-details active">

code/src/ui/src/components/ColorShadeCss.tsx

@@ -106,19 +106,9 @@ export const ColorShadeCss: React.FC<Props> = ({
     }, []);
 
     return (
-        <div
-            className={className ?? ''}
-            style={
-                isBaseColor
-                    ? {
-                          paddingTop: '2px',
-                          paddingLeft: '4px',
-                          borderRadius: '8px',
-                          backgroundColor: 'var(--primary-quarter',
-                      }
-                    : {}
-            }
-        >
+
+        <div className={className ?? ""} style={isBaseColor ? {paddingTop:"2px",paddingLeft:"4px",borderRadius:"0px",border:"1px",borderStyle:"solid",borderColor:"#CFD3D8"} : {}}>
+
             {label && <div className="caption text-center">{label}</div>}
             {showId && <div className="subtitle1 text-center">{id}</div>}
             <div className="Hex" style={style}>