diff --git a/client/src/Components/WalletProvider/index.css b/client/src/Components/WalletProvider/index.css
deleted file mode 100644
index f3da31efc..000000000
--- a/client/src/Components/WalletProvider/index.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.wallet-adapter-dropdown {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- gap: var(--env-var-spacing-1);
-}
-
-.wallet-adapter-button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: auto;
- height: var(--env-var-height-2) !important;
- font-size: var(--env-var-font-size-medium-plus) !important;
- font-weight: 500 !important;
- margin: 0;
- padding: calc(
- (var(--env-var-height-2) - var(--env-var-font-size-medium-plus) * 1.2) / 2
- )
- var(--env-var-spacing-1);
- white-space: nowrap;
-}
-
-.wallet-adapter-modal-title {
- font-size: var(--font-size-h5) !important;
-}
-
-/* Separator styling */
-.wallet-adapter-modal-divider {
- background-color: var(--border-color) !important;
- margin: var(--spacing-md) 0 !important;
-}
-
-/* Responsive fixes */
-@media (max-width: 1200px) {
- .wallet-adapter-button {
- font-size: var(--env-var-font-size-medium) !important;
- padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
- var(--env-var-spacing-1-minus) !important;
- }
-}
-
-@media (max-width: 900px) {
- .wallet-adapter-modal-wrapper {
- flex-direction: column !important;
- }
-
- .wallet-adapter-modal-divider {
- margin: var(--spacing-sm) 0 !important;
- }
-}
diff --git a/client/src/Components/WalletProvider/index.jsx b/client/src/Components/WalletProvider/index.jsx
deleted file mode 100644
index 13cc83b07..000000000
--- a/client/src/Components/WalletProvider/index.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// import { useMemo } from "react";
-// import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
-// import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-// import {
-// UnsafeBurnerWalletAdapter,
-// PhantomWalletAdapter,
-// } from "@solana/wallet-adapter-wallets";
-
-// import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-// import { clusterApiUrl } from "@solana/web3.js";
-// import PropTypes from "prop-types";
-// import "./index.css";
-
-// // Default styles that can be overridden by your app
-// import "@solana/wallet-adapter-react-ui/styles.css";
-
-// export const Wallet = ({ children }) => {
-// // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
-// const network = WalletAdapterNetwork.Mainnet;
-
-// // You can also provide a custom RPC endpoint.
-// const endpoint = useMemo(() => clusterApiUrl(network), [network]);
-
-// const wallets = useMemo(
-// () => [new PhantomWalletAdapter()],
-// // eslint-disable-next-line react-hooks/exhaustive-deps
-// [network]
-// );
-
-// return (
-//
-//
-// {children}
-//
-//
-// );
-// };
-
-// Wallet.propTypes = {
-// children: PropTypes.node,
-// };
-
-const Wallet = ({ children }) => {
- return children;
-};
-
-export default Wallet;
diff --git a/client/src/Components/v1/Breadcrumbs/index.css b/client/src/Components/v1/Breadcrumbs/index.css
index abb3c0a28..022db9a83 100644
--- a/client/src/Components/v1/Breadcrumbs/index.css
+++ b/client/src/Components/v1/Breadcrumbs/index.css
@@ -6,7 +6,6 @@
min-height: 16px;
}
.MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
- font-size: var(--env-var-font-size-medium);
font-weight: 400;
}
.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
diff --git a/client/src/Components/v1/Inputs/Select/index.jsx b/client/src/Components/v1/Inputs/Select/index.jsx
index 0f96a2ff6..ec2522d17 100644
--- a/client/src/Components/v1/Inputs/Select/index.jsx
+++ b/client/src/Components/v1/Inputs/Select/index.jsx
@@ -64,7 +64,6 @@ const Select = ({
const theme = useTheme();
const getItemValue = (item) => item?._id ?? item?.id;
const itemStyles = {
- fontSize: "var(--env-var-font-size-medium)",
color: theme.palette.primary.contrastTextTertiary,
borderRadius: theme.shape.borderRadius,
margin: theme.spacing(2),
diff --git a/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
index 078684405..2b3abab0f 100644
--- a/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
+++ b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx
@@ -18,7 +18,6 @@ export const HttpAdornment = ({ https }) => {
>
diff --git a/client/src/Components/v2/design-elements/MonitorStatus.tsx b/client/src/Components/v2/design-elements/MonitorStatus.tsx
index 3d5e81845..09cd95f0f 100644
--- a/client/src/Components/v2/design-elements/MonitorStatus.tsx
+++ b/client/src/Components/v2/design-elements/MonitorStatus.tsx
@@ -23,7 +23,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
overflow={"hidden"}
textOverflow={"ellipsis"}
whiteSpace={"nowrap"}
- maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
>
{monitor.name}
@@ -40,7 +39,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
overflow={"hidden"}
textOverflow={"ellipsis"}
whiteSpace={"nowrap"}
- maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
>
{formatUrl(monitor?.url)}
diff --git a/client/src/Components/v2/design-elements/PulseDot.tsx b/client/src/Components/v2/design-elements/PulseDot.tsx
index ab792b628..1f5b3401e 100644
--- a/client/src/Components/v2/design-elements/PulseDot.tsx
+++ b/client/src/Components/v2/design-elements/PulseDot.tsx
@@ -1,4 +1,17 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { useTheme, keyframes } from "@mui/material";
+
+const ripple = keyframes`
+ from {
+ opacity: 1;
+ transform: scale(0);
+ }
+ to {
+ opacity: 0;
+ transform: scale(2);
+ }
+`;
interface PulseDotProps {
color: string;
@@ -28,7 +41,7 @@ export const PulseDot = ({ color }: PulseDotProps) => {
height: "100%",
backgroundColor: "inherit",
borderRadius: "50%",
- animation: "ripple 1.8s ease-out infinite",
+ animation: `${ripple} 1.8s ease-out infinite`,
},
"&::after": {
content: `""`,
diff --git a/client/src/Pages/Integrations/index.css b/client/src/Pages/Integrations/index.css
deleted file mode 100644
index 29969577a..000000000
--- a/client/src/Pages/Integrations/index.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.integrations h1.MuiTypography-root {
- font-size: var(--env-var-font-size-large);
- font-weight: 600;
-}
-.integrations p.MuiTypography-root {
- font-size: var(--env-var-font-size-medium);
-}
-.integrations button {
- height: var(--env-var-height-2);
-}
diff --git a/client/src/Pages/Integrations/index.jsx b/client/src/Pages/Integrations/index.jsx
deleted file mode 100644
index dde6b52ee..000000000
--- a/client/src/Pages/Integrations/index.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import PropTypes from "prop-types";
-import { Stack, Typography, Grid, Button } from "@mui/material";
-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 { useTranslation } from "react-i18next";
-
-import "./index.css";
-
-/**
- * Integrations component
- * @param {Object} props - Props for the IntegrationsComponent.
- * @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 = ({ icon, header, info, onClick }) => {
- const theme = useTheme();
- const { t } = useTranslation();
-
- return (
-
-
- {icon}
-
- {header}
-
- {info}
-
-
-
-
-
- );
-};
-
-// PropTypes for IntegrationsComponent
-IntegrationsComponent.propTypes = {
- icon: PropTypes.object.isRequired,
- header: PropTypes.string.isRequired,
- info: PropTypes.string.isRequired,
- onClick: PropTypes.func.isRequired,
-};
-
-/**
- * Integrations Page Component
- * @returns {JSX.Element} The JSX representation of the Integrations page.
- */
-
-const Integrations = () => {
- const theme = useTheme();
- const { t } = useTranslation();
-
- const integrations = [
- {
- icon: (
-
- ),
- header: t("integrationsSlack"),
- info: t("integrationsSlackInfo"),
- onClick: () => {},
- },
- {
- icon: (
-
- ),
- header: t("integrationsDiscord"),
- info: t("integrationsDiscordInfo"),
- onClick: () => {},
- },
- {
- icon: (
-
- ),
- header: t("integrationsZapier"),
- info: t("integrationsZapierInfo"),
- onClick: () => {},
- },
- // Add more integrations as needed
- ];
-
- return (
-
- {t("integrations")}
- {t("integrationsPrism")}
-
- {integrations.map((integration, index) => (
-
- ))}
-
-
- );
-};
-
-export default Integrations;
diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js
index 37143d730..98f3479be 100644
--- a/client/src/Utils/Theme/globalTheme.js
+++ b/client/src/Utils/Theme/globalTheme.js
@@ -38,7 +38,6 @@ const baseTheme = (palette) => ({
fontWeight: 400,
},
label: {
- fontSize: "var(--env-var-font-size-medium)",
color: palette.primary.contrastTextSecondary,
fontWeight: 500,
},
@@ -332,8 +331,6 @@ const baseTheme = (palette) => ({
"& .MuiInputBase-input": {
padding: ".75em",
- minHeight: "var(--env-var-height-2)",
- fontSize: "var(--env-var-font-size-medium)",
fontWeight: 400,
color: palette.primary.contrastTextSecondary,
"&.Mui-disabled": {
@@ -368,13 +365,12 @@ const baseTheme = (palette) => ({
"& .MuiFormHelperText-root": {
color: palette.error.main,
opacity: 0.8,
- fontSize: "var(--env-var-font-size-medium)",
+ fontSize: "var()",
marginLeft: 0,
},
"& .MuiFormHelperText-root.Mui-error": {
opacity: 0.8,
- fontSize: "var(--env-var-font-size-medium)",
color: palette.error.main,
whiteSpace: "nowrap",
},
@@ -762,7 +758,6 @@ const baseTheme = (palette) => ({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
- maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
},
},
{
@@ -775,7 +770,6 @@ const baseTheme = (palette) => ({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
- maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
},
},
],
diff --git a/client/src/Utils/Theme/v2Theme.ts b/client/src/Utils/Theme/v2Theme.ts
index 57ca76669..39ede6c7e 100644
--- a/client/src/Utils/Theme/v2Theme.ts
+++ b/client/src/Utils/Theme/v2Theme.ts
@@ -49,6 +49,13 @@ export const theme = (mode: string, palette: any) =>
},
components: {
+ MuiTouchRipple: {
+ styleOverrides: {
+ root: {
+ display: "none",
+ },
+ },
+ },
MuiButtonBase: {
defaultProps: {
disableRipple: true,
diff --git a/client/src/index.css b/client/src/index.css
index 48737d4bb..a662ef475 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -18,70 +18,4 @@ html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-
- /* Generalized Stylings */
- --env-var-radius-2: 8px;
-
- --env-var-width-2: 360px;
- --env-var-width-4: 100px;
-
- --env-var-height-2: 34px;
-
- --env-var-nav-bar-height: 70px;
- --env-var-side-bar-width: 250px;
- --env-var-side-bar-collapsed-width: 64px;
- --env-var-side-bar-auth-footer-height: 50px;
-
- --env-var-spacing-1: 12px;
- --env-var-spacing-1-plus: 16px;
- --env-var-spacing-1-minus: 10px;
- --env-var-spacing-2: 24px;
-
- --env-var-font-size-small: 11px;
- --env-var-font-size-small-plus: 12px;
- --env-var-font-size-medium: 13px;
- --env-var-font-size-medium-plus: 14px;
- --env-var-font-size-large: 16px;
- --env-var-font-size-large-plus: 22px;
- --env-var-font-size-xlarge: 30px;
-}
-
-.MuiInputBase-root.Mui-disabled input {
- cursor: not-allowed;
-}
-
-/* .Toastify__toast-container {
- min-width: 300px;
- width: auto;
-}
-.Toastify__toast-body .alert {
- min-width: 150px;
- padding: 5px 10px;
- align-items: center;
-}
-.Toastify [class^="Toastify__toast"] {
- padding: 0;
- margin: 0;
-}
-.Toastify__toast {
- min-height: 0;
- border-radius: 4px;
-}
-.Toastify [class*="Toastify__toast-theme"] {
- background-color: transparent;
-} */
-
-.MuiTouchRipple-root {
- display: none;
-}
-
-@keyframes ripple {
- from {
- opacity: 1;
- transform: scale(0);
- }
- to {
- opacity: 0;
- transform: scale(2);
- }
}