From 87cf1605532bec478f9dbb5fa7c961fa8d1f281c Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 21 Oct 2020 22:41:56 +0300
Subject: [PATCH] default modal bg

---
 pages/_app.tsx                                | 37 +++++++++++++++++++
 scenes/Layout/components/LanguageSelector.tsx |  2 +-
 scenes/Layout/components/TopNav.tsx           |  3 +-
 scenes/Profile/components/AvatarWithInfo.tsx  |  6 +--
 scenes/Profile/components/ProfileModal.tsx    |  8 ++--
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 28db373d9..2bf6a94d2 100644
--- a/pages/_app.tsx
+++ b/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) => {
diff --git a/scenes/Layout/components/LanguageSelector.tsx b/scenes/Layout/components/LanguageSelector.tsx
index 894d18f78..6fdda61ce 100644
--- a/scenes/Layout/components/LanguageSelector.tsx
+++ b/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}>
diff --git a/scenes/Layout/components/TopNav.tsx b/scenes/Layout/components/TopNav.tsx
index bca7167aa..8259bd383 100644
--- a/scenes/Layout/components/TopNav.tsx
+++ b/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>
diff --git a/scenes/Profile/components/AvatarWithInfo.tsx b/scenes/Profile/components/AvatarWithInfo.tsx
index d3d3e062c..e778d2901 100644
--- a/scenes/Profile/components/AvatarWithInfo.tsx
+++ b/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>
diff --git a/scenes/Profile/components/ProfileModal.tsx b/scenes/Profile/components/ProfileModal.tsx
index b93f0b9ea..802ae603d 100644
--- a/scenes/Profile/components/ProfileModal.tsx
+++ b/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>