ExpandableCard

src/components/Card/ExpandableCard.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styles from "./styles";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Collapse,
+  Avatar,
+  IconButton
+} from "@material-ui/core";
+import clsx from "clsx";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+const useStyles = makeStyles(styles);
+
+const ExpandableCard = ({
+  Icon,
+  iconVariant,
+  title,
+  subtitle,
+  smallHeader,
+  expandable,
+  Summary,
+  Actions,
+  Content
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const classes = useStyles();
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar
+            aria-label="recipe"
+            className={smallHeader ? classes.avatarSmall : classes.avatar}
+            variant={iconVariant || "circle"}
+          >
+            {Icon}
+          </Avatar>
+        }
+        action={
+          <>
+            {expandable && (
+              <IconButton
+                className={clsx(classes.expand, {
+                  [classes.expandOpen]: expanded
+                })}
+                onClick={handleExpandClick}
+                aria-expanded={expanded}
+                aria-label="show more"
+                size={smallHeader ? "small" : "medium"}
+              >
+                <ExpandMoreIcon />
+              </IconButton>
+            )}
+          </>
+        }
+        title={<strong>{title}</strong>}
+        subheader={subtitle}
+      />
+      {Summary && <CardContent>{Summary}</CardContent>}
+      {Actions && <CardActions>{Actions}</CardActions>}
+      {expandable && Content && (
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <CardContent>{Content}</CardContent>
+        </Collapse>
+      )}
+    </Card>
+  );
+};
+
+ExpandableCard.defaultProps = {
+  expandable: true
+};
+
+ExpandableCard.propTypes = {
+  Icon: PropTypes.node.isRequired,
+  iconVariant: PropTypes.oneOf(["circle", "circular", "rounded", "square"]),
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  smallHeader: PropTypes.bool,
+  expandable: PropTypes.bool,
+  Summary: PropTypes.node,
+  Actions: PropTypes.node,
+  Content: PropTypes.node
+};
+
+export default ExpandableCard;

src/components/Card/styles.js

@@ -0,0 +1,22 @@
+const styles = (theme) => ({
+  expand: {
+    transform: "rotate(0deg)",
+    marginLeft: "auto",
+    transition: theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  expandOpen: {
+    transform: "rotate(180deg)"
+  },
+  avatar: {
+    backgroundColor: theme.palette.primary.main
+  },
+  avatarSmall: {
+    backgroundColor: theme.palette.primary.main,
+    width: theme.spacing(3),
+    height: theme.spacing(3)
+  }
+});
+
+export default styles;

src/pages/settings/appearance/components/AppearancePage.js

@@ -6,12 +6,13 @@ import PageTitle from "../../../../components/PageTitle";
 import LanguageContainer from "./LanguageContainer";
 import TextField from "@material-ui/core/TextField";
 import Autocomplete from "@material-ui/lab/Autocomplete";
-import SaveIcon from "@material-ui/icons/Save";
+import {
+  Save as SaveIcon,
+  Vibration as VibrationIcon
+} from "@material-ui/icons";
+import ExpandableCard from "../../../../components/Card/ExpandableCard";
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    minWidth: 275
-  },
   formControl: {
     margin: theme.spacing(1),
     width: 300
@@ -32,24 +33,31 @@ const AppearancePage = () => {
   return (
     <>
       <PageTitle title={t("Menu.Appearance")} />
-      <Card className={classes.root}>
-        <CardContent>
-          <LanguageContainer />
-          <br />
-          <Autocomplete
-            id="settings.appearance.theme.autocomplete"
-            size="small"
-            options={themes}
-            value={state.theme}
-            onChange={handleThemeChange}
-            getOptionLabel={(option) => option}
-            className={classes.formControl}
-            renderInput={(params) => (
-              <TextField {...params} label="Theme" variant="outlined" />
-            )}
-          />
-        </CardContent>
-        <CardActions>
+
+      <ExpandableCard
+        Icon={<VibrationIcon />}
+        title={t("Forward.Options.KeyOverwrite.Label")}
+        subtitle={t("Forward.Options.KeyOverwrite.Tooltip")}
+        expandable={false}
+        Summary={
+          <>
+            <LanguageContainer />
+            <br />
+            <Autocomplete
+              id="settings.appearance.theme.autocomplete"
+              size="small"
+              options={themes}
+              value={state.theme}
+              onChange={handleThemeChange}
+              getOptionLabel={(option) => option}
+              className={classes.formControl}
+              renderInput={(params) => (
+                <TextField {...params} label="Theme" variant="outlined" />
+              )}
+            />
+          </>
+        }
+        Actions={
           <Button
             variant="contained"
             color="primary"
@@ -58,8 +66,8 @@ const AppearancePage = () => {
           >
             Save
           </Button>
-        </CardActions>
-      </Card>
+        }
+      />
     </>
   );
 };