chore(ui): remove MUI (tari-project#261)

Description --- ### package changes: - removed material ui and related packages - `@mui/material`, `@emotion/react`, and `@emotion/styled`. - removed `react-transition-group` since it was only used in one place and we have `framer-motion` already - added `styled-components` for our main styling package ### implementation changes: - removed all uses of Material UI components and replace with custom styled components, main ones so far are: * Typography * Button & IconButton * Stack * Linear & Circular Progress * Toggle Switch * Select * Input * Dialog - updated theme vars to suit `styled-components` - added `GlobalStyles` and `GlobalReset` - updated fontface implemetations - added theme types - replaced mui/styled syntax errrwhere - split out the items in `Settings.tsx` to some of their own files/component Motivation and Context --- - resolves tari-project#238 - material ui is super difficult to customise How Has This Been Tested? --- locally _**screenshots:**_ | components | | :---: | | <img width="393" alt="image" src="https://github.com/user-attachments/assets/73c8a32b-4372-4519-a88f-22abb04e51ca"> | | <img width="480" alt="image" src="https://github.com/user-attachments/assets/c668f316-020a-4e4d-b168-7699220f31ce"> | | <img width="355" alt="image" src="https://github.com/user-attachments/assets/075be908-1839-4377-87ae-45d8c492325f"> <img width="368" alt="image" src="https://github.com/user-attachments/assets/80617ff9-7c25-49cb-9b5a-84546416263d"> | | <img width="910" alt="image" src="https://github.com/user-attachments/assets/be51575f-ec90-495f-85e1-add7643c61f5"> | | <img width="871" alt="image" src="https://github.com/user-attachments/assets/0d1b047a-78f6-4b76-966b-3809262fde53"> | | <img width="744" alt="image" src="https://github.com/user-attachments/assets/188176f6-a034-4aa8-bade-37dd2c4e73df"> | | <img width="220" alt="image" src="https://github.com/user-attachments/assets/07580b6f-5064-4a3b-b2e9-993148104f3c"> <img width="207" alt="image" src="https://github.com/user-attachments/assets/fbbaedf2-ca32-48ec-9fa2-10522f00e354"> | **_videos:_** https://github.com/user-attachments/assets/6cf41a2a-5e37-4d0b-a5fe-9b7b27bd92f9 https://github.com/user-attachments/assets/07298156-a0a9-4a9d-89c2-7ee4609aa5ce https://github.com/user-attachments/assets/6fffd36e-261a-464a-b284-1bb61ee1b7ca What process can a PR reviewer use to test or verify this change? --- run locally :p Breaking Changes --- - [ ] None - [ ] Requires data directory on base node to be deleted - [ ] Requires hard fork - [x] Other - Please specify  BREAKING CHANGE: - requires `npm ci` and possibly a fresh `npm install` - any wip work that uses `@mui/x` or `react-transition-group` will need to be updated -
brianp · Sep 3, 2024 · f7644ab · f7644ab
1 parent 36b5166
commit f7644ab
Show file tree

Hide file tree

Showing 152 changed files with 160,815 additions and 2,792 deletions.
diff --git a/index.html b/index.html
@@ -1,20 +1,17 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" type="image/svg+xml" href="/tari.svg" />
-  <script type="module" crossorigin src="/assets/glApp.js"></script>
-  <title>Tari Universe</title>
-  <style>
-    #canvas {
-      position: absolute;
-      /* border-radius: 12px; */
-      z-index: 0;
-    }
-    #root {
-      pointer-events: none;
-    }
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/tari.svg" />
+    <script type="module" crossorigin src="/assets/glApp.js"></script>
+    <title>Tari Universe</title>
+    <style>
+      #canvas {
+        position: absolute;
+        pointer-events: auto;
+        z-index: 0;
+      }
   </style>
 </head>
 <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,9 +12,6 @@
         "lint:fix": "eslint src/ --fix"
     },
     "dependencies": {
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
-        "@mui/material": "^5.16.7",
         "@tauri-apps/api": "^1",
         "framer-motion": "^11.3.29",
         "globals": "^15.9.0",
@@ -27,8 +24,8 @@
         "react-hook-form": "^7.52.2",
         "react-i18next": "^15.0.1",
         "react-icons": "^5.3.0",
+        "styled-components": "^6.1.12",
         "uuid": "^10.0.0",
-        "react-transition-group": "^4.4.5",
         "vite-tsconfig-paths": "^5.0.1",
         "zustand": "^4.5.5"
     },
