@solidstarters/solid-core-ui 1.1.66 → 1.1.67

package/dist/resources/themes/solid-light-purple/theme.css

@@ -43,6 +43,7 @@
   --maskbg: rgba(0, 0, 0, 0.4);
   --primary-light-color: #D8E2EA;
   --highlight-bg: #F5F5F5;
+  --hightlight-bg-secondary: #FAFAFA;
   --highlight-text-color: #4C1D95;
   --icon-color: #000000E0;
   --auth-title-color: #000000;
@@ -59,6 +60,13 @@
   --solid-stepper-border: #CFD6DC;
   --solid-setting-title: rgba(0, 0, 0, 0.88);
   --solid-dark-title: rgba(0, 0, 0, 0.88);
+  --solid-dropzone-bg: rgba(255, 255, 255, 0.60);
+  --solid-file-wrapper: #E0E0E0;
+  --solid-chatter-dash: #00000026;
+  --solid-chatter-date-border: rgba(0, 0, 0, 0.15);
+  --solid-chatter-input-bg: #FEFCFF;
+  --solid-chatter-input-placeholder: rgba(51, 51, 51, 0.20);
+  --solid-kanban-wrapper: #E0E0E0;
   color-scheme: light;
 }
 
@@ -337,6 +345,7 @@
     /* box-shadow: 0 0 0 0.2rem #d3b5f5; */
     border-color: #722ED1;
   }
+
   .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
     font-family: var(--font-family);
     font-feature-settings: var(--font-feature-settings, normal);
@@ -1686,7 +1695,7 @@
     box-shadow: 0 0 0 0.2rem #d3b5f5;
   }
 
-  
+
   .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
     padding: 0.75rem 1.25rem;
     color: #4b5563;
@@ -3443,7 +3452,7 @@
     border-bottom: 0 none;
   }
 
-  
+
   .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
     right: 0.75rem;
     color: #6b7280;
@@ -4546,7 +4555,7 @@
     border-top-left-radius: 6px;
   }
 
