@solidstarters/solid-core-ui 1.1.72 → 1.1.74

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

@@ -50,6 +50,7 @@ import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { SolidChatter } from "../chatter/SolidChatter";
+import { SolidFormActionHeader } from "./SolidFormActionHeader";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -353,7 +354,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const router = useRouter();
     const toast = useRef<Toast>(null);
     const searchParams = useSearchParams();
-    const viewModeFromURL = searchParams.get("viewMode");
 
     const [redirectToList, setRedirectToList] = useState(false);
 
@@ -372,15 +372,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const op = useRef(null);
 
     useEffect(() => {
-        if (viewModeFromURL === "edit" || viewModeFromURL === "view") {
-            setViewMode(viewModeFromURL);
-        } else {
-            setViewMode("view"); // Default to 'view' if not present
-        }
+        const mode = searchParams.get('viewMode');
+
         if (params.id === 'new') {
-            setViewMode("edit");
+            setViewMode('edit');
+            return;
+        }
+
+        // Set the viewMode based on the URL
+        if (mode === 'view' || mode === 'edit') {
+            setViewMode(mode);
+        } else {
+            setViewMode('view'); // Default to 'view' if no valid mode is provided
         }
-    }, [viewModeFromURL]);
+    }, [searchParams, params.id]);
 
 
     // function that updates view mode 
@@ -529,12 +534,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
         isEntityUpdateError
     ]);
 
