update icons

This commit is contained in:
Sidney Alcantara
2021-08-27 13:35:05 +10:00
parent 9954edfc1d
commit 87a8fe3093
36 changed files with 276 additions and 226 deletions

View File

@@ -1,9 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiTableColumnPlusAfter } from "@mdi/js";
export default function AddColumn(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M13,4 L3,4 L3,21 L13,21 L13,4 Z M11,16 L11,19 L5,19 L5,16 L11,16 Z M20,8 L18,8 L18,11 L15,11 L15,13 L18,13 L18,16 L20,16 L20,13 L23,13 L23,11 L20,11 L20,8 Z M11,11 L11,14 L5,14 L5,11 L11,11 Z M11,6 L11,9 L5,9 L5,6 L11,6 Z" />
<SvgIcon {...props}>
<path d={mdiTableColumnPlusAfter} />
</SvgIcon>
);
}

View File

@@ -1,9 +0,0 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddColumnCircle(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 8H7v17h10V8zm-2 12v3H9v-3h6zm9-8h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm-9 3v3H9v-3h6zm0-5v3H9v-3h6z" />
</SvgIcon>
);
}

View File

@@ -2,8 +2,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddRow(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 26 26" {...props}>
<path d="M14,17 L12,17 L12,20 L9,20 L9,22 L12,22 L12,25 L14,25 L14,22 L17,22 L17,20 L14,20 L14,17 Z M26,8 L0,8 L0,15 L26,15 L26,8 Z M8,10 L8,13 L2,13 L2,10 L8,10 Z M16,10 L16,13 L10,13 L10,10 L16,10 Z M24,10 L24,13 L18,13 L18,10 L24,10 Z" />
<SvgIcon viewBox="0 -1 24 24" {...props}>
<path d="M11 13h2v3h3v2h-3v3h-2v-3H8v-2h3v-3zm11-4a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v3M4 9h4V6H4v3m6 0h4V6h-4v3m6 0h4V6h-4v3z" />
</SvgIcon>
);
}

View File

@@ -1,9 +0,0 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddRowCircle(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 20h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm12-9H3v7h26v-7zm-18 2v3H5v-3h6zm8 0v3h-6v-3h6zm8 0v3h-6v-3h6z" />
</SvgIcon>
);
}

View File

@@ -3,7 +3,7 @@ import { mdiBackburger } from "@mdi/js";
export default function Backburger(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiBackburger} />
</SvgIcon>
);

View File

@@ -1,9 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiArrowSplitVertical } from "@mdi/js";
export default function FileDownload(props: SvgIconProps) {
export default function CellResize(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M23 15h-2v2h2v-2zm0-4h-2v2h2v-2zm0 8h-2v2c1 0 2-1 2-2zM15 3h-2v2h2V3zm8 4h-2v2h2V7zm-2-4v2h2c0-1-1-2-2-2zM3 21h8v-6H1v4c0 1.1.9 2 2 2zM3 7H1v2h2V7zm12 12h-2v2h2v-2zm4-16h-2v2h2V3zm0 16h-2v2h2v-2zM3 3C2 3 1 4 1 5h2V3zm0 8H1v2h2v-2zm8-8H9v2h2V3zM7 3H5v2h2V3z" />
<SvgIcon {...props}>
<path d={mdiArrowSplitVertical} />
</SvgIcon>
);
}

View File

