default modal bg

pages/_app.tsx

@@ -18,6 +18,43 @@ const extendedTheme = extendTheme({
       },
     }),
   },
+  components: {
+    Button: {
+      defaultProps: {
+        colorScheme: "lime",
+        color: "black",
+      },
+    },
+    // IconButton: {
+    //   defaultProps: {
+    //     isRound: true,
+    //   },
+    // },
+    Modal: {
+      baseStyle: (props) => ({
+        content: {
+          bg: mode(
+            theme.light.secondaryBgColor,
+            theme.dark.secondaryBgColor
+          )(props),
+        },
+      }),
+    },
+  },
+  colors: {
+    lime: {
+      50: "#e4ffdf",
+      100: "#bbffb0",
+      200: "#92ff7f",
+      300: "#68ff4d",
+      400: "#3fff1d",
+      500: "#27e606",
+      600: "#1bb300",
+      700: "#108000",
+      800: "#054d00",
+      900: "#001b00",
+    },
+  },
 });
 
 const MyApp = (props: AppProps) => {

scenes/Layout/components/LanguageSelector.tsx

@@ -39,7 +39,7 @@ export const LanguageSelector = () => {
         variant="ghost"
         fontSize="20px"
         icon={<FiGlobe />}
-        borderRadius="50%"
+        isRound
         color={textColor}
       />
       <MenuList bg={secondaryBgColor} color={textColor}>

scenes/Layout/components/TopNav.tsx

@@ -93,7 +93,8 @@ const TopNav = () => {
           fontSize="20px"
           onClick={toggleColorMode}
           icon={colorMode === "light" ? <FiSun /> : <FiMoon />}
-          borderRadius="50%"
+          mr="5px"
+          isRound
         />
         <LanguageSelector />
       </Flex>

scenes/Profile/components/AvatarWithInfo.tsx

@@ -62,7 +62,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
                     aria-label="Link to Twitter"
                     icon={<FaTwitter />}
                     color="#1DA1F2"
-                    borderRadius="50%"
+                    isRound
                     variant="ghost"
                   />
                 </a>
@@ -73,7 +73,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
                     aria-label="Link to Twitch"
                     icon={<FaTwitch />}
                     color="#6441A4"
-                    borderRadius="50%"
+                    isRound
                     variant="ghost"
                   />
                 </a>
@@ -86,7 +86,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
                     aria-label="Link to Twitch"
                     icon={<FaYoutube />}
                     color="#FF0000"
-                    borderRadius="50%"
+                    isRound
                     variant="ghost"
                   />
                 </a>

scenes/Profile/components/ProfileModal.tsx

@@ -43,7 +43,7 @@ const ProfileModal: React.FC<Props> = ({ isOpen, onClose }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="xl">
       <ModalOverlay>
-        <ModalContent>
+        <ModalContent /*bg={secondaryBgColor}*/>
           <ModalHeader>{t("users;Editing profile")}</ModalHeader>
           <ModalCloseButton />
           <form onSubmit={handleSubmit(onSubmit)}>
@@ -116,10 +116,12 @@ const ProfileModal: React.FC<Props> = ({ isOpen, onClose }) => {
             </ModalBody>
 
             <ModalFooter>
-              <Button colorScheme="blue" mr={3} type="submit">
+              <Button mr={3} type="submit">
                 Save
               </Button>
-              <Button onClick={onClose}>Cancel</Button>
+              <Button onClick={onClose} variant="outline">
+                Cancel
+              </Button>
             </ModalFooter>
           </form>
         </ModalContent>