Johan REitan

src/App.jsx

@@ -1,9 +1,19 @@
 import { useState } from 'react'
-
 import initialEmails from './data/emails'
-
 import './styles/App.css'
 
+import Header from './components/Header_component';
+import LeftMenu from './components/LeftMenu_component';
+import Emails from './components/Emails_component';
+import EmailView from './components/EmailView_component';
+import EmailOrList from './components/EmailOrList_component';
+
+import backArrow from './data/icons/back-arrow.png'
+import downloadButton from './data/icons/download-button.png'
+import rateStarButton from './data/icons/rate-star-button.png'
+import rubbishButton from './data/icons/rubbish-bin-delete-button.png'
+import flaticonWelcomeImage from './data/icons/flaticon-welcome-image.png'
+
 const getReadEmails = emails => emails.filter(email => !email.read)
 
 const getStarredEmails = emails => emails.filter(email => email.starred)
@@ -12,11 +22,44 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [currentEmail, setCurrentEmail] = useState({
+    header: "",
+    senderName: "",
+    senderEmail: "",
+    receiverEmail: "",
+    dateAndTime: "",
+    emailContent: "",
+});
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
 
-  const toggleStar = targetEmail => {
+
+  const [isEmail, toggleIsEmail] = useState(false);
+  //let isEmail = useState(true)
+
+  const changeState = (selectedEmail) => {
+    console.log("changeState");
+
+
+    if(selectedEmail) {
+      setCurrentEmail({
+        header: selectedEmail.title,
+        senderName: selectedEmail.sender,
+        senderEmail: `${selectedEmail.sender}@email.com`,
+        receiverEmail: `johan`,
+    })
+  }
+
+    toggleIsEmail(!isEmail)
+
+  }
+
+
+
+  const toggleStar = (targetEmail) => {
+    console.log("toggleStar");
+
     const updatedEmails = emails =>
       emails.map(email =>
         email.id === targetEmail.id
@@ -26,13 +69,15 @@ function App() {
     setEmails(updatedEmails)
   }
 
-  const toggleRead = targetEmail => {
+  const toggleRead = (targetEmail) => {
+    console.log("toggleRead");
+
     const updatedEmails = emails =>
       emails.map(email =>
         email.id === targetEmail.id ? { ...email, read: !email.read } : email
       )
-    setEmails(updatedEmails)
-  }
+      setEmails(updatedEmails)
+    }
 
   let filteredEmails = emails
 
@@ -41,6 +86,10 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+
+
+
+
   return (
     <div className="app">
       <header className="header">
@@ -51,73 +100,32 @@ function App() {
 
           <img
             src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
-            alt="gmail logo"
+            alt="gmail logo" 
+            onClick={changeState}
           />
         </div>
 
         <div className="search">
           <input className="search-bar" placeholder="Search mail" />
         </div>
       </header>
-      <nav className="left-menu">
-        <ul className="inbox-list">
-          <li
-            className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('inbox')}
-          >
-            <span className="label">Inbox</span>
-            <span className="count">{unreadEmails.length}</span>
-          </li>
-          <li
-            className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
-          >
-            <span className="label">Starred</span>
-            <span className="count">{starredEmails.length}</span>
-          </li>
-
-          <li className="item toggle">
-            <label htmlFor="hide-read">Hide read</label>
-            <input
-              id="hide-read"
-              type="checkbox"
-              checked={hideRead}
-              onChange={e => setHideRead(e.target.checked)}
-            />
-          </li>
-        </ul>
-      </nav>
-      <main className="emails">
-        <ul>
-          {filteredEmails.map((email, index) => (
-            <li
-              key={index}
-              className={`email ${email.read ? 'read' : 'unread'}`}
-            >
-              <div className="select">
-                <input
-                  className="select-checkbox"
-                  type="checkbox"
-                  checked={email.read}
-                  onChange={() => toggleRead(email)}
-                />
-              </div>
-              <div className="star">
-                <input
-                  className="star-checkbox"
-                  type="checkbox"
-                  checked={email.starred}
-                  onChange={() => toggleStar(email)}
-                />
-              </div>
-              <div className="sender">{email.sender}</div>
-              <div className="title">{email.title}</div>
-            </li>
-          ))}
-        </ul>
+      <LeftMenu currentTab={currentTab} setCurrentTab={setCurrentTab} unreadEmails={unreadEmails} starredEmails={starredEmails} hideRead={hideRead} setHideRead={setHideRead} unreadEmailsLength={unreadEmails.length} starredEmailsLength={starredEmails.length}/>
+
+       <main className="emails">
+
+        <EmailOrList isEmail={isEmail} changeState={changeState} toggleIsEmail={toggleIsEmail} backArrow={backArrow} downloadButton={downloadButton} flaticonWelcomeImage={flaticonWelcomeImage} rateStarButton={rateStarButton} rubbishButton={rubbishButton} filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} currentEmail={currentEmail} setCurrentEmail={setCurrentEmail}/>
+
+
+
+
+
+        {/*  */}
+
       </main>
+
+
     </div>
   )
 }
 
-export default App
+export default App

src/main.jsx

@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+)

