Merge branch 'bluewave-labs:master' into syncings_2
This commit is contained in:
36 files changed
+1068
-292
No files matched your search
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,15 @@
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-menu-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import LanguageIcon from "@mui/icons-material/Language";
|
||||
import ReportGmailerrorredIcon from "@mui/icons-material/ReportGmailerrorred";
|
||||
import SensorsIcon from "@mui/icons-material/Sensors";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import AllInclusiveIcon from "@mui/icons-material/AllInclusive";
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import './index.css';
|
||||
|
||||
/**
|
||||
* @component
|
||||
* DashboardMenu component displays a menu with icons and corresponding text.
|
||||
* Each menu item consists of an icon and a text label.
|
||||
*
|
||||
* @returns {JSX.Element} The JSX element representing the DashboardMenu component.
|
||||
*/
|
||||
|
||||
function DashboardMenu() {
|
||||
return (
|
||||
<div className="dashboard-menu-container">
|
||||
<div className="icon-container">
|
||||
<SvgIcon component={LanguageIcon} />
|
||||
<div className="text-container">
|
||||
<span className="dashboard-menu-text">Monitors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="icon-container">
|
||||
<SvgIcon component={ReportGmailerrorredIcon} />
|
||||
<div className="text-container">
|
||||
<span className="dashboard-menu-text">Incidents</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="icon-container">
|
||||
<SvgIcon component={SensorsIcon} />
|
||||
<div className="text-container">
|
||||
<span className="dashboard-menu-text">Status Pages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="icon-container">
|
||||
<SvgIcon component={AllInclusiveIcon} />
|
||||
<div className="text-container">
|
||||
<span className="dashboard-menu-text">Integrations</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="icon-container">
|
||||
<SvgIcon component={SettingsIcon} />
|
||||
<div className="text-container">
|
||||
<span className="dashboard-menu-text">Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardMenu;
|
||||
@@ -1,54 +0,0 @@
|
||||
import PropTypes from "prop-types";
|
||||
import "./BaseLabel.css";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @typedef {Object} Styles
|
||||
* @param {string} [color] - The text color
|
||||
* @param {string} [backgroundColor] - The background color
|
||||
* @param {string} [borderColor] - The border color
|
||||
*/
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.label - The label of the label
|
||||
* @param {Styles} props.styles - CSS Styles passed from parent component
|
||||
* @param {React.ReactNode} children - Children passed from parent component
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
|
||||
const BaseLabel = ({ label, styles, children }) => {
|
||||
const theme = useTheme();
|
||||
// Grab the default borderRadius from the theme to match button style
|
||||
const { borderRadius } = theme.shape;
|
||||
// Calculate padding for the label to mimic button. Appears to scale correctly, not 100% sure though.
|
||||
const padding = theme.spacing(1 * 0.75, 2);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="label"
|
||||
style={{
|
||||
borderRadius: borderRadius,
|
||||
borderColor: theme.palette.tertiary.main,
|
||||
color: theme.palette.tertiary.main,
|
||||
padding: padding,
|
||||
...styles,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
BaseLabel.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
styles: PropTypes.shape({
|
||||
color: PropTypes.string,
|
||||
backgroundColor: PropTypes.string,
|
||||
}),
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default BaseLabel;
|
||||
@@ -1,67 +0,0 @@
|
||||
import { useTheme } from "@mui/material";
|
||||
import { PropTypes } from "prop-types";
|
||||
import BaseLabel from "./BaseLabel";
|
||||
|
||||
// Produces a lighter color based on a hex color and a percent
|
||||
// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
|
||||
const lightenColor = (color, percent) => {
|
||||
let r = parseInt(color.substring(1, 3), 16);
|
||||
let g = parseInt(color.substring(3, 5), 16);
|
||||
let b = parseInt(color.substring(5, 7), 16);
|
||||
|
||||
const amt = Math.round((255 * percent) / 100);
|
||||
|
||||
r = r + amt <= 255 ? r + amt : 255;
|
||||
g = g + amt <= 255 ? g + amt : 255;
|
||||
b = b + amt <= 255 ? b + amt : 255;
|
||||
|
||||
r = r.toString(16).padStart(2, "0");
|
||||
g = g.toString(16).padStart(2, "0");
|
||||
b = b.toString(16).padStart(2, "0");
|
||||
|
||||
return `#${r}${g}${b}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.label - The label of the label
|
||||
* @param {string} props.color - The color of the label, specified in #RRGGBB format
|
||||
* @returns {JSX.Element}
|
||||
* @example
|
||||
* // Render a red label
|
||||
* <ColoredLabel label="Label" color="#FF0000" />
|
||||
*/
|
||||
|
||||
const ColoredLabel = ({ label, color }) => {
|
||||
const theme = useTheme();
|
||||
// If an invalid color is passed, default to the labelGray color
|
||||
if (
|
||||
typeof color !== "string" ||
|
||||
!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
|
||||
) {
|
||||
color = theme.palette.labelGray.color;
|
||||
}
|
||||
|
||||
// Calculate lighter shades for border and bg
|
||||
const borderColor = lightenColor(color, 20);
|
||||
const bgColor = lightenColor(color, 75);
|
||||
|
||||
return (
|
||||
<BaseLabel
|
||||
label={label}
|
||||
styles={{
|
||||
color: color,
|
||||
borderColor: borderColor,
|
||||
backgroundColor: bgColor,
|
||||
}}
|
||||
></BaseLabel>
|
||||
);
|
||||
};
|
||||
|
||||
ColoredLabel.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default ColoredLabel;
|
||||
@@ -1,46 +0,0 @@
|
||||
import PropTypes from "prop-types";
|
||||
import BaseLabel from "./BaseLabel";
|
||||
import { Box } from "@mui/material";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
|
||||
* @returns {JSX.Element}
|
||||
* @example
|
||||
* // Render an active label
|
||||
* <StatusLabel status="Active" />
|
||||
*/
|
||||
|
||||
const StatusLabel = ({ status }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const colorLookup = {
|
||||
Seen: theme.palette.labelGray.color,
|
||||
Waiting: theme.palette.labelRed.color,
|
||||
New: theme.palette.labelOrange.color,
|
||||
Active: theme.palette.labelGreen.color,
|
||||
};
|
||||
|
||||
// Look up the color for the status, default to labelGray if not found
|
||||
const color = colorLookup[status] || theme.palette.labelGray.color;
|
||||
|
||||
return (
|
||||
<BaseLabel label={status}>
|
||||
<Box
|
||||
width={12}
|
||||
height={12}
|
||||
bgcolor={color}
|
||||
borderRadius="50%"
|
||||
marginRight={1}
|
||||
/>
|
||||
</BaseLabel>
|
||||
);
|
||||
};
|
||||
|
||||
StatusLabel.propTypes = {
|
||||
status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
|
||||
};
|
||||
|
||||
export default StatusLabel;
|
||||
File renamed without changes.
@@ -0,0 +1,157 @@
|
||||
import PropTypes from "prop-types";
|
||||
import { Box } from "@mui/material";
|
||||
import { useTheme } from "@mui/material";
|
||||
import "./index.css";
|
||||
|
||||
/**
|
||||
* @typedef {Object} Styles
|
||||
* @param {string} [color] - The text color
|
||||
* @param {string} [backgroundColor] - The background color
|
||||
* @param {string} [borderColor] - The border color
|
||||
*/
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.label - The label of the label
|
||||
* @param {Styles} props.styles - CSS Styles passed from parent component
|
||||
* @param {React.ReactNode} children - Children passed from parent component
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
|
||||
const BaseLabel = ({ label, styles, children }) => {
|
||||
const theme = useTheme();
|
||||
// Grab the default borderRadius from the theme to match button style
|
||||
const { borderRadius } = theme.shape;
|
||||
// Calculate padding for the label to mimic button. Appears to scale correctly, not 100% sure though.
|
||||
const padding = theme.spacing(1 * 0.75, 2);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="label"
|
||||
style={{
|
||||
borderRadius: borderRadius,
|
||||
borderColor: theme.palette.tertiary.main,
|
||||
color: theme.palette.tertiary.main,
|
||||
padding: padding,
|
||||
...styles,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
BaseLabel.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
styles: PropTypes.shape({
|
||||
color: PropTypes.string,
|
||||
backgroundColor: PropTypes.string,
|
||||
}),
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
// Produces a lighter color based on a hex color and a percent
|
||||
// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
|
||||
const lightenColor = (color, percent) => {
|
||||
let r = parseInt(color.substring(1, 3), 16);
|
||||
let g = parseInt(color.substring(3, 5), 16);
|
||||
let b = parseInt(color.substring(5, 7), 16);
|
||||
|
||||
const amt = Math.round((255 * percent) / 100);
|
||||
|
||||
r = r + amt <= 255 ? r + amt : 255;
|
||||
g = g + amt <= 255 ? g + amt : 255;
|
||||
b = b + amt <= 255 ? b + amt : 255;
|
||||
|
||||
r = r.toString(16).padStart(2, "0");
|
||||
g = g.toString(16).padStart(2, "0");
|
||||
b = b.toString(16).padStart(2, "0");
|
||||
|
||||
return `#${r}${g}${b}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.label - The label of the label
|
||||
* @param {string} props.color - The color of the label, specified in #RRGGBB format
|
||||
* @returns {JSX.Element}
|
||||
* @example
|
||||
* // Render a red label
|
||||
* <ColoredLabel label="Label" color="#FF0000" />
|
||||
*/
|
||||
|
||||
const ColoredLabel = ({ label, color }) => {
|
||||
const theme = useTheme();
|
||||
// If an invalid color is passed, default to the labelGray color
|
||||
if (
|
||||
typeof color !== "string" ||
|
||||
!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
|
||||
) {
|
||||
color = theme.palette.labelGray.color;
|
||||
}
|
||||
|
||||
// Calculate lighter shades for border and bg
|
||||
const borderColor = lightenColor(color, 20);
|
||||
const bgColor = lightenColor(color, 75);
|
||||
|
||||
return (
|
||||
<BaseLabel
|
||||
label={label}
|
||||
styles={{
|
||||
color: color,
|
||||
borderColor: borderColor,
|
||||
backgroundColor: bgColor,
|
||||
}}
|
||||
></BaseLabel>
|
||||
);
|
||||
};
|
||||
|
||||
ColoredLabel.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
|
||||
* @returns {JSX.Element}
|
||||
* @example
|
||||
* // Render an active label
|
||||
* <StatusLabel status="Active" />
|
||||
*/
|
||||
|
||||
const StatusLabel = ({ status }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const colorLookup = {
|
||||
Seen: theme.palette.labelGray.color,
|
||||
Waiting: theme.palette.labelRed.color,
|
||||
New: theme.palette.labelOrange.color,
|
||||
Active: theme.palette.labelGreen.color,
|
||||
};
|
||||
|
||||
// Look up the color for the status, default to labelGray if not found
|
||||
const color = colorLookup[status] || theme.palette.labelGray.color;
|
||||
|
||||
return (
|
||||
<BaseLabel label={status}>
|
||||
<Box
|
||||
width={12}
|
||||
height={12}
|
||||
bgcolor={color}
|
||||
borderRadius="50%"
|
||||
marginRight={1}
|
||||
/>
|
||||
</BaseLabel>
|
||||
);
|
||||
};
|
||||
|
||||
StatusLabel.propTypes = {
|
||||
status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
|
||||
};
|
||||
|
||||
export { ColoredLabel, StatusLabel };
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -10,7 +10,7 @@ import {
|
||||
} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import Button from "../Button/Button";
|
||||
import Button from "../Button/";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
|
||||
/**
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import Button from "../../Components/Button/Button";
|
||||
import Link from "../../Components/Link/Link";
|
||||
import ColoredLabel from "../../Components/Label/ColoredLabel";
|
||||
import Button from "../../Components/Button/";
|
||||
import Link from "../../Components/Link";
|
||||
import {
|
||||
useTheme,
|
||||
Switch,
|
||||
@@ -14,13 +13,12 @@ import {
|
||||
Tab,
|
||||
Tabs,
|
||||
} from "@mui/material";
|
||||
import StatusLabel from "../../Components/Label/StautsLabel";
|
||||
import Avatar from "../../Components/Avatar/Avatar";
|
||||
import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper";
|
||||
import { ColoredLabel, StatusLabel } from "../../Components/Label/";
|
||||
import Avatar from "../../Components/Avatar/";
|
||||
import ProgressStepper from "../../Components/ProgressStepper";
|
||||
import avatarImage from "../../assets/Images/avatar_placeholder.png";
|
||||
import Section from "../../Components/Section/Section";
|
||||
import Section from "../../Components/Section";
|
||||
import { DataGrid } from "@mui/x-data-grid";
|
||||
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import DropdownTeamMember from "../../Components/DropdownTeamMember";
|
||||
import Search from "../../Components/Search";
|
||||
import "./index.css";
|
||||
import DashboardMenu from "../../Components/DashboardMenu";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
@@ -8,6 +9,7 @@ const Home = () => {
|
||||
<div>Home</div>
|
||||
<DropdownTeamMember />
|
||||
<Search />
|
||||
<DashboardMenu />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user