Refactor announcement components and styles

master
Tudor Stanciu 2024-03-25 02:46:14 +02:00
parent cbca462893
commit 4ab78e51cd
3 changed files with 12 additions and 14 deletions

View File

@ -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")}

View File

@ -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", {

View File

@ -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 };