src/styles/App.css

@@ -144,3 +144,202 @@
 .email .star-checkbox:checked::before {
   background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
 }
+
+
+
+
+.app {
+  height: 100vh;
+
+  display: grid;
+  grid-template:
+    'header header' 50px
+    'left-menu emails' 1fr /
+    180px 1fr;
+}
+
+.app > .header {
+  grid-area: header;
+
+  display: grid;
+  grid-template-columns: 180px 1fr;
+
+  border-bottom: solid 1px #00000020;
+}
+
+.app > .header > .left-menu {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: left;
+}
+
+.app > .header > .left-menu .menu-icon {
+  width: 25px;
+  height: 25px;
+  margin: 10px;
+}
+
+.app > .header > .search {
+  display: grid;
+  padding: 6px;
+}
+
+.app > .header > .search .search-bar {
+  border: none;
+  border-radius: 5px;
+  background-color: rgb(240, 240, 240);
+  padding: 0 10px;
+  font-size: 1rem;
+}
+
+.app > .left-menu {
+  grid-area: left-menu;
+  padding: 10px;
+  padding-left: 0;
+}
+
+.app > .left-menu .inbox-list {
+  display: grid;
+  grid-gap: 10px;
+}
+
+.app > .left-menu .inbox-list .item {
+  padding: 5px 10px;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+  align-items: center;
+
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.app > .left-menu .inbox-list .item.active {
+  background-color: #ff000050;
+}
+
+.app > .left-menu .inbox-list .item.toggle {
+  background-color: transparent;
+}
+
+.email-toolbar {
+  padding: 0.5rem 2rem;
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+
+  border-bottom: 1px solid #eee;
+}
+
+.email-toolbar > * {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.email-toolbar > ul {
+  list-style-type: none;
+}
+
+.email-toolbar .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.email-toolbar button {
+  padding: 0.25rem 0.5rem 0.4rem;
+
+  border-radius: 0.5rem;
+  border: 1px solid #a1a1a1;
+  background-color: transparent;
+
+  font-weight: bold;
+}
+
+.title {
+  padding: 1rem;
+}
+
+.title h1 {
+  padding-left: 56px;
+
+  font-weight: normal;
+}
+
+.email-content--header {
+  padding: 0.5rem 1rem;
+
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 1rem;
+}
+
+.email-content--header .avatar {
+  width: 56px;
+  height: 56px;
+
+  border-radius: 100%;
+  background-color: #eee;
+}
+
+.email-info {
+  padding: 0.25rem 0;
+}
+
+.email-info .sender-info h2 {
+  margin-right: 1rem;
+
+  display: inline-block;
+
+  font-size: 0.925rem;
+}
+
+.email-info .user-info {
+  margin-top: 0.5rem;
+}
+
+.email-info .user-info p {
+  font-size: 0.825rem;
+}
+
+.email-action-icons ul {
+  padding: 0;
+  margin: 0;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.25rem;
+
+  list-style-type: none;
+}
+
+.email-action-icons .icon {
+  width: 20px;
+  height: 20px;
+}
+
+.email-body .content {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.email-body .content img {
+  width: 100%;
+}
+
+.email-actions {
+  padding: 1rem 0.5rem;
+}
+
+.email-actions button {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+
+  border-radius: 0.5rem;
+  border: 1px solid #a1a1a1;
+  background-color: transparent;
+
+  font-weight: bold;
+}