@@ -37,12 +34,13 @@
         "@nabla/vite-plugin-eslint": "^2.0.4",
         "@tauri-apps/cli": "^1",
         "@types/eslint__js": "^8.42.3",
-        "@types/node": "^22.5.1",
-        "@types/react": "^18.3.4",
+        "@types/node": "^22.5.2",
+        "@types/react": "^18.3.5",
         "@types/react-dom": "^18.2.7",
         "@types/uuid": "^10.0.0",
-        "@typescript-eslint/parser": "8.2.0",
+        "@typescript-eslint/parser": "^8.3.0",
         "@vitejs/plugin-react": "^4.2.1",
+        "babel-plugin-styled-components": "^2.1.4",
         "eslint": "^9.9.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
@@ -54,4 +52,4 @@
         "typescript-eslint": "^8.3.0",
         "vite": "^5.4.2"
     }
-}
+}
diff --git a/src/theme/fonts/AvenirLTStd-Book.otf → public/assets/fonts/AvenirLTStd-Book.otf b/src/theme/fonts/AvenirLTStd-Book.otf → public/assets/fonts/AvenirLTStd-Book.otf
diff --git a/src/theme/fonts/AvenirLTStd-Heavy.otf → public/assets/fonts/AvenirLTStd-Heavy.otf b/src/theme/fonts/AvenirLTStd-Heavy.otf → public/assets/fonts/AvenirLTStd-Heavy.otf
diff --git a/src/theme/fonts/AvenirLTStd-Medium.otf → public/assets/fonts/AvenirLTStd-Medium.otf b/src/theme/fonts/AvenirLTStd-Medium.otf → public/assets/fonts/AvenirLTStd-Medium.otf
diff --git a/src/theme/fonts/Druk/DrukLCG-Bold.ttf → public/assets/fonts/Druk/DrukLCG-Bold.ttf b/src/theme/fonts/Druk/DrukLCG-Bold.ttf → public/assets/fonts/Druk/DrukLCG-Bold.ttf
diff --git a/src/theme/fonts/Druk/DrukLCG-BoldItalic.ttf → .../assets/fonts/Druk/DrukLCG-BoldItalic.ttf b/src/theme/fonts/Druk/DrukLCG-BoldItalic.ttf → .../assets/fonts/Druk/DrukLCG-BoldItalic.ttf
diff --git a/src/theme/fonts/Druk/DrukLCG-Heavy.ttf → public/assets/fonts/Druk/DrukLCG-Heavy.ttf b/src/theme/fonts/Druk/DrukLCG-Heavy.ttf → public/assets/fonts/Druk/DrukLCG-Heavy.ttf
diff --git a/src/theme/fonts/Druk/DrukLCG-HeavyItalic.ttf → ...assets/fonts/Druk/DrukLCG-HeavyItalic.ttf b/src/theme/fonts/Druk/DrukLCG-HeavyItalic.ttf → ...assets/fonts/Druk/DrukLCG-HeavyItalic.ttf
diff --git a/src/theme/fonts/Druk/DrukLCG-Medium.ttf → public/assets/fonts/Druk/DrukLCG-Medium.ttf b/src/theme/fonts/Druk/DrukLCG-Medium.ttf → public/assets/fonts/Druk/DrukLCG-Medium.ttf
diff --git a/...theme/fonts/Druk/DrukLCG-MediumItalic.ttf → ...ssets/fonts/Druk/DrukLCG-MediumItalic.ttf b/...theme/fonts/Druk/DrukLCG-MediumItalic.ttf → ...ssets/fonts/Druk/DrukLCG-MediumItalic.ttf
diff --git a/src/theme/fonts/Druk/DrukWideLCG-Bold.ttf → ...ic/assets/fonts/Druk/DrukWideLCG-Bold.ttf b/src/theme/fonts/Druk/DrukWideLCG-Bold.ttf → ...ic/assets/fonts/Druk/DrukWideLCG-Bold.ttf
diff --git a/...eme/fonts/Druk/DrukWideLCG-BoldItalic.ttf → ...ets/fonts/Druk/DrukWideLCG-BoldItalic.ttf b/...eme/fonts/Druk/DrukWideLCG-BoldItalic.ttf → ...ets/fonts/Druk/DrukWideLCG-BoldItalic.ttf
diff --git a/src/theme/fonts/Druk/DrukWideLCG-Heavy.ttf → ...c/assets/fonts/Druk/DrukWideLCG-Heavy.ttf b/src/theme/fonts/Druk/DrukWideLCG-Heavy.ttf → ...c/assets/fonts/Druk/DrukWideLCG-Heavy.ttf
diff --git a/...me/fonts/Druk/DrukWideLCG-HeavyItalic.ttf → ...ts/fonts/Druk/DrukWideLCG-HeavyItalic.ttf b/...me/fonts/Druk/DrukWideLCG-HeavyItalic.ttf → ...ts/fonts/Druk/DrukWideLCG-HeavyItalic.ttf
diff --git a/src/theme/fonts/Druk/DrukWideLCG-Medium.ttf → .../assets/fonts/Druk/DrukWideLCG-Medium.ttf b/src/theme/fonts/Druk/DrukWideLCG-Medium.ttf → .../assets/fonts/Druk/DrukWideLCG-Medium.ttf
diff --git a/...e/fonts/Druk/DrukWideLCG-MediumItalic.ttf → ...s/fonts/Druk/DrukWideLCG-MediumItalic.ttf b/...e/fonts/Druk/DrukWideLCG-MediumItalic.ttf → ...s/fonts/Druk/DrukWideLCG-MediumItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Black.ttf → ...ic/assets/fonts/Poppins/Poppins-Black.ttf b/src/theme/fonts/Poppins/Poppins-Black.ttf → ...ic/assets/fonts/Poppins/Poppins-Black.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Black.woff b/public/assets/fonts/Poppins/Poppins-Black.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Black.woff2 b/public/assets/fonts/Poppins/Poppins-Black.woff2
diff --git a/...eme/fonts/Poppins/Poppins-BlackItalic.ttf → ...ets/fonts/Poppins/Poppins-BlackItalic.ttf b/...eme/fonts/Poppins/Poppins-BlackItalic.ttf → ...ets/fonts/Poppins/Poppins-BlackItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Bold.ttf → public/assets/fonts/Poppins/Poppins-Bold.ttf b/src/theme/fonts/Poppins/Poppins-Bold.ttf → public/assets/fonts/Poppins/Poppins-Bold.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Bold.woff b/public/assets/fonts/Poppins/Poppins-Bold.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Bold.woff2 b/public/assets/fonts/Poppins/Poppins-Bold.woff2
diff --git a/...heme/fonts/Poppins/Poppins-BoldItalic.ttf → ...sets/fonts/Poppins/Poppins-BoldItalic.ttf b/...heme/fonts/Poppins/Poppins-BoldItalic.ttf → ...sets/fonts/Poppins/Poppins-BoldItalic.ttf
diff --git a/...theme/fonts/Poppins/Poppins-ExtraBold.ttf → ...ssets/fonts/Poppins/Poppins-ExtraBold.ttf b/...theme/fonts/Poppins/Poppins-ExtraBold.ttf → ...ssets/fonts/Poppins/Poppins-ExtraBold.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-ExtraBold.woff b/public/assets/fonts/Poppins/Poppins-ExtraBold.woff
diff --git a/public/assets/fonts/Poppins/Poppins-ExtraBold.woff2 b/public/assets/fonts/Poppins/Poppins-ExtraBold.woff2
diff --git a/...fonts/Poppins/Poppins-ExtraBoldItalic.ttf → ...fonts/Poppins/Poppins-ExtraBoldItalic.ttf b/...fonts/Poppins/Poppins-ExtraBoldItalic.ttf → ...fonts/Poppins/Poppins-ExtraBoldItalic.ttf
diff --git a/...heme/fonts/Poppins/Poppins-ExtraLight.ttf → ...sets/fonts/Poppins/Poppins-ExtraLight.ttf b/...heme/fonts/Poppins/Poppins-ExtraLight.ttf → ...sets/fonts/Poppins/Poppins-ExtraLight.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-ExtraLight.woff b/public/assets/fonts/Poppins/Poppins-ExtraLight.woff
diff --git a/public/assets/fonts/Poppins/Poppins-ExtraLight.woff2 b/public/assets/fonts/Poppins/Poppins-ExtraLight.woff2
diff --git a/...onts/Poppins/Poppins-ExtraLightItalic.ttf → ...onts/Poppins/Poppins-ExtraLightItalic.ttf b/...onts/Poppins/Poppins-ExtraLightItalic.ttf → ...onts/Poppins/Poppins-ExtraLightItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Italic.ttf → ...c/assets/fonts/Poppins/Poppins-Italic.ttf b/src/theme/fonts/Poppins/Poppins-Italic.ttf → ...c/assets/fonts/Poppins/Poppins-Italic.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Italic.woff b/public/assets/fonts/Poppins/Poppins-Italic.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Italic.woff2 b/public/assets/fonts/Poppins/Poppins-Italic.woff2
diff --git a/src/theme/fonts/Poppins/Poppins-Light.ttf → ...ic/assets/fonts/Poppins/Poppins-Light.ttf b/src/theme/fonts/Poppins/Poppins-Light.ttf → ...ic/assets/fonts/Poppins/Poppins-Light.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Light.woff b/public/assets/fonts/Poppins/Poppins-Light.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Light.woff2 b/public/assets/fonts/Poppins/Poppins-Light.woff2
diff --git a/...eme/fonts/Poppins/Poppins-LightItalic.ttf → ...ets/fonts/Poppins/Poppins-LightItalic.ttf b/...eme/fonts/Poppins/Poppins-LightItalic.ttf → ...ets/fonts/Poppins/Poppins-LightItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Medium.ttf → ...c/assets/fonts/Poppins/Poppins-Medium.ttf b/src/theme/fonts/Poppins/Poppins-Medium.ttf → ...c/assets/fonts/Poppins/Poppins-Medium.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Medium.woff b/public/assets/fonts/Poppins/Poppins-Medium.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Medium.woff2 b/public/assets/fonts/Poppins/Poppins-Medium.woff2
diff --git a/...me/fonts/Poppins/Poppins-MediumItalic.ttf → ...ts/fonts/Poppins/Poppins-MediumItalic.ttf b/...me/fonts/Poppins/Poppins-MediumItalic.ttf → ...ts/fonts/Poppins/Poppins-MediumItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Regular.ttf → .../assets/fonts/Poppins/Poppins-Regular.ttf b/src/theme/fonts/Poppins/Poppins-Regular.ttf → .../assets/fonts/Poppins/Poppins-Regular.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Regular.woff b/public/assets/fonts/Poppins/Poppins-Regular.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Regular.woff2 b/public/assets/fonts/Poppins/Poppins-Regular.woff2
diff --git a/src/theme/fonts/Poppins/Poppins-SemiBold.ttf → ...assets/fonts/Poppins/Poppins-SemiBold.ttf b/src/theme/fonts/Poppins/Poppins-SemiBold.ttf → ...assets/fonts/Poppins/Poppins-SemiBold.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-SemiBold.woff b/public/assets/fonts/Poppins/Poppins-SemiBold.woff
diff --git a/public/assets/fonts/Poppins/Poppins-SemiBold.woff2 b/public/assets/fonts/Poppins/Poppins-SemiBold.woff2
diff --git a/.../fonts/Poppins/Poppins-SemiBoldItalic.ttf → .../fonts/Poppins/Poppins-SemiBoldItalic.ttf b/.../fonts/Poppins/Poppins-SemiBoldItalic.ttf → .../fonts/Poppins/Poppins-SemiBoldItalic.ttf
diff --git a/src/theme/fonts/Poppins/Poppins-Thin.ttf → public/assets/fonts/Poppins/Poppins-Thin.ttf b/src/theme/fonts/Poppins/Poppins-Thin.ttf → public/assets/fonts/Poppins/Poppins-Thin.ttf
diff --git a/public/assets/fonts/Poppins/Poppins-Thin.woff b/public/assets/fonts/Poppins/Poppins-Thin.woff
diff --git a/public/assets/fonts/Poppins/Poppins-Thin.woff2 b/public/assets/fonts/Poppins/Poppins-Thin.woff2
diff --git a/...heme/fonts/Poppins/Poppins-ThinItalic.ttf → ...sets/fonts/Poppins/Poppins-ThinItalic.ttf b/...heme/fonts/Poppins/Poppins-ThinItalic.ttf → ...sets/fonts/Poppins/Poppins-ThinItalic.ttf
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
@@ -4,7 +4,7 @@
     "change-language": "Change language",
     "logs": "Logs",
     "open-logs-directory": "Open logs directory",