-  
+
   .p-megamenu .p-submenu-list .p-menuitem-separator {
     border-top: 1px solid #CED0D6;
     margin: 0.25rem 0;
@@ -6126,4 +6135,101 @@
   .solid-custom-title {
     color: var(--solid-form-title);
   }
+
+
+  .solid-global-search-element {
+    border: 1px solid #d1d5db;
+  }
+
+  .custom-filter-button {
+    border-left: 1px solid #d1d5db;
+  }
+
+  .solid-layout-accordion label {
+    color: #000;
+  }
+
+  .primary-filter-fieldset {
+    background-color: #F8F7FC;
+  }
+
+  .nested-custom-filter .primary-filter-fieldset {
+    background-color: #FFF;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header {
+    background: #F9F9F9;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header,
+  .solid-column-panel.p-panel .p-panel-content {
+    border: 1px solid rgba(216, 226, 234, 0.40);
+  }
+
+  .form-field-label {
+    color: rgba(0, 0, 0, 0.88) !important;
+  }
+
+  .solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
+    background-color: #fff;
+    border-color: #d1d5db;
+    color: rgba(0, 0, 0, 0.60);
+  }
+
+
+  .solid-standard-autocomplete .p-inputtext:focus+.p-button {
+    border-color: #d1d5db !important;
+  }
+
+  .solid-custom-editor .ql-toolbar.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .solid-custom-editor .ql-container.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .view-widget-chip.p-chip {
+    background-color: #f9f9f9 !important;
+  }
+
+  .solid-step-button.p-button.p-button-text,
+  .solid-step-button.p-button.p-button-text:not(:disabled):active,
+  .solid-step-button.p-button.p-button-text:not(:disabled):hover,
+  .solid-step-button.btn-step-first,
+  .solid-step-button.btn-step-last {
+    color: #0D0B26 !important;
+  }
+
+  .active-menu-image {
+    background-color: #EFF1F4;
+  }
+
+  .solid-kanban-card,
+  .solid-media-card {
+    border: 1px solid var(--solid-kanban-wrapper);
+    background: var(--hightlight-bg-secondary);
+  }
+
+  .solid-kanban-card:hover,
+  .solid-media-card:hover {
+    border: 1px solid #722ED1;
+    background: #F9F0FF;
+  }
+
+
+  .solid-mimetype-chip {
+    background: #F0F0F0;
+  }
+
+  .kanban-image-preview,
+  .kanban-media-image-preview,
+  .kanban-media-view-card {
+    background-color: #fff;
+  }
+
+  .kanban-count-badge {
+    background: #F6FAFF;
+    color: var(--primary-color);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.66",
+  "version": "1.1.67",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/Svg/FileSvg.tsx

@@ -2,17 +2,18 @@ import * as React from "react"
 import { SVGProps } from "react"
 const FileSvg = (props: SVGProps<SVGSVGElement>) => (
   <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={64}
-  height={64}
-  fill="none"
-  {...props}
->
-  <path
-    fill="#F9F0FF"
-    d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
-  />
-  <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
-</svg>
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+    className="solid-file-reader"
+  >
+    <path
+      fill="#F9F0FF"
+      d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
+    />
+    <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
+  </svg>
 )
 export default FileSvg

package/src/components/core/common/FilterComponent.tsx

@@ -144,11 +144,7 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
             <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
-            <Button text severity='secondary' icon={
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                <path d="M11.6665 13.334H13.3332V11.6673H14.9998V10.0007H13.3332V8.33398H11.6665V10.0007H9.99984V11.6673H11.6665V13.334ZM3.33317 16.6673C2.87484 16.6673 2.48248 16.5041 2.15609 16.1777C1.8297 15.8513 1.6665 15.459 1.6665 15.0007V5.00065C1.6665 4.54232 1.8297 4.14996 2.15609 3.82357C2.48248 3.49718 2.87484 3.33398 3.33317 3.33398H8.33317L9.99984 5.00065H16.6665C17.1248 5.00065 17.5172 5.16385 17.8436 5.49023C18.17 5.81662 18.3332 6.20898 18.3332 6.66732V15.0007C18.3332 15.459 18.17 15.8513 17.8436 16.1777C17.5172 16.5041 17.1248 16.6673 16.6665 16.6673H3.33317ZM3.33317 15.0007H16.6665V6.66732H9.31234L7.64567 5.00065H3.33317V15.0007Z" fill="#4B4D52" />
-              </svg>
-            } size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn p-0' />
+            <Button text severity='secondary' icon={"pi pi-folder-plus"} size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
             <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
@@ -352,7 +348,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
   // };
 
 
-  const removeEmptyGroups = (rule) => { 
+  const removeEmptyGroups = (rule) => {
     if (rule.type === "rule_group" && rule.children.length === 0) {
       return null;
     }
@@ -366,7 +362,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
 
 
   const handleDeleteRule = (id) => {
-    if(filterRules[0].children.length === 1 && filterRules[0].children[0].id === id ){
+    if (filterRules[0].children.length === 1 && filterRules[0].children[0].id === id) {
       return
     }
     const deleteRecursively = (rules, id, isRoot = false) => {

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -742,7 +742,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 </div>
 
                 {showOverlay && (
-                    <div className="absolute w-full z-5 bg-white border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
+                    <div className="absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
                         {inputValue ? (
                             <>
                                 <div className="custom-filter-search-options px-2 py-2 flex flex-column">
@@ -757,7 +757,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                                 size="small"
                                             >
                                                 Search <strong>{value}</strong> for :
-                                                <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
+                                                <span className="font-bold text-color">{inputValue}</span>
                                             </Button>
                                         ))
                                     }

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

@@ -70,11 +70,15 @@ const CreateUser = ({ data, params }: any) => {
   }, [data]);
 
   const handleCheckboxChange = (roleName: string) => {
+    let updatedRoles;
     if (selectedRoles.includes(roleName)) {
-      setSelectedRoles(selectedRoles.filter((name) => name !== roleName));
+      updatedRoles = selectedRoles.filter((name) => name !== roleName);
     } else {
-      setSelectedRoles([...selectedRoles, roleName]);
+      updatedRoles = [...selectedRoles, roleName];
     }
+    setSelectedRoles(updatedRoles);
+    formik.setFieldTouched('roles', true); // fake "touched"
+    formik.setFieldValue('roles', updatedRoles);
   };
 
   const initialValues = {
@@ -244,9 +248,9 @@ const CreateUser = ({ data, params }: any) => {
                 <div className="form-wrapper-title">Create User</div>
               </div>
               <div className="gap-3 flex">
-                {/* {formik.dirty && */}
+                {formik.dirty &&
                   <Button label="Save" size="small" type="submit" />
-                {/* } */}
+                }
                 <CancelButton />
               </div>
             </>
@@ -258,9 +262,9 @@ const CreateUser = ({ data, params }: any) => {
               </div>
               <div>
                 <div className="gap-3 flex">
-                  {/* {formik.dirty && */}
+                  {formik.dirty &&
                     <Button label="Save" size="small" type="submit" />
-                  {/* } */}
+                  }
                   {data &&
                     <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
                   }

package/src/resources/globals.css

@@ -224,6 +224,11 @@ a {
 }
 
 /* Navbar - left sidebar */
+
+.active-menu-image {
+  border-radius: 4px;
+}
+
 .navbar-brand {
   display: inline-block;
   margin-bottom: 30px;
@@ -436,7 +441,6 @@ a {
 
 .form-field-label {
   font-weight: 400;
-  color: rgba(0, 0, 0, 0.88) !important;
 }
 
 .form-wrapper-subtitle {
@@ -1650,10 +1654,17 @@ li.header-li-px {
 
 .solid-form-wrapper {
   overflow: hidden;
+  display: flex;
+}
+
+.solid-form-section {
+  position: relative;
+  flex-grow: 1;
+  transition: width 0.3s ease;
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 115px);
+  height: calc(100vh - 116px);
   /* height: calc(100vh - 111px); */
   /* If No Breadcrumb */
   /* height: calc(100vh - 64px); */
@@ -1668,6 +1679,7 @@ li.header-li-px {
   align-items: center;
   justify-content: space-between;
   background: var(--solid-light-grey);
+  border-bottom: 1px solid var(--primary-light-color);
 }
 
 .solid-form-stepper {
@@ -1709,7 +1721,7 @@ li.header-li-px {
 .solid-dropzone {
   border-radius: 0.5rem;
   border: 1px dashed var(--solid-primary-border);
-  background: rgba(255, 255, 255, 0.60);
+  background: var(--solid-dropzone-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1724,7 +1736,7 @@ li.header-li-px {
 
 .solid-file-upload-wrapper {
   border-radius: 8px;
-  border: 1px solid #E0E0E0;
+  border: 1px solid var(--solid-file-wrapper);
   padding: 10px;
   margin-top: 10px;
 }
@@ -1741,7 +1753,7 @@ li.header-li-px {
 
 .active-step-arrow {
   left: -21px;
-  z-index: 9999;
+  z-index: 2;
   top: 50%;
   transform: translateY(-38%);
 }
@@ -1819,7 +1831,6 @@ li.header-li-px {
 
 .solid-step-button.p-button.p-button-text {
   background-color: transparent;
-  color: #0D0B26;
   border: 0;
   min-width: 130px;
   /* padding-left: 0; */
@@ -1832,23 +1843,19 @@ li.header-li-px {
 
 .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 {
   /* border: 1px solid var(--solid-stepper-border) !important; */
   background-color: #EAEDF1;
-  color: #0D0B26;
 }
 
 .solid-step-button.btn-step-last {
   background-color: transparent;
-  color: #0D0B26;
 }
 
 .solid-step-button.btn-step {
@@ -2448,7 +2455,6 @@ li.header-li-px {
 }
 
 .solid-global-search-element {
-  border: 1px solid #d1d5db;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -2468,7 +2474,6 @@ li.header-li-px {
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  border-left: 1px solid #d1d5db;
   border-radius: 0;
   height: 35.5px;
 }
@@ -2538,14 +2543,6 @@ li.header-li-px {
   font-size: 0.625rem !important;
 }
 
-.primary-filter-fieldset {
-  background-color: #F8F7FC;
-}
-
-.nested-custom-filter .primary-filter-fieldset {
-  background-color: #FFF;
-}
-
 .custom-filter-chip .p-chips-token {
   padding: 0.25rem 0.5rem !important;
   color: var(--primary-color) !important;
@@ -2622,7 +2619,6 @@ li.header-li-px {
 }
 
 .solid-layout-accordion label {
-  color: #000;
   font-weight: 400;
 }
 
@@ -2631,10 +2627,7 @@ li.header-li-px {
 }
 
 .solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
-  background-color: #fff;
   border-left: none;
-  border-color: #d1d5db;
-  color: rgba(0, 0, 0, 0.60);
 }
 
 .solid-standard-autocomplete:hover .p-autocomplete-dropdown.p-button,
@@ -2642,16 +2635,6 @@ li.header-li-px {
   border-color: var(--primary-color);
 }
 
-/* Hide right shadow of input and left shadow of button to make them merge */
-.solid-standard-autocomplete .p-inputtext:focus {
-  /* box-shadow: 0 0 0 0.2rem #d3b5f5, inset -2px 0 0 #fff, inset 2px 0 0 transparent; */
-}
-
-.solid-standard-autocomplete .p-inputtext:focus+.p-button {
-  /* box-shadow: 0 0 0 0.2rem #d3b5f5, inset -2px 0 0 transparent, inset 2px 0 0 #fff; */
-  border-color: #d1d5db !important;
-}
-
 .solid-dialog .p-dialog-content {
   padding: 0 !important;
   border-radius: 0;
@@ -2714,13 +2697,11 @@ li.header-li-px {
 }
 
 .solid-custom-editor .ql-toolbar.ql-snow {
-  border: 1px solid #d1d5db;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
 
 .solid-custom-editor .ql-container.ql-snow {
-  border: 1px solid #d1d5db;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
@@ -2760,8 +2741,6 @@ li.header-li-px {
 } */
 
 .solid-column-panel.p-panel .p-panel-header {
-  border: 1px solid rgba(216, 226, 234, 0.40);
-  background: #F9F9F9;
   color: var(--solid-form-title);
   border-top-right-radius: 0.5rem;
   border-top-left-radius: 0.5rem;
@@ -2772,7 +2751,6 @@ li.header-li-px {
 }
 
 .solid-column-panel.p-panel .p-panel-content {
-  border: 1px solid rgba(216, 226, 234, 0.40);
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   border-top: 0;
@@ -2963,35 +2941,20 @@ li.header-li-px {
 .solid-kanban-card {
   box-shadow: none;
   border-radius: 0.5rem;
-  border: 1px solid #E0E0E0;
-  background: #FAFAFA;
   padding: 9px;
   transition: 0.2s linear;
 }
 
-.solid-kanban-card:hover {
-  border: 1px solid #722ED1;
-  background: #F9F0FF;
-}
-
 .solid-media-card {
   box-shadow: none;
   border-radius: 0.5rem;
-  border: 1px solid #E0E0E0;
-  background: #FAFAFA;
   padding: 9px;
   height: 100%;
   transition: 0.2s linear;
 }
 
-.solid-media-card:hover {
-  border: 1px solid #722ED1;
-  background: #F9F0FF;
-}
-
 .solid-mimetype-chip {
   border-radius: 0.25rem;
-  background: #F0F0F0;
   padding: 0.25rem 0.5rem;
   color: var(--secondary-dark-color);
   font-size: 12px;
@@ -3015,10 +2978,8 @@ li.header-li-px {
   align-items: center;
   flex-shrink: 0;
   border-radius: 6.25rem;
-  background: #F6FAFF;
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--primary-color);
 }
 
 .kanban-image-preview {
@@ -3031,10 +2992,8 @@ flex-shrink: 0; */
   max-height: 120px;
   object-fit: contain;
   /* box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; */
-  background-color: #fff;
 }
 
-
 .kanban-media-image-preview {
   /* width: 100px; */
   /* width: 240px;
@@ -3044,7 +3003,6 @@ flex-shrink: 0; */
   border-radius: 8px;
   height: 145px;
   object-fit: contain;
-  background-color: #fff;
 }
 
 .kanban-media-view-card {
@@ -3052,19 +3010,12 @@ flex-shrink: 0; */
   border-radius: 8px;
   height: 145px;
   object-fit: contain;
-  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.kanban-image-preview:hover {
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-}
-
-
 .solid-kanban-board-wrapper {
-  border-top: 1px solid #CED0D6;
   overflow: hidden;
   height: calc(100vh - 65px) !important;
 }
@@ -3088,7 +3039,6 @@ flex-shrink: 0; */
 }
 
 .view-widget-chip.p-chip {
-  background-color: #f9f9f9 !important;
   padding: 4px 10px !important;
 }
 
@@ -3097,8 +3047,6 @@ flex-shrink: 0; */
   margin-bottom: 0 !important;
 }
 
-
-
 .solid-global-search-element input {
 
   min-width: 300px;

package/src/resources/stylesheets/_menu.scss

@@ -177,9 +177,4 @@
     object-fit: contain;
     height: 30px;
     width: 30px;
-}
-
-.active-menu-image {
-    background-color: #EFF1F4;
-    border-radius: 4px;
 }