-    const showError = async () => {
-        // Trigger validation and get the updated errors
-        const errors = await formik.validateForm();
-        const errorMessages = Object.values(errors);
-    };
-
     const showToast = (severity: "success" | "error", summary: string, detail: string) => {
         toast.current?.show({
             severity,
@@ -759,9 +758,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
         const solidView = solidFormViewMetaData.data.solidView;
         const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
 
-        const createHeaderTitle = `Create ${solidView.model.displayName}`;
-        const editHeaderTitle = `Edit ${solidView.model.displayName}`;
-
         const validationSchema = {};
         const initialValues = {};
 
@@ -1029,72 +1025,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
         const onDeleteClose = () => {
             setDeleteDialogVisible(false);
         }
-
-        const formActionDropdown = () => {
-            return (
-                <div>
-                    <Button
-                        outlined
-                        severity="secondary"
-                        type="button"
-                        icon={'pi pi-cog'}
-                        size="small"
-                        className="surface-card p-0"
-                        style={{
-                            height: 33.06,
-                            width: 33.06
-                        }}
-                        onClick={(e) =>
-                            // @ts-ignore 
-                            op.current.toggle(e)
-                        }
-                    />
-                    <OverlayPanel ref={op} className="solid-custom-overlay">
-                        <div className="flex flex-column gap-1 p-1">
-                            {/* <Button
-                                text
-                                type="button"
-                                className="w-8rem text-left gap-2 text-color"
-                                label="Duplicate"
-                                size="small"
-                                iconPos="left"
-                                icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                    <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
-                                </svg>}
-                            /> */}
-                            {params.embeded !== true &&
-                                params.id !== "new" &&
-                                actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                <Button
-                                    text
-                                    type="button"
-                                    className="w-8rem text-left gap-2"
-                                    label="Delete"
-                                    size="small"
-                                    iconPos="left"
-                                    severity="danger"
-                                    icon={'pi pi-trash'}
-                                    onClick={() => setDeleteDialogVisible(true)}
-                                />
-                            }
-                            <Button
-                                text
-                                type="button"
-                                className="w-8rem text-left gap-2 purple-200"
-                                label="Layout"
-                                size="small"
-                                iconPos="left"
-                                severity="contrast"
-                                icon={'pi pi-objects-column'}
-                                onClick={() => setLayoutDialogVisible(true)}
-                            />
-                        </div>
-                    </OverlayPanel>
-                </div>
-            )
-        }
-
         // TODO: This was simply to demonstrate how we can use dynamic components, we will remove this and use it in a more sensible way in the layout. 
         // TODO: to demonstrated this you can simply add the below to the layout of the book form view.
         // TODO: "header": "BookFormViewDynamicComponent",
@@ -1109,173 +1039,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 <Toast ref={toast} />
                 <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }} >
                     <form style={{ width: '100%' }} onSubmit={formik.handleSubmit}>
-                        <div className="solid-form-header">
-                            {params.id === "new" ? (
-                                <>
-                                    <div className="flex align-items-center gap-3">
-                                        {params.embeded !== true && <BackButton />}
-                                        <div className="form-wrapper-title"> {createHeaderTitle}</div>
-                                    </div>
-                                    <div className="gap-3 flex">
-                                        {params.embeded !== true &&
-                                            actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                            !formViewLayout.attrs.readonly &&
-                                            formik.dirty &&
-                                            <div>
-                                                <Button
-                                                    label="Save"
-                                                    size="small"
-                                                    onClick={() => showError()}
-                                                    type="submit"
-                                                />
-                                            </div>
-                                        }
-                                        {/* {params.embeded !== true &&
-                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        <div>
-                                            <Button
-                                                label="Save & Close"
-                                                size="small"
-                                                onClick={() => {
-                                                    setRedirectToList(true);
-                                                    showError()
-                                                }}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    } */}
-
-                                        {/* Inline */}
-                                        {params.embeded == true &&
-                                            actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                            !formViewLayout.attrs.readonly &&
-                                            formik.dirty &&
-                                            <div>
-                                                <Button
-                                                    label="Save"
-                                                    size="small"
-                                                    onClick={() => {
-                                                        setRedirectToList(false);
-                                                        showError()
-                                                    }}
-                                                    type="submit"
-                                                />
-                                            </div>
-                                        }
-                                        {params.embeded == true &&
-                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
-
-                                        }
-                                        {params.embeded !== true &&
-                                            <SolidCancelButton />
-                                        }
-                                        {formActionDropdown()}
-                                    </div>
-                                </>
-                            ) : (
-                                <>
-                                    <div className="flex align-items-center gap-3">
-                                        {params.embeded !== true && <BackButton />}
-                                        <div className="form-wrapper-title"> {editHeaderTitle}</div>
-                                    </div>
-                                    <div className="gap-3 flex">
-                                        {params.embeded !== true && viewMode === "view" &&
-                                            <div>
-                                                <Button
-                                                    label="Edit"
-                                                    size="small"
-                                                    onClick={() => updateViewMode("edit")}
-                                                    type="button"
-                                                />
-                                            </div>
-                                        }
-
-                                        {params.embeded !== true &&
-                                            actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                            !formViewLayout.attrs.readonly &&
-                                            formik.dirty &&
-                                            <div>
-                                                <Button
-                                                    label="Save"
-                                                    size="small"
-                                                    onClick={() => showError()}
-                                                    type="submit"
-                                                />
-                                            </div>
-                                        }
-
-                                        {/* Inline */}
-                                        {params.embeded == true &&
-                                            actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                            !formViewLayout.attrs.readonly &&
-                                            formik.dirty &&
-                                            <div>
-                                                <Button
-                                                    label="Save"
-                                                    size="small"
-                                                    onClick={() => showError()}
-                                                    type="submit"
-                                                />
-                                            </div>
-                                        }
-                                        {/* {params.embeded !== true &&
-                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        <div>
-                                            <Button
-                                                label="Save & Close"
-                                                size="small"
-                                                onClick={() => {
-                                                    setRedirectToList(true);
-                                                    showError()
-                                                }}
-                                                type="submit"
-                                            />
-                                        </div>
-                                    } */}
-                                        {params.embeded == true &&
-                                            actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                            !formViewLayout.attrs.readonly &&
-                                            <div>
-                                                <Button
-                                                    size="small"
-                                                    type="button"
-                                                    label="Delete"
-                                                    severity="danger"
-                                                    onClick={() => setDeleteDialogVisible(true)}
-                                                />
-                                            </div>
-                                        }
-                                        {params.embeded == true &&
-                                            <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
-
-                                        }
-                                        {params.embeded !== true &&
-                                            <SolidCancelButton />
-                                        }
-                                        {formActionDropdown()}
-                                    </div>
-                                </>
-                            )}
-                        </div>
-                        {/* {params.embeded !== true &&
-                        <SolidBreadcrumb
-                            solidViewData={solidFormViewMetaData?.data?.solidView?.model}
+                        <SolidFormActionHeader
+                            formik={formik}
+                            params={params}
+                            actionsAllowed={actionsAllowed}
+                            formViewLayout={formViewLayout}
+                            solidView={solidView}
+                            solidFormViewMetaData={solidFormViewMetaData}
                             initialEntityData={initialEntityData}
+                            setDeleteDialogVisible={setDeleteDialogVisible}
+                            setLayoutDialogVisible={setLayoutDialogVisible}
+                            setRedirectToList={setRedirectToList}
+                            viewMode={viewMode}
+                            setViewMode={setViewMode}
                         />
-                    } */}
-                        {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)}
@@ -1304,7 +1081,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     size="small"
                                     className="px-0"
                                     style={{ width: 30 }}
-                                    onClick={() => {setShowChatter(true); setRefreshChatterMessage(true);}}
+                                    onClick={() => { setShowChatter(true); setRefreshChatterMessage(true); }}
                                 />
                             </div>
                             : <SolidChatter solidFormViewMetaData={solidFormViewMetaData} id={params.id} refreshChatterMessage={refreshChatterMessage} setRefreshChatterMessage={setRefreshChatterMessage} />

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