-    "debug-info": "Debug info",
+    "debug-info": "Debug",
     "hardware-status": "Hardware status",
     "update-versions": "Update versions",
     "refresh-versions": "Refresh versions",
@@ -22,4 +22,4 @@
     "visual-mode": "Visual mode",
     "pool-mining": "Pool Mining",
     "pool-mining-description": "When enabled, you will mine in a pool and join a group of miners (tribe)."
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,20 @@
-import './theme/theme.css';
-import { StrictMode, useEffect } from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
-import { lightTheme } from './theme/themes';
+import { useEffect } from 'react';
+
 import { ContainerInner, DashboardContainer } from './theme/styles';
 import { SideBar } from './containers/SideBar';
 import { Dashboard } from './containers/Dashboard';
 import { AppBackground } from './containers/AppBackground';
-import ErrorSnackbar from './containers/Error/ErrorSnackbar';
 import { useUIStore } from './store/useUIStore.ts';
 import { useGetStatus } from './hooks/useGetStatus.ts';
 import { useSetUp } from './hooks/useSetUp.ts';
 import { useEnvironment } from './hooks/useEnvironment.ts';
 import { useAirdropTokensRefresh } from './hooks/airdrop/useAirdropTokensRefresh.ts';
 import { SplashScreen } from './containers/SplashScreen';
