fix header on mobile

Author: potat-dev

src/components/AppFrame/AppFrame.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { AppShell, Group, Button, Container, Modal, Input } from '@mantine/core';
+import { AppShell, Group, Button, Container, Modal, Input, Flex, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useState } from 'react';
 import { ColorSchemeToggle } from '@/src/components/ColorSchemeToggle/ColorSchemeToggle';
@@ -83,24 +83,32 @@ export function AppFrame({ children }: AppFrameProps) {
 
             <AppShell header={{ height: 60 }} padding="">
                 <AppShell.Header>
-                    <Container px="0.3rem" size="76rem">
+                    <Container h="100%">
                         <Group h="100%" px="" style={{ justifyContent: 'space-between' }}>
                             <Button
                                 variant="transparent"
                                 component={Link}
                                 href="/"
                                 className={classes.customLabel}
                             >
-                                Libra Keeper
+                                <div className="mantine-visible-from-xs">Libra Keeper</div>
+                                <div className="mantine-hidden-from-xs">Libra</div>
                             </Button>
 
-                            <div style={{ marginLeft: 'auto', display: 'flex', gap: '2rem' }}>
-                                <Button onClick={open} className={classes.customButtton}>
-                                    +Bookshelf
+                            <Flex
+                                h="100%"
+                                gap={{ base: 'xs', sm: 'md' }}
+                                justify="flex-end"
+                                align="center"
+                                direction="row"
+                                wrap="wrap"
+                            >
+                                <Button variant="light" onClick={open}>
+                                    Shelf +
                                 </Button>
                                 <GoogleAuthButton />
                                 <ColorSchemeToggle />
-                            </div>
+                            </Flex>
                         </Group>
                     </Container>
                 </AppShell.Header>

src/components/GoogleAuthButton/GoogleAuthButton.module.css

@@ -1,25 +1,20 @@
 'use client';
 
 import { Button } from '@mantine/core';
-// import { IconChevronRight } from '@tabler/icons-react';
 import { useAuthContext } from '@/src/firebase/context';
-import classes from './GoogleAuthButton.module.css';
 
 function LoginButton() {
     const { loading, user, signIn, signOut } = useAuthContext();
 
     return (
         <Button
-            className={classes.customButton}
             onClick={user ? signOut : signIn}
             variant="subtle"
             color="gray"
-            // size="md"
             loading={loading}
             loaderProps={{ type: 'dots' }}
-            // rightSection={<IconChevronRight size="1rem" />}
         >
-            {user ? 'LogOut' : 'LogIn'}
+            {user ? 'Log Out' : 'Log In'}
         </Button>
     );
 }

src/components/GoogleAuthButton/GoogleAuthButton.tsx

@@ -39,6 +39,7 @@ export function QRcodeCamera() {
                 <div className={classes.customButton}>
                     <Button
                         className={classes.customText}
+                        variant="light"
                         size="42"
                         component={Link}
                         href={{ pathname: '/search', query: { q: removeHyphens(scanResult) } }}