@@ -0,0 +1,41 @@
+import { createPermission } from '@/helpers/permissions'
+import { SolidCreateButton } from '../common/SolidCreateButton'
+import Image from 'next/image'
+
+export const SolidEmptyListViewPlaceholder = ({ createButtonUrl, actionsAllowed, params, solidListViewMetaData }: any) => {
+    const noDataText = solidListViewMetaData?.data?.solidView?.layout?.attrs?.listViewNoDataHelperText
+        ?? (process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_HELPER_TEXT && solidListViewMetaData?.data?.solidView?.displayName
+            ? `${process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_HELPER_TEXT} ${solidListViewMetaData.data.solidView.displayName}`
+            : null)
+    return (
+        <div className="page-parent-wrapper">
+            <div className="page-header">
+                <p className="m-0 view-title">{solidListViewMetaData?.data?.solidView?.displayName}</p>
+            </div>
+            <div className='solid-empty-listview-placeholder-container'>
+                {process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_IMAGE &&
+                    <Image
+                        alt={solidListViewMetaData?.data?.solidView?.displayName}
+                        src={process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_IMAGE}
+                        className='relative'
+                        height={385}
+                        width={617}
+                    />
+                }
+                <div className='text-base font-bold'>
+                    No Data Available.
+                </div>
+                {noDataText &&
+                    <div className='text-sm mt-1'>
+                        {noDataText}
+                    </div>
+                }
+                {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
+                    <div className='mt-2'>
+                        <SolidCreateButton url={createButtonUrl} title={solidListViewMetaData?.data?.solidView?.displayName} />
+                    </div>
+                }
+            </div>
+        </div>
+    )
+}

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

@@ -43,6 +43,8 @@ import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { SolidListViewConfigure } from "./SolidListViewConfigure";
+import { SolidListViewShimmerLoading } from "./SolidListViewShimmerLoading";
+import { SolidEmptyListViewPlaceholder } from "./SolidEmptyListViewPlaceholder";
 
 
 const getRandomInt = (min: number, max: number) => {
@@ -708,6 +710,23 @@ export const SolidListView = (params: SolidListViewParams) => {
     setListViewRowActionPopupState(false)
   }
 
+  if (loading || isLoading) {
+    return <SolidListViewShimmerLoading />;
+  }
+
+  const isListViewEmptyWithoutFilters = !loading && (!filters || Object.keys(filters).length === 0) && listViewData.length === 0;
+
+  if (isListViewEmptyWithoutFilters) {
+    return (
+      <SolidEmptyListViewPlaceholder
+        createButtonUrl={createButtonUrl}
+        actionsAllowed={actionsAllowed}
+        params={params}
+        solidListViewMetaData={solidListViewMetaData}
+      />
+    );
+  }
+
   return (
     <div className="page-parent-wrapper">
       <div className="page-header">
@@ -791,8 +810,9 @@ export const SolidListView = (params: SolidListViewParams) => {
           onSort={(e: DataTableStateEvent) => onSort(e)}
           sortField={sortField}
           sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
-          loading={loading || isLoading}
-          loadingIcon="pi pi-spinner"
+          loading={false}
+          // loading={loading || isLoading}
+          // loadingIcon="pi pi-spinner"
           selection={[...selectedRecords, ...selectedRecoverRecords]}
           onSelectionChange={onSelectionChange}
           selectionMode="checkbox"
@@ -818,7 +838,7 @@ export const SolidListView = (params: SolidListViewParams) => {
               if (typeof window !== "undefined") {
                 sessionStorage.setItem("fromView", "list");
               }
-              router.push(`${editButtonUrl}/${rowData?.id}`);
+              router.push(`${editButtonUrl}/${rowData?.id}?viewMode=view`);
             }
           }}
         >
@@ -848,7 +868,7 @@ export const SolidListView = (params: SolidListViewParams) => {
                           if (params.embeded == true) {
                             params.handlePopUpOpen(selectedSolidViewData?.id);
                           } else {
-                            router.push(`${editButtonUrl}/${selectedSolidViewData?.id}`)
+                            router.push(`${editButtonUrl}/${selectedSolidViewData?.id}?viewMode=edit`)
                           }
                         }}
                       />

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

@@ -100,6 +100,9 @@ export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, colu
     if (fieldMetadata.type === 'richText') {
         return SolidRichTextColumn({ solidListViewMetaData, fieldMetadata, column });
     }