@@ -1,7 +1,7 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiFileTree } from "@mdi/js";
export default function CloudLog(props: SvgIconProps) {
export default function CloudLogs(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d={mdiFileTree} />

View File

@@ -1,12 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiTableColumnPlusAfter } from "@mdi/js";
export default function FileDownload(props: SvgIconProps) {
export default function ColumnPlusAfter(props: SvgIconProps) {
return (
<SvgIcon viewBox="-2 -2 24 24" {...props}>
<path
fillRule="nonzero"
d="M9 0a2 2 0 012 2v16a2 2 0 01-2 2H0V0h9M2 8v4h7V8H2m0 6v4h7v-4H2M2 2v4h7V2H2m11 7h3V6h2v3h3v2h-3v3h-2v-3h-3V9z"
/>
<SvgIcon {...props}>
<path d={mdiTableColumnPlusAfter} />
</SvgIcon>
);
}

View File

@@ -1,12 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiTableColumnPlusBefore } from "@mdi/js";
export default function FileDownload(props: SvgIconProps) {
export default function ColumnPlusBefore(props: SvgIconProps) {
return (
<SvgIcon viewBox="-2 -2 24 24" {...props}>
<path
fillRule="nonzero"
d="M12 0a2 2 0 00-2 2v16a2 2 0 002 2h9V0h-9m7 8v4h-7V8h7m0 6v4h-7v-4h7m0-12v4h-7V2h7M8 9H5V6H3v3H0v2h3v3h2v-3h3V9z"
/>
<SvgIcon {...props}>
<path d={mdiTableColumnPlusBefore} />
</SvgIcon>
);
}

View File

@@ -1,12 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiTableColumnRemove } from "@mdi/js";
export default function FileDownload(props: SvgIconProps) {
export default function ColumnRemove(props: SvgIconProps) {
return (
<SvgIcon viewBox="-2 -2 24 24" {...props}>
<path
fillRule="nonzero"
d="M2 0h7a2 2 0 012 2v16a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2m0 8v4h7V8H2m0 6v4h7v-4H2M2 2v4h7V2H2m13.59 8L13 7.41 14.41 6 17 8.59 19.59 6 21 7.41 18.41 10 21 12.59 19.59 14 17 11.41 14.41 14 13 12.59 15.59 10z"
/>
<SvgIcon {...props}>
<path d={mdiTableColumnRemove} />
</SvgIcon>
);
}

View File

@@ -2,11 +2,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function ConnectTable(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 7" {...props}>
<path
d="M0 7V0h16v7H0zm7-5H2v3h5V2zm7 0H9v3h5V2zM24 3.5L19 6V1z"
fillRule="nonzero"
/>
<SvgIcon {...props}>
<path d="M20 8v7l4-3.5L20 8zM4 8h12a2 2 0 012 2v3a2 2 0 01-2 2H4a2 2 0 01-2-2v-3a2 2 0 012-2zm0 5h5v-3H4v3m7 0h5v-3h-5v3" />
</SvgIcon>
);
}

View File

@@ -1,10 +0,0 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiResizeBottomRight } from "@mdi/js";
export default function Derivative(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d={mdiResizeBottomRight} />
</SvgIcon>
);
}

View File

@@ -1,10 +0,0 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiCircleHalfFull } from "@mdi/js";
export default function DarkTheme(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d={mdiCircleHalfFull} />
</SvgIcon>
);
}

View File

@@ -3,7 +3,7 @@ import { mdiFunctionVariant } from "@mdi/js";
export default function Derivative(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiFunctionVariant} />
</SvgIcon>
);

View File

@@ -3,7 +3,7 @@ import { mdiPuzzleOutline } from "@mdi/js";
export default function Extension(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiPuzzleOutline} />
</SvgIcon>
);

View File

@@ -3,7 +3,7 @@ import { mdiUpload } from "@mdi/js";
export default function FileUpload(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiUpload} />
</SvgIcon>
);

View File

@@ -1,9 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiIdentifier } from "@mdi/js";
export default function Id(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0.5 24 24" {...props}>
<path d="M10,7 L10,9 L9,9 L9,15 L10,15 L10,17 L6,17 L6,15 L7,15 L7,9 L6,9 L6,7 L10,7 Z M16,7 C17.1045695,7 18,7.8954305 18,9 L18,9 L18,15 C18,16.1045695 17.1045695,17 16,17 L16,17 L12,17 L12,7 Z M16,9 L14,9 L14,15 L16,15 L16,9 Z" />
<SvgIcon {...props}>
<path d={mdiIdentifier} />
</SvgIcon>
);
}

View File

@@ -1,9 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiCodeJson } from "@mdi/js";
export default function Json(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z" />
<SvgIcon {...props}>
<path d={mdiCodeJson} />
</SvgIcon>
);
}

View File

@@ -1,9 +1,10 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiFormatListBulletedSquare } from "@mdi/js";
export default function MultiSelect(props: SvgIconProps) {
return (
<SvgIcon viewBox="-3 -3 24 20" {...props}>
<path d="M0 8h2V6H0v2zm0 6h2v-2H0v2zM0 2h2V0H0v2zm4 6h14V6H4v2zm0 6h14v-2H4v2zM4 0v2h14V0H4z" />
<SvgIcon {...props}>
<path d={mdiFormatListBulletedSquare} />
</SvgIcon>
);
}

View File

@@ -3,7 +3,7 @@ import { mdiNumeric } from "@mdi/js";
export default function Number(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiNumeric} />
</SvgIcon>
);

View File

@@ -0,0 +1,9 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function SingleSelect(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d="M5 14a2 2 0 100-4 2 2 0 000 4zm4-9v2h12V5H9m0 6v2h12v-2H9m0 6v2h12v-2H9" />
</SvgIcon>
);
}

View File

