Trym Haugan Berger

components/Email.jsx

@@ -0,0 +1,31 @@
+import "./styles/Email.css"
+
+function Email(props) {
+  return (
+
+            <div className={`email-component ${props.isRead ? 'read' : 'unread'}`}>
+
+              <div className="select">
+                <input
+                  className="select-checkbox"
+                  type="checkbox"
+                  checked={props.email.read}
+                  onChange={() => props.toggleRead(props.email)}
+                />
+              </div>
+              <div className="star">
+                <input
+                  className="star-checkbox"
+                  type="checkbox"
+                  checked={props.email.starred}
+                  onChange={() => props.toggleStar(props.email)}
+                />
+              </div>
+              <div className="sender">{props.email.sender}</div>
+              <div className="title">{props.email.title}</div>
+              </div>
+
+  )
+}
+
+export default Email

components/EmailInstance.jsx

@@ -0,0 +1,63 @@
+import "./styles/EmailInstance.css"
+
+function EmailInstance(props) {
+  return (
+    <article className="email-content">
+          <div className="title">
+            <h1>{props.selectedEmail.title}</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>{props.selectedEmail.sender}</h2>
+                <em>&lt;{props.selectedEmail.senderEmail}&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;nicolas@boolean.co.uk&gt;</em>
+                </p>
+              </div>
+            </div>
+            <div className="date-info">
+              <p>{props.date}</p>
+            </div>
+            <div className="email-action-icons">
+              <ul>
+                <li>
+                  <img className="icon" src={props.backArrow} alt="reply button" />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={props.rateStarButton}
+                    alt="star button"
+                  />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={props.rubbishButton}
+                    alt="delete button"
+                  />
+                </li>
+              </ul>
+            </div>
+          </header>
+          <section className="email-body">
+            <div className="content-text">
+              {props.selectedEmail.textContent}
+            </div>
+            <div className="content">
+              <img src={props.selectedEmail.image}/>
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+  )
+}
+
+export default EmailInstance

components/Emails.jsx

@@ -0,0 +1,27 @@
+import Email from "./Email"
+import "./styles/Emails.css"
+
+function Emails(props) {
+  return (
+    <>
+    <main className="emails">
+        <ul>
+          {props.filteredEmails.map((email, index) => (
+            <li
+              key={index} onClick={() => {props.setShowEmails(false); props.setShowEmail(true); props.selectedEmail(email)}}           
+            >
+                <Email 
+                    email={email}
+                    toggleRead={props.toggleRead}
+                    toggleStar={props.toggleStar}
+                    isRead={email.read}
+                />
+            </li>
+          ))}
+        </ul>
+      </main>
+    </>
+)
+}
+
+export default Emails

components/Header.jsx

@@ -0,0 +1,22 @@
+import Search from "./Search"
+import './styles/Header.css'
+
+function Header(props) {
+  return (
+    <header className="header">
+        <div className="left-menu">
+          <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
+            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+          </svg>
+
+          <img
+            src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
+            alt="gmail logo"
+          />
+        </div>
+      <Search getSearchEmails={props.getSearchEmails} />
+      </header>
+  )
+}
+
+export default Header

components/HideRead.jsx

@@ -0,0 +1,16 @@
+
+function HideRead(props) {
+  return (
+    <li className="item toggle">
+            <label htmlFor="hide-read">Hide read</label>
+            <input
+              id="hide-read"
+              type="checkbox"
+              checked={props.hideRead}
+              onChange={e => props.setHideRead(e.target.checked)}
+            />
+          </li>
+  )
+}
+
+export default HideRead

components/Inbox.jsx

@@ -0,0 +1,14 @@
+
+function Inbox(props) {
+  return (
+    <li
+            className={`item ${props.currentTab === 'inbox' ? 'active' : ''}`}
+            onClick={() => {props.setCurrentTab('inbox');  props.setShowEmails(true); props.setShowEmail(false)}}
+          >
+            <span className="label">Inbox</span>
+            <span className="count">{props.unreadEmails.length}</span>
+          </li>
+  )
+}
+
+export default Inbox

components/LeftMenu.jsx

@@ -0,0 +1,33 @@
+import Inbox from './Inbox'
+import Starred from './Starred'
+import HideRead from './HideRead'
+import './styles/LeftMenu.css'
+
+function LeftMenu(props) {
+  return (
+      <nav className="left-menu">
+        <ul className="inbox-list">
+          <Inbox
+            currentTab={props.currentTab}
+            setCurrentTab={props.setCurrentTab}
+            unreadEmails={props.unreadEmails}
+            setShowEmails={props.setShowEmails}
+            setShowEmail={props.setShowEmail}
+          />
+          <Starred
+            currentTab={props.currentTab}
+            setCurrentTab={props.setCurrentTab}
+            starredEmails={props.starredEmails}
+            setShowEmails={props.setShowEmails}
+            setShowEmail={props.setShowEmail}
+          />
+          <HideRead
+            hideRead={props.hideRead}
+            setHideRead={props.setHideRead}
+          />
+        </ul>
+      </nav>
+  )
+}
+
+export default LeftMenu

components/Search.jsx

@@ -0,0 +1,14 @@
+import './styles/Search.css'
+
+function Search(props) {
+    const handleChange = (event) => {
+    props.getSearchEmails(event.target.value)
+  }
+  return (
+    <div className="search">
+          <input className="search-bar" placeholder="Search mail" onChange={handleChange}/>
+    </div>
+  )
+}
+
+export default Search

components/Starred.jsx

@@ -0,0 +1,14 @@
+
+function Starred(props) {
+  return (
+    <li
+        className={`item ${props.currentTab === 'starred' ? 'active' : ''}`}
+        onClick={() => {props.setCurrentTab('starred');  props.setShowEmails(true); props.setShowEmail(false)}}
+    >
+        <span className="label">Starred</span>
+        <span className="count">{props.starredEmails.length}</span>
+    </li>
+  )
+}
+
+export default Starred

components/styles/Email.css

@@ -0,0 +1,63 @@
+.email-component {
+  display: grid;
+  grid-template-columns: 30px 30px 150px 1fr;
+  padding: 10px;
+  background-color: white;
+  font-size: 0.9rem;
+  border-bottom: solid 1px #00000020;
+}
+
+.email-component:first-child {
+  border-top: solid 1px #00000020;
+}
+
+
+.email-component:hover {
+  box-shadow: -1px 1px 2px 0 #00000040;
+  z-index: 1;
+}
+
+.email-component.read {
+  background-color: rgb(240, 240, 240);
+}
+
+.email-component.unread {
+  font-weight: 600;
+}
+
+
+
+.email-component .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.email-component .star-checkbox {
+  appearance: none;
+  position: relative;
+  display: grid;
+  align-content: center;
+}
+
+.email-component .star-checkbox:focus {
+  outline: none;
+}
+
+.email-component .star-checkbox:checked::before,
+.email-component .star-checkbox::before {
+  content: '';
+  background-size: cover;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: -3px;
+}
+
+.email-component .star-checkbox::before {
+  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_border_black_20dp.png);
+}
+
+.email-component .star-checkbox:checked::before {
+  background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
+}