diff --git a/src/components/Email.jsx b/src/components/Email.jsx
index 6360ba6..e6442bb 100644
--- a/src/components/Email.jsx
+++ b/src/components/Email.jsx
@@ -1,3 +1,4 @@
+import '../styles/Email.css'
function Email ({ email, onToggleRead, onToggleStar, onOpenEmail }) {
return (
diff --git a/src/components/EmailDetail.jsx b/src/components/EmailDetail.jsx
index d9e3ca7..0eba435 100644
--- a/src/components/EmailDetail.jsx
+++ b/src/components/EmailDetail.jsx
@@ -1,3 +1,5 @@
+import '../styles/EmailDetail.css'
+
function EmailDetail({ email, onBack }) {
return (
diff --git a/src/data/emails.js b/src/data/emails.js
index 3261d16..6d26dfd 100644
--- a/src/data/emails.js
+++ b/src/data/emails.js
@@ -4,69 +4,79 @@ export default [
sender: `Zoom`,
title: `Cloud Recording - Nicolas Marcora's Personal Meeting Room is now available`,
starred: false,
- read: true
+ read: true,
+ date: new Date("2023-12-01T09:15:00")
},
{
id: 2,
sender: `Zoom`,
title: `Sean Davison has joined your Personal Meeting Room`,
starred: false,
- read: false
+ read: false,
+ date: new Date("2023-12-01T10:00:00")
},
{
id: 3,
sender: `Notion`,
title: `1 update in Boolean`,
starred: true,
- read: true
+ read: true,
+ date: new Date("2023-12-02T08:45:00")
},
{
id: 4,
sender: `The Calendly Team`,
title: `Use more than one calendar?`,
starred: false,
- read: false
+ read: false,
+ date: new Date("2023-12-02T14:20:00")
},
{
id: 5,
sender: `Patrick`,
title: `Updated invitation: Coding chat with Nico`,
starred: true,
- read: false
+ read: false,
+ date: new Date("2023-12-03T11:30:00")
},
{
id: 6,
sender: "Dora the Explorer",
title: "Map Update: Treasure Hunt in Backyard",
starred: false,
- read: false
+ read: false,
+ date: new Date("2023-12-03T16:45:00")
},
{
id: 7,
sender: "Captain Crunch",
title: "URGENT: Cereal Crisis Meeting",
starred: true,
- read: true
+ read: true,
+ date: new Date("2023-12-04T07:15:00")
},
{
id: 8,
sender: "Grandma",
title: "Homemade Cookies Recipe Inside!",
starred: false,
- read: true
+ read: true,
+ date: new Date("2023-12-04T18:00:00")
},
{
id: 9,
sender: "Lionel Messi",
title: "Need some help working on my freekicks",
starred: false,
- read: true
+ read: true,
+ date: new Date("2023-12-05T09:00:00")
},
{
id: 10,
sender: "Wayne Rooney",
title: "Manchester United will never be the same as during my generation",
starred: true,
- read: true
+ read: true,
+ date: new Date("2023-12-05T20:10:00")
}
]
diff --git a/src/styles/App.css b/src/styles/App.css
index 0632228..007a487 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,3 +1,4 @@
+/* App.css */
.app {
height: 100vh;
@@ -8,13 +9,12 @@
180px 1fr;
}
+/* Header */
.app > .header {
grid-area: header;
-
display: grid;
- grid-template-columns: 180px 1fr;
-
- border-bottom: solid 1px #00000020;
+ grid-template-columns: 180px 1fr auto;
+ align-items: center;
}
.app > .header > .left-menu {
@@ -43,6 +43,7 @@
font-size: 1rem;
}
+/* Main sections */
.app > .emails {
grid-area: emails;
padding: 10px 0;
@@ -76,104 +77,41 @@
}
.app > .left-menu .inbox-list .item.active {
- background-color: #ff000050;
+ background-color: #c8000050;
}
.app > .left-menu .inbox-list .item.toggle {
background-color: transparent;
}
-.email {
- display: grid;
- grid-template-columns: 30px 30px 150px 1fr;
- padding: 10px;
- background-color: white;
- font-size: 0.9rem;
-
- border-bottom: solid 1px #00000020;
-}
-
-.email:first-child {
- border-top: solid 1px #00000020;
-}
-
-.email:hover {
- box-shadow: -1px 1px 2px 0 #00000040;
- z-index: 1;
-}
-
-.email.read {
- background-color: rgb(240, 240, 240);
-}
-
-.email.unread {
- font-weight: 600;
-}
-
-.email .title {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.email .star-checkbox {
- appearance: none;
- position: relative;
- display: grid;
- align-content: center;
-}
-
-.email .star-checkbox:focus {
- outline: none;
-}
-
-.email .star-checkbox:checked::before,
-.email .star-checkbox::before {
- content: '';
- background-size: cover;
- width: 20px;
- height: 20px;
- position: absolute;
- top: -3px;
-}
-
-.email .star-checkbox::before {
- background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_border_black_20dp.png);
-}
-
-.email .star-checkbox:checked::before {
- background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
-}
-
-.email-detail {
- padding: 10px;
- background-color: white;
- border: solid 1px #aa313120;
-}
-
-.email-detail h2 {
- margin: 0 0 10px 0;
-}
-
-.email-detail .email-sender {
+/* Mark all as read/unread button */
+.mark-all-button {
+ padding: 10px 6px;
+ border: none;
+ border-radius: 4px;
+ background-color: #a30909; /* red Gmail vibe */
+ color: white;
font-weight: bold;
+ cursor: pointer;
}
-.email-detail .email-body {
- white-space: pre-wrap;
+.sort {
+ display: flex;
+ align-items: center;
+ padding: 6px;
+ margin-right: 15px;
}
-.back-button {
- background-color: #fff;
- border: 2px solid #ccc;
- padding: 8px 10px;
- border: 1px solid #ccc;
- border-radius: 10px;
+.sort-dropdown {
+ padding: 5px 8px;
+ border-radius: 4px;
+ border: 1px solid #0a0a0a;
+ font-size: 0.9rem;
+ background-color: white;
cursor: pointer;
- margin-bottom: 10px;
- font-weight: bold;
}
-.back-button:hover {
- background-color: #f5f5f5;
+.sort-dropdown:focus {
+ outline: none;
+ border-color: #060606;
}
\ No newline at end of file
diff --git a/src/styles/Email.css b/src/styles/Email.css
new file mode 100644
index 0000000..9ea033e
--- /dev/null
+++ b/src/styles/Email.css
@@ -0,0 +1,62 @@
+/* Email */
+.email {
+ display: grid;
+ grid-template-columns: 30px 30px 150px 1fr;
+ padding: 10px;
+ background-color: white;
+ font-size: 0.9rem;
+
+ border-bottom: solid 1px #00000020;
+}
+
+.email:first-child {
+ border-top: solid 1px #00000020;
+}
+
+.email:hover {
+ box-shadow: -1px 1px 2px 0 #00000040;
+ z-index: 1;
+}
+
+.email.read {
+ background-color: rgb(240, 240, 240);
+}
+
+.email.unread {
+ font-weight: 600;
+}
+
+.email .title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.email .star-checkbox {
+ appearance: none;
+ position: relative;
+ display: grid;
+ align-content: center;
+}
+
+.email .star-checkbox:focus {
+ outline: none;
+}
+
+.email .star-checkbox:checked::before,
+.email .star-checkbox::before {
+ content: '';
+ background-size: cover;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: -3px;
+}
+
+.email .star-checkbox::before {
+ background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_border_black_20dp.png);
+}
+
+.email .star-checkbox:checked::before {
+ background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
+}
\ No newline at end of file
diff --git a/src/styles/EmailDetail.css b/src/styles/EmailDetail.css
new file mode 100644
index 0000000..10e2484
--- /dev/null
+++ b/src/styles/EmailDetail.css
@@ -0,0 +1,34 @@
+
+/* Email detail */
+.email-detail {
+ padding: 10px;
+ background-color: white;
+ border: solid 1px #aa313120;
+}
+
+.email-detail h2 {
+ margin: 0 0 10px 0;
+}
+
+.email-detail .email-sender {
+ font-weight: bold;
+}
+
+.email-detail .email-body {
+ white-space: pre-wrap;
+}
+
+.back-button {
+ background-color: #fff;
+ border: 2px solid #ccc;
+ padding: 8px 10px;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ cursor: pointer;
+ margin-bottom: 10px;
+ font-weight: bold;
+}
+
+.back-button:hover {
+ background-color: #f5f5f5;
+}
\ No newline at end of file