ui-soxo-bootstrap-core 2.6.41 → 2.6.42

package/core/models/menus/components/menu-lists/menu-lists.js

@@ -526,7 +526,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
           <EditOutlined />
         </Button>
       )}
-      <Button
+      {/* <Button
         size="small"
         type="default"
         onClick={() => {
@@ -536,7 +536,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         }}
       >
         <CopyOutlined />
-      </Button>
+      </Button> */}
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
         <Button danger size="small" type="default">
           <DeleteOutlined />

package/core/modules/steps/steps.js

@@ -1290,7 +1290,27 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               </div>
             )} */}
 
-            <div className="steps-top-bar">
+            <div className={`steps-top-bar${isStepFullscreen ? ' is-fullscreen' : ''}`}>
+              {/*
+                Full-screen toggle is anchored to the far left of the bar so the
+                step tabs can stretch across the middle and the primary CTA sits
+                flush right (see design).
+              */}
+              <Button
+                className="steps-fullscreen-toggle"
+                type="dashed"
+                icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />}
+                onClick={toggleStepFullscreen}
+                aria-label={isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+                title={isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+              >
+                {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+              </Button>
+
+              {/*
+                Breadcrumb strip stays visible in fullscreen mode too so the
+                user keeps the step timeline / navigation while presenting.
+              */}
               <div className="steps-breadcrumb-strip">
                 {steps.length ? (
                   steps.map((stepItem, stepIndex) => {
@@ -1315,10 +1335,6 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               </div>
 
               <div className="steps-nav-actions">
-                <Button type="dashed" icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
-                  {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
-                </Button>
-
                 {/*
                   Previous-process button.
                   - Only relevant at the start of a process (`activeStep === 0`)
@@ -1333,7 +1349,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                 )}
 
                 {activeStep > 0 && (
-                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
+                  <Button
+                    type="default"
+                    icon={<ArrowLeftOutlined />}
+                    onClick={handlePrevious}
+                    aria-label="Back"
+                    title="Back"
+                  >
                     Back
                   </Button>
                 )}
@@ -1366,7 +1388,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     )}
                   </>
                 ) : (
-                  <Button type="primary" disabled={!isStepCompleted} onClick={handleNext}>
+                  <Button
+                    type="primary"
+                    disabled={!isStepCompleted}
+                    onClick={handleNext}
+                    aria-label={activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'}
+                    title={activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'}
+                  >
                     {/*
                       First-step label is resolved via FIRST_STEP_LABELS using
                       the process name (lowercased + trimmed) as the key. Known
@@ -1464,10 +1492,10 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     </button>
                   </>
                 ) : null}
-                <div
+                {/* <div
                   key={`${currentProcessId}_${activeStep}`}
                   className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
-                >
+                > */}
                   {/* <div className="steps-chat-step-top">
                     <span className="steps-index-pill">
                       Step {Math.min(activeStep + 1, steps.length || 1)} of {steps.length || 1}
@@ -1476,15 +1504,15 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     {currentStep?.step_description ? <p className="steps-description">{currentStep.step_description}</p> : null}
                   </div> */}
 
-                  <div className="steps-chat-step-component">
+                  {/* <div className="steps-chat-step-component"> */}
                     {loading ? (
                       <div className="steps-chat-loading">
                         <Spin />
                       </div>
                     ) : null}
                     {!loading ? renderDynamicStep() : null}
-                  </div>
-                </div>
+                  {/* </div> */}
+                {/* </div> */}
               </div>
             </div>
 

package/core/modules/steps/steps.scss

@@ -159,16 +159,19 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-bottom: 1px solid #e8eef8;
-  background: #f8fbff;
-  min-height: 50px;
+  gap: 12px;
+  padding: 0 24px;
+  min-height: 70px;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
+  /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
+     Matches the onboarding reference without the frosted-glass treatment. */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+  background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
 }
 
 .steps-breadcrumb-strip {
@@ -176,13 +179,45 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  gap: 52px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  scrollbar-width: thin;
-  scrollbar-color: #d0dff5 transparent;
-  padding-bottom: 2px;
+  scrollbar-width: none;
+  padding: 0 8px;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
+/* Full-screen toggle — grey frosted pill anchored to the far left. */
+.steps-fullscreen-toggle {
+  flex: 0 0 auto;
+}
+
+.steps-fullscreen-toggle.ant-btn,
+.steps-fullscreen-toggle.ant-btn-dashed {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #07232E33;
+  border: 1px solid #dbe3e6;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.steps-fullscreen-toggle.ant-btn:hover,
+.steps-fullscreen-toggle.ant-btn:focus {
+  background: #ffffff;
+  border-color: #ffffff;
+  color: #000000;
+  transform: translateY(-1px);
 }
 
 .steps-nav-actions {
@@ -190,20 +225,40 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  /*
+    Anchors the Back + primary CTA to the far right. In fullscreen the
+    breadcrumb strip is not rendered, so this margin keeps the group pinned
+    right with only the Full Screen toggle sitting on the left.
+  */
+  margin-left: auto;
 }
 
 .steps-nav-actions .ant-btn {
-  min-height: 34px;
-  border-radius: 8px;
-  padding: 0 14px;
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 18px;
   font-size: 13px;
   font-weight: 600;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
   white-space: nowrap;
 }
 
+/* Secondary (Back / previous-process) — solid white pill. */
+.steps-nav-actions .ant-btn-default {
+  background: #ffffff;
+  border-color: #dbe3e6;
+  color: #4a5a68;
+}
+
+.steps-nav-actions .ant-btn-default:hover,
+.steps-nav-actions .ant-btn-default:focus {
+  background: #f4f7f8;
+  border-color: #c3ccd0;
+  color: #253a5b;
+}
+
 .steps-nav-actions .ant-btn:active {
   transform: scale(0.97);
 }
@@ -253,17 +308,23 @@
 }
 
 .steps-breadcrumb-item {
+  /* Compact, natural-width steps that sit centered with connector lines
+     between them — matching the onboarding reference. */
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 7px;
-  border: 1.5px solid #dce6f5;
-  background: #f8fbff;
+  justify-content: flex-start;
+  gap: 8px;
+  border: none;
+  background: transparent;
   border-radius: 999px;
-  padding: 6px 14px;
+  padding: 4px;
   cursor: pointer;
-  transition: all 0.18s ease;
-  color: #475569;
-  font-size: 12px;
+  transition: all 0.2s ease;
+  color: #7a8792;
+  font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   min-height: 34px;
@@ -271,56 +332,109 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.steps-breadcrumb-item:hover {
-  background: #eef5ff;
-  border-color: #c8d9f6;
-  color: #1d4ed8;
+/* Thin connecting line drawn into the gap toward the next step. */
+.steps-breadcrumb-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  width: 52px;
+  height: 1px;
+  background: rgba(37, 58, 91, 0.2);
+  transform: translateY(-50%);
 }
 
 .steps-breadcrumb-item:active {
-  transform: scale(0.96);
+  transform: scale(0.97);
+}
+
+/* Number bubble — default (upcoming) solid muted circle. */
+.steps-breadcrumb-index {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  background: #ffffff;
+  border: 1px solid #d3dbdf;
+  color: #8a97a2;
+  flex: 0 0 auto;
+  transition: all 0.2s ease;
+}
+
+.steps-breadcrumb-item:hover .steps-breadcrumb-index {
+  border-color: rgba(37, 58, 91, 0.35);
+  color: #253a5b;
 }
 
+/* Label is shown only for the active step (upcoming steps are circle-only,
+   as in the reference). */
+.steps-breadcrumb-label {
+  display: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ACTIVE — solid white rounded pill with dark navy text. */
 .steps-breadcrumb-item.active {
-  background: #1e3a8a;
-  border-color: #1e3a8a;
-  color: #ffffff;
+  background: #ffffff;
+  padding: 4px 16px 4px 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  color: #253a5b;
   font-weight: 600;
 }
 
-.steps-breadcrumb-item.completed {
-  border-color: #86efac;
-  background: #f0fdf4;
-  color: #15803d;
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: #ffffff;
+  border-color: rgba(37, 58, 91, 0.25);
+  color: #253a5b;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-label {
+  display: inline;
+  color: #253a5b;
 }
 
+/* COMPLETED — filled navy circle. */
 .steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #16a34a;
+  background: #253a5b;
+  border-color: #253a5b;
   color: #ffffff;
 }
 
-.steps-breadcrumb-item.active .steps-breadcrumb-index {
-  background: rgba(255, 255, 255, 0.22);
-  color: #ffffff;
+/* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */
+.steps-nav-actions .ant-btn-primary {
+  background: #253a5b;
+  border-color: #253a5b;
+  border-radius: 999px;
+  padding: 0 30px;
+  min-height: 40px;
+  box-shadow: 0 8px 20px rgba(37, 58, 91, 0.28);
 }
 
-.steps-breadcrumb-index {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 700;
-  background: #e2e8f4;
-  color: #1e293b;
-  flex: 0 0 auto;
+.steps-nav-actions .ant-btn-primary:hover,
+.steps-nav-actions .ant-btn-primary:focus {
+  background: #1d3054;
+  border-color: #1d3054;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(37, 58, 91, 0.36);
 }
 
-.steps-breadcrumb-label {
-  font-size: 12px;
-  font-weight: 600;
+.steps-nav-actions .ant-btn-primary:disabled,
+.steps-nav-actions .ant-btn-primary[disabled] {
+  background: #c8d0e0;
+  border-color: #c8d0e0;
+  color: #ffffff;
+  box-shadow: none;
+  transform: none;
 }
 
 .steps-breadcrumb-empty {
@@ -347,8 +461,8 @@
   padding: 10px 14px;
   box-sizing: border-box;
   position: relative;
+    background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
 }
-
 .steps-stage-body.is-swipe-enabled {
   touch-action: pan-y;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.41",
+  "version": "2.6.42",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"