Set rbutton adius to 8px

src/App.tsx

@@ -3034,7 +3034,7 @@ function App() {
                         <Box
                           sx={{
                             background: theme.palette.background.paper,
-                            borderRadius: '5px',
+                            borderRadius: '8px',
                             padding: '10px',
                             textAlign: 'center',
                             width: '100%',

src/components/Apps/AppPublish.tsx

@@ -29,7 +29,7 @@ import { useTranslation } from 'react-i18next';
 const CustomSelect = styled(Select)({
   border: '0.5px solid var(--50-white, #FFFFFF80)',
   padding: '0px 15px',
-  borderRadius: '5px',
+  borderRadius: '8px',
   height: '36px',
   width: '100%',
   maxWidth: '450px',
@@ -377,7 +377,7 @@ export const AppPublish = ({ names, categories }) => {
           sx={{
             border: `0.5px solid ${theme.palette.action.disabled}`,
             padding: '0px 15px',
-            borderRadius: '5px',
+            borderRadius: '8px',
             height: '36px',
             width: '100%',
             maxWidth: '450px',
@@ -404,7 +404,7 @@ export const AppPublish = ({ names, categories }) => {
           sx={{
             border: `0.5px solid ${theme.palette.action.disabled}`,
             padding: '0px 15px',
-            borderRadius: '5px',
+            borderRadius: '8px',
             height: '36px',
             width: '100%',
             maxWidth: '450px',
@@ -470,7 +470,7 @@ export const AppPublish = ({ names, categories }) => {
             sx={{
               border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               height: '36px',
               width: '100px',
             }}
@@ -487,7 +487,7 @@ export const AppPublish = ({ names, categories }) => {
             sx={{
               border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               height: '36px',
               width: '100px',
             }}
@@ -504,7 +504,7 @@ export const AppPublish = ({ names, categories }) => {
             sx={{
               border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               height: '36px',
               width: '100px',
             }}
@@ -521,7 +521,7 @@ export const AppPublish = ({ names, categories }) => {
             sx={{
               border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               height: '36px',
               width: '100px',
             }}
@@ -538,7 +538,7 @@ export const AppPublish = ({ names, categories }) => {
             sx={{
               border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               height: '36px',
               width: '100px',
             }}

src/components/Apps/Apps-styles.tsx

@@ -342,7 +342,7 @@ export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
 export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
   alignItems: 'center',
   backgroundColor: theme.palette.background.paper,
-  borderRadius: '5px',
+  borderRadius: '8px',
   color: theme.palette.text.primary,
   display: 'flex',
   fontSize: '16px',

src/components/Apps/AppsNavBarDesktop.tsx

@@ -284,7 +284,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
           paper: {
             sx: {
               backgroundColor: theme.palette.background.default,
-              borderRadius: '5px',
+              borderRadius: '8px',
               color: theme.palette.text.primary,
               width: '148px',
             },

src/components/BuyQortInformation.tsx

@@ -95,7 +95,7 @@ export const BuyQortInformation = ({ balance }) => {
               '&:hover': { backgroundColor: theme.palette.secondary.main },
               transition: 'all 0.1s ease-in-out',
               padding: '5px',
-              borderRadius: '5px',
+              borderRadius: '8px',
               gap: '5px',
             }}
             onClick={async () => {

src/components/Chat/MessageItem.tsx

@@ -327,7 +327,7 @@ export const MessageItem = memo(
                   <Box
                     sx={{
                       backgroundColor: theme.palette.background.surface,
-                      borderRadius: '5px',
+                      borderRadius: '8px',
                       cursor: 'pointer',
                       display: 'flex',
                       gap: '20px',
@@ -630,7 +630,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
     <Box
       sx={{
         backgroundColor: theme.palette.background.surface,
-        borderRadius: '5px',
+        borderRadius: '8px',
         cursor: 'pointer',
         display: 'flex',
         gap: '20px',

src/components/Explore/Explore.tsx

@@ -21,7 +21,7 @@ export const Explore = ({ setDesktopViewMode }) => {
       <ButtonBase
         sx={{
           '&:hover': { backgroundColor: theme.palette.background.paper },
-          borderRadius: '5px',
+          borderRadius: '8px',
           gap: '5px',
           padding: '5px',
           transition: 'all 0.1s ease-in-out',
@@ -55,7 +55,7 @@ export const Explore = ({ setDesktopViewMode }) => {
       <ButtonBase
         sx={{
           '&:hover': { backgroundColor: theme.palette.background.paper },
-          borderRadius: '5px',
+          borderRadius: '8px',
           gap: '5px',
           padding: '5px',
           transition: 'all 0.1s ease-in-out',
@@ -84,7 +84,7 @@ export const Explore = ({ setDesktopViewMode }) => {
       <ButtonBase
         sx={{
           '&:hover': { backgroundColor: theme.palette.background.paper },
-          borderRadius: '5px',
+          borderRadius: '8px',
           gap: '5px',
           padding: '5px',
           transition: 'all 0.1s ease-in-out',
@@ -117,7 +117,7 @@ export const Explore = ({ setDesktopViewMode }) => {
           '&:hover': { backgroundColor: theme.palette.background.paper },
           transition: 'all 0.1s ease-in-out',
           padding: '5px',
-          borderRadius: '5px',
+          borderRadius: '8px',
           gap: '5px',
         }}
         onClick={async () => {

src/components/Group/Forum/GroupMail.tsx

@@ -783,7 +783,7 @@ export const GroupMail = ({
                   }}
                   sx={{
                     alignItems: 'center',
-                    borderRadius: '5px',
+                    borderRadius: '8px',
                     bottom: '2px',
                     cursor: 'pointer',
                     display: 'flex',

src/components/Group/Forum/ShowMessageWithoutModal.tsx

@@ -163,7 +163,7 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
               sx={{
                 width: '100%',
                 opacity: 0.7,
-                borderRadius: '5px',
+                borderRadius: '8px',
                 border: '1px solid gray',
                 boxSizing: 'border-box',
                 padding: '5px',

src/components/NotAuthenticated.tsx

@@ -636,7 +636,7 @@ export const NotAuthenticated = ({
                 ? 'rgba(255, 255, 255, 0.5)'
                 : 'rgba(0, 0, 0, 0.3)',
             padding: '20px 30px',
-            borderRadius: '5px',
+            borderRadius: '8px',
           }}
         >
           <>

src/components/PasswordField/PasswordField.tsx

@@ -11,7 +11,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 
 export const CustomInput = styled(TextField)(({ theme }) => ({
   width: '183px',
-  borderRadius: '5px',
+  borderRadius: '8px',
   backgroundColor: theme.palette.background.paper,
   outline: 'none',
   input: {

src/styles/theme-common.ts

@@ -61,7 +61,7 @@ const commonThemeOptions = {
     MuiButton: {
       styleOverrides: {
         root: {
-          backgroundColor: 'inherit',
+          backgroundColor: '--background-paper',
           transition: 'filter 0.3s ease-in-out',
           '&:hover': {
             filter: 'brightness(1.1)',

src/styles/theme-dark.ts

@@ -6,7 +6,7 @@ export const darkThemeOptions: ThemeOptions = {
   palette: {
     mode: 'dark',
     primary: {
-      main: 'rgb(100, 155, 240)',
+      main: 'rgba(0, 133, 255, 1)',
       dark: 'rgb(45, 92, 201)',
       light: 'rgb(130, 185, 255)',
     },
@@ -14,7 +14,7 @@ export const darkThemeOptions: ThemeOptions = {
       main: 'rgb(69, 173, 255)',
     },
     background: {
-      default: 'rgb(49, 51, 56)',
+      default: 'rgba(6, 10, 30, 1)',
       paper: 'rgb(62, 64, 68)',
       surface: 'rgb(58, 60, 65)',
     },
@@ -52,8 +52,8 @@ export const darkThemeOptions: ThemeOptions = {
     MuiCssBaseline: {
       styleOverrides: (theme) => ({
         ':root': {
-          '--Mail-Background': 'rgb(43, 43, 43)',
+          '--Mail-Background': 'rgba(6, 10, 30, 1)',
-          '--bg-primary': 'rgba(31, 32, 35, 1)',
+          '--bg-primary': 'rgba(6, 10, 30, 1)',
           '--bg-2': 'rgb(39, 40, 44)',
           '--primary-main': theme.palette.primary.main,
           '--text-primary': theme.palette.text.primary,

src/styles/theme-light.ts

@@ -6,12 +6,12 @@ export const lightThemeOptions: ThemeOptions = {
   palette: {
     mode: 'light',
     primary: {
-      main: 'rgb(162, 162, 221)',
+      main: 'rgba(0, 133, 255, 1)',
       dark: 'rgb(113, 198, 212)',
       light: 'rgb(180, 200, 235)',
     },
     secondary: {
-      main: 'rgba(194, 222, 236, 1)',
+      main: 'rgb(69, 173, 255)',
     },
     background: {
       default: 'rgba(250, 250, 250, 1)',