@symply.io/basic-components 1.1.2-beta.2 → 1.1.2-beta.4

package/DataTable/TableFooter.js

@@ -14,9 +14,13 @@ import { cloneElement } from "react";
 import TableRow from "@mui/material/TableRow";
 import Footer from "@mui/material/TableFooter";
 import TableCell from "@mui/material/TableCell";
+import { alpha, useTheme } from "@mui/material/styles";
 function TableFooter(props) {
     var footers = props.footers;
-    return (_jsx(Footer, { children: _jsx(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: footers.map(function (footer) {
+    var theme = useTheme();
+    return (_jsx(Footer, { children: _jsx(TableRow, __assign({ sx: {
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
+            } }, { children: footers.map(function (footer) {
                 var accessor = footer.accessor, Cell = footer.Cell, _a = footer.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = footer.align, align = _b === void 0 ? "center" : _b, width = footer.width;
                 return (_jsx(TableCell, __assign({ align: align, padding: disablePadding ? "none" : "normal", sx: {
                         width: width,

package/DataTable/TableHeader.js

@@ -14,9 +14,13 @@ import { cloneElement } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableHead from "@mui/material/TableHead";
 import TableCell from "@mui/material/TableCell";
+import { alpha, useTheme } from "@mui/material/styles";
 function TableHeader(props) {
     var headers = props.headers;
-    return (_jsx(TableHead, { children: _jsx(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: headers.map(function (header) {
+    var theme = useTheme();
+    return (_jsx(TableHead, { children: _jsx(TableRow, __assign({ sx: {
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
+            } }, { children: headers.map(function (header) {
                 var accessor = header.accessor, Cell = header.Cell, _a = header.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = header.align, align = _b === void 0 ? "center" : _b, width = header.width, title = header.title, _c = header.sortable, sortable = _c === void 0 ? false : _c, onSort = header.onSort;
                 return (_jsx(TableCell, __assign({ title: title, align: align, padding: disablePadding ? "none" : "normal", sx: {
                         width: width,

package/DataTable/index.js

@@ -22,7 +22,14 @@ function DataTable(props) {
     var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600 }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] }) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, { children: [_jsxs(Table, __assign({ sx: {
+                        minWidth: 600,
+                        borderWidth: "thin",
+                        borderColor: "#e5e5e5",
+                        borderStyle: "solid",
+                        borderRadius: "4px",
+                        borderCollapse: "unset !important"
+                    }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] }) })));
 }
 export default DataTable;
 export { default as useDataTable } from "./useTable";

package/Sidebar/SidebarItem.js

@@ -26,7 +26,9 @@ function SidebarItem(props) {
             display: "flex",
             width: "100%",
             "&:hover": {
-                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                backgroundColor: alpha(theme.palette.primary.main, active
+                    ? theme.palette.action.activatedOpacity
+                    : theme.palette.action.selectedOpacity)
             },
             backgroundColor: active
                 ? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.2-beta.2",
+  "version": "1.1.2-beta.4",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",