From c232dcf0c8e76414215b8b8c7fd663374a8c4ae2 Mon Sep 17 00:00:00 2001
From: Houston_Boston <myhorsefly12345@gmail.com>
Date: Thu, 6 Jun 2024 14:54:04 +0530
Subject: [PATCH 1/5] Introduced the task card component. Needs more refining.

---
 src/components/Cards/TaskCard.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/Cards/TaskCard.js

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
new file mode 100644
index 0000000..8e29e77
--- /dev/null
+++ b/src/components/Cards/TaskCard.js
@@ -0,0 +1,18 @@
+"use client";
+// MUI
+import Box from '@mui/material/Box';
+import AddTaskIcon from '@mui/icons-material/AddTask';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+
+
+// React
+import React from 'react'
+
+export default function TaskCard(){
+    return(
+        <Card>
+            <AddTaskIcon></AddTaskIcon> <CardActions>Add Task</CardActions>
+        </Card>
+    );
+}
\ No newline at end of file

From d29bbe1e32d10cea2c854721eaa63cd6255ef6a8 Mon Sep 17 00:00:00 2001
From: Houston_Boston <myhorsefly12345@gmail.com>
Date: Thu, 6 Jun 2024 17:22:09 +0530
Subject: [PATCH 2/5] Added the add task icon as well as made the card
 centered.

---
 src/components/Cards/TaskCard.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
index 8e29e77..48d6178 100644
--- a/src/components/Cards/TaskCard.js
+++ b/src/components/Cards/TaskCard.js
@@ -4,15 +4,30 @@ import Box from '@mui/material/Box';
 import AddTaskIcon from '@mui/icons-material/AddTask';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 
 
 // React
 import React from 'react'
+import { useTheme } from '@mui/material/styles';
+import { Tab } from '@mui/material';
 