+import ThemeProvider from './theme/ThemeProvider.tsx';
+import { GlobalReset, GlobalStyle } from '@app/theme/GlobalStyle.ts';
 import { useMiningEffects } from './hooks/mining/useMiningEffects.ts';
 import { setupLogger } from './utils/logger.ts';
+import ErrorSnackbar from '@app/containers/Error/ErrorSnackbar.tsx';
 
 function App() {
     useAirdropTokensRefresh();
@@ -32,22 +31,21 @@ function App() {
     }, []);
 
     return (
-        <StrictMode>
-            <ThemeProvider theme={lightTheme}>
-                <CssBaseline enableColorScheme />
-                <AppBackground />
-                <SplashScreen />
-                {!showSplash && (
-                    <DashboardContainer>
-                        <ContainerInner>
-                            <SideBar />
-                            <Dashboard status={view} />
-                        </ContainerInner>
-                    </DashboardContainer>
-                )}
-                <ErrorSnackbar />
-            </ThemeProvider>
-        </StrictMode>
+        <ThemeProvider>
+            <GlobalReset />
+            <GlobalStyle />
+            <AppBackground />
+            <SplashScreen />
+            {!showSplash && (
+                <DashboardContainer>
+                    <ContainerInner>
+                        <SideBar />
+                        <Dashboard status={view} />
+                    </ContainerInner>
+                </DashboardContainer>
+            )}
+            <ErrorSnackbar />
+        </ThemeProvider>
     );
 }
 

