From 36a3d04eda506be62c99bf965f489d70dd5e9f54 Mon Sep 17 00:00:00 2001
From: Den <denis100703@gmail.com>
Date: Sun, 28 Jul 2024 01:09:24 +0300
Subject: [PATCH] fix header on mobile

---
 src/components/AppFrame/AppFrame.tsx          | 22 +++++++++++++------
 .../GoogleAuthButton.module.css               |  8 -------
 .../GoogleAuthButton/GoogleAuthButton.tsx     |  7 +-----
 src/components/Html5qrcode/QRcodeCamera.tsx   |  1 +
 4 files changed, 17 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/GoogleAuthButton/GoogleAuthButton.module.css

diff --git a/src/components/AppFrame/AppFrame.tsx b/src/components/AppFrame/AppFrame.tsx
index 8412a9c..7c69cb9 100644
--- a/src/components/AppFrame/AppFrame.tsx
+++ b/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,7 +83,7 @@ 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"
@@ -91,16 +91,24 @@ export function AppFrame({ children }: AppFrameProps) {
                                 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>
diff --git a/src/components/GoogleAuthButton/GoogleAuthButton.module.css b/src/components/GoogleAuthButton/GoogleAuthButton.module.css
deleted file mode 100644
index 6527507..0000000
--- a/src/components/GoogleAuthButton/GoogleAuthButton.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.customButton {
-    width: rem(60px);
-    height: rem(60px);
-    border-radius: var(--mantine-radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
diff --git a/src/components/GoogleAuthButton/GoogleAuthButton.tsx b/src/components/GoogleAuthButton/GoogleAuthButton.tsx
index 1739c3b..4b2e47c 100644
--- a/src/components/GoogleAuthButton/GoogleAuthButton.tsx
+++ b/src/components/GoogleAuthButton/GoogleAuthButton.tsx
@@ -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>
     );
 }
diff --git a/src/components/Html5qrcode/QRcodeCamera.tsx b/src/components/Html5qrcode/QRcodeCamera.tsx
index a161681..62cabbd 100644
--- a/src/components/Html5qrcode/QRcodeCamera.tsx
+++ b/src/components/Html5qrcode/QRcodeCamera.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) } }}