Skip to content

Commit

Permalink
Alteração na estrutura de cores
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh committed Nov 7, 2022
1 parent 5e6a874 commit 4e4a893
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 66 deletions.
1 change: 1 addition & 0 deletions frontend/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
# production
/build
/dist
/src/config.json

# misc
.DS_Store
Expand Down
31 changes: 21 additions & 10 deletions frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { CssBaseline } from "@material-ui/core";
import api from "./services/api";
import toastError from "./errors/toastError";

import lightBackground from "../src/assets/wa-background-light.png";
import darkBackground from "../src/assets/wa-background-dark.jpg";
import lightBackground from "./assets/wa-background-light.png";
import darkBackground from "./assets/wa-background-dark.jpg";
import { system } from "./config.json";

const App = () => {
const [locale, setLocale] = useState();
Expand All @@ -29,8 +30,13 @@ const App = () => {
},
},
palette: {
primary: { main: "#6B62FE" },
secondary: { main: "#F50057" },
primary: { main: system.color.lightTheme.palette.primary || "#6B62FE" },
secondary: { main: system.color.lightTheme.palette.secondary || "#F50057" },
toolbar: { main: system.color.lightTheme.toolbar.background || "#6B62FE" },
menuItens: { main: system.color.lightTheme.menuItens || "#ffffff" },
sub: { main: system.color.lightTheme.sub || "#ffffff" },
toolbarIcon: { main: system.color.lightTheme.toolbarIcon || "#ffffff"},
divide: { main: system.color.lightTheme.divide || "#E0E0E0" },
},
backgroundImage: `url(${lightBackground})`,
},
Expand Down Expand Up @@ -59,15 +65,20 @@ const App = () => {
},
},
palette: {
primary: { main: "#52d869" },
secondary: { main: "#ff9100" },
primary: { main: system.color.darkTheme.palette.primary || "#52d869" },
secondary: { main: system.color.darkTheme.palette.secondary || "#ff9100" },
toolbar: { main: system.color.darkTheme.toolbar.background || "#52d869" },
menuItens: { main: system.color.darkTheme.menuItens || "#181d22" },
sub: { main: system.color.darkTheme.sub || "#181d22" },
toolbarIcon: { main: system.color.darkTheme.toolbarIcon || "#181d22"},
divide: { main: system.color.darkTheme.divide || "#080d14" },
background: {
default: "#080d14",
paper: "#181d22",
default: system.color.darkTheme.palette.background.default || "#080d14",
paper: system.color.darkTheme.palette.background.paper || "#181d22",
},
text: {
primary: "#52d869",
secondary: "#ffffff",
primary: system.color.darkTheme.palette.text.primary || "#52d869",
secondary: system.color.darkTheme.palette.text.secondary || "#ffffff",
},
},
backgroundImage: `url(${darkBackground})`,
Expand Down
42 changes: 42 additions & 0 deletions frontend/src/config.json.example
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{
"system": {
"name": "Press Ticket",
"url": "https://pressticket.com.br",
"color": {
"lightTheme": {
"palette": {
"primary": "#6B62FE",
"secondary": "#F50057"
},
"toolbar": {
"background": "linear-gradient(to right, #6B62FE, #f50057)"
},
"menuItens": "#ffffff",
"sub": "#ffffff",
"toolbarIcon": "#ffffff",
"divide": "#E0E0E0"
},
"darkTheme": {
"palette": {
"primary": "#52d869",
"secondary": "#ff9100",
"background": {
"default": "#080d14",
"paper": "#181d22"
},
"text": {
"primary": "#52d869",
"secondary": "#ffffff"
}
},
"toolbar": {
"background": "linear-gradient(to right, #52d869, #ff9100)"
},
"menuItens": "#181d22",
"sub": "#181d22",
"toolbarIcon": "#181d22",
"divide": "#080d14"
}
}
}
}
106 changes: 67 additions & 39 deletions frontend/src/layout/MainListItems.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,57 @@
import React, { useContext, useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";

import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Divider from "@material-ui/core/Divider";
import { Badge } from "@material-ui/core";
import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
import WhatsAppIcon from "@material-ui/icons/WhatsApp";
import SyncAltIcon from "@material-ui/icons/SyncAlt";
import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
import CodeIcon from '@material-ui/icons/Code';
import MenuBookIcon from '@material-ui/icons/MenuBook';
import VpnKeyRoundedIcon from '@material-ui/icons/VpnKeyRounded';
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import {
Badge,
Divider,
Link,
ListItem,
ListItemIcon,
ListItemText,
ListSubheader,
makeStyles
} from "@material-ui/core";

import {
AccountTreeOutlined,
Code,
ContactPhoneOutlined,
DashboardOutlined,
LocalOffer,
MenuBook,
PeopleAltOutlined,
QuestionAnswerOutlined,
SettingsOutlined,
SyncAlt,
VpnKeyRounded,
WhatsApp
} from "@material-ui/icons";

import { i18n } from "../translate/i18n";
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../context/Auth/AuthContext";
import { Can } from "../components/Can";
import { makeStyles } from "@material-ui/core/styles";
import { systemVersion } from "../../package.json";

const useStyles = makeStyles(theme => ({
icon: {
color: theme.palette.secondary.main
},
icon: {
color: theme.palette.secondary.main
},
li: {
backgroundColor: theme.palette.menuItens.main
},
sub: {
backgroundColor: theme.palette.sub.main
},
divider: {
backgroundColor: theme.palette.divide.main
},
systemCss: {
display: "flex",
justifyContent: "center",
opacity: 0.5,
fontSize: 12
}
}));

function ListItemLink(props) {
Expand All @@ -45,7 +67,7 @@ function ListItemLink(props) {
);

return (
<li>
<li className={classes.li}>
<ListItem button component={renderLink} className={className}>
{icon ? <ListItemIcon className={classes.icon}>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} />
Expand All @@ -59,6 +81,7 @@ const MainListItems = (props) => {
const { whatsApps } = useContext(WhatsAppsContext);
const { user } = useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = useState(false);
const classes = useStyles();

useEffect(() => {
const delayDebounceFn = setTimeout(() => {
Expand Down Expand Up @@ -87,89 +110,94 @@ const MainListItems = (props) => {
<ListItemLink
to="/"
primary="Dashboard"
icon={<DashboardOutlinedIcon />}
icon={<DashboardOutlined />}
/>
<ListItemLink
to="/tickets"
primary={i18n.t("mainDrawer.listItems.tickets")}
icon={<WhatsAppIcon />}
icon={<WhatsApp />}
/>
<ListItemLink
to="/contacts"
primary={i18n.t("mainDrawer.listItems.contacts")}
icon={<ContactPhoneOutlinedIcon />}
icon={<ContactPhoneOutlined />}
/>
<ListItemLink
to="/quickAnswers"
primary={i18n.t("mainDrawer.listItems.quickAnswers")}
icon={<QuestionAnswerOutlinedIcon />}
icon={<QuestionAnswerOutlined />}
/>
<ListItemLink
to="/tags"
primary={i18n.t("mainDrawer.listItems.tags")}
icon={<LocalOfferIcon />}
icon={<LocalOffer />}
/>
<Can
role={user.profile}
perform="drawer-admin-items:view"
yes={() => (
<>
<Divider />
<ListSubheader inset>
<Divider className={classes.divider}/>
<ListSubheader inset className={classes.sub}>
{i18n.t("mainDrawer.listItems.administration")}
</ListSubheader>
<ListItemLink
to="/connections"
primary={i18n.t("mainDrawer.listItems.connections")}
icon={
<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
<SyncAltIcon />
<SyncAlt />
</Badge>
}
/>
<ListItemLink
to="/users"
primary={i18n.t("mainDrawer.listItems.users")}
icon={<PeopleAltOutlinedIcon />}
icon={<PeopleAltOutlined />}
/>
<ListItemLink
to="/queues"
primary={i18n.t("mainDrawer.listItems.queues")}
icon={<AccountTreeOutlinedIcon />}
icon={<AccountTreeOutlined />}
/>
<ListItemLink
to="/settings"
primary={i18n.t("mainDrawer.listItems.settings")}
icon={<SettingsOutlinedIcon />}
icon={<SettingsOutlined />}
/>
<Divider />
<ListSubheader inset>
<Divider className={classes.divider} />
<ListSubheader inset className={classes.sub}>
{i18n.t("mainDrawer.listItems.apititle")}
</ListSubheader>
<ListItemLink
to="/api"
primary={i18n.t("mainDrawer.listItems.api")}
icon={
<CodeIcon />
<Code />
}
/>
<ListItemLink
to="/apidocs"
primary={i18n.t("mainDrawer.listItems.apidocs")}
icon={
<MenuBookIcon />
<MenuBook />
}
/>
<ListItemLink
to="/apikey"
primary={i18n.t("mainDrawer.listItems.apikey")}
icon={
<VpnKeyRoundedIcon />
<VpnKeyRounded />
}
/>
</>
)}
/>
<span className={classes.systemCss}>
<Link color="inherit" href={system.url || "https://github.com/rtenorioh/Press-Ticket"}>
v{systemVersion}
</Link>
</span>
</div>
);
};
Expand Down
16 changes: 5 additions & 11 deletions frontend/src/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ import { i18n } from "../translate/i18n";

import api from "../services/api";
import toastError from "../errors/toastError";

import { system } from "../config.json";
import logodash from "../assets/logo-dash.png";
import { system } from "../../package.json";

const drawerWidth = 240;

Expand All @@ -44,13 +43,16 @@ const useStyles = makeStyles((theme) => ({

toolbar: {
paddingRight: 24, // keep right padding when drawer closed
color: "#ffffff",
background: theme.palette.toolbar.main
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
minHeight: "48px",
backgroundColor: theme.palette.toolbarIcon.main
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
Expand Down Expand Up @@ -112,11 +114,6 @@ const useStyles = makeStyles((theme) => ({
display: "flex",
overflow: "auto",
flexDirection: "column",
},
systemCss: {
opacity: "0.5",
fontSize: "12px",
marginLeft: "8px",
}
}));

Expand Down Expand Up @@ -243,10 +240,7 @@ const LoggedInLayout = ({ children }) => {
noWrap
className={classes.title}
>
{system.name}
<span className={classes.systemCss}>
{"(v"}{system.version}{")"}
</span>
{system.name || "Press Ticket"}
</Typography>
{user.id && <NotificationsPopOver />}

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/Login/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ import { makeStyles } from "@material-ui/core/styles";
import { i18n } from "../../translate/i18n";

import { AuthContext } from "../../context/Auth/AuthContext";
import { system } from "../../../package.json";
import { system } from "../../config.json";
import logo from '../../assets/logo.png';

const Copyright = () => {
return (
<Typography variant="body2" color="textSecondary" align="center">
© {new Date().getFullYear()}
{" - "}
<Link color="inherit" href="https://github.com/rtenorioh/Press-Ticket">
{system.name} - v{system.version}
<Link color="inherit" href={system.url || "https://github.com/rtenorioh/Press-Ticket"}>
{system.name}
</Link>
{"."}
</Typography>
Expand Down
Loading

0 comments on commit 4e4a893

Please sign in to comment.