some changes

Shriansh2002 · Jun 9, 2022 · 23bd710 · 23bd710
1 parent e20222f
commit 23bd710
Show file tree

Hide file tree

Showing 4 changed files with 489 additions and 214 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "^1.0.0-beta.7",
+    "@nextui-org/react": "^1.0.0-beta.8",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,8 +1,8 @@
-import { Avatar, Button, Container, Grid, Row, Tooltip, Link } from '@nextui-org/react';
+import { Avatar, Button, Container, Grid, Dropdown, Link, Text } from '@nextui-org/react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
-const Header = ({ primaryFunction = 'home', admin }) => {
+const Header = ({ primaryFunction = 'Home', admin }) => {
     const { loginWithGoogle, currentUser, logout } = useAuth();
     const navigate = useNavigate();
 
@@ -30,61 +30,37 @@ const Header = ({ primaryFunction = 'home', admin }) => {
 
             <Grid css={{ marginTop: 'auto', marginBottom: 'auto' }}>
                 {currentUser ?
-                    <Tooltip placement='bottomEnd'
-                        hideArrow
-                        content={
-                            <Grid.Container>
-                                <Row>
-                                    <Button
-                                        size='md'
-                                        onPress={() => { navigate(`/${primaryFunction}`); }}
-                                        rounded
-                                        css={{
-                                            maxHeight: "$space$12",
-                                            fs: "$tiny",
-                                            fontWeight: "$semibold",
-                                            borderColor: "$primary",
-                                            color: "$white",
-                                        }}
-                                    >
-                                        {primaryFunction?.toUpperCase()}
-                                    </Button>
-                                </Row>
-                                <Row>
-                                    <Button
-                                        size='md'
-                                        rounded
-                                        onPress={logout}
-                                        css={{
-                                            marginTop: '$5',
-                                            maxHeight: "$space$12",
-                                            fs: "$tiny",
-                                            fontWeight: "$semibold",
-                                            borderColor: "$primary",
-                                            color: "$white",
-                                        }}
-                                        color="warning"
-                                    >
-                                        LOGOUT
-                                    </Button>
-                                </Row>
-                            </Grid.Container>
-                        }
-                    >
-                        <>
-                            <Grid.Container>
-                                <Grid>
-                                    <Avatar
-                                        pointer
-                                        src={currentUser?.photoURL}
-                                        color="gradient"
-                                        bordered
-                                        size='sm'
-                                    />
-                                </Grid>
-                            </Grid.Container>
-                        </>
-                    </Tooltip >
+                    <Dropdown placement="bottom-left">
+                        <Dropdown.Trigger>
+                            <Avatar
+                                pointer
+                                src={currentUser?.photoURL}
+                                color="gradient"
+                                bordered
+                                size='sm'
+                            />
+                        </Dropdown.Trigger>
+
+                        <Dropdown.Menu color="secondary" aria-label="Avatar Actions">
+                            <Dropdown.Item key="profile" css={{ height: "$18" }}>
+                                <Text b color="inherit" css={{ d: "flex" }}>
+                                    Signed in as
+                                </Text>
+                                <Text b color="inherit" css={{ d: "flex" }}>
+                                    {currentUser.email}
+                                </Text>
+                            </Dropdown.Item>
+
+                            <Dropdown.Item key='primary_function' withDivider onPress={() => { navigate(`/${primaryFunction}`); }}>
+                                {primaryFunction.toUpperCase()}
+                            </Dropdown.Item>
+
+                            <Dropdown.Item key="logout" color="error" withDivider onPress={() => logout}>
+                                Log Out
+                            </Dropdown.Item>
+
+                        </Dropdown.Menu>
+                    </Dropdown>
                     :
                     <Button onPress={signUpFunction} size='sm' bordered>
                         Login With Google

diff --git a/src/components/Note.jsx b/src/components/Note.jsx
@@ -62,7 +62,7 @@ const Note = ({ note, handleDeleteNote, handleEditNote }) => {
     }, []);
 
     return (
-        <Card cover css={{ w: "100%", p: '0' }} hoverable clickable>
+        <Card css={{ w: "100%", p: '0' }} isPressable>
             <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
                 <Col css={{ wordWrap: 'break-word' }}>
                     <Text size={12} weight="bold" transform="uppercase" color="$red600"
@@ -83,7 +83,7 @@ const Note = ({ note, handleDeleteNote, handleEditNote }) => {
                     textShadow: '-1px 1px 0 #FEF9F0,1px 1px 0 #FEF9F0, 1px -1px 0 #FEF9F0, -1px -1px 0 #FEF9F0'
                 }}>{note?.genre || 'GEN#1'}</Text>
             </Card.Header>
-            <Card.Body>
+            <Card.Body css={{ p: 0 }}>
                 <Link href={`/note/${note.id}`}>
                     <Card.Image
                         showSkeleton
@@ -92,12 +92,13 @@ const Note = ({ note, handleDeleteNote, handleEditNote }) => {
                             : "https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80"}
                         height={400}
                         width={600}
+                        objectFit="cover"
                         alt="Blog Image"
                     />
                 </Link>
             </Card.Body>
             <Card.Footer
-                blur
+                isBlurred={true}
                 css={{
                     position: "absolute",
                     // bgBlur: "#0f1114",