From 4ce67b54b6b8b851441f67bb8c9ef95ebfc7e11b Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 31 Jul 2024 19:20:50 -0400 Subject: [PATCH 1/2] Added icons to integrations page --- Client/src/Pages/Integrations/index.jsx | 45 ++++++++++++++++-------- Client/src/assets/icons/discord-icon.svg | 8 +++++ Client/src/assets/icons/slack-icon.svg | 10 ++++++ Client/src/assets/icons/zapier-icon.svg | 8 +++++ 4 files changed, 57 insertions(+), 14 deletions(-) create mode 100644 Client/src/assets/icons/discord-icon.svg create mode 100644 Client/src/assets/icons/slack-icon.svg create mode 100644 Client/src/assets/icons/zapier-icon.svg diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index 376ef6657..dc8e668e0 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -2,19 +2,22 @@ import PropTypes from "prop-types"; import { Stack, Box, Typography, Grid } from "@mui/material"; import Button from "../../Components/Button"; import { useTheme } from "@emotion/react"; +import Discord from "../../assets/icons/discord-icon.svg?react"; +import Slack from "../../assets/icons/slack-icon.svg?react"; +import Zapier from "../../assets/icons/zapier-icon.svg?react"; import "./index.css"; /** * Integrations component * @param {Object} props - Props for the IntegrationsComponent. - * @param {string} props.url - The URL for the integration image. + * @param {string} props.icon - The icon for the integration image. * @param {string} props.header - The header for the integration. * @param {string} props.info - Information about the integration. * @param {Function} props.onClick - The onClick handler for the integration button. * @returns {JSX.Element} The JSX representation of the IntegrationsComponent. */ -const IntegrationsComponent = ({ url, header, info, onClick }) => { +const IntegrationsComponent = ({ icon, header, info, onClick }) => { const theme = useTheme(); return ( @@ -24,14 +27,12 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => { justifyContent="space-between" gap={theme.gap.large} p={theme.gap.ml} + pl={theme.gap.large} + height="100%" > - + + {icon} + {header} { level="primary" onClick={onClick} sx={{ alignSelf: "center" }} + disabled={true} /> @@ -56,7 +58,7 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => { // PropTypes for IntegrationsComponent IntegrationsComponent.propTypes = { - url: PropTypes.string.isRequired, + icon: PropTypes.object.isRequired, header: PropTypes.string.isRequired, info: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, @@ -72,19 +74,34 @@ const Integrations = () => { const integrations = [ { - url: "https://via.placeholder.com/80", + icon: ( + + ), header: "Slack", info: "Connect with Slack and see incidents in a channel", onClick: () => {}, }, { - url: "https://via.placeholder.com/80", + icon: ( + + ), header: "Discord", info: "Connect with Discord and view incidents directly in a channel", onClick: () => {}, }, { - url: "https://via.placeholder.com/80", + icon: ( + + ), header: "Zapier", info: "Send all incidents to Zapier, and then see them everywhere", onClick: () => {}, @@ -102,7 +119,7 @@ const Integrations = () => { {integrations.map((integration, index) => ( + + + + + + + \ No newline at end of file diff --git a/Client/src/assets/icons/slack-icon.svg b/Client/src/assets/icons/slack-icon.svg new file mode 100644 index 000000000..ff256fd4d --- /dev/null +++ b/Client/src/assets/icons/slack-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/Client/src/assets/icons/zapier-icon.svg b/Client/src/assets/icons/zapier-icon.svg new file mode 100644 index 000000000..6ee0b5eca --- /dev/null +++ b/Client/src/assets/icons/zapier-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file From c48249e30dbb92ac09b793f4b7c9d0512443839f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Wed, 31 Jul 2024 19:23:52 -0400 Subject: [PATCH 2/2] Removed redundant code --- Client/src/Pages/Integrations/index.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index dc8e668e0..75da41a6b 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import { Stack, Box, Typography, Grid } from "@mui/material"; +import { Stack, Typography, Grid } from "@mui/material"; import Button from "../../Components/Button"; import { useTheme } from "@emotion/react"; import Discord from "../../assets/icons/discord-icon.svg?react"; @@ -30,9 +30,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => { pl={theme.gap.large} height="100%" > - - {icon} - + {icon} {header} { icon: ( ), header: "Slack", @@ -88,7 +86,7 @@ const Integrations = () => { icon: ( ), header: "Discord", @@ -99,7 +97,7 @@ const Integrations = () => { icon: ( ), header: "Zapier",