AppearancePage

src/components/Card/Card.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExpandableCard from "./ExpandableCard";
+
+const Card = (props) => {
+  const { Content, ...input } = props;
+  return <ExpandableCard {...input} Summary={Content} expandable={false} />;
+};
+
+Card.propTypes = {
+  Icon: PropTypes.node.isRequired,
+  iconVariant: PropTypes.oneOf(["circular", "rounded", "square"]),
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  smallHeader: PropTypes.bool,
+  Content: PropTypes.node,
+  Actions: PropTypes.node
+};
+
+export default Card;

src/components/Card/ExpandableCard.js

@@ -42,7 +42,7 @@ const ExpandableCard = ({
           <Avatar
             aria-label="recipe"
             className={smallHeader ? classes.avatarSmall : classes.avatar}
-            variant={iconVariant || "circle"}
+            variant={iconVariant || "circular"}
           >
             {Icon}
           </Avatar>
@@ -84,7 +84,7 @@ ExpandableCard.defaultProps = {
 
 ExpandableCard.propTypes = {
   Icon: PropTypes.node.isRequired,
-  iconVariant: PropTypes.oneOf(["circle", "circular", "rounded", "square"]),
+  iconVariant: PropTypes.oneOf(["circular", "rounded", "square"]),
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
   smallHeader: PropTypes.bool,

src/components/Card/index.js

@@ -0,0 +1,4 @@
+import Card from "./Card";
+import ExpandableCard from "./ExpandableCard";
+
+export { Card, ExpandableCard };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardActions, Button } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import PageTitle from "../../../../components/PageTitle";
 import LanguageContainer from "./LanguageContainer";
@@ -10,7 +10,7 @@ import {
   Save as SaveIcon,
   Vibration as VibrationIcon
 } from "@material-ui/icons";
-import ExpandableCard from "../../../../components/Card/ExpandableCard";
+import { Card } from "../../../../components/Card";
 
 const useStyles = makeStyles((theme) => ({
   formControl: {
@@ -34,12 +34,11 @@ const AppearancePage = () => {
     <>
       <PageTitle title={t("Menu.Appearance")} />
 
-      <ExpandableCard
+      <Card
         Icon={<VibrationIcon />}
         title={t("Forward.Options.KeyOverwrite.Label")}
         subtitle={t("Forward.Options.KeyOverwrite.Tooltip")}
-        expandable={false}
+        Content={
-        Summary={
           <>
             <LanguageContainer />
             <br />