@@ -3,7 +3,7 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function Slider(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 2 24 20" {...props}>
<path d="M8.999 9c1.306 0 2.417.835 2.83 2H21v2h-9.172a3.001 3.001 0 01-5.658 0H2.999v-2h3.17A3.001 3.001 0 019 9zm0 2a1 1 0 100 2 1 1 0 000-2z" />
<path d="M10 9c1.306 0 2.418.835 2.83 2H21v2h-8.171a3.001 3.001 0 01-5.658 0H3v-2h4.17A3.001 3.001 0 0110 9z" />
</SvgIcon>
);
}

View File

@@ -3,7 +3,7 @@ import { mdiPulse } from "@mdi/js";
export default function Status(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiPulse} />
</SvgIcon>
);

View File

@@ -2,11 +2,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function SubTable(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 12" {...props}>
<path
d="M16 12H0V0h16v12zM7 7H2v3h5V7zm7 0H9v3h5V7zM7 2H2v3h5V2zm7 0H9v3h5V2zM24 6.5L19 9V4z"
fillRule="nonzero"
/>
<SvgIcon {...props}>
<path d="M20 9v7l4-3.5L20 9zM4 5h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2zm0 7h5V9H4v3m0 5h5v-3H4v3m7-5h5V9h-5v3m0 5h5v-3h-5v3" />
</SvgIcon>
);
}

View File

@@ -1,10 +1,9 @@
import * as React from "react";
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
import { mdiUpload } from "@mdi/js";
export default function Upload(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<SvgIcon {...props}>
<path d={mdiUpload} />
</SvgIcon>
);

View File

@@ -7,11 +7,10 @@ import {
Grid,
IconButton,
List,
ListItem,
MenuItem,
ListItemIcon,
ListItemText,
} from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import CloseIcon from "assets/icons/Backburger";
import AddIcon from "@material-ui/icons/Add";
@@ -49,28 +48,6 @@ const useStyles = makeStyles((theme) =>
height: "100%",
},
listItem: {
color: theme.palette.text.secondary,
// minHeight: 48,
transition: theme.transitions.create(["background-color", "color"]),
"& $listItemIcon": { transition: theme.transitions.create("color") },
},
listItemSelected: {
"&&, &&:hover": {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity
),
},
},
listItemIcon: {},
listItemText: {
// ...theme.typography.button,
display: "block",
color: "inherit",
},
createTable: { marginTop: "auto" },
})
);
@@ -126,41 +103,26 @@ export default function NavDrawer({
{sections &&
Object.keys(sections).map((section) => (
<li key={section}>
<ListItem
button
<MenuItem
component="a"
href={`#${section}`}
selected={
section === decodeURIComponent(hash.replace("#", ""))
}
classes={{
root: classes.listItem,
selected: classes.listItemSelected,
}}
onClick={isSm ? (props.onClose as any) : undefined}
>
<ListItemText
primary={section}
classes={{ primary: classes.listItemText }}
/>
</ListItem>
<ListItemText primary={section} />
</MenuItem>
</li>
))}
<li className={classes.createTable}>
<ListItem
button
onClick={handleCreateTable}
classes={{ root: classes.listItem }}
>
<MenuItem onClick={handleCreateTable}>
<ListItemIcon>
<AddIcon />
</ListItemIcon>
<ListItemText
primary="Create Table"
classes={{ primary: classes.listItemText }}
/>
</ListItem>
<ListItemText primary="Create Table" />
</MenuItem>
</li>
</List>
</nav>

View File

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme) =>
width: "100%",
textAlign: "center",
},
progress: { color: theme.palette.text.secondary },
progress: { color: theme.palette.action.active },
content: { maxWidth: "25em" },
message: { marginTop: theme.spacing(1) },
})

View File

