@solidstarters/solid-core-ui 1.1.36 → 1.1.38

package/src/components/common/SolidFormStepper.tsx

@@ -1,65 +1,217 @@
 "use client"
 import { Button } from 'primereact/button'
 import { OverlayPanel } from 'primereact/overlaypanel';
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { createSolidEntityApi } from '@/redux/api/solidEntityApi';
+import { useFormik } from 'formik';
+import { Toast } from 'primereact/toast';
 
-export const SolidFormStepper = () => {
+interface Props {
+    solidFormViewMetaData?: any;
+    modelName?: any,
+    initialEntityData?: any;
+    id?: any
+}
+
+export const SolidFormStepper = (props: Props) => {
+    const { solidFormViewMetaData, modelName, initialEntityData, id } = props;
+    const toast = useRef<Toast>(null);
     const formStepperOverlay = useRef(null);
 
+    const solidFormViewWorkflowData = solidFormViewMetaData?.data?.solidFormViewWorkflowData;
+    const solidWorkflowField = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowField;
+    const solidWorkflowFieldEnabled = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowFieldUpdateEnabled;
+    const defaultWorkflowFieldValue = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.defaultValue
+    const defaultWorkflowFieldDisplayName = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.displayName
+    const activeStep = solidFormViewMetaData?.data?.solidFormViewWorkflowData[0].value
+    const [solidWorkflowFieldKey, setSolidWorkflowFieldKey] = useState<string>("");
+    const [solidWorkflowFieldValue, setSolidWorkflowFieldValue] = useState<string>("");
+
+    useEffect(() => {
+        if (!solidWorkflowField) return;
+
+        setSolidWorkflowFieldKey(solidWorkflowField);
+
+        setSolidWorkflowFieldValue(() => {
+            if (initialEntityData?.[solidWorkflowField] !== undefined) {
+                console.log("checkloginitial", initialEntityData[solidWorkflowField]);
+                return initialEntityData[solidWorkflowField];
+            } else if (defaultWorkflowFieldValue !== undefined) {
+                console.log("checklogdefault", defaultWorkflowFieldValue);
+                return defaultWorkflowFieldValue;
+            } else {
+                return activeStep;
+            }
+        });
+    }, [solidWorkflowField, initialEntityData, defaultWorkflowFieldValue, activeStep]);
+
+    const formik = useFormik({
+        enableReinitialize: true,
+        initialValues: {
+            id: +id,
+            [solidWorkflowFieldKey]: solidWorkflowFieldValue || "",
+        },
+        onSubmit: (values) => {
+            handleStepChange(values);
+        }
+    });
+
+    const entityApi = createSolidEntityApi(modelName);
+    const {
+        usePatchUpdateSolidEntityMutation,
+    } = entityApi;
+
+    const [
+        updateStepper,
+        { isSuccess: isStepperUpdateSuccessfull, isError: isStepperUpdateError, error: stepperUpdateError },
+    ] = usePatchUpdateSolidEntityMutation();
+
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const handleStepChange = async (values: any) => {
+        try {
+            const result = await updateStepper({ id: values.id, data: { [solidWorkflowFieldKey]: values[solidWorkflowFieldKey] } }).unwrap();
+            if (result?.statusCode === 200) {
+                showToast("success", `${defaultWorkflowFieldDisplayName} Update`, `${defaultWorkflowFieldDisplayName} updated successfully!`);
+                if (result?.data?.[solidWorkflowFieldKey]) {
+                    setSolidWorkflowFieldValue(result.data[solidWorkflowFieldKey]);
+                }
+            }
+        } catch (error) {
+            console.error('Error updating stepper:', error);
+            showToast("error", "Update Failed", "Failed to update the form.");
+        }
+    }
+
+    const handleButtonClick = (stepValue: any) => {
+        formik.setFieldValue(solidWorkflowFieldKey, stepValue);
+        formik.handleSubmit();
+    }
+
+    const activeIndex = solidFormViewWorkflowData.findIndex((step: any) => step.value === solidWorkflowFieldValue);
+    const visibleSteps = solidFormViewWorkflowData.length > 5 ? solidFormViewWorkflowData.slice(0, 5) : solidFormViewWorkflowData;
+    console.log("activeIndex:", activeIndex, "solidWorkflowFieldValue:", solidWorkflowFieldValue);
+
     return (
-        <div className='flex justify-content-end'>
-            <Button type='button' severity='secondary' className='solid-step-button btn-step-first'>Step 1</Button>
-            <Button type='button' className='solid-step-button btn-step'>Step 2</Button>
-            <Button type='button' className='solid-step-button btn-step-last relative'>
-                Step 3
-                <div className='absolute' style={{ right: 8 }}>
-                    <Button
-                        type='button'
-                        icon="pi pi-angle-down"
-                        text
-                        size='small'
-                        style={{ height: 24, width: '1.5rem' }}
-                        onClick={(e) =>
-                            // @ts-ignore 
-                            formStepperOverlay.current.toggle(e)
-                        }
-                    />
-                    <OverlayPanel ref={formStepperOverlay} className="solid-custom-overlay solid-form-stepper-overlay">
-                        <div className='flex flex-column gap-1 p-1'>
-                            <Button
-                                type='button'
-                                label='Step 01'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 02'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 03'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 04'
-                                size='small'
-                                text
-                            />
-                            <Button
-                                type='button'
-                                label='Step 05'
-                                size='small'
-                                text
-                            />
-                        </div>
-                    </OverlayPanel>
-                </div>
-            </Button>
-        </div>
+        <>
+            <Toast ref={toast} />
+            <div className='flex solid-dynamic-stepper' style={solidWorkflowFieldEnabled === false ? { pointerEvents: 'none' } : {}}>
+                {visibleSteps.map((step: any, index: number) => {
+                    const isActive = index === activeIndex;
+                    const isBeforeActive = index < activeIndex;
+                    const isAfterActive = index > activeIndex;
+                    const isFirstVisible = index === 0;
+                    const isLastVisible = index === visibleSteps.length - 1;
+                    const isNextAfterActive = index === activeIndex + 1;
+                    const isTwoStepsOnly = visibleSteps.length === 2;
+                    console.log("isActive", isActive);
+
+                    return (
+                        <Button
+                            key={index}
+                            type="button"
+                            className={`solid-step-button relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}
+                            text={!isActive && !isBeforeActive}
+                            onClick={() => handleButtonClick(step.value)}
+                        >
+                            {step.label}
+                            <>
+                                {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(solidWorkflowFieldValue) &&
+                                    (
+                                        <div className="absolute active-step-arrow">
+                                            <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                height="48px"
+                                                width="48px"
+                                            >
+                                                <g id="SVGRepo_iconCarrier">
+                                                    <g id="color">
+                                                        <polygon fill={"var(--primary-color)"} points="36,62 65,12 7,12" />
+                                                    </g>
+                                                    <g id="line">
+                                                        <polyline fill="none" stroke="" stroke-miterlimit="10" stroke-width="1.5" points="36,62 65,12 7,12" />
+                                                    </g>
+                                                </g>
+                                            </svg>
+                                        </div>
+                                    )}
+
+                                {(isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (
+                                    <div className="absolute active-before-step-arrow">
+                                        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                            height="48px"
+                                            width="48px"
+                                        >
+                                            <g id="SVGRepo_iconCarrier">
+                                                <g id="color">
+                                                    <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                                                </g>
+                                                <g id="line">
+                                                    <polyline fill="none" stroke="var(--solid-stepper-border)" stroke-miterlimit="10" stroke-width="1.5" points="36,62 65,12 7,12" />
+                                                </g>
+                                            </g>
+                                        </svg>
+                                    </div>
+                                )}
+
+                                {isAfterActive && !isLastVisible && (
+                                    <div className="absolute inactive-step-arrow">
+                                        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                            height="48px"
+                                            width="48px"
+                                        >
+                                            <g id="SVGRepo_iconCarrier">
+                                                <g id="color">
+                                                    <polygon fill="#fff" points="36,62 65,12 7,12" />
+                                                </g>
+                                                <g id="line">
+                                                    <polyline fill="none" stroke="var(--solid-stepper-border)" stroke-miterlimit="10" stroke-width="1.5" points="36,62 65,12 7,12" />
+                                                </g>
+                                            </g>
+                                        </svg>
+                                    </div>
+                                )}
+                            </>
+                            {solidFormViewWorkflowData.length > 5 && index === 4 && (
+                                <div className='absolute' style={{ right: 5 }}>
+                                    <Button
+                                        type='button'
+                                        icon="pi pi-angle-down"
+                                        text
+                                        size='small'
+                                        style={{ height: 24, width: '1.5rem', padding: 0 }}
+                                        onClick={(e) =>
+                                            // @ts-ignore 
+                                            formStepperOverlay.current.toggle(e)
+                                        }
+                                    />
+                                    <OverlayPanel ref={formStepperOverlay} className="solid-custom-overlay solid-form-stepper-overlay">
+                                        <div className='flex flex-column gap-1 p-1'>
+                                            {solidFormViewWorkflowData.slice(5).map((step: any, index: number) => (
+                                                <Button
+                                                    key={index}
+                                                    type='button'
+                                                    label={step.label}
+                                                    size='small'
+                                                    text
+                                                    onClick={() => handleButtonClick(step.value)}
+                                                />
+                                            ))}
+                                        </div>
+                                    </OverlayPanel>
+                                </div>
+                            )}
+                        </Button>
+                    )
+                })}
+            </div>
+        </>
     )
 }

package/src/components/common/SolidModuleHome.tsx

@@ -0,0 +1,68 @@
+"use client"
+import { Card } from "primereact/card"
+type SolidModuleParams = {
+    moduleName: string;
+}
+export const SolidModuleHome = (params: SolidModuleParams) => {
+    const formatName = (moduleName: string) => {
+        return moduleName
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
+            .join(' ');
+    };
+    return (
+        <div className="page-parent-wrapper">
+            <div className="surface-0 text-center">
+                <div className="mb-3 font-bold text-3xl">
+                    <span className="text-900">One Product, </span>
+                    <span className="text-blue-600">Many Solutions</span>
+                </div>
+                <div className="text-700 mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+                <div className="grid">
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-desktop text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Built for Developers</div>
+                        <span className="text-700 line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-lock text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">End-to-End Encryption</div>
+                        <span className="text-700 line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-check-circle text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Easy to Use</div>
+                        <span className="text-700 line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-globe text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Fast & Global Support</div>
+                        <span className="text-700 line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+                    </div>
+                    <div className="col-12 md:col-4 mb-4 px-5">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-github text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Open Source</div>
+                        <span className="text-700 line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+                    </div>
+                    <div className="col-12 md:col-4 md:mb-4 mb-0 px-3">
+                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-shield text-4xl text-blue-500"></i>
+                        </span>
+                        <div className="text-900 text-xl mb-3 font-medium">Trusted Securitty</div>
+                        <span className="text-700 line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/core/form/SolidFormView.tsx

@@ -41,6 +41,8 @@ import { SolidFormWidgetProps, SolidLoadForm } from "@/types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
 import { Panel } from "primereact/panel";
+import { SolidFormStepper } from "@/components/common/SolidFormStepper";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -1176,17 +1178,23 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    {params.embeded !== true &&
+                    {/* {params.embeded !== true &&
                         <SolidBreadcrumb
                             solidViewData={solidFormViewMetaData?.data?.solidView?.model}
                             initialEntityData={initialEntityData}
                         />
-                    }
-                    {/* {params.embeded !== true &&
-                        <div className="solid-form-stepper">
-                            <SolidFormStepper />
-                        </div>
                     } */}
+                    {params.embeded !== true &&
+                        // <div className="solid-form-stepper">
+                            <SolidFormHeader 
+                                // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
+                                solidFormViewMetaData={solidFormViewMetaData}
+                                initialEntityData={initialEntityData}
+                                modelName={params.modelName}
+                                id={params.id}
+                            />
+                        // </div>
+                    }
                     <div className="p-4 solid-form-content">
                         {DynamicHeaderComponent && <DynamicHeaderComponent />}
                         {renderFormDynamically(formViewMetaData)}

package/src/components/core/list/SolidListView.tsx

@@ -676,7 +676,7 @@ export const SolidListView = (params: SolidListViewParams) => {
             onClick={() => setRecoverDialogVisible(true)}
           ></Button>}
 
-          {params.embeded === false &&
+          {params.embeded === false && (solidListViewMetaData?.data?.solidView?.layout?.attrs?.configureView !== false) &&
             <SolidConfigureLayoutElement
               setShowArchived={setShowArchived}
               showArchived={showArchived}

package/src/components/core/model/CreateModel.tsx

@@ -19,6 +19,7 @@ import { Dialog } from "primereact/dialog";
 import { Divider } from "primereact/divider";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 
 interface ErrorResponseData {
   message: string;
@@ -402,7 +403,7 @@ const CreateModel = ({ data, params }: any) => {
             </>
           }
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}

package/src/components/core/module/CreateModule.tsx

@@ -6,6 +6,7 @@ import { DropzoneUpload } from "@/components/common/DropzoneUpload";
 import { FileReaderExt } from "@/components/common/FileReaderExt";
 import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectAutoCompleteField";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { getSingularAndPlural } from "@/helpers/helpers";
 import { handleError } from "@/helpers/ToastContainer";
@@ -414,7 +415,7 @@ const CreateModule = ({ data }: any) => {
             </>
           }
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}

package/src/components/core/users/CreateUser.tsx

@@ -2,6 +2,7 @@
 import { BackButton } from "@/components/common/BackButton";
 import { CancelButton } from "@/components/common/CancelButton";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { useRegisterPrivateMutation, useUpdateUserMutation } from "@/redux/api/authApi";
 import { useGetrolesQuery } from "@/redux/api/roleApi";
@@ -269,7 +270,7 @@ const CreateUser = ({ data, params }: any) => {
             </>
           )}
         </div>
-        <SolidBreadcrumb />
+        <SolidFormHeader />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}
@@ -399,10 +400,10 @@ const CreateUser = ({ data, params }: any) => {
 
                 </div>
               </Panel>
-              
+
               {/* <Divider /> */}
               {/* <p className="form-wrapper-heading text-base" style={{ fontSize: 16 }}>Roles</p> */}
-             
+
               <Panel toggleable header="Roles" className="solid-column-panel mt-5">
                 <div className="formgrid grid mt-4">
                   {rolesData?.data?.records && rolesData?.data?.records.map((role: any, i: number) => (

package/src/index.ts

@@ -281,6 +281,7 @@ export { SolidKanbanView } from '@/components/core/kanban/SolidKanbanView';
 
 // export * from '@/components/core/kanban/columns/relations/SolidRelationManyToOneColumn';
 
+export { SolidModuleHome } from '@/components/common/SolidModuleHome';
 export { SolidListView } from '@/components/core/list/SolidListView';
 export { SolidListViewColumn, getNumberOfInputs } from '@/components/core/list/SolidListViewColumn';
 export type { SolidListViewColumnParams } from '@/components/core/list/SolidListViewColumn';

package/src/redux/api/solidEntityApi.tsx

@@ -78,7 +78,13 @@ export const createSolidEntityApi = (entityName: string) => {
                     method: 'POST',
                     body: data
                 })
-
+            }),
+            patchUpdateSolidEntity: builder.mutation({
+                query: ({ id, data }) => ({
+                    url: `/${kebabEntityName}/${id}`,
+                    method: 'PATCH',
+                    body: data,
+                }),
             }),
         }),
     });

package/src/resources/globals.css

@@ -1664,11 +1664,12 @@ li.header-li-px {
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 111px);
+  height: calc(100vh - 115px);
+  /* height: calc(100vh - 111px); */
   /* If No Breadcrumb */
   /* height: calc(100vh - 64px); */
   /* if Stepper */
-  /* height: calc(100vh - 124px); */
+  /* height: calc(100vh - 127px); */
   overflow-y: auto;
 }
 
@@ -1682,18 +1683,27 @@ li.header-li-px {
 
 .solid-form-stepper {
   padding: 7.5px 14px 7.5px 24px;
-  background-color: var(--solid-light-100);
+  background-color: #fff;
+  /* background-color: var(--solid-light-100); */
   border-top: 1px solid var(--primary-light-color);
   border-bottom: 1px solid var(--primary-light-color);
 }
 
+.solid-dynamic-breadcrumb-stepper {
+  height: 50px;
+  border-bottom: 1px solid var(--primary-light-color);
+  padding: 0.8rem 1.5rem;
+}
+
 .solid-breadcrumb.p-breadcrumb {
-  border-bottom: 1px solid #CED0D6;
+  /* border-bottom: 1px solid #CED0D6; */
+  border-bottom: none;
   border-right: none;
   border-left: none;
   border-top: none;
   border-radius: 0;
-  padding: 0.8rem 1.5rem;
+  padding: 0;
+  /* padding: 0.8rem 1.5rem; */
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -1730,17 +1740,112 @@ li.header-li-px {
   margin-top: 10px;
 }
 
+
+.solid-dynamic-stepper {
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--solid-stepper-border);
+}
+
+.active-step-arrow {
+  left: -21px;
+  z-index: 9999;
+  top: 50%;
+  transform: translateY(-38%);
+}
+
+.active-before-step-arrow {
+  left: -18px;
+  z-index: 9999;
+  top: 50%;
+  transform: translateY(-38%);
+}
+
+.inactive-step-arrow {
+  right: 2px;
+  z-index: 999;
+  top: 50%;
+  transform: translateY(-37%);
+}
+
 .solid-step-button.p-button {
   position: relative;
-  min-width: 130px;
+  min-width: 110px;
   display: flex;
   justify-content: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 0.875rem;
+  border-radius: 0;
+  border: none;
 }
 
+.solid-step-button.p-button-primary {
+  padding-right: 0;
+}
 
-.solid-step-button.p-button:not(.btn-step-first) {
-  padding-left: 40px;
-  min-width: 150px;
+.solid-step-button.p-button-secondary:first-child {
+  padding-left: 0;
+  min-width: 100px;
+}
+
+/* .solid-step-button.p-button.p-button-text:first-child {
+  padding-left: 16px !important;
+}
+
+.solid-step-button.p-button.p-button-text:not(:first-child) {
+  padding-left: 0px !important;
+} */
+
+.solid-step-button.p-button-secondary {
+  background-color: #EAEDF1;
+  color: #0D0B26;
+  padding-right: 0;
+}
+
+.solid-step-button.p-button-secondary.p-button:not(:disabled):active {
+  background: #EAEDF1;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button-secondary.p-button:not(:disabled):hover {
+  background: #EAEDF1;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button:not(:disabled):active {
+  background: var(--primary-color);
+  color: #ffffff;
+  border-color: var(--primary-color);
+}
+
+.solid-step-button.p-button:not(:disabled):hover {
+  background: var(--primary-color);
+  color: #ffffff;
+  border-color: var(--primary-color);
+}
+
+.solid-step-button.p-button.p-button-text {
+  background-color: transparent;
+  color: #0D0B26;
+  border: 0;
+  min-width: 130px;
+  /* padding-left: 0; */
+}
+
+/* .solid-dynamic-stepper.test .solid-step-button.p-button:nth-child(2) {
+  padding-left: 20px !important;
+  min-width: 130px;
+} */
+
+.solid-step-button.p-button.p-button-text:not(:disabled):active {
+  background-color: transparent;
+  color: #0D0B26;
+}
+
+.solid-step-button.p-button.p-button-text:not(:disabled):hover {
+  background-color: transparent;
+  color: #0D0B26;
 }
 
 .solid-step-button.btn-step-first {
@@ -2774,6 +2879,7 @@ li.header-li-px {
   .solid-right-layout .solid-logo {
     top: 3rem;
   }
+
   .customize-layout-panel.p-overlaypanel {
     position: absolute;
     left: 59% !important;