-export default function TaskCard(){
-    return(
-        <Card>
-            <AddTaskIcon></AddTaskIcon> <CardActions>Add Task</CardActions>
-        </Card>
+export default function TaskCard() {
+    const theme = useTheme();
+    return (
+        <div style={{display:'flex', justifyContent:'center', alignItems:'center'}}>
+            <Card sx={{ width: '50%' }}>
+                <CardActions>
+                    <Button>
+                        <AddTaskIcon color='blue' />
+                        <Box width={'5px'} />
+                        <Typography>
+                            Add Task
+                        </Typography>
+                    </Button>
+                </CardActions>
+            </Card>
+        </div>
     );
 }
\ No newline at end of file

From 6393be4208b4df0ee41b306a23144825d63b53c7 Mon Sep 17 00:00:00 2001
From: Houston_Boston <myhorsefly12345@gmail.com>
Date: Thu, 6 Jun 2024 17:24:21 +0530
Subject: [PATCH 3/5] Also made the card round.

---
 src/components/Cards/TaskCard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
index 48d6178..fb7ba6a 100644
--- a/src/components/Cards/TaskCard.js
+++ b/src/components/Cards/TaskCard.js
@@ -17,7 +17,7 @@ export default function TaskCard() {
     const theme = useTheme();
     return (
         <div style={{display:'flex', justifyContent:'center', alignItems:'center'}}>
-            <Card sx={{ width: '50%' }}>
+            <Card sx={{ width: '50%', borderRadius: '20px'}}>
                 <CardActions>
                     <Button>
                         <AddTaskIcon color='blue' />

From 15d1630df4d8b0af7a3cf01352be53746da066cd Mon Sep 17 00:00:00 2001
From: Houston_Boston <myhorsefly12345@gmail.com>
Date: Thu, 6 Jun 2024 20:28:38 +0530
Subject: [PATCH 4/5] Made it look more like the Google Tasks layout. Have to
 implement add task and edit functionalities.

---
 src/components/Cards/TaskCard.js | 40 +++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
index fb7ba6a..bdaefc8 100644
--- a/src/components/Cards/TaskCard.js
+++ b/src/components/Cards/TaskCard.js
@@ -11,23 +11,37 @@ import Button from '@mui/material/Button';
 // React
 import React from 'react'
 import { useTheme } from '@mui/material/styles';
-import { Tab } from '@mui/material';
+import { MoreVertOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 
 export default function TaskCard() {
     const theme = useTheme();
     return (
-        <div style={{display:'flex', justifyContent:'center', alignItems:'center'}}>
-            <Card sx={{ width: '50%', borderRadius: '20px'}}>
-                <CardActions>
-                    <Button>
-                        <AddTaskIcon color='blue' />
-                        <Box width={'5px'} />
-                        <Typography>
-                            Add Task
+        <>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Card sx={{ width: '50%', borderRadius: '20px' }}>
+                    <div style={{ display: 'flex', flexDirection:'row', width:'100%' }}>
+                        <Typography variant='h4' sx={{ marginLeft: '2%' }}>
+                            My Tasks
                         </Typography>
-                    </Button>
-                </CardActions>
-            </Card>
-        </div>
+
+                        <IconButton style={{ marginLeft:'auto', marginRight:'2%' }}>
+                            <MoreVertOutlined />
+                        </IconButton>
+                    </div>
+
+                    <CardActions sx={{ width: '100%' }}>
+                        <Button sx={{ textTransform: 'inherit', width: '100%', justifyContent: 'left', borderRadius: '20px', }}>
+                            <AddTaskIcon color='blue' />
+                            <Box width={'25px'} />
+                            <Typography>
+                                Add a task
+                            </Typography>
+                        </Button>
+                    </CardActions>
+
+                </Card>
+            </div>
+        </>
     );
 }
\ No newline at end of file

From aeed4f653b280e32abc490c9ca533ddb3e202f23 Mon Sep 17 00:00:00 2001
From: Houston_Boston <myhorsefly12345@gmail.com>
Date: Fri, 7 Jun 2024 13:10:45 +0530
Subject: [PATCH 5/5] Started working on the task input aspect of the
 implementation.

---
 src/components/Cards/TaskCard.js       | 45 ++++++------------------
 src/components/Cards/TaskHeaderCard.js | 47 ++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Cards/TaskHeaderCard.js

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
index bdaefc8..7d6b2d5 100644
--- a/src/components/Cards/TaskCard.js
+++ b/src/components/Cards/TaskCard.js
@@ -1,45 +1,22 @@
 "use client";
-// MUI
-import Box from '@mui/material/Box';
-import AddTaskIcon from '@mui/icons-material/AddTask';
+//MUI
 import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Radio from '@mui/material/Radio';
 
-
-// React
-import React from 'react'
-import { useTheme } from '@mui/material/styles';
-import { MoreVertOutlined } from '@mui/icons-material';
-import { IconButton } from '@mui/material';
+//React
+import React from 'react';
 
 export default function TaskCard() {
-    const theme = useTheme();
+
     return (
         <>
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <Card sx={{ width: '50%', borderRadius: '20px' }}>
-                    <div style={{ display: 'flex', flexDirection:'row', width:'100%' }}>
-                        <Typography variant='h4' sx={{ marginLeft: '2%' }}>
-                            My Tasks
-                        </Typography>
-
-                        <IconButton style={{ marginLeft:'auto', marginRight:'2%' }}>
-                            <MoreVertOutlined />
-                        </IconButton>
+            <div style={{ justifyContent: 'center', display: 'flex' }}>
+                <Card sx={{ width: '50%', borderRadius: '0px' }}>
+                    <div style={{ justifyContent: 'left', display: 'flex', alignItems:'center' }}>
+                        <Radio size='small' />
+                        <TextField placeholder='Title' variant='standard' sx={{ width: '100%' }} InputProps={{ disableUnderline: 'true' }} />
                     </div>
-
-                    <CardActions sx={{ width: '100%' }}>
-                        <Button sx={{ textTransform: 'inherit', width: '100%', justifyContent: 'left', borderRadius: '20px', }}>
-                            <AddTaskIcon color='blue' />
-                            <Box width={'25px'} />
-                            <Typography>
-                                Add a task
-                            </Typography>
-                        </Button>
-                    </CardActions>
-
                 </Card>
             </div>
         </>
diff --git a/src/components/Cards/TaskHeaderCard.js b/src/components/Cards/TaskHeaderCard.js
new file mode 100644
index 0000000..61daa02
--- /dev/null
+++ b/src/components/Cards/TaskHeaderCard.js
@@ -0,0 +1,47 @@
+"use client";
+// MUI
+import Box from '@mui/material/Box';
+import AddTaskIcon from '@mui/icons-material/AddTask';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import MoreVertOutlined from '@mui/icons-material/MoreVertOutlined';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+// React
+import React from 'react';
+
+export default function TaskHeaderCard() {
+    return (
+        <>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Card sx={{ width: '50%', borderTopRightRadius: '20px', borderTopLeftRadius: '20px' }}>
+                    <div style={{ display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'left' }}>
+                        <Typography variant='h4' sx={{ marginLeft: '2%' }}>
+                            My Tasks
+                        </Typography>
+
+                        <IconButton style={{ marginLeft: 'auto', marginRight: '2%', top: '3px', position: 'relative' }}>
+                            <Tooltip title='More options' arrow>
+                                <MoreVertOutlined />
+                            </Tooltip>
+                        </IconButton>
+                    </div>
+
+                    <CardActions sx={{ width: '100%' }}>
+                        <Button sx={{ textTransform: 'inherit', width: '100%', justifyContent: 'left', borderRadius: '20px', }}>
+                            <AddTaskIcon color='blue' />
+                            <Box width={'25px'} />
+                            <Typography>
+                                Add a task
+                            </Typography>
+                        </Button>
+                    </CardActions>
+
+                </Card>
+            </div>
+        </>
+    );
+}
\ No newline at end of file