Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-07 17:06:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

more color fixes

Browse Source
This commit is contained in:
PhilReact 2025-04-27 20:28:18 +03:00
parent eb457f91af
commit e280295c15
30 changed files with 759 additions and 998 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@ -36,7 +36,6 @@ import qortLogo from './assets/qort.png';
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Return } from './assets/Icons/Return.tsx'; import { Return } from './assets/Icons/Return.tsx';
import WarningIcon from '@mui/icons-material/Warning'; import WarningIcon from '@mui/icons-material/Warning';
import Success from './assets/svgs/Success.svg';
import './utils/seedPhrase/RandomSentenceGenerator'; import './utils/seedPhrase/RandomSentenceGenerator';
import EngineeringIcon from '@mui/icons-material/Engineering'; import EngineeringIcon from '@mui/icons-material/Engineering';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
@ -137,6 +136,7 @@ import { useTranslation } from 'react-i18next';
import LanguageSelector from './components/Language/LanguageSelector.tsx'; import LanguageSelector from './components/Language/LanguageSelector.tsx';
import { DownloadWallet } from './components/Auth/DownloadWallet.tsx'; import { DownloadWallet } from './components/Auth/DownloadWallet.tsx';
import { CopyIcon } from './assets/Icons/CopyIcon.tsx'; import { CopyIcon } from './assets/Icons/CopyIcon.tsx';
import { SuccessIcon } from './assets/Icons/SuccessIcon.tsx';
type extStates = type extStates =
| 'not-authenticated' | 'not-authenticated'
@ -2931,7 +2931,7 @@ function App() {
{walletToBeDownloaded && ( {walletToBeDownloaded && (
<> <>
<Spacer height="48px" /> <Spacer height="48px" />
<img src={Success} /> <SuccessIcon />
<Spacer height="45px" /> <Spacer height="45px" />
<TextP <TextP
sx={{ sx={{
@ -2987,7 +2987,7 @@ function App() {
}} }}
> >
<Spacer height="48px" /> <Spacer height="48px" />
<img src={Success} /> <SuccessIcon />
<Spacer height="45px" /> <Spacer height="45px" />
<TextP <TextP
sx={{ sx={{
@ -3012,7 +3012,7 @@ function App() {
{extState === 'transfer-success-request' && ( {extState === 'transfer-success-request' && (
<> <>
<Spacer height="48px" /> <Spacer height="48px" />
<img src={Success} /> <SuccessIcon />
<Spacer height="45px" /> <Spacer height="45px" />
<TextP <TextP
sx={{ sx={{
@ -3037,7 +3037,7 @@ function App() {
{extState === 'buy-order-submitted' && ( {extState === 'buy-order-submitted' && (
<> <>
<Spacer height="48px" /> <Spacer height="48px" />
<img src={Success} /> <SuccessIcon />
<Spacer height="45px" /> <Spacer height="45px" />
<TextP <TextP
sx={{ sx={{

33
src/assets/Icons/ComposeIcon.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useTheme } from '@mui/material';
import { SVGProps } from './interfaces';
export const ComposeIcon: React.FC<SVGProps> = ({
color,
height = 20,
width = 20,
opacity,
...children
}) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
const setOpacity = opacity ? opacity : 1;
return (
<svg
{...children}
width={width}
height={height}
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M50.3 3c1.5 0 3.9 0.6 5.5 1.4 1.5 0.7 3.3 2.5 4 4 0.6 1.4 1.2 3.7 1.2 5.1 0 1.4-0.6 3.7-1.4 5.3-0.8 1.5-9.9 11.1-39.1 40l-6.7 1.6c-3.8 0.9-7.9 1.6-9.3 1.6-1.8 0-2.5-0.5-2.5-2 0-1.1 0.7-5.3 3.2-16.5l18.1-18.4c10-10 19.6-19.2 21.2-20.2 1.7-1 4.2-1.9 5.8-1.9zm-8.4 11.3c0 0.7 1.5 2.7 3.3 4.4 1.8 1.8 3.9 3.3 4.6 3.3 0.6 0 2.3-1.4 3.7-3 1.4-1.7 2.5-4 2.5-5.3 0.1-1.2-0.7-3-1.7-3.9-1-1-2.8-1.8-4-1.8-1.2 0-3.5 1.2-5.3 2.6-1.7 1.4-3.1 3.1-3.1 3.7z"
fill={setColor}
opacity={setOpacity}
fillRule="evenodd"
/>
</svg>
);
};

12
src/assets/Icons/CreateThreadIcon.tsx
View File

@ -1,15 +1,18 @@
import React from 'react'; import React from 'react';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { SVGProps } from './interfaces'; import { SVGProps } from './interfaces';
import { useTheme } from '@mui/material';
// Create a styled container with hover effects // Create a styled container with hover effects
const SvgContainer = styled('svg')({ const SvgContainer = styled('svg')<{ color?: string }>(({ color }) => ({
'& path': { '& path': {
fill: 'rgba(41, 41, 43, 1)', // Default to red if no color prop fill: color,
}, },
}); }));
export const CreateThreadIcon: React.FC<SVGProps> = ({ color }) => {
const theme = useTheme();
export const CreateThreadIcon: React.FC<SVGProps> = ({ color, opacity }) => { const setColor = color || theme.palette.text.primary;
return ( return (
<SvgContainer <SvgContainer
width="20" width="20"
@ -17,6 +20,7 @@ export const CreateThreadIcon: React.FC<SVGProps> = ({ color, opacity }) => {
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
color={setColor}
> >
<path <path
d="M0 9.80209V9.0205C0.0460138 8.67679 0.080024 8.31425 0.144043 7.98466C0.469856 6.30568 1.25577 4.79934 2.38071 3.6977C4.13924 1.88262 6.22987 0.985679 8.52256 0.674927C9.9086 0.485649 11.3116 0.565177 12.6758 0.910345C14.5124 1.34351 16.1889 2.2075 17.6053 3.67886C18.7276 4.84183 19.5319 6.24257 19.858 7.98466C19.918 8.31189 19.952 8.64383 20 8.97577V9.80209C19.9827 9.8676 19.9693 9.93447 19.96 10.0022C19.8708 11.2186 19.5113 12.3861 18.9177 13.3875C17.961 15.0025 16.6297 16.2594 15.0825 17.0082C12.4657 18.3525 9.75693 18.5667 6.98209 17.8346C6.8589 17.8074 6.73157 17.8264 6.61799 17.8887C5.15955 18.7339 3.70511 19.5908 2.24867 20.4501C2.18866 20.4854 2.12464 20.5183 2.0146 20.5748L3.78714 16.3703C3.37301 16.0148 2.96889 15.7017 2.60078 15.3415C1.42243 14.1879 0.556167 12.7895 0.182055 11.0192C0.0980294 10.6213 0.060018 10.2094 0 9.80209ZM14.0042 10.5931C14.1362 10.5968 14.2676 10.5698 14.3907 10.5135C14.5138 10.4572 14.6262 10.3728 14.7214 10.2651C14.8167 10.1574 14.8928 10.0286 14.9455 9.8861C14.9982 9.7436 15.0264 9.59023 15.0285 9.43484V9.4113C15.0285 9.25517 15.0024 9.10058 14.9516 8.95634C14.9008 8.8121 14.8264 8.68104 14.7326 8.57064C14.6388 8.46025 14.5274 8.37268 14.4048 8.31293C14.2823 8.25319 14.1509 8.22243 14.0182 8.22243C13.8855 8.22243 13.7542 8.25319 13.6316 8.31293C13.509 8.37268 13.3976 8.46025 13.3038 8.57064C13.21 8.68104 13.1356 8.8121 13.0848 8.95634C13.034 9.10058 13.0079 9.25517 13.0079 9.4113C13.0074 9.56588 13.0327 9.71906 13.0825 9.86211C13.1323 10.0052 13.2055 10.1353 13.2981 10.245C13.3906 10.3547 13.5005 10.442 13.6217 10.5017C13.7429 10.5614 13.8728 10.5925 14.0042 10.5931ZM10.003 10.5931C10.203 10.5926 10.3983 10.5225 10.5644 10.3915C10.7306 10.2606 10.86 10.0746 10.9364 9.85719C11.0129 9.63976 11.0329 9.40056 10.9939 9.16977C10.9549 8.93898 10.8588 8.72694 10.7175 8.5604C10.5763 8.39385 10.3962 8.28026 10.2002 8.23396C10.0041 8.18765 9.80084 8.21071 9.61591 8.30022C9.43099 8.38973 9.27273 8.54168 9.1611 8.7369C9.04948 8.93212 8.98949 9.16187 8.9887 9.39717C8.98975 9.71356 9.09688 10.0167 9.28682 10.2406C9.47675 10.4646 9.73413 10.5912 10.003 10.5931ZM4.98349 9.3854C4.9836 9.61979 5.04316 9.8488 5.15456 10.0431C5.26595 10.2374 5.42411 10.3882 5.60876 10.476C5.79341 10.5639 5.99616 10.5849 6.19102 10.5364C6.38588 10.4878 6.56399 10.3719 6.70252 10.2035C6.84105 10.0351 6.93371 9.82183 6.96861 9.59108C7.00352 9.36032 6.97909 9.12255 6.89845 8.90823C6.8178 8.69392 6.68463 8.51281 6.51597 8.38811C6.34732 8.26342 6.15087 8.20081 5.95179 8.20831C5.69208 8.21809 5.44579 8.34641 5.26507 8.56611C5.08434 8.78581 4.98336 9.07963 4.98349 9.3854Z" d="M0 9.80209V9.0205C0.0460138 8.67679 0.080024 8.31425 0.144043 7.98466C0.469856 6.30568 1.25577 4.79934 2.38071 3.6977C4.13924 1.88262 6.22987 0.985679 8.52256 0.674927C9.9086 0.485649 11.3116 0.565177 12.6758 0.910345C14.5124 1.34351 16.1889 2.2075 17.6053 3.67886C18.7276 4.84183 19.5319 6.24257 19.858 7.98466C19.918 8.31189 19.952 8.64383 20 8.97577V9.80209C19.9827 9.8676 19.9693 9.93447 19.96 10.0022C19.8708 11.2186 19.5113 12.3861 18.9177 13.3875C17.961 15.0025 16.6297 16.2594 15.0825 17.0082C12.4657 18.3525 9.75693 18.5667 6.98209 17.8346C6.8589 17.8074 6.73157 17.8264 6.61799 17.8887C5.15955 18.7339 3.70511 19.5908 2.24867 20.4501C2.18866 20.4854 2.12464 20.5183 2.0146 20.5748L3.78714 16.3703C3.37301 16.0148 2.96889 15.7017 2.60078 15.3415C1.42243 14.1879 0.556167 12.7895 0.182055 11.0192C0.0980294 10.6213 0.060018 10.2094 0 9.80209ZM14.0042 10.5931C14.1362 10.5968 14.2676 10.5698 14.3907 10.5135C14.5138 10.4572 14.6262 10.3728 14.7214 10.2651C14.8167 10.1574 14.8928 10.0286 14.9455 9.8861C14.9982 9.7436 15.0264 9.59023 15.0285 9.43484V9.4113C15.0285 9.25517 15.0024 9.10058 14.9516 8.95634C14.9008 8.8121 14.8264 8.68104 14.7326 8.57064C14.6388 8.46025 14.5274 8.37268 14.4048 8.31293C14.2823 8.25319 14.1509 8.22243 14.0182 8.22243C13.8855 8.22243 13.7542 8.25319 13.6316 8.31293C13.509 8.37268 13.3976 8.46025 13.3038 8.57064C13.21 8.68104 13.1356 8.8121 13.0848 8.95634C13.034 9.10058 13.0079 9.25517 13.0079 9.4113C13.0074 9.56588 13.0327 9.71906 13.0825 9.86211C13.1323 10.0052 13.2055 10.1353 13.2981 10.245C13.3906 10.3547 13.5005 10.442 13.6217 10.5017C13.7429 10.5614 13.8728 10.5925 14.0042 10.5931ZM10.003 10.5931C10.203 10.5926 10.3983 10.5225 10.5644 10.3915C10.7306 10.2606 10.86 10.0746 10.9364 9.85719C11.0129 9.63976 11.0329 9.40056 10.9939 9.16977C10.9549 8.93898 10.8588 8.72694 10.7175 8.5604C10.5763 8.39385 10.3962 8.28026 10.2002 8.23396C10.0041 8.18765 9.80084 8.21071 9.61591 8.30022C9.43099 8.38973 9.27273 8.54168 9.1611 8.7369C9.04948 8.93212 8.98949 9.16187 8.9887 9.39717C8.98975 9.71356 9.09688 10.0167 9.28682 10.2406C9.47675 10.4646 9.73413 10.5912 10.003 10.5931ZM4.98349 9.3854C4.9836 9.61979 5.04316 9.8488 5.15456 10.0431C5.26595 10.2374 5.42411 10.3882 5.60876 10.476C5.79341 10.5639 5.99616 10.5849 6.19102 10.5364C6.38588 10.4878 6.56399 10.3719 6.70252 10.2035C6.84105 10.0351 6.93371 9.82183 6.96861 9.59108C7.00352 9.36032 6.97909 9.12255 6.89845 8.90823C6.8178 8.69392 6.68463 8.51281 6.51597 8.38811C6.34732 8.26342 6.15087 8.20081 5.95179 8.20831C5.69208 8.21809 5.44579 8.34641 5.26507 8.56611C5.08434 8.78581 4.98336 9.07963 4.98349 9.3854Z"

16
src/assets/Icons/SendNewMessage.tsx
View File

@ -1,17 +1,23 @@
import React from 'react'; import React from 'react';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { SVGProps } from './interfaces'; import { SVGProps } from './interfaces';
import { useTheme } from '@mui/material';
// Create a styled container with hover effects // Make SvgContainer accept a prop
const SvgContainer = styled('svg')({ const SvgContainer = styled('svg')<{ color?: string }>(({ color }) => ({
'& path': { '& path': {
fill: 'rgba(41, 41, 43, 1)', // Default to red if no color prop fill: color,
}, },
}); }));
export const SendNewMessage: React.FC<SVGProps> = ({ color, opacity }) => { export const SendNewMessage: React.FC<SVGProps> = ({ color, ...props }) => {
const theme = useTheme();
const setColor = color || theme.palette.text.primary;
return ( return (
<SvgContainer <SvgContainer
{...props}
color={setColor}
width="20" width="20"
height="20" height="20"
viewBox="0 0 20 20" viewBox="0 0 20 20"

37
src/assets/Icons/SortIcon.tsx Normal file
View File

@ -0,0 +1,37 @@
import { useTheme } from '@mui/material';
import { SVGProps } from './interfaces';
export const SortIcon: React.FC<SVGProps> = ({
color,
height = 16,
width = 15,
opacity,
...children
}) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
const setOpacity = opacity ? opacity : 1;
return (
<svg
{...children}
width={width}
height={height}
viewBox="0 0 15 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.3347 0.271977C14.0797 0.0885134 13.79 0 13.5034 0C13.0191 0 12.5424 0.251056 12.2542 0.711326L12.0008 1.11366L10.6942 3.20097L9.44204 5.19976C9.15388 5.66003 9 6.19916 9 6.75116V14.3987C9 15.2822 9.67136 16 10.4996 16C10.9145 16 11.2902 15.8214 11.5602 15.5301C11.8318 15.2404 11.9992 14.8397 11.9992 14.3987V7.57353C11.9992 7.11809 12.1275 6.6723 12.3628 6.29411L14.7465 2.48964C14.917 2.21605 15 1.90706 15 1.60129C15 1.08469 14.7646 0.577751 14.3332 0.270368L14.3347 0.271977Z"
fill={setColor}
opacity={setOpacity}
/>
<path
d="M4.30727 3.20032L3.00075 1.11344L2.74881 0.711183C2.46065 0.251006 1.98391 0 1.49962 0C1.21297 0 0.923309 0.0884956 0.668343 0.271923C0.235353 0.579244 0 1.08608 0 1.60257C0 1.90829 0.0829771 2.21722 0.254966 2.49075L2.63716 6.29445C2.87403 6.67257 3.00075 7.11826 3.00075 7.57361V14.399C3.00075 15.2824 3.67211 16 4.50038 16C5.32864 16 6 15.2824 6 14.399V6.75141C6 6.19952 5.84762 5.6605 5.55947 5.20032L4.30576 3.20193L4.30727 3.20032Z"
fill={setColor}
opacity={setOpacity}
/>
</svg>
);
};

32
src/assets/Icons/SuccessIcon.tsx Normal file
View File

@ -0,0 +1,32 @@
import { useTheme } from '@mui/material';
import { SVGProps } from './interfaces';
export const SuccessIcon: React.FC<SVGProps> = ({
color,
height = 155,
width = 156,
opacity,
...children
}) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
const setOpacity = opacity ? opacity : 1;
return (
<svg
{...children}
width={width}
height={height}
viewBox="0 0 156 155"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M78 0C57.4456 0 37.7349 8.16507 23.1984 22.6984C8.66507 37.2332 0.5 56.9446 0.5 77.5C0.5 98.0554 8.66507 117.765 23.1984 132.302C37.7332 146.835 57.4445 155 78 155C98.5554 155 118.265 146.835 132.802 132.302C147.335 117.767 155.5 98.0554 155.5 77.5C155.48 56.9522 147.308 37.2523 132.779 22.7227C118.249 8.19318 98.5489 0.0215072 78.0014 0.00138561L78 0ZM66.5377 111.48L29.1001 77.2273L39.5907 65.765L66.0523 89.992L115.768 40.2557L126.764 51.2517L66.5377 111.48Z"
fill={setColor}
opacity={setOpacity}
/>
</svg>
);
};

9
src/assets/svgs/ComposeIcon copy.svg
View File

@ -1,9 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="20" height="20" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_127_477" transform="scale(0.015625)"/>
</pattern>
<image id="image0_127_477" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAACW0lEQVR4nO3bu2sUURSA8RsVMQRRfBArQ3yAb8RC0MZKsLBRtLHQQvEfEBEVS+2sjQHjo1TERhCLNHZWVsFGxShiFLTygSj+5OIKm2E3m12Tnbk789V7z+53zpl7z87uhFBRUZEiWIi9uIQx3MUozmMX+kIvgkU4iUkz8xxHeyoRWIlx7fEQy0LqYBivdMYzLA2Jy082EPuCERzDfpzCffxs8NoHSV4Omss/wmCTNTsw0WDNkdAj8jewoMXa5Q2SMJFMF2guP9ZKPtMJvzLrd4aE5W/OVr4uVtwT6jkXEpW/1a58LV7cGOsZCQnK34mTX4cxD2Ri3QuJyU9h4D/ixiOyntGQkHz9kbekw9jXTediSEy+4yRgDb6azu6QoHzbSYgbJh6bzstONtJ5AUMdzvZRqr9F7D5ca7D2eEi08rPuhFrl47CUZbzTk6Ro8k2TUJOPw1KW2GmrQsJt3/JyqMnHYSnLG6zvRfn6JAwUXX54jtq+GXFYyhLfb10vV34mClP5oUq+u7wtu/yGvN1DJa+qfDcpddu/x+a83UMlr6p8Nyl120+VXX5L3u6hkldVvptUbR/yRrXhyWO331qEyq/G6xyGnE2hCOBsDvL5Dzn/qP23rlt8KETbZ35X+1RK+UgcObsovy0UDZwurXwEt0srH8GLMssPllY+gsPzJP+x8PIRXJ0n+e0hBfC0zPL9+FFK+Qj2lVY+ggullZ+DL0Df8QSXsTakiL/ndDs3LuIzOGewB4tD6uBdE9nftUdN4kOJJ7Ax9CI4hM/4VmvnKziIFXl/toqKMG/8Ad4tdVYcSnGDAAAAAElFTkSuQmCC"/>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

4
src/assets/svgs/Sort.svg
View File

@ -1,4 +0,0 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3347 0.271977C14.0797 0.0885134 13.79 0 13.5034 0C13.0191 0 12.5424 0.251056 12.2542 0.711326L12.0008 1.11366L10.6942 3.20097L9.44204 5.19976C9.15388 5.66003 9 6.19916 9 6.75116V14.3987C9 15.2822 9.67136 16 10.4996 16C10.9145 16 11.2902 15.8214 11.5602 15.5301C11.8318 15.2404 11.9992 14.8397 11.9992 14.3987V7.57353C11.9992 7.11809 12.1275 6.6723 12.3628 6.29411L14.7465 2.48964C14.917 2.21605 15 1.90706 15 1.60129C15 1.08469 14.7646 0.577751 14.3332 0.270368L14.3347 0.271977Z" fill="white"/>
<path d="M4.30727 3.20032L3.00075 1.11344L2.74881 0.711183C2.46065 0.251006 1.98391 0 1.49962 0C1.21297 0 0.923309 0.0884956 0.668343 0.271923C0.235353 0.579244 0 1.08608 0 1.60257C0 1.90829 0.0829771 2.21722 0.254966 2.49075L2.63716 6.29445C2.87403 6.67257 3.00075 7.11826 3.00075 7.57361V14.399C3.00075 15.2824 3.67211 16 4.50038 16C5.32864 16 6 15.2824 6 14.399V6.75141C6 6.19952 5.84762 5.6605 5.55947 5.20032L4.30576 3.20193L4.30727 3.20032Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

3
src/assets/svgs/Success.svg
View File

@ -1,3 +0,0 @@
<svg width="156" height="155" viewBox="0 0 156 155" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M78 0C57.4456 0 37.7349 8.16507 23.1984 22.6984C8.66507 37.2332 0.5 56.9446 0.5 77.5C0.5 98.0554 8.66507 117.765 23.1984 132.302C37.7332 146.835 57.4445 155 78 155C98.5554 155 118.265 146.835 132.802 132.302C147.335 117.767 155.5 98.0554 155.5 77.5C155.48 56.9522 147.308 37.2523 132.779 22.7227C118.249 8.19318 98.5489 0.0215072 78.0014 0.00138561L78 0ZM66.5377 111.48L29.1001 77.2273L39.5907 65.765L66.0523 89.992L115.768 40.2557L126.764 51.2517L66.5377 111.48Z" fill="white" fill-opacity="0.5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 615 B

22
src/common/CustomLoader.tsx
View File

@ -1,7 +1,19 @@
import React from 'react' import React from 'react';
import './customloader.css' import './customloader.css';
import { Box, useTheme } from '@mui/material';
export const CustomLoader = () => { export const CustomLoader = () => {
const theme = useTheme();
return ( return (
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div> <Box
) sx={{
} '--text-primary': theme.palette.text.primary,
}}
className="lds-ellipsis"
>
<div></div>
<div></div>
<div></div>
<div></div>
</Box>
);
};

45
src/common/LazyLoad.tsx
View File

@ -1,28 +1,29 @@
import React, { useState, useEffect, useRef } from 'react' import React, { useState, useEffect, useRef } from 'react';
import { useInView } from 'react-intersection-observer' import { useInView } from 'react-intersection-observer';
import CircularProgress from '@mui/material/CircularProgress' import CircularProgress from '@mui/material/CircularProgress';
import { useTheme } from '@mui/material';
interface Props { interface Props {
onLoadMore: () => Promise<void> onLoadMore: () => Promise<void>;
} }
const LazyLoad: React.FC<Props> = ({ onLoadMore }) => { const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
const [isFetching, setIsFetching] = useState<boolean>(false) const [isFetching, setIsFetching] = useState<boolean>(false);
const theme = useTheme();
const firstLoad = useRef(false) const firstLoad = useRef(false);
const [ref, inView] = useInView({ const [ref, inView] = useInView({
threshold: 0.7 threshold: 0.7,
}) });
useEffect(() => { useEffect(() => {
if (inView) { if (inView) {
setIsFetching(true) setIsFetching(true);
onLoadMore().finally(() => { onLoadMore().finally(() => {
setIsFetching(false) setIsFetching(false);
firstLoad.current = true firstLoad.current = true;
}) });
} }
}, [inView]) }, [inView]);
return ( return (
<div <div
@ -30,18 +31,22 @@ const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
minHeight: '25px' minHeight: '25px',
}} }}
> >
<div <div
style={{ style={{
visibility: isFetching ? 'visible' : 'hidden' visibility: isFetching ? 'visible' : 'hidden',
}} }}
> >
<CircularProgress /> <CircularProgress
sx={{
color: theme.palette.text.primary,
}}
/>
</div> </div>
</div> </div>
) );
} };
export default LazyLoad export default LazyLoad;

2
src/common/customloader.css
View File

@ -1,5 +1,5 @@
.lds-ellipsis { .lds-ellipsis {
color: white; color: var(--text-primary);
} }
.lds-ellipsis, .lds-ellipsis,
.lds-ellipsis div { .lds-ellipsis div {

10
src/components/Auth/DownloadWallet.tsx
View File

@ -1,4 +1,10 @@
import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'; import {
Box,
Checkbox,
FormControlLabel,
Typography,
useTheme,
} from '@mui/material';
import { Spacer } from '../../common/Spacer'; import { Spacer } from '../../common/Spacer';
import { Return } from '../../assets/Icons/Return'; import { Return } from '../../assets/Icons/Return';
import { CustomButton, CustomLabel, TextP } from '../../styles/App-styles'; import { CustomButton, CustomLabel, TextP } from '../../styles/App-styles';
@ -24,7 +30,7 @@ export const DownloadWallet = ({
useState<string>(''); useState<string>('');
const [newPassword, setNewPassword] = useState<string>(''); const [newPassword, setNewPassword] = useState<string>('');
const [keepCurrentPassword, setKeepCurrentPassword] = useState<boolean>(true); const [keepCurrentPassword, setKeepCurrentPassword] = useState<boolean>(true);
const theme = useTheme();
const [walletToBeDownloadedError, setWalletToBeDownloadedError] = const [walletToBeDownloadedError, setWalletToBeDownloadedError] =
useState<string>(''); useState<string>('');

2
src/components/Chat/MessageItem.tsx
View File

@ -384,7 +384,7 @@ export const MessageItem = React.memo(
<ButtonBase <ButtonBase
key={reaction} key={reaction}
sx={{ sx={{
background: theme.palette.background.paper, background: theme.palette.background.surface,
borderRadius: '7px', borderRadius: '7px',
height: '30px', height: '30px',
minWidth: '45px', minWidth: '45px',

174
src/components/ContextMenu.tsx
View File

@ -1,35 +1,46 @@
import React, { useState, useRef, useMemo, useEffect } from 'react'; import React, { useState, useRef, useMemo, useEffect } from 'react';
import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material'; import {
ListItemIcon,
Menu,
MenuItem,
Typography,
styled,
useTheme,
} from '@mui/material';
import MailOutlineIcon from '@mui/icons-material/MailOutline'; import MailOutlineIcon from '@mui/icons-material/MailOutline';
import NotificationsOffIcon from '@mui/icons-material/NotificationsOff'; import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
import { executeEvent } from '../utils/events'; import { executeEvent } from '../utils/events';
const CustomStyledMenu = styled(Menu)(({ theme }) => ({ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
'& .MuiPaper-root': { '& .MuiPaper-root': {
backgroundColor: '#f9f9f9', // backgroundColor: '#f9f9f9',
borderRadius: '12px', borderRadius: '12px',
padding: theme.spacing(1), padding: theme.spacing(1),
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
},
'& .MuiMenuItem-root': {
fontSize: '14px', // Smaller font size for the menu item text
// color: '#444',
transition: '0.3s background-color',
'&:hover': {
backgroundColor: theme.palette.action.hover, // Explicit hover state
}, },
'& .MuiMenuItem-root': { },
fontSize: '14px', // Smaller font size for the menu item text }));
color: '#444',
transition: '0.3s background-color',
'&:hover': {
backgroundColor: '#f0f0f0', // Explicit hover state
},
},
}));
export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups }) => { export const ContextMenu = ({
children,
groupId,
getUserSettings,
mutedGroups,
}) => {
const [menuPosition, setMenuPosition] = useState(null); const [menuPosition, setMenuPosition] = useState(null);
const longPressTimeout = useRef(null); const longPressTimeout = useRef(null);
const preventClick = useRef(false); // Flag to prevent click after long-press or right-click const preventClick = useRef(false); // Flag to prevent click after long-press or right-click
const theme = useTheme();
const isMuted = useMemo(()=> { const isMuted = useMemo(() => {
return mutedGroups.includes(groupId) return mutedGroups.includes(groupId);
}, [mutedGroups, groupId]) }, [mutedGroups, groupId]);
// Handle right-click (context menu) for desktop // Handle right-click (context menu) for desktop
const handleContextMenu = (event) => { const handleContextMenu = (event) => {
@ -67,56 +78,52 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups })
} }
}; };
const handleSetGroupMute = () => {
const handleSetGroupMute = ()=> {
try { try {
let value = [...mutedGroups] let value = [...mutedGroups];
if(isMuted){ if (isMuted) {
value = value.filter((group)=> group !== groupId) value = value.filter((group) => group !== groupId);
} else { } else {
value.push(groupId) value.push(groupId);
} }
window.sendMessage("addUserSettings", { window
.sendMessage('addUserSettings', {
keyValue: { keyValue: {
key: 'mutedGroups', key: 'mutedGroups',
value, value,
}, },
}) })
.then((response) => { .then((response) => {
if (response?.error) { if (response?.error) {
console.error("Error adding user settings:", response.error); console.error('Error adding user settings:', response.error);
} else { } else {
console.log("User settings added successfully"); console.log('User settings added successfully');
} }
}) })
.catch((error) => { .catch((error) => {
console.error("Failed to add user settings:", error.message || "An error occurred"); console.error(
}); 'Failed to add user settings:',
error.message || 'An error occurred'
setTimeout(() => { );
getUserSettings() });
}, 400);
} catch (error) { setTimeout(() => {
getUserSettings();
} }, 400);
} } catch (error) {}
};
const handleClose = (e) => { const handleClose = (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setMenuPosition(null); setMenuPosition(null);
}; };
return ( return (
<div <div
onContextMenu={handleContextMenu} // For desktop right-click onContextMenu={handleContextMenu} // For desktop right-click
onTouchStart={handleTouchStart} // For mobile long-press start onTouchStart={handleTouchStart} // For mobile long-press start
onTouchEnd={handleTouchEnd} // For mobile long-press end onTouchEnd={handleTouchEnd} // For mobile long-press end
style={{ width: '100%', height: '100%' }} style={{ width: '100%', height: '100%' }}
> >
{children} {children}
@ -131,35 +138,48 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups })
? { top: menuPosition.mouseY, left: menuPosition.mouseX } ? { top: menuPosition.mouseY, left: menuPosition.mouseX }
: undefined : undefined
} }
onClick={(e)=> { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
> >
<MenuItem onClick={(e) => { <MenuItem
handleClose(e) onClick={(e) => {
executeEvent("markAsRead", { handleClose(e);
groupId executeEvent('markAsRead', {
}); groupId,
}}> });
}}
>
<ListItemIcon sx={{ minWidth: '32px' }}> <ListItemIcon sx={{ minWidth: '32px' }}>
<MailOutlineIcon fontSize="small" /> <MailOutlineIcon
sx={{
color: theme.palette.text.primary,
}}
fontSize="small"
/>
</ListItemIcon> </ListItemIcon>
<Typography variant="inherit" sx={{ fontSize: '14px' }}> <Typography variant="inherit" sx={{ fontSize: '14px' }}>
Mark As Read Mark As Read
</Typography> </Typography>
</MenuItem> </MenuItem>
<MenuItem onClick={(e) => { <MenuItem
onClick={(e) => {
handleClose(e) handleClose(e);
handleSetGroupMute() handleSetGroupMute();
}}
}}> >
<ListItemIcon sx={{ minWidth: '32px' }}> <ListItemIcon sx={{ minWidth: '32px' }}>
<NotificationsOffIcon fontSize="small" sx={{ <NotificationsOffIcon
color: isMuted && 'red' fontSize="small"
}} /> sx={{
color: isMuted ? 'red' : theme.palette.text.primary,
}}
/>
</ListItemIcon> </ListItemIcon>
<Typography variant="inherit" sx={{ fontSize: '14px', color: isMuted && 'red' }}> <Typography
variant="inherit"
sx={{ fontSize: '14px', color: isMuted && 'red' }}
>
{isMuted ? 'Unmute ' : 'Mute '}Push Notifications {isMuted ? 'Unmute ' : 'Mute '}Push Notifications
</Typography> </Typography>
</MenuItem> </MenuItem>
@ -167,5 +187,3 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups })
</div> </div>
); );
}; };

4
src/components/GlobalActions/JoinGroup.tsx
View File

@ -9,6 +9,7 @@ import {
DialogActions, DialogActions,
DialogContent, DialogContent,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { CustomButton, CustomButtonAccept } from '../../styles/App-styles'; import { CustomButton, CustomButtonAccept } from '../../styles/App-styles';
import { getBaseApiReact, MyContext } from '../../App'; import { getBaseApiReact, MyContext } from '../../App';
@ -23,6 +24,7 @@ export const JoinGroup = ({ memberGroups }) => {
const [groupInfo, setGroupInfo] = useState(null); const [groupInfo, setGroupInfo] = useState(null);
const [isLoadingInfo, setIsLoadingInfo] = useState(false); const [isLoadingInfo, setIsLoadingInfo] = useState(false);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const theme = useTheme();
const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false); const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
const handleJoinGroup = async (e) => { const handleJoinGroup = async (e) => {
setGroupInfo(null); setGroupInfo(null);
@ -151,7 +153,7 @@ export const JoinGroup = ({ memberGroups }) => {
<CircularProgress <CircularProgress
size={25} size={25}
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/>{' '} />{' '}
</Box> </Box>

21
src/components/Group/Forum/GroupMail.tsx
View File

@ -5,7 +5,7 @@ import React, {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { Avatar, Box, Popover, Typography } from '@mui/material'; import { Avatar, Box, Popover, Typography, useTheme } from '@mui/material';
// import { MAIL_SERVICE_TYPE, THREAD_SERVICE_TYPE } from "../../constants/mail"; // import { MAIL_SERVICE_TYPE, THREAD_SERVICE_TYPE } from "../../constants/mail";
import { Thread } from './Thread'; import { Thread } from './Thread';
import { import {
@ -49,7 +49,6 @@ import {
handleUnencryptedPublishes, handleUnencryptedPublishes,
} from '../../Chat/GroupAnnouncements'; } from '../../Chat/GroupAnnouncements';
import CheckSVG from '../../../assets/svgs/Check.svg'; import CheckSVG from '../../../assets/svgs/Check.svg';
import SortSVG from '../../../assets/svgs/Sort.svg';
import ArrowDownSVG from '../../../assets/svgs/ArrowDown.svg'; import ArrowDownSVG from '../../../assets/svgs/ArrowDown.svg';
import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar'; import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar';
import { executeEvent } from '../../../utils/events'; import { executeEvent } from '../../../utils/events';
@ -57,6 +56,8 @@ import RefreshIcon from '@mui/icons-material/Refresh';
import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App'; import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App';
import { addDataPublishesFunc, getDataPublishesFunc } from '../Group'; import { addDataPublishesFunc, getDataPublishesFunc } from '../Group';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SortIcon } from '../../../assets/Icons/SortIcon';
import { CustomButton } from '../../../styles/App-styles';
const filterOptions = ['Recently active', 'Newest', 'Oldest']; const filterOptions = ['Recently active', 'Newest', 'Oldest'];
@ -83,7 +84,7 @@ export const GroupMail = ({
const [tempPublishedList, setTempPublishedList] = useState([]); const [tempPublishedList, setTempPublishedList] = useState([]);
const dataPublishes = useRef({}); const dataPublishes = useRef({});
const { t } = useTranslation(['core']); const { t } = useTranslation(['core']);
const theme = useTheme();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const groupIdRef = useRef<any>(null); const groupIdRef = useRef<any>(null);
const groupId = useMemo(() => { const groupId = useMemo(() => {
@ -657,7 +658,7 @@ export const GroupMail = ({
}} }}
ref={anchorElInstanceFilter} ref={anchorElInstanceFilter}
> >
<ComposeIcon src={SortSVG} /> <SortIcon />
<SelectInstanceContainerFilterInner> <SelectInstanceContainerFilterInner>
<ComposeP>Sort by</ComposeP> <ComposeP>Sort by</ComposeP>
@ -771,7 +772,7 @@ export const GroupMail = ({
</div> </div>
)} )}
</div> </div>
<Box <CustomButton
onClick={() => { onClick={() => {
setTimeout(() => { setTimeout(() => {
executeEvent('threadFetchMode', { executeEvent('threadFetchMode', {
@ -781,7 +782,6 @@ export const GroupMail = ({
}} }}
sx={{ sx={{
alignItems: 'center', alignItems: 'center',
backgroundColor: '#27282c',
borderRadius: '5px', borderRadius: '5px',
bottom: '2px', bottom: '2px',
cursor: 'pointer', cursor: 'pointer',
@ -790,14 +790,11 @@ export const GroupMail = ({
padding: '5px', padding: '5px',
position: 'absolute', position: 'absolute',
right: '2px', right: '2px',
'&:hover': { minWidth: 'unset',
background: 'rgba(255, 255, 255, 0.60)',
},
}} }}
> >
<Typography <Typography
sx={{ sx={{
color: 'white',
fontSize: '12px', fontSize: '12px',
}} }}
> >
@ -807,11 +804,11 @@ export const GroupMail = ({
</Typography> </Typography>
<ArrowForwardIosIcon <ArrowForwardIosIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
fontSize: '12px', fontSize: '12px',
}} }}
/> />
</Box> </CustomButton>
</SingleThreadParent> </SingleThreadParent>
); );
})} })}

384
src/components/Group/Forum/Mail-styles.ts
View File

@ -1,4 +1,4 @@
import { Typography, Box, TextField } from '@mui/material'; import { Typography, Box } from '@mui/material';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
export const InstanceContainer = styled(Box)(({ theme }) => ({ export const InstanceContainer = styled(Box)(({ theme }) => ({
@ -88,7 +88,7 @@ export const ComposeContainer = styled(Box)(({ theme }) => ({
transition: '0.2s background-color', transition: '0.2s background-color',
justifyContent: 'center', justifyContent: 'center',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(67, 68, 72, 1)', backgroundColor: theme.palette.action.hover,
}, },
})); }));
@ -141,19 +141,6 @@ export const SelectInstanceContainer = styled(Box)(({ theme }) => ({
gap: '17px', gap: '17px',
})); }));
export const SelectInstanceContainerInner = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: '3px',
cursor: 'pointer',
padding: '8px',
transition: 'all 0.2s',
'&:hover': {
borderRadius: '8px',
background: '#434448',
},
}));
export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({ export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -174,81 +161,6 @@ export const InstanceP = styled(Typography)(({ theme }) => ({
fontWeight: 500, fontWeight: 500,
})); }));
export const MailMessageRowContainer = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
justifyContent: 'space-between',
borderRadius: '56px 5px 10px 56px',
paddingRight: '15px',
transition: 'background 0.2s',
gap: '10px',
'&:hover': {
background: '#434448',
},
}));
export const MailMessageRowProfile = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
justifyContent: 'flex-start',
gap: '10px',
width: '50%',
overflow: 'hidden',
}));
export const MailMessageRowInfo = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
justifyContent: 'flex-start',
gap: '7px',
width: '50%',
}));
export const MailMessageRowInfoStatusNotDecrypted = styled(Typography)(
({ theme }) => ({
fontSize: '16px',
fontWeight: 900,
textTransform: 'uppercase',
paddingTop: '2px',
})
);
export const MailMessageRowInfoStatusRead = styled(Typography)(({ theme }) => ({
fontSize: '16px',
fontWeight: 300,
}));
export const MessageExtraInfo = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: '2px',
overflow: 'hidden',
}));
export const MessageExtraName = styled(Typography)(({ theme }) => ({
fontSize: '16px',
fontWeight: 900,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}));
export const MessageExtraDate = styled(Typography)(({ theme }) => ({
fontSize: '15px',
fontWeight: 500,
}));
export const MessagesContainer = styled(Box)(({ theme }) => ({
width: '460px',
maxWidth: '90%',
display: 'flex',
flexDirection: 'column',
gap: '12px',
}));
export const InstanceListParent = styled(Box)` export const InstanceListParent = styled(Box)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -378,44 +290,6 @@ export const InstanceListContainerRowGroupIcon = styled('img')({
userSelect: 'none', userSelect: 'none',
objectFit: 'contain', objectFit: 'contain',
}); });
export const TypeInAliasTextfield = styled(TextField)({
width: '340px', // Adjust the width as needed
borderRadius: '5px',
backgroundColor: 'rgba(30, 30, 32, 1)',
border: 'none',
outline: 'none',
input: {
fontSize: 16,
color: 'white',
'&::placeholder': {
fontSize: 16,
color: 'rgba(255, 255, 255, 0.2)',
},
border: 'none',
outline: 'none',
padding: '10px',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
border: 'none',
},
'&:hover fieldset': {
border: 'none',
},
'&.Mui-focused fieldset': {
border: 'none',
},
},
'& .MuiInput-underline:before': {
borderBottom: 'none',
},
'& .MuiInput-underline:hover:not(.Mui-disabled):before': {
borderBottom: 'none',
},
'& .MuiInput-underline:after': {
borderBottom: 'none',
},
});
export const NewMessageCloseImg = styled('img')({ export const NewMessageCloseImg = styled('img')({
width: 'auto', width: 'auto',
@ -427,6 +301,7 @@ export const NewMessageCloseImg = styled('img')({
export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({ export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({
fontSize: '18px', fontSize: '18px',
fontWeight: 600, fontWeight: 600,
color: theme.palette.text.primary,
})); }));
export const NewMessageInputRow = styled(Box)(({ theme }) => ({ export const NewMessageInputRow = styled(Box)(({ theme }) => ({
@ -480,29 +355,24 @@ export const NewMessageAttachmentImg = styled('img')({
border: '1px dashed #646464', border: '1px dashed #646464',
}); });
export const NewMessageSendButton = styled(Box)` export const NewMessageSendButton = styled(Box)(({ theme }) => ({
border-radius: 4px; borderRadius: '4px',
border: 1px solid rgba(0, 0, 0, 0.9); border: `1px solid ${theme.palette.border.main}`, // you can replace with theme.palette.divider or whatever you want later
display: inline-flex; display: 'inline-flex',
padding: 8px 16px 8px 12px; padding: '8px 16px 8px 12px',
justify-content: center; justifyContent: 'center',
align-items: center; alignItems: 'center',
gap: 8px; width: 'fit-content',
width: fit-content; transition: 'all 0.2s',
transition: all 0.2s; color: theme.palette.text.primary, // replace later with theme.palette.text.primary if needed
color: black; minWidth: '120px',
min-width: 120px; position: 'relative',
gap: 8px; gap: '8px',
position: relative; cursor: 'pointer',
cursor: pointer; '&:hover': {
&:hover { backgroundColor: theme.palette.action.hover, // replace with theme value if needed
background-color: rgba(41, 41, 43, 1); },
color: white; }));
svg path {
fill: white; // Fill color changes to white on hover
}
}
`;
export const NewMessageSendP = styled(Typography)` export const NewMessageSendP = styled(Typography)`
font-family: Roboto; font-family: Roboto;
@ -524,14 +394,7 @@ export const ShowMessageNameP = styled(Typography)`
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
`; `;
export const ShowMessageTimeP = styled(Typography)`
color: rgba(255, 255, 255, 0.5);
font-family: Roboto;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
`;
export const ShowMessageSubjectP = styled(Typography)` export const ShowMessageSubjectP = styled(Typography)`
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
@ -541,61 +404,44 @@ export const ShowMessageSubjectP = styled(Typography)`
text-align: left; text-align: left;
`; `;
export const ShowMessageButton = styled(Box)` export const ShowMessageButton = styled(Box)(({ theme }) => ({
display: inline-flex; display: 'inline-flex',
padding: 8px 16px 8px 16px; padding: '8px 16px',
align-items: center; alignItems: 'center',
justify-content: center; justifyContent: 'center',
gap: 8px; width: 'fit-content',
width: fit-content; transition: 'all 0.2s',
transition: all 0.2s; color: theme.palette.text.primary, // you'll replace with theme value
color: white; minWidth: '120px',
background-color: rgba(41, 41, 43, 1) gap: '8px',
min-width: 120px; borderRadius: '4px',
gap: 8px; border: theme.palette.border.main, // you'll replace
border-radius: 4px; fontFamily: 'Roboto',
border: 0.5px solid rgba(255, 255, 255, 0.70); cursor: 'pointer',
font-family: Roboto; '&:hover': {
background: theme.palette.action.hover, // you'll replace
borderRadius: '4px',
},
}));
min-width: 120px; export const ShowMessageReturnButton = styled(Box)(({ theme }) => ({
cursor: pointer; display: 'inline-flex',
&:hover { padding: '8px 16px',
border-radius: 4px; alignItems: 'center',
border: 0.5px solid rgba(255, 255, 255, 0.70); justifyContent: 'center',
background: #434448; width: 'fit-content',
} transition: 'all 0.2s',
`; color: theme.palette.text.primary, // you'll replace with theme value
export const ShowMessageReturnButton = styled(Box)` minWidth: '120px',
display: inline-flex; gap: '8px',
padding: 8px 16px 8px 16px; borderRadius: '4px',
align-items: center; fontFamily: 'Roboto',
justify-content: center; cursor: 'pointer',
gap: 8px; '&:hover': {
width: fit-content; background: theme.palette.action.hover, // you'll replace
transition: all 0.2s; borderRadius: '4px',
color: white; },
background-color: rgba(41, 41, 43, 1) }));
min-width: 120px;
gap: 8px;
border-radius: 4px;
font-family: Roboto;
min-width: 120px;
cursor: pointer;
&:hover {
border-radius: 4px;
background: #434448;
}
`;
export const ShowMessageButtonP = styled(Typography)`
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 19.2px */
letter-spacing: -0.16px;
color: white;
`;
export const ShowMessageButtonImg = styled('img')({ export const ShowMessageButtonImg = styled('img')({
width: 'auto', width: 'auto',
@ -630,18 +476,16 @@ export const MoreImg = styled('img')({
}, },
}); });
export const MoreP = styled(Typography)` export const MoreP = styled(Typography)(({ theme }) => ({
color: rgba(255, 255, 255, 0.5); color: theme.palette.text.primary, // Now dynamic
fontFamily: 'Roboto',
/* Attachments */ fontSize: '16px',
font-family: Roboto; fontStyle: 'normal',
font-size: 16px; fontWeight: 400,
font-style: normal; lineHeight: '120%', // 19.2px
font-weight: 400; letterSpacing: '-0.16px',
line-height: 120%; /* 19.2px */ whiteSpace: 'nowrap',
letter-spacing: -0.16px; }));
white-space: nowrap;
`;
export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({ export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
@ -658,7 +502,6 @@ export const ThreadContainer = styled(Box)(({ theme }) => ({
})); }));
export const GroupNameP = styled(Typography)` export const GroupNameP = styled(Typography)`
color: #fff;
font-size: 25px; font-size: 25px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -667,7 +510,6 @@ export const GroupNameP = styled(Typography)`
`; `;
export const AllThreadP = styled(Typography)` export const AllThreadP = styled(Typography)`
color: #fff;
font-size: 20px; font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -675,32 +517,32 @@ export const AllThreadP = styled(Typography)`
letter-spacing: 0.15px; letter-spacing: 0.15px;
`; `;
export const SingleThreadParent = styled(Box)` export const SingleThreadParent = styled(Box)(({ theme }) => ({
border-radius: 35px 4px 4px 35px; borderRadius: '35px 4px 4px 35px',
position: relative; position: 'relative',
background: #434448; display: 'flex',
display: flex; padding: '13px',
padding: 13px; cursor: 'pointer',
cursor: pointer; marginBottom: '5px',
margin-bottom: 5px; height: '76px',
height: 76px; alignItems: 'center',
align-items: center; transition: '0.2s all',
transition: 0.2s all; backgroundColor: theme.palette.background.paper, // or remove if you want no background by default
&:hover { '&:hover': {
background: rgba(255, 255, 255, 0.2); backgroundColor: theme.palette.action.hover,
} },
`; }));
export const SingleTheadMessageParent = styled(Box)` export const SingleTheadMessageParent = styled(Box)(({ theme }) => ({
border-radius: 35px 4px 4px 35px; borderRadius: '35px 4px 4px 35px',
background: #434448; background: theme.palette.background.paper,
display: flex; display: 'flex',
padding: 13px; padding: '13px',
cursor: pointer; cursor: 'pointer',
margin-bottom: 5px; marginBottom: '5px',
height: 76px; height: '76px',
align-items: center; alignItems: 'center',
`; }));
export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ export const ThreadInfoColumn = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
@ -713,7 +555,6 @@ export const ThreadInfoColumn = styled(Box)(({ theme }) => ({
})); }));
export const ThreadInfoColumnNameP = styled(Typography)` export const ThreadInfoColumnNameP = styled(Typography)`
color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
@ -724,26 +565,25 @@ export const ThreadInfoColumnNameP = styled(Typography)`
overflow: hidden; overflow: hidden;
`; `;
export const ThreadInfoColumnbyP = styled('span')` export const ThreadInfoColumnbyP = styled('span')(({ theme }) => ({
color: rgba(255, 255, 255, 0.8); color: theme.palette.text.secondary,
font-family: Roboto; fontFamily: 'Roboto',
font-size: 16px; fontSize: '16px',
font-style: normal; fontStyle: 'normal',
font-weight: 500; fontWeight: 500,
line-height: normal; lineHeight: 'normal',
`; }));
export const ThreadInfoColumnTime = styled(Typography)` export const ThreadInfoColumnTime = styled(Typography)(({ theme }) => ({
color: rgba(255, 255, 255, 0.8); color: theme.palette.text.secondary,
font-family: Roboto; fontFamily: 'Roboto',
font-size: 15px; fontSize: '15px',
font-style: normal; fontStyle: 'normal',
font-weight: 500; fontWeight: 500,
line-height: normal; lineHeight: 'normal',
`; }));
export const ThreadSingleTitle = styled(Typography)` export const ThreadSingleTitle = styled(Typography)`
color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 23px; font-size: 23px;
font-style: normal; font-style: normal;
@ -755,7 +595,6 @@ export const ThreadSingleTitle = styled(Typography)`
`; `;
export const ThreadSingleLastMessageP = styled(Typography)` export const ThreadSingleLastMessageP = styled(Typography)`
color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@ -764,7 +603,6 @@ export const ThreadSingleLastMessageP = styled(Typography)`
`; `;
export const ThreadSingleLastMessageSpanP = styled('span')` export const ThreadSingleLastMessageSpanP = styled('span')`
color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
@ -792,6 +630,6 @@ export const CloseContainer = styled(Box)(({ theme }) => ({
height: '50px', height: '50px',
borderRadius: '0px 12px 0px 0px', borderRadius: '0px 12px 0px 0px',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(162, 31, 31, 1)', backgroundColor: theme.palette.action.hover,
}, },
})); }));

42
src/components/Group/Forum/NewThread.tsx
View File

@ -1,12 +1,9 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Box, CircularProgress, Input } from '@mui/material'; import { Box, CircularProgress, Input, useTheme } from '@mui/material';
import ShortUniqueId from 'short-unique-id'; import ShortUniqueId from 'short-unique-id';
import ModalCloseSVG from '../../../assets/svgs/ModalClose.svg';
import ComposeIconSVG from '../../../assets/svgs/ComposeIcon.svg';
import { import {
CloseContainer, CloseContainer,
ComposeContainer, ComposeContainer,
ComposeIcon,
ComposeP, ComposeP,
InstanceFooter, InstanceFooter,
InstanceListContainer, InstanceListContainer,
@ -29,6 +26,8 @@ import { MessageDisplay } from '../../Chat/MessageDisplay';
import { CustomizedSnackbars } from '../../Snackbar/Snackbar'; import { CustomizedSnackbars } from '../../Snackbar/Snackbar';
import { saveTempPublish } from '../../Chat/GroupAnnouncements'; import { saveTempPublish } from '../../Chat/GroupAnnouncements';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ComposeIcon } from '../../../assets/Icons/ComposeIcon';
import CloseIcon from '@mui/icons-material/Close';
const uid = new ShortUniqueId({ length: 8 }); const uid = new ShortUniqueId({ length: 8 });
@ -152,6 +151,7 @@ export const NewThread = ({
const [openSnack, setOpenSnack] = React.useState(false); const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null); const [infoSnack, setInfoSnack] = React.useState(null);
const editorRef = useRef(null); const editorRef = useRef(null);
const theme = useTheme();
const setEditorRef = (editorInstance) => { const setEditorRef = (editorInstance) => {
editorRef.current = editorInstance; editorRef.current = editorInstance;
}; };
@ -406,7 +406,7 @@ export const NewThread = ({
}} }}
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<ComposeIcon src={ComposeIconSVG} /> <ComposeIcon />
<ComposeP>{currentThread ? 'New Post' : 'New Thread'}</ComposeP> <ComposeP>{currentThread ? 'New Post' : 'New Thread'}</ComposeP>
</ComposeContainer> </ComposeContainer>
@ -417,7 +417,7 @@ export const NewThread = ({
maxWidth: '950px', maxWidth: '950px',
height: '700px', height: '700px',
borderRadius: '12px 12px 0px 0px', borderRadius: '12px 12px 0px 0px',
background: '#434448', background: theme.palette.background.paper,
padding: '0px', padding: '0px',
gap: '0px', gap: '0px',
}} }}
@ -429,7 +429,7 @@ export const NewThread = ({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '#434448', backgroundColor: theme.palette.background.paper,
}} }}
> >
<NewMessageHeaderP> <NewMessageHeaderP>
@ -441,12 +441,16 @@ export const NewThread = ({
}} }}
onClick={closeModal} onClick={closeModal}
> >
<NewMessageCloseImg src={ModalCloseSVG} /> <CloseIcon
sx={{
color: theme.palette.text.primary,
}}
/>
</CloseContainer> </CloseContainer>
</InstanceListHeader> </InstanceListHeader>
<InstanceListContainer <InstanceListContainer
sx={{ sx={{
backgroundColor: '#434448', backgroundColor: theme.palette.background.paper,
padding: '20px 42px', padding: '20px 42px',
height: 'calc(100% - 165px)', height: 'calc(100% - 165px)',
flexShrink: 0, flexShrink: 0,
@ -468,9 +472,7 @@ export const NewThread = ({
autoCorrect="off" autoCorrect="off"
sx={{ sx={{
width: '100%', width: '100%',
color: 'white',
'& .MuiInput-input::placeholder': { '& .MuiInput-input::placeholder': {
color: 'rgba(255,255,255, 0.70) !important',
fontSize: '20px', fontSize: '20px',
fontStyle: 'normal', fontStyle: 'normal',
fontWeight: 400, fontWeight: 400,
@ -525,7 +527,7 @@ export const NewThread = ({
<InstanceFooter <InstanceFooter
sx={{ sx={{
backgroundColor: '#434448', backgroundColor: theme.palette.background.paper,
padding: '20px 42px', padding: '20px 42px',
alignItems: 'center', alignItems: 'center',
height: '90px', height: '90px',
@ -543,7 +545,12 @@ export const NewThread = ({
alignItems: 'center', alignItems: 'center',
}} }}
> >
<CircularProgress sx={{}} size={'12px'} /> <CircularProgress
sx={{
color: theme.palette.text.primary,
}}
size={'12px'}
/>
</Box> </Box>
)} )}
@ -552,9 +559,14 @@ export const NewThread = ({
</NewMessageSendP> </NewMessageSendP>
{isMessage ? ( {isMessage ? (
<SendNewMessage opacity={1} height="25px" width="25px" /> <SendNewMessage />
) : ( ) : (
<CreateThreadIcon opacity={1} height="25px" width="25px" /> <CreateThreadIcon
color={theme.palette.text.primary}
opacity={1}
height="25px"
width="25px"
/>
)} )}
</NewMessageSendButton> </NewMessageSendButton>
</InstanceFooter> </InstanceFooter>

2
src/components/Group/Forum/ShowMessageWithoutModal.tsx
View File

@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction';
export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => { export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
const [expandAttachments, setExpandAttachments] = useState<boolean>(false); const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
console.log('message', message);
let cleanHTML = ''; let cleanHTML = '';
if (message?.htmlContent) { if (message?.htmlContent) {
cleanHTML = DOMPurify.sanitize(message.htmlContent); cleanHTML = DOMPurify.sanitize(message.htmlContent);

23
src/components/Group/Forum/Thread.tsx
View File

@ -5,7 +5,14 @@ import React, {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { Avatar, Box, Button, ButtonBase, Typography } from '@mui/material'; import {
Avatar,
Box,
Button,
ButtonBase,
Typography,
useTheme,
} from '@mui/material';
import { ShowMessage } from './ShowMessageWithoutModal'; import { ShowMessage } from './ShowMessageWithoutModal';
import { import {
ComposeP, ComposeP,
@ -43,6 +50,7 @@ import { CustomLoader } from '../../../common/CustomLoader';
import { WrapperUserAction } from '../../WrapperUserAction'; import { WrapperUserAction } from '../../WrapperUserAction';
import { formatTimestampForum } from '../../../utils/time'; import { formatTimestampForum } from '../../../utils/time';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ReturnIcon } from '../../../assets/Icons/ReturnIcon';
const requestQueueSaveToLocal = new RequestQueueWithPromise(1); const requestQueueSaveToLocal = new RequestQueueWithPromise(1);
@ -116,7 +124,7 @@ export const Thread = ({
const [postReply, setPostReply] = useState(null); const [postReply, setPostReply] = useState(null);
const [hasLastPage, setHasLastPage] = useState(false); const [hasLastPage, setHasLastPage] = useState(false);
const { t } = useTranslation(['core']); const { t } = useTranslation(['core']);
const theme = useTheme();
// Update: Use a new ref for the scrollable container // Update: Use a new ref for the scrollable container
const threadContainerRef = useRef(null); const threadContainerRef = useRef(null);
const threadBeginningRef = useRef(null); const threadBeginningRef = useRef(null);
@ -606,7 +614,7 @@ export const Thread = ({
closeThread(); closeThread();
}} }}
> >
<MailIconImg src={ReturnSVG} /> <ReturnIcon />
<ComposeP> <ComposeP>
{t('group:action.return_to_thread', { {t('group:action.return_to_thread', {
postProcess: 'capitalize', postProcess: 'capitalize',
@ -619,7 +627,7 @@ export const Thread = ({
<ButtonBase onClick={scrollToPosition}> <ButtonBase onClick={scrollToPosition}>
<ArrowUpwardIcon <ArrowUpwardIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
cursor: 'pointer', cursor: 'pointer',
fontSize: '36px', fontSize: '36px',
}} }}
@ -629,7 +637,7 @@ export const Thread = ({
<ButtonBase onClick={scrollToPosition}> <ButtonBase onClick={scrollToPosition}>
<ArrowDownwardIcon <ArrowDownwardIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
cursor: 'pointer', cursor: 'pointer',
fontSize: '36px', fontSize: '36px',
}} }}
@ -825,7 +833,6 @@ export const Thread = ({
<Typography <Typography
sx={{ sx={{
fontSize: '18px', fontSize: '18px',
color: 'white',
}} }}
> >
{fullMessage?.error} {fullMessage?.error}
@ -925,7 +932,6 @@ export const Thread = ({
<Typography <Typography
sx={{ sx={{
fontSize: '18px', fontSize: '18px',
color: 'white',
}} }}
> >
{t('core:downloading_qdn', { postProcess: 'capitalize' })} {t('core:downloading_qdn', { postProcess: 'capitalize' })}
@ -958,9 +964,6 @@ export const Thread = ({
groupInfo?.groupId groupInfo?.groupId
); );
}} }}
sx={{
color: 'white',
}}
> >
{t('group:action.refetch_page', { {t('group:action.refetch_page', {
postProcess: 'capitalize', postProcess: 'capitalize',

6
src/components/Group/GroupJoinRequests.tsx
View File

@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton';
import { RequestQueueWithPromise } from '../../utils/queue/queue'; import { RequestQueueWithPromise } from '../../utils/queue/queue';
import GroupAddIcon from '@mui/icons-material/GroupAdd'; import GroupAddIcon from '@mui/icons-material/GroupAdd';
import { executeEvent } from '../../utils/events'; import { executeEvent } from '../../utils/events';
import { Box, ButtonBase, Collapse, Typography } from '@mui/material'; import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
import { CustomLoader } from '../../common/CustomLoader'; import { CustomLoader } from '../../common/CustomLoader';
import { MyContext, getBaseApiReact } from '../../App'; import { MyContext, getBaseApiReact } from '../../App';
import { myGroupsWhereIAmAdminAtom } from '../../atoms/global'; import { myGroupsWhereIAmAdminAtom } from '../../atoms/global';
@ -35,7 +35,7 @@ export const GroupJoinRequests = ({
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const { txList, setTxList } = React.useContext(MyContext); const { txList, setTxList } = React.useContext(MyContext);
const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom); const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom);
const theme = useTheme();
const getJoinRequests = async () => { const getJoinRequests = async () => {
try { try {
setLoading(true); setLoading(true);
@ -244,7 +244,7 @@ export const GroupJoinRequests = ({
<IconButton edge="end" aria-label="comments"> <IconButton edge="end" aria-label="comments">
<GroupAddIcon <GroupAddIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
fontSize: '18px', fontSize: '18px',
}} }}
/> />

254
src/components/Group/GroupMenu.tsx
View File

@ -1,254 +0,0 @@
import { useState } from 'react';
import {
Button,
Menu,
MenuItem,
ListItemIcon,
ListItemText,
Box,
} from '@mui/material';
import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon';
import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
import { ChatIcon } from '../../assets/Icons/ChatIcon';
import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon';
import { MembersIcon } from '../../assets/Icons/MembersIcon';
export const GroupMenu = ({
setGroupSection,
groupSection,
setOpenManageMembers,
goToAnnouncements,
goToChat,
hasUnreadChat,
hasUnreadAnnouncements,
}) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
marginTop: '14px',
marginBottom: '14px',
}}
>
<Button
aria-controls={open ? 'home-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
variant="contained"
sx={{
backgroundColor: 'var(--bg-primary)',
width: '148px',
borderRadius: '5px',
fontSize: '12px',
fontWeight: 600,
color: '#fff',
textTransform: 'none',
padding: '5px',
height: '25px',
}}
>
<Box
sx={{
display: 'flex',
gap: '6px',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
}}
>
<Box
sx={{
display: 'flex',
gap: '6px',
alignItems: 'center',
}}
>
{groupSection === 'announcement' && (
<>
{' '}
<NotificationIcon2
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Announcements'}
</>
)}
{groupSection === 'chat' && (
<>
{' '}
<ChatIcon
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Group Chats'}
</>
)}
{groupSection === 'forum' && (
<>
{' '}
<ThreadsIcon
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Threads'}
</>
)}
</Box>
<ArrowDownIcon color="white" />
</Box>
</Button>
<Menu
id="home-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
slotProps={{
paper: {
sx: {
backgroundColor: 'var(--bg-primary)',
color: '#fff',
width: '148px',
borderRadius: '5px',
},
},
}}
sx={{
marginTop: '10px',
}}
>
<MenuItem
onClick={() => {
goToChat();
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<ChatIcon color={hasUnreadChat ? 'var(--danger)' : '#fff'} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
color: hasUnreadChat ? 'var(--danger)' : '#fff',
},
}}
primary="Chat"
/>
</MenuItem>
<MenuItem
onClick={() => {
goToAnnouncements();
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<NotificationIcon2
color={hasUnreadAnnouncements ? 'var(--danger)' : '#fff'}
/>
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
color: hasUnreadAnnouncements ? 'var(--danger)' : '#fff',
},
}}
primary="Announcements"
/>
</MenuItem>
<MenuItem
onClick={() => {
setGroupSection('forum');
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<ThreadsIcon color={'#fff'} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
},
}}
primary="Threads"
/>
</MenuItem>
<MenuItem
onClick={() => {
setOpenManageMembers(true);
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<MembersIcon sx={{ color: '#fff' }} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
},
}}
primary="Members"
/>
</MenuItem>
</Menu>
</Box>
);
};

21
src/components/Group/HomeDesktop.tsx
View File

@ -242,27 +242,6 @@ export const HomeDesktop = ({
)} )}
</Box> </Box>
<Spacer height="26px" />
{/* <Box
sx={{
display: "flex",
width: "100%",
justifyContent: "flex-start",
}}
>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={refreshHomeDataFunc}
sx={{
color: "white",
}}
>
Refresh home data
</Button>
</Box> */}
<Spacer height="180px" /> <Spacer height="180px" />
</Box> </Box>
); );

11
src/components/Group/ListOfGroupPromotions.tsx
View File

@ -21,6 +21,7 @@ import {
Select, Select,
TextField, TextField,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
@ -90,7 +91,7 @@ export const ListOfGroupPromotions = () => {
const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false); const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
const [isLoadingPublish, setIsLoadingPublish] = useState(false); const [isLoadingPublish, setIsLoadingPublish] = useState(false);
const { show, setTxList } = useContext(MyContext); const { show, setTxList } = useContext(MyContext);
const theme = useTheme();
const listRef = useRef(); const listRef = useRef();
const rowVirtualizer = useVirtualizer({ const rowVirtualizer = useVirtualizer({
count: promotions.length, count: promotions.length,
@ -673,7 +674,7 @@ export const ListOfGroupPromotions = () => {
<Avatar <Avatar
sx={{ sx={{
backgroundColor: '#27282c', backgroundColor: '#27282c',
color: 'white', color: theme.palette.text.primary,
}} }}
alt={promotion?.name} alt={promotion?.name}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${ src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
@ -765,7 +766,7 @@ export const ListOfGroupPromotions = () => {
} }
sx={{ sx={{
fontSize: '12px', fontSize: '12px',
color: 'white', color: theme.palette.text.primary,
}} }}
> >
Join Group: {` ${promotion?.groupName}`} Join Group: {` ${promotion?.groupName}`}
@ -845,10 +846,10 @@ export const ListOfGroupPromotions = () => {
multiline={true} multiline={true}
sx={{ sx={{
'& .MuiFormLabel-root': { '& .MuiFormLabel-root': {
color: 'white', color: theme.palette.text.primary,
}, },
'& .MuiFormLabel-root.Mui-focused': { '& .MuiFormLabel-root.Mui-focused': {
color: 'white', color: theme.palette.text.primary,
}, },
}} }}
/> />

8
src/components/Group/QMailMessages.tsx
View File

@ -153,7 +153,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
</Typography> </Typography>
<MarkEmailUnreadIcon <MarkEmailUnreadIcon
sx={{ sx={{
color: anyUnread ? 'var(--unread)' : 'white', color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
}} }}
/> />
{isExpanded ? ( {isExpanded ? (
@ -165,7 +165,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : ( ) : (
<ExpandMoreIcon <ExpandMoreIcon
sx={{ sx={{
color: anyUnread ? 'var(--unread)' : 'white', color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
marginLeft: 'auto', marginLeft: 'auto',
}} }}
/> />
@ -268,7 +268,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : !lastEnteredTimestamp ? ( ) : !lastEnteredTimestamp ? (
<MailOutlineIcon <MailOutlineIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
) : lastEnteredTimestamp < mail?.created && ) : lastEnteredTimestamp < mail?.created &&
@ -281,7 +281,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : ( ) : (
<MailOutlineIcon <MailOutlineIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
)} )}

14
src/components/Group/Settings.tsx
View File

@ -1,4 +1,12 @@
import { forwardRef, Fragment, ReactElement, Ref, useEffect } from 'react'; import {
ChangeEvent,
forwardRef,
Fragment,
ReactElement,
Ref,
useEffect,
useState,
} from 'react';
import Dialog from '@mui/material/Dialog'; import Dialog from '@mui/material/Dialog';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
@ -54,12 +62,12 @@ const Transition = forwardRef(function Transition(
}); });
export const Settings = ({ address, open, setOpen }) => { export const Settings = ({ address, open, setOpen }) => {
const [checked, setChecked] = React.useState(false); const [checked, setChecked] = useState(false);
const [isEnabledDevMode, setIsEnabledDevMode] = const [isEnabledDevMode, setIsEnabledDevMode] =
useRecoilState(enabledDevModeAtom); useRecoilState(enabledDevModeAtom);
const theme = useTheme(); const theme = useTheme();
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked); setChecked(event.target.checked);
window window
.sendMessage('addUserSettings', { .sendMessage('addUserSettings', {

14
src/components/Home/QortPrice.tsx
View File

@ -116,7 +116,7 @@ export const QortPrice = () => {
> >
<Tooltip <Tooltip
title={ title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}> <span style={{ fontSize: '14px', fontWeight: 700 }}>
Based on the latest 20 trades Based on the latest 20 trades
</span> </span>
} }
@ -127,7 +127,7 @@ export const QortPrice = () => {
tooltip: { tooltip: {
sx: { sx: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.paper,
}, },
}, },
arrow: { arrow: {
@ -156,7 +156,7 @@ export const QortPrice = () => {
</Typography> </Typography>
{!ltcPerQort ? ( {!ltcPerQort ? (
<BarSpinner width="16px" color="white" /> <BarSpinner width="16px" color={theme.palette.text.primary} />
) : ( ) : (
<Typography <Typography
sx={{ sx={{
@ -187,7 +187,7 @@ export const QortPrice = () => {
</Typography> </Typography>
{!supply ? ( {!supply ? (
<BarSpinner width="16px" color="white" /> <BarSpinner width="16px" color={theme.palette.text.primary} />
) : ( ) : (
<Typography <Typography
sx={{ sx={{
@ -200,7 +200,7 @@ export const QortPrice = () => {
</Box> </Box>
<Tooltip <Tooltip
title={ title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}> <span style={{ fontSize: '14px', fontWeight: 700 }}>
{lastBlock?.timestamp && formatDate(lastBlock?.timestamp)} {lastBlock?.timestamp && formatDate(lastBlock?.timestamp)}
</span> </span>
} }
@ -211,7 +211,7 @@ export const QortPrice = () => {
tooltip: { tooltip: {
sx: { sx: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.paper,
}, },
}, },
arrow: { arrow: {
@ -240,7 +240,7 @@ export const QortPrice = () => {
</Typography> </Typography>
{!lastBlock?.height ? ( {!lastBlock?.height ? (
<BarSpinner width="16px" color="white" /> <BarSpinner width="16px" color={theme.palette.text.primary} />
) : ( ) : (
<Typography <Typography
sx={{ sx={{

4
src/components/MainAvatar.tsx
View File

@ -8,6 +8,7 @@ import {
ButtonBase, ButtonBase,
Popover, Popover,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { Spacer } from '../common/Spacer'; import { Spacer } from '../common/Spacer';
import ImageUploader from '../common/ImageUploader'; import ImageUploader from '../common/ImageUploader';
@ -222,6 +223,7 @@ const PopoverComp = ({
isLoading, isLoading,
myName, myName,
}) => { }) => {
const theme = useTheme();
return ( return (
<Popover <Popover
id={id} id={id}
@ -260,7 +262,7 @@ const PopoverComp = ({
> >
<ErrorIcon <ErrorIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
<Typography> <Typography>

538
src/components/RegisterName.tsx
View File

@ -1,28 +1,29 @@
import React, { useCallback, useContext, useEffect, useState } from 'react' import React, { useCallback, useContext, useEffect, useState } from 'react';
import { import {
Avatar, Avatar,
Box, Box,
Button, Button,
ButtonBase, ButtonBase,
Collapse, Collapse,
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
Input, Input,
ListItem, ListItem,
ListItemAvatar, ListItemAvatar,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
List, List,
MenuItem, MenuItem,
Popover, Popover,
Select, Select,
TextField, TextField,
Typography, Typography,
} from "@mui/material"; useTheme,
} from '@mui/material';
import { Label } from './Group/AddGroup'; import { Label } from './Group/AddGroup';
import { Spacer } from '../common/Spacer'; import { Spacer } from '../common/Spacer';
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
@ -35,278 +36,313 @@ import CheckIcon from '@mui/icons-material/Check';
import ErrorIcon from '@mui/icons-material/Error'; import ErrorIcon from '@mui/icons-material/Error';
enum Availability { enum Availability {
NULL = 'null', NULL = 'null',
LOADING = 'loading', LOADING = 'loading',
AVAILABLE = 'available', AVAILABLE = 'available',
NOT_AVAILABLE = 'not-available' NOT_AVAILABLE = 'not-available',
} }
export const RegisterName = ({setOpenSnack, setInfoSnack, userInfo, show, setTxList, balance}) => { export const RegisterName = ({
const [isOpen, setIsOpen] = useState(false) setOpenSnack,
const [registerNameValue, setRegisterNameValue] = useState('') setInfoSnack,
const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false) userInfo,
const [isNameAvailable, setIsNameAvailable] = useState<Availability>(Availability.NULL) show,
const [nameFee, setNameFee] = useState(null) setTxList,
balance,
}) => {
const [isOpen, setIsOpen] = useState(false);
const [registerNameValue, setRegisterNameValue] = useState('');
const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false);
const [isNameAvailable, setIsNameAvailable] = useState<Availability>(
Availability.NULL
);
const [nameFee, setNameFee] = useState(null);
const theme = useTheme();
const checkIfNameExisits = async (name) => {
if (!name?.trim()) {
setIsNameAvailable(Availability.NULL);
const checkIfNameExisits = async (name)=> { return;
if(!name?.trim()){
setIsNameAvailable(Availability.NULL)
return
} }
setIsNameAvailable(Availability.LOADING) setIsNameAvailable(Availability.LOADING);
try { try {
const res = await fetch(`${getBaseApiReact()}/names/` + name); const res = await fetch(`${getBaseApiReact()}/names/` + name);
const data = await res.json() const data = await res.json();
if(data?.message === 'name unknown'){ if (data?.message === 'name unknown') {
setIsNameAvailable(Availability.AVAILABLE) setIsNameAvailable(Availability.AVAILABLE);
} else { } else {
setIsNameAvailable(Availability.NOT_AVAILABLE) setIsNameAvailable(Availability.NOT_AVAILABLE);
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error);
} finally { } finally {
} }
} };
// Debounce logic // Debounce logic
useEffect(() => { useEffect(() => {
const handler = setTimeout(() => { const handler = setTimeout(() => {
checkIfNameExisits(registerNameValue); checkIfNameExisits(registerNameValue);
}, 500); }, 500);
// Cleanup timeout if searchValue changes before the timeout completes
return () => {
clearTimeout(handler);
};
}, [registerNameValue]);
const openRegisterNameFunc = useCallback((e) => { // Cleanup timeout if searchValue changes before the timeout completes
setIsOpen(true) return () => {
clearTimeout(handler);
};
}, [registerNameValue]);
}, [ setIsOpen]); const openRegisterNameFunc = useCallback(
(e) => {
useEffect(() => { setIsOpen(true);
subscribeToEvent("openRegisterName", openRegisterNameFunc); },
[setIsOpen]
return () => { );
unsubscribeFromEvent("openRegisterName", openRegisterNameFunc);
};
}, [openRegisterNameFunc]);
useEffect(()=> { useEffect(() => {
const nameRegistrationFee = async ()=> { subscribeToEvent('openRegisterName', openRegisterNameFunc);
try {
const fee = await getFee("REGISTER_NAME");
setNameFee(fee?.fee)
} catch (error) {
console.error(error)
}
}
nameRegistrationFee()
}, [])
const registerName = async () => { return () => {
unsubscribeFromEvent('openRegisterName', openRegisterNameFunc);
};
}, [openRegisterNameFunc]);
useEffect(() => {
const nameRegistrationFee = async () => {
try { try {
if (!userInfo?.address) throw new Error("Your address was not found"); const fee = await getFee('REGISTER_NAME');
if(!registerNameValue) throw new Error('Enter a name') setNameFee(fee?.fee);
const fee = await getFee("REGISTER_NAME");
await show({
message: "Would you like to register this name?",
publishFee: fee.fee + " QORT",
});
setIsLoadingRegisterName(true);
new Promise((res, rej) => {
window
.sendMessage("registerName", {
name: registerNameValue,
})
.then((response) => {
if (!response?.error) {
res(response);
setIsLoadingRegisterName(false);
setInfoSnack({
type: "success",
message:
"Successfully registered. It may take a couple of minutes for the changes to propagate",
});
setIsOpen(false);
setRegisterNameValue("");
setOpenSnack(true);
setTxList((prev) => [
{
...response,
type: "register-name",
label: `Registered name: awaiting confirmation. This may take a couple minutes.`,
labelDone: `Registered name: success!`,
done: false,
},
...prev.filter((item) => !item.done),
]);
return;
}
setInfoSnack({
type: "error",
message: response?.error,
});
setOpenSnack(true);
rej(response.error);
})
.catch((error) => {
setInfoSnack({
type: "error",
message: error.message || "An error occurred",
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) { } catch (error) {
if (error?.message) { console.error(error);
setOpenSnack(true)
setInfoSnack({
type: "error",
message: error?.message,
});
}
} finally {
setIsLoadingRegisterName(false);
} }
}; };
nameRegistrationFee();
}, []);
const registerName = async () => {
try {
if (!userInfo?.address) throw new Error('Your address was not found');
if (!registerNameValue) throw new Error('Enter a name');
const fee = await getFee('REGISTER_NAME');
await show({
message: 'Would you like to register this name?',
publishFee: fee.fee + ' QORT',
});
setIsLoadingRegisterName(true);
new Promise((res, rej) => {
window
.sendMessage('registerName', {
name: registerNameValue,
})
.then((response) => {
if (!response?.error) {
res(response);
setIsLoadingRegisterName(false);
setInfoSnack({
type: 'success',
message:
'Successfully registered. It may take a couple of minutes for the changes to propagate',
});
setIsOpen(false);
setRegisterNameValue('');
setOpenSnack(true);
setTxList((prev) => [
{
...response,
type: 'register-name',
label: `Registered name: awaiting confirmation. This may take a couple minutes.`,
labelDone: `Registered name: success!`,
done: false,
},
...prev.filter((item) => !item.done),
]);
return;
}
setInfoSnack({
type: 'error',
message: response?.error,
});
setOpenSnack(true);
rej(response.error);
})
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
if (error?.message) {
setOpenSnack(true);
setInfoSnack({
type: 'error',
message: error?.message,
});
}
} finally {
setIsLoadingRegisterName(false);
}
};
return ( return (
<Dialog <Dialog
open={isOpen} open={isOpen}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
<DialogTitle id="alert-dialog-title"> <DialogTitle id="alert-dialog-title">{'Register name'}</DialogTitle>
{"Register name"} <DialogContent>
</DialogTitle> <Box
<DialogContent>
<Box
sx={{ sx={{
width: "400px", width: '400px',
maxWidth: '90vw', maxWidth: '90vw',
height: "500px", height: '500px',
maxHeight: '90vh', maxHeight: '90vh',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
gap: "10px", gap: '10px',
padding: "10px", padding: '10px',
}} }}
> >
<Label>Choose a name</Label> <Label>Choose a name</Label>
<TextField <TextField
autoComplete='off' autoComplete="off"
autoFocus autoFocus
onChange={(e) => setRegisterNameValue(e.target.value)} onChange={(e) => setRegisterNameValue(e.target.value)}
value={registerNameValue} value={registerNameValue}
placeholder="Choose a name" placeholder="Choose a name"
/> />
{(!balance || (nameFee && balance && balance < nameFee))&& ( {(!balance || (nameFee && balance && balance < nameFee)) && (
<> <>
<Spacer height="10px" /> <Spacer height="10px" />
<Box sx={{ <Box
display: 'flex', sx={{
gap: '5px', display: 'flex',
alignItems: 'center' gap: '5px',
}}> alignItems: 'center',
<ErrorIcon sx={{ }}
color: 'white' >
}} /> <ErrorIcon
<Typography>Your balance is {balance ?? 0} QORT. A name registration requires a {nameFee} QORT fee</Typography> sx={{
</Box> color: 'white',
<Spacer height="10px" /> }}
/>
<Typography>
Your balance is {balance ?? 0} QORT. A name registration
requires a {nameFee} QORT fee
</Typography>
</Box>
<Spacer height="10px" />
</> </>
)} )}
<Spacer height="5px" /> <Spacer height="5px" />
{isNameAvailable === Availability.AVAILABLE && ( {isNameAvailable === Availability.AVAILABLE && (
<Box sx={{ <Box
sx={{
display: 'flex', display: 'flex',
gap: '5px', gap: '5px',
alignItems: 'center' alignItems: 'center',
}}> }}
<CheckIcon sx={{ >
color: 'white' <CheckIcon
}} /> sx={{
<Typography>{registerNameValue} is available</Typography> color: 'white',
}}
/>
<Typography>{registerNameValue} is available</Typography>
</Box> </Box>
)} )}
{isNameAvailable === Availability.NOT_AVAILABLE && ( {isNameAvailable === Availability.NOT_AVAILABLE && (
<Box sx={{ <Box
sx={{
display: 'flex', display: 'flex',
gap: '5px', gap: '5px',
alignItems: 'center' alignItems: 'center',
}}> }}
<ErrorIcon sx={{ >
color: 'white' <ErrorIcon
}} /> sx={{
<Typography>{registerNameValue} is unavailable</Typography> color: 'white',
}}
/>
<Typography>{registerNameValue} is unavailable</Typography>
</Box> </Box>
)} )}
{isNameAvailable === Availability.LOADING && ( {isNameAvailable === Availability.LOADING && (
<Box sx={{ <Box
sx={{
display: 'flex', display: 'flex',
gap: '5px', gap: '5px',
alignItems: 'center' alignItems: 'center',
}}> }}
<BarSpinner width="16px" color="white" /> >
<Typography>Checking if name already existis</Typography> <BarSpinner width="16px" color={theme.palette.text.primary} />
<Typography>Checking if name already existis</Typography>
</Box> </Box>
)} )}
<Spacer height="25px" /> <Spacer height="25px" />
<Typography sx={{ <Typography
textDecoration: 'underline' sx={{
}}>Benefits of a name</Typography> textDecoration: 'underline',
<List }}
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }} >
aria-label="contacts" Benefits of a name
> </Typography>
<ListItem disablePadding> <List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
<ListItemIcon> aria-label="contacts"
<RadioButtonCheckedIcon sx={{ >
color: 'white' <ListItem disablePadding>
}} /> <ListItemIcon>
</ListItemIcon> <RadioButtonCheckedIcon
<ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" /> sx={{
color: 'white',
</ListItem> }}
<ListItem disablePadding> />
</ListItemIcon>
<ListItemIcon> <ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" />
<RadioButtonCheckedIcon sx={{ </ListItem>
color: 'white' <ListItem disablePadding>
}} /> <ListItemIcon>
</ListItemIcon> <RadioButtonCheckedIcon
<ListItemText primary="Secure ownership of data published by your name. You can even sell your name, along with your data to a third party." /> sx={{
color: 'white',
</ListItem> }}
</List> />
</ListItemIcon>
<ListItemText primary="Secure ownership of data published by your name. You can even sell your name, along with your data to a third party." />
</ListItem>
</List>
</Box> </Box>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button
disabled={isLoadingRegisterName} disabled={isLoadingRegisterName}
variant="contained" variant="contained"
onClick={() => { onClick={() => {
setIsOpen(false) setIsOpen(false);
setRegisterNameValue('') setRegisterNameValue('');
}} }}
> >
Close Close
</Button> </Button>
<Button <Button
disabled={!registerNameValue.trim() ||isLoadingRegisterName || isNameAvailable !== Availability.AVAILABLE || !balance || ((balance && nameFee) && +balance < +nameFee)} disabled={
variant="contained" !registerNameValue.trim() ||
onClick={registerName} isLoadingRegisterName ||
autoFocus isNameAvailable !== Availability.AVAILABLE ||
> !balance ||
Register Name (balance && nameFee && +balance < +nameFee)
</Button> }
</DialogActions> variant="contained"
</Dialog> onClick={registerName}
) autoFocus
} >
Register Name
</Button>
</DialogActions>
</Dialog>
);
};