+    if (fieldMetadata.type === 'email') {
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
     if (fieldMetadata.type === 'boolean') {
         return SolidBooleanColumn({ solidListViewMetaData, fieldMetadata, column });
     }

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

@@ -0,0 +1,77 @@
+import { Skeleton } from 'primereact/skeleton'
+import React from 'react'
+
+export const SolidListViewShimmerLoading = () => {
+    const rows = Array.from({ length: 14 });
+    return (
+        <div className='h-screen surface-0'>
+            <div className="page-header">
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="50px" className='border-round-lg'></Skeleton>
+                    <Skeleton width="300px" className='border-round-lg'></Skeleton>
+                </div>
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                </div>
+            </div>
+            <div className='solid-list-skeleton-wrapper'>
+                <table className="solid-list-skeleton-table" style={{ borderCollapse: 'collapse', width: '100%' }}>
+                    <thead>
+                        <tr className="solid-list-skeleton-header">
+                            <th className="solid-list-skeleton-col-1">
+                                <Skeleton width="16px" height='16px' className='border-round-xs' />
+                            </th>
+                            <th className="solid-list-skeleton-col-2">
+                                <Skeleton width="70px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-3">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-4">
+                                <Skeleton width="80px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-5">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-6">
+                                <Skeleton width="100px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-7">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-8">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((_, i) => (
+                            <tr className="solid-list-skeleton-row" key={i}>
+                                <td><Skeleton width="16px" height='16px' className='border-round-xs'/></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton shape="circle" height='15px' width='15px' /></td>
+                                <td><Skeleton width="5px" height='20px' /></td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                <div className='solid-list-skeleton-footer flex align-items-center justify-content-between'>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="5rem" height="1rem"></Skeleton>
+                        <Skeleton width="30px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="70px"></Skeleton>
+                        <Skeleton width="10px" height='15px' className='border-round-sm'></Skeleton>
+                        <Skeleton width="15px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/core/list/widgets/SolidShortTextAvatarWidget.tsx

@@ -46,7 +46,6 @@ export const SolidShortTextAvatarWidget = ({ rowData, solidListViewMetaData, fie
                         justifyContent: 'center',
                         fontWeight: 600,
                         fontSize: 12,
-                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
                     }}
                 >
                     {initials}

package/src/components/layout/AppSidebar.tsx

@@ -188,7 +188,7 @@ const AppSidebar = () => {
                 <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
 
                     <div className="flex relative justify-content-between align-items-center py-4 px-3">
-                        <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>
+                        <div className="text-base sidebar-title font-semibold">{currentMainMenu && currentMainMenu}</div>
                         {/* <button
                             className="sidebar-toggle-button"
                             onClick={handleToggle}
@@ -213,7 +213,7 @@ const AppSidebar = () => {
                             />
                         </div>
                     </div> */}
-                    <div className="px-3">
+                    <div className="px-3 solid-sidebar-menuitems-wrapper">
                         <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
                     </div>
                 </div>

package/src/resources/globals.css

@@ -3112,7 +3112,84 @@ flex-shrink: 0; */
 }
 
 .solid-global-search-element input {
-
   min-width: 300px;
+}
+
+.solid-empty-listview-placeholder-container {
+  border-top: 1px solid var(--primary-light-color) !important;
+  height: calc(100vh - 54px);
+  background-color: var(--solid-list-view-placeholder);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.solid-list-skeleton-wrapper {
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.solid-list-skeleton-col-1 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-2 {
+  width: 120px;
+}
+
+.solid-list-skeleton-col-8 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-3,
+.solid-list-skeleton-col-4,
+.solid-list-skeleton-col-5,
+.solid-list-skeleton-col-6 {
+  width: auto;
+}
+
+.solid-list-skeleton-header th {
+  border-top: 1px solid #CED0D6;
+  border-bottom: 1px solid #CED0D6;
+  text-align: left;
+  padding: 8px 15px;
+  height: 45px;
+  position: relative;
+}
+
+.solid-list-skeleton-header th::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 60%;
+  width: 0.0625rem;
+  background-color: #D8E2EA
+}
+
+.solid-list-skeleton-row td {
+  border-bottom: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 8px 15px;
+  height: 45px;
+  vertical-align: middle;
+}
 
+.solid-list-skeleton-row td .p-skeleton {
+  height: 1rem;
+  /* Set skeleton height to 0.75rem */
+}
+
+.solid-list-skeleton-footer {
+  border-top: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 20px;
+}
+
+.solid-sidebar-menuitems-wrapper {
+  height: calc(100vh - 64px);
+  overflow-y: auto;
 }

package/src/resources/solid-primereact.css

@@ -1312,7 +1312,7 @@
     }
 
     .p-datatable .p-paginator-bottom {
-        border-width: 1px 0 1px 0;
+        border-width: 1px 0 0 0;
         border-radius: 0;
     }