@@ -7,7 +7,7 @@ import {
Grid,
IconButton,
List,
ListItem,
MenuItem,
ListItemIcon,
ListItemText,
Divider,
@@ -40,20 +40,6 @@ const useStyles = makeStyles((theme) =>
},
logo: { marginLeft: theme.spacing(1.5) },
listItem: {
color: theme.palette.text.secondary,
// minHeight: 48,
transition: theme.transitions.create(["background-color", "color"]),
"& $listItemIcon": { transition: theme.transitions.create("color") },
},
listItemIcon: {},
listItemText: {
...theme.typography.body2,
fontWeight: theme.typography.fontWeightMedium,
display: "block",
color: "inherit",
},
divider: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
@@ -103,20 +89,12 @@ export default function NavDrawer({
<nav>
<List>
<li>
<ListItem
button
classes={{ root: classes.listItem }}
component={Link}
to={routes.home}
>
<ListItemIcon className={classes.listItemIcon}>
<MenuItem component={Link} to={routes.home}>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText
primary="Home"
classes={{ primary: classes.listItemText }}
/>
</ListItem>
<ListItemText primary="Home" />
</MenuItem>
</li>
<Divider variant="middle" className={classes.divider} />

View File

@@ -3,14 +3,7 @@ import { Link } from "react-router-dom";
import clsx from "clsx";
import { makeStyles, createStyles } from "@material-ui/styles";
import {
List,
MenuItem,
// ListItemIcon,
ListItemText,
Collapse,
} from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import { List, MenuItem, ListItemText, Collapse } from "@material-ui/core";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { Table } from "contexts/FiretableContext";
@@ -19,30 +12,19 @@ import { routes } from "constants/routes";
const useStyles = makeStyles((theme) =>
createStyles({
listItem: {
// color: theme.palette.text.primary,
width: `calc(100% - ${theme.spacing(2)})`,
margin: theme.spacing(0, 1),
padding: theme.spacing(0.75, 0.25, 0.75, 1),
},
listItemSelected: {
"&&, &&:hover": {
backgroundColor: theme.palette.action.selected,
// color: theme.palette.primary.main,
// backgroundColor: alpha(
// theme.palette.primary.main,
// theme.palette.action.selectedOpacity
// ),
},
"&&, &&:hover": { backgroundColor: theme.palette.action.selected },
"$listItem&:before": {
top: (36 - 16) / 2,
// right: 0,
// left: "auto",
},
},
listItemIcon: {},
listItemText: {
...theme.typography.body2,
// ...theme.typography.button,
display: "block",
color: "inherit",
},
@@ -59,7 +41,6 @@ const useStyles = makeStyles((theme) =>
},
childListItemText: {
...theme.typography.body2,
// fontWeight: theme.typography.fontWeightMedium,
display: "block",
color: "inherit",
},

View File

@@ -107,6 +107,8 @@ export default function UserMenu(props: IconButtonProps) {
break;
}
setThemeOverridden(true);
setThemeSubMenu(null);
setOpen(false);
};
return (

View File

@@ -6,6 +6,7 @@ import {
TextFieldProps,
} from "@material-ui/core";
import { FIELDS } from "components/fields";
import { FieldType } from "constants/fields";
import { getFieldProp } from "components/fields";
@@ -45,10 +46,8 @@ export default function FieldsDropdown({
const classes = useStyles();
const options = optionsProp
? Object.values(FieldType).filter(
(fieldType) => optionsProp.indexOf(fieldType) > -1
)
: Object.values(FieldType);
? FIELDS.filter((fieldConfig) => optionsProp.indexOf(fieldConfig.type) > -1)
: FIELDS;
return (
<TextField
@@ -64,16 +63,16 @@ export default function FieldsDropdown({
FormHelperTextProps={{ classes: { root: classes.helperText } }}
className={className}
>
{options.map((fieldType) => (
{options.map((fieldConfig) => (
<MenuItem
key={`select-field-${getFieldProp("name", fieldType)}`}
id={`select-field-${fieldType}`}
value={fieldType}
key={`select-field-${fieldConfig.type}`}
id={`select-field-${fieldConfig.type}`}
value={fieldConfig.type}
>
<ListItemIcon className={classes.listItemIcon}>
{getFieldProp("icon", fieldType)}
{fieldConfig.icon}
</ListItemIcon>
{getFieldProp("name", fieldType)}
{fieldConfig.name}
</MenuItem>
))}
</TextField>

View File

@@ -23,7 +23,7 @@ const Settings = lazy(
export const config: IFieldConfig = {
type: FieldType.connectService,
name: "Connect Table",
name: "Connect Service",
dataType: "{ docPath: string; snapshot: Record<string, any>; }",
initialValue: [],
icon: <ConnectServiceIcon />,

View File

@@ -2,7 +2,7 @@ import { lazy } from "react";
import { IFieldConfig, FieldType } from "components/fields/types";
import withPopoverCell from "../_withTableCell/withPopoverCell";
import SingleSelectIcon from "@material-ui/icons/FormatListBulleted";
import SingleSelectIcon from "assets/icons/SingleSelect";
import BasicCell from "../_BasicCell/BasicCellNull";
import InlineCell from "./InlineCell";
import NullEditor from "components/Table/editors/NullEditor";

View File

@@ -73,10 +73,10 @@ export const FIELDS: IFieldConfig[] = [
Action,
Derivative,
Aggregate,
Status,
// FIRETABLE
User,
Id,
Status,
];
/**

View File

@@ -20,6 +20,8 @@ import {
Paper,
MenuList,
MenuItem,
ListItemIcon,
ListItemText,
Divider,
ListSubheader,
Slider,
@@ -182,89 +184,239 @@ export default function TestView() {
</Table>
<Stack spacing={1} direction="row" alignItems="center">
<Button size="small">Button</Button>
<Button size="medium">Button</Button>
<Button size="large">Button</Button>
<Button color="secondary" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
size="small"
>
Button
</Button>
<Button color="secondary" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
size="medium"
>
Button
</Button>
<Button color="secondary" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
size="large"
>
Button
</Button>
<Button disabled size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
size="small"
>
Button
</Button>
<Button disabled size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
size="medium"
>
Button
</Button>
<Button disabled size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
size="large"
>
Button
</Button>
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
size="small"
>
Button
</Button>
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
size="medium"
>
Button
</Button>
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
size="large"
>
Button
</Button>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Button variant="outlined" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="outlined"
size="small"
>
Button
</Button>
<Button variant="outlined" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="outlined"
size="medium"
>
Button
</Button>
<Button variant="outlined" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="outlined"
size="large"
>
Button
</Button>
<Button color="secondary" variant="outlined" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="outlined"
size="small"
>
Button
</Button>
<Button color="secondary" variant="outlined" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="outlined"
size="medium"
>
Button
</Button>
<Button color="secondary" variant="outlined" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="outlined"
size="large"
>
Button
</Button>
<Button disabled variant="outlined" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="outlined"
size="small"
>
Button
</Button>
<Button disabled variant="outlined" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="outlined"
size="medium"
>
Button
</Button>
<Button disabled variant="outlined" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="outlined"
size="large"
>
Button
</Button>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Button variant="contained" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="contained"
size="small"
>
Button
</Button>
<Button variant="contained" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="contained"
size="medium"
>
Button
</Button>
<Button variant="contained" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
variant="contained"
size="large"
>
Button
</Button>
<Button color="secondary" variant="contained" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="contained"
size="small"
>
Button
</Button>
<Button color="secondary" variant="contained" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="contained"
size="medium"
>
Button
</Button>
<Button color="secondary" variant="contained" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
color="secondary"
variant="contained"
size="large"
>
Button
</Button>
<Button disabled variant="contained" size="small">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="contained"
size="small"
>
Button
</Button>
<Button disabled variant="contained" size="medium">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="contained"
size="medium"
>
Button
</Button>
<Button disabled variant="contained" size="large">
<Button
startIcon={<SparkIcon />}
endIcon={<SparkIcon />}
disabled
variant="contained"
size="large"
>
Button
</Button>
</Stack>
@@ -525,6 +677,12 @@ export default function TestView() {
<ListSubheader>Subheader</ListSubheader>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>
<ListItemIcon>
<SparkIcon />
</ListItemIcon>
<ListItemText primary="With Icon" />
</MenuItem>
<Divider variant="middle" />
<MenuItem>Logout</MenuItem>
</MenuList>

View File

@@ -182,11 +182,12 @@ export const components = (theme: Theme): ThemeOptions => {
},
},
MuiMenuItem: {
defaultProps: { dense: true },
styleOverrides: {
root: {
width: `calc(100% - ${theme.spacing(1)})`,
margin: theme.spacing(0, 0.5),
padding: theme.spacing(0.75, 0.75, 0.75, 1.5),
padding: theme.spacing(0.5, 0.75, 0.5, 1.5),
minHeight: 32,
borderRadius: theme.shape.borderRadius,
@@ -206,13 +207,17 @@ export const components = (theme: Theme): ThemeOptions => {
},
},
"& .MuiListItemIcon-root": {
minWidth: 40,
"& svg": { fontSize: "1.5rem" },
},
"& + .MuiDivider-root": {
marginTop: theme.spacing(0.5),
marginBottom: theme.spacing(0.5),
},
},
},
defaultProps: { dense: true },
},
MuiListSubheader: {
defaultProps: { disableSticky: true },
@@ -244,6 +249,7 @@ export const components = (theme: Theme): ThemeOptions => {
minHeight: 32,
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
"& .MuiButton-iconSizeMedium > *:nth-of-type(1)": { fontSize: 24 },
},
sizeSmall: {
minHeight: 28,
@@ -254,6 +260,7 @@ export const components = (theme: Theme): ThemeOptions => {
minHeight: 48,
fontSize: "1rem",
borderRadius: (theme.shape.borderRadius as number) * (16 / 14),
"& .MuiButton-iconSizeLarge > *:nth-of-type(1)": { fontSize: 24 },
},
outlined: {