Refactor announcement components and styles
parent
cbca462893
commit
4ab78e51cd
|
@ -1,17 +1,16 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { makeStyles } from "@mui/material/styles";
|
|
||||||
import { Alert, AlertTitle } from "@mui/material";
|
import { Alert, AlertTitle } from "@mui/material";
|
||||||
import styles from "../styles";
|
import { getStyles } from "../styles";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useTheme } from "@mui/material/styles";
|
||||||
const useStyles = makeStyles(styles);
|
|
||||||
|
|
||||||
export default function GuestAnnouncement() {
|
export default function GuestAnnouncement() {
|
||||||
const classes = useStyles();
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const theme = useTheme();
|
||||||
|
const styles = getStyles(theme);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.alert}>
|
<div style={styles.alert}>
|
||||||
<Alert variant="outlined" severity="warning">
|
<Alert variant="outlined" severity="warning">
|
||||||
<AlertTitle>{t("Dashboard.Announcements.Guest.Title")}</AlertTitle>
|
<AlertTitle>{t("Dashboard.Announcements.Guest.Title")}</AlertTitle>
|
||||||
{t("Dashboard.Announcements.Guest.Message")}
|
{t("Dashboard.Announcements.Guest.Message")}
|
||||||
|
|
|
@ -1,19 +1,18 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { makeStyles } from "@mui/material/styles";
|
|
||||||
import { Alert, AlertTitle } from "@mui/material";
|
import { Alert, AlertTitle } from "@mui/material";
|
||||||
import styles from "../styles";
|
import { getStyles } from "../styles";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useTuitioUser } from "@flare/tuitio-client-react";
|
import { useTuitioUser } from "@flare/tuitio-client-react";
|
||||||
|
import { useTheme } from "@mui/material/styles";
|
||||||
const useStyles = makeStyles(styles);
|
|
||||||
|
|
||||||
export default function UserAnnouncement() {
|
export default function UserAnnouncement() {
|
||||||
const classes = useStyles();
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { userName } = useTuitioUser();
|
const { userName } = useTuitioUser();
|
||||||
|
const theme = useTheme();
|
||||||
|
const styles = getStyles(theme);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.alert}>
|
<div style={styles.alert}>
|
||||||
<Alert variant="outlined" severity="info">
|
<Alert variant="outlined" severity="info">
|
||||||
<AlertTitle>
|
<AlertTitle>
|
||||||
{t("Dashboard.Announcements.User.Title", {
|
{t("Dashboard.Announcements.User.Title", {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
const styles = theme => ({
|
const getStyles = theme => ({
|
||||||
alert: {
|
alert: {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
"& > * + *": {
|
"& > * + *": {
|
||||||
|
@ -7,4 +7,4 @@ const styles = theme => ({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default styles;
|
export { getStyles };
|
||||||
|
|
Loading…
Reference in New Issue