diff --git a/src/assets/backgrounds/button-bg.png b/src/assets/backgrounds/button-bg.png
diff --git a/src/assets/icons/cube.svg b/src/assets/icons/cube.svg
diff --git a/src/assets/images/tiny-soon.png b/src/assets/images/tiny-soon.png
diff --git a/src/assets/tbot.svg b/src/assets/tbot.svg
diff --git a/src/components/CharSpinner/CharSpinner.styles.ts b/src/components/CharSpinner/CharSpinner.styles.ts
@@ -1,6 +1,6 @@
-import { styled } from '@mui/system';
 import { motion } from 'framer-motion';
 import { CharSpinnerVariant } from '@app/components/CharSpinner/CharSpinner.tsx';
+import styled from 'styled-components';
 
 interface Props {
     $decimal?: boolean;
@@ -42,9 +42,9 @@ export const Characters = styled(motion.div)<Props>`
     display: flex;
     flex-direction: column;
     align-items: center;
-    letter-spacing: -3px;
-    font-family: ${({ $variant }) =>
-        $variant == 'simple' ? '"PoppinsSemiBold", sans-serif' : `"DrukWideLCGBold", sans-serif`};
+    letter-spacing: -4px;
+    font-weight: ${({ $variant }) => ($variant == 'simple' ? 600 : 700)};
+    font-family: ${({ $variant }) => ($variant == 'simple' ? 'Poppins' : 'Druk')}, sans-serif;
     font-size: ${({ $fontSize }) => `${$fontSize}px`};
     line-height: ${({ $letterHeight }) => `${$letterHeight}px`};
 `;
@@ -53,5 +53,5 @@ export const Character = styled('div')<Props>`
     display: flex;
     justify-self: center;
     font-size: ${({ $fontSize }) => `${$fontSize}px`};
-    letter-spacing: -0.05ch;
+    letter-spacing: -0.02ch;
 `;
diff --git a/src/components/FieldErrorMessage/FieldErrorMessage.component.tsx b/src/components/FieldErrorMessage/FieldErrorMessage.component.tsx
@@ -1,8 +1,8 @@
 import type { FieldError } from 'react-hook-form';
-import Typography from '@mui/material/Typography';
 
 import { FieldsErrors } from './FieldErrorMessage.constants';
 import type { FieldErrorMessageProps } from './FieldErrorMessage.types';
+import { Typography } from '@app/components/elements/Typography.tsx';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
 
@@ -17,11 +17,7 @@ export const getFieldError = (error: FieldError | undefined, t: TFunction<'trans
     return t('field-error-message.invalid');
 };
 
-export const FieldErrorMessage: React.FC<FieldErrorMessageProps> = ({ error }) => {
+export const FieldErrorMessage = ({ error }: FieldErrorMessageProps) => {
     const { t } = useTranslation('components', { useSuspense: false });
-    return (
-        <Typography color="error" variant="body1" sx={{ width: '100%', display: 'inline-block' }}>
-            {getFieldError(error, t)}
-        </Typography>
-    );
+    return <Typography variant="p">{getFieldError(error, t)}</Typography>;
 };
diff --git a/src/components/MoneroAddressInput/MoneroAddressInput.component.tsx b/src/components/MoneroAddressInput/MoneroAddressInput.component.tsx
@@ -1,4 +1,3 @@
-import { Input, Stack } from '@mui/material';
 import { Control, Controller, FieldValues } from 'react-hook-form';
 
 import { FieldErrorMessage } from '../FieldErrorMessage/FieldErrorMessage.component';
@@ -10,44 +9,33 @@ import type {
     MoneroAddressInputProps,
     MoneroAddressInputType,
 } from './MoneroAddressInput.types';
+import { Stack } from '@app/components/elements/Stack.tsx';
+import { Input } from '@app/components/elements/inputs/Input.tsx';
+import { ChangeEvent } from 'react';
 
 const valueParses: Record<MoneroAddressInputType, RegExp> = {
     string: moneroAddressRegex,
 };
 
-export const MoneroAddressInput: React.FC<MoneroAddressInputProps> = ({
+export const MoneroAddressInput = ({
     title,
     value,
     onChange,
-    labelSx,
     error,
     type = 'string',
     ...inputProps
-}) => {
-    const validateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+}: MoneroAddressInputProps) => {
+    const validateChange = (event: ChangeEvent<HTMLInputElement>) => {
         const newValue = event.target.value;
 
         if (onChange && (valueParses[type].test(newValue) || newValue === '')) onChange(event);
     };
 
     return (
-        <Stack
-            gap={1}
-            sx={{
-                width: 'auto',
-                flexDirection: 'column',
-                justifyContent: 'flex-end',
-                position: 'relative',
-                ...inputProps.sx,
-            }}
-        >
-            {title && (
-                <MoneroAddressInputTypography variant="body1" component="label" sx={labelSx}>
-                    {title}
-                </MoneroAddressInputTypography>
-            )}
+        <Stack gap={1}>
+            {title && <MoneroAddressInputTypography>{title}</MoneroAddressInputTypography>}
             <Stack flexDirection="row" gap={1}>
-                <Input error={Boolean(error)} fullWidth value={value} onChange={validateChange} {...inputProps} />
+                <Input hasError={Boolean(error)} value={value} onChange={validateChange} {...inputProps} />
             </Stack>
             {error && <FieldErrorMessage error={error} />}
         </Stack>
@@ -74,7 +62,7 @@ export const ControlledMoneroAddressInput = <FormValues extends FieldValues>({
             />
         )}
         name={name}
-        control={control as Control<FieldValues>}
+        control={control as Control}
         rules={rules}
     />
 );
diff --git a/src/components/MoneroAddressInput/MoneroAddressInput.styles.tsx b/src/components/MoneroAddressInput/MoneroAddressInput.styles.tsx
@@ -1,8 +1,9 @@
-import { styled, Typography } from '@mui/material';
+import styled from 'styled-components';
+import { Typography } from '@app/components/elements/Typography.tsx';
 
-export const MoneroAddressInputTypography = styled(Typography)<{ component: string }>(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-    lineHeight: '135%',
-    display: 'inline-block',
-    color: theme.palette.text.primary,
-}));
+export const MoneroAddressInputTypography = styled(Typography)`
+    margin-bottom: 20px;
+    line-height: 135%;
+    display: inline-block;
+    color: ${({ theme }) => theme.palette.text.primary};,
+`;