fix: button style fix (#97)

* fix(style): style of button to display in different color scheme

* fix: button-style fix

* style: 🤖 prettier code by github action

---------

Co-authored-by: CUexter <CUexter@users.noreply.github.com>

src/components/auth/SignUpButton.tsx

@@ -1,18 +1,22 @@
-import { Button, Modal } from "@mantine/core";
+import { Button, Modal, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
 import Register from "./register";
 
 const SignUpButton = () => {
   const [opened, { open, close }] = useDisclosure(false);
-
+  const { colorScheme } = useMantineColorScheme();
   return (
     <>
       <Modal opened={opened} onClose={close} title="Joining us ?" centered>
         <Register />
       </Modal>
 
-      <Button compact onClick={open}>
+      <Button
+        compact
+        variant={colorScheme === "dark" ? "light" : "outline"}
+        onClick={open}
+      >
         Sign up
       </Button>
     </>

src/components/auth/register.tsx

@@ -102,7 +102,9 @@ const Register = () => {
         )}
 
         <Group position="right" mt="md">
-          <Button type="submit">Submit</Button>
+          <Button variant="light" type="submit">
+            Submit
+          </Button>
         </Group>
       </form>
     </Box>

src/components/layout/header/Header.tsx

@@ -6,6 +6,7 @@ import {
   Header,
   createStyles,
   rem,
+  useMantineColorScheme,
 } from "@mantine/core";
 import { IconHome } from "@tabler/icons-react";
 import { signIn, useSession } from "next-auth/react";
@@ -38,6 +39,7 @@ const useStyles = createStyles((theme) => ({
 const HeaderSearch = () => {
   const { classes } = useStyles();
   const { data: sessionData } = useSession();
+  const { colorScheme } = useMantineColorScheme();
 
   return (
     <Header height={56} className={classes.header} mb={120}>
@@ -51,12 +53,18 @@ const HeaderSearch = () => {
         <Group>
           <ToggleDarkMode />
           {sessionData === null ? (
-            <Button.Group>
-              <Button compact onClick={() => void signIn()}>
-                Sign in
-              </Button>
-              <SignUpButton />
-            </Button.Group>
+            <>
+              <Button.Group>
+                <Button
+                  compact
+                  variant={colorScheme === "dark" ? "light" : "outline"}
+                  onClick={() => void signIn()}
+                >
+                  Sign in
+                </Button>
+                <SignUpButton />
+              </Button.Group>
+            </>
           ) : (
             <AccountHeaderMenu />
           )}

src/pages/auth/new-user.page.tsx

@@ -155,7 +155,9 @@ const NewUserWelcome = () => {
             />
 
             <Group position="right" mt="md">
-              <Button type="submit">Submit</Button>
+              <Button variant="light" type="submit">
+                Submit
+              </Button>
             </Group>
           </form>
         </Box>

src/pages/settings.page.tsx

@@ -135,7 +135,9 @@ const ProfileSettings = () => {
             />
 
             <Group position="right" mt="md">
-              <Button type="submit">Submit</Button>
+              <Button type="submit" variant="outline" color="blue">
+                Submit
+              </Button>
             </Group>
           </form>
         </Box>