FrontendMasters · Samuel-Torres · May 23, 2021 · May 23, 2021
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -0,0 +1,23 @@
+@import 'tailwind.css';
+
+.hover-target .show-on-hover {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.hover-target:hover .show-on-hover,
+.hover-target .show-on-hover:focus,
+.hover-target .show-on-hover:active {
+  opacity: 1;
+  filter: alpha(opacity=1);
+}
+
+.sr-only {
+  clip-path: inset(50%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
diff --git a/app/tailwind/modules.css b/app/tailwind/modules.css
@@ -5,28 +5,28 @@
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
-@import "tailwindcss/preflight";
+@import 'tailwindcss/preflight';
 
 /**
 * This injects any component classes registered by plugins.
 */
-@import "tailwindcss/components";
+@import 'tailwindcss/components';
 
 /**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 */
-@import "./components/*.css";
+@import './components/*.css';
 
 /**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
-@import "tailwindcss/utilities";
+@import 'tailwindcss/utilities';
 
 /**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 */
-@import "./utilities/*.css";
+@import './utilities/*.css';
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,5 +1,51 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
+<TeamSelector />
+
+<TeamSidebar />
+
+<!-- Channel -->
+<main class="flex-1 flex flex-col bg-white overflow-hidden channel">
+
+  <ChannelHeader />
+
+  <!-- Channel Message List -->
+  <div class="py-4 flex-1 overflow-y-scroll channel-messages-list" role="list">
+
+    <Message />
+
+    <!-- Message -->
+    <div class="flex items-start px-6 py-2 text-sm hover-target hover:bg-grey-lightest message" role="listitem">
+      <figure class="w-10 h-10 rounded overflow-hidden mr-3">
+        <img class="message__user-avatar"
+          src="https://en.gravatar.com/userimage/4584631/86f74019598950f6efd7b1b8e493259a.jpeg" alt="">
+      </figure>
+
+      <div class="flex-1">
+        <h5 class="text-sm">
+          <a href="#" class="message__user-name text-black font-bold no-underline hover:underline">
+            Mike North
+          </a>
+          <span class="sr-only">at</span>
+          <time class="message__timestamp text-grey-darker text-xs font-normal">
+            Apr 21, 2019 12:23.4 PM
+          </time>
+        </h5>
+
+        <p class="message__body text-black leading-normal">
+          Hello developer, I looked at your profile and am impressed by your 14
+          years of COBOL experience. Are you happy in your current role?
+        </p>
+      </div>
+
+      <button
+        class="message__delete-button border-transparent hover:border-red-light show-on-hover hover:bg-red-lightest border-1 rounded mb-1 pl-3 pr-2 py-1"
+        aria-label="delete message">
+        🗑
+      </button>
+    </div>
+
+  </div>
+
+  <ChannelFooter />
+</main>
 
 {{outlet}}
diff --git a/app/templates/components/channel-footer.hbs b/app/templates/components/channel-footer.hbs
@@ -0,0 +1,26 @@
+  <!-- Channel Footer -->
+  <footer class="pb-6 px-4 flex-none channel-footer">
+    <form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labeledby="message-label">
+      <h1 id="message-label" class="sr-only">
+        Message Input
+      </h1>
+
+      <button class="text-3xl text-grey border-r-2 border-grey p-2" aria-label="File menu" type="button">
+        <svg class="fill-current h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+          <path
+            d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z">
+          </path>
+        </svg>
+      </button>
+
+      <label for="message-input" class="sr-only">Message</label>
+
+      <input id="message-input" class="channel-footer__message-input w-full px-4" placeholder="Message #general"
+        type="text">
+
+      <button disabled
+        class="channel-footer__message-send-button font-bold uppercase opacity-50 bg-grey-dark text-white border-teal-dark p-2">
+        SEND
+      </button>
+    </form>
+  </footer>
diff --git a/app/templates/components/channel-header.hbs b/app/templates/components/channel-header.hbs
@@ -0,0 +1,27 @@
+  <!-- Channel Header -->
+  <header class="border-b flex px-6 py-2 items-center flex-none channel-header">
+    <div>
+      <h3 class="text-grey-darkest mb-1 font-extrabold channel-header__title">
+        <span aria-hidden="true">#</span>
+        general
+      </h3>
+
+      <h4 class="text-grey-dark text-sm truncate channel-header__description">
+        Just some general people generally chatting about general things
+      </h4>
+    </div>
+
+    <form
+      class="ml-auto md:block border border-grey rounded-lg pl-3 pr-2 py-1 flex flex-row-reverse items-center search-form">
+      <label for="search" class="sr-only">Search messages</label>
+
+      <input placeholder="Search" class="appearance-none search-form__field" id="search" type="search">
+
+      <button aria-label="Submit search" class="search-form__button">
+        <svg class="fill-current text-grey h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+          <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z">
+          </path>
+        </svg>
+      </button>
+    </form>
+  </header>
diff --git a/app/templates/components/message.hbs b/app/templates/components/message.hbs
@@ -0,0 +1,29 @@
+    <!-- Message -->
+    <div class="flex items-start px-6 py-2 text-sm hover-target hover:bg-grey-lightest message" role="listitem">
+      <figure class="w-10 h-10 rounded overflow-hidden mr-3">
+        <img class="message__user-avatar" src="https://gravatar.com/avatar/96c332a96737c6668906232e39cb16ef?s=200"
+          alt="">
+      </figure>
+
+      <div class="flex-1">
+        <h5 class="text-sm">
+          <a href="#" class="message__user-name text-black font-bold no-underline hover:underline">
+            Lisa Huang-North
+          </a>
+          <span class="sr-only">at</span>
+          <time class="message__timestamp text-grey-darker text-xs font-normal">
+            Apr 21, 2019 12:21.38 PM
+          </time>
+        </h5>
+
+        <p class="message__body text-black leading-normal">
+          Would you like to join my professional network?
+        </p>
+      </div>
+
+      <button
+        class="message__delete-button border-transparent hover:border-red-light show-on-hover hover:bg-red-lightest border-1 rounded mb-1 pl-3 pr-2 py-1"
+        aria-label="delete message">
+        🗑
+      </button>
+    </div>
diff --git a/app/templates/components/team-selector.hbs b/app/templates/components/team-selector.hbs
@@ -0,0 +1,32 @@
+<!-- Team Selector -->
+<nav
+  class="team-selector bg-indigo-darkest border-indigo-darkest border-r-2 pt-2 text-purple-lighter flex-none hidden sm:block">
+  <a href="/li" data-team-id="li"
+    class="team-selector__team-button cursor-pointer rounded-lg p-2 pl-4 block no-underline opacity-25 opacity-100">
+    <div
+      class="bg-white h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1 overflow-hidden">
+      <img class="team-selector__team-logo"
+        src="https://gravatar.com/avatar/0ca1be2eaded508606982feb9fea8a2b?s=200&amp;d=https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/240px-LinkedIn_logo_initials.png"
+        alt="LinkedIn">
+    </div>
+  </a>
+  <a href="/ms" data-team-id="ms"
+    class="team-selector__team-button cursor-pointer rounded-lg p-2 pl-4 block no-underline opacity-25">
+    <div
+      class="bg-white h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1 overflow-hidden">
+      <img class="team-selector__team-logo"
+        src="https://gravatar.com/avatar/0ca1be2eaded508606982feb9fea8a2b?s=200&amp;d=https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/200px-Microsoft_logo.svg.png"
+        alt="Microsoft">
+    </div>
+  </a>
+  <div class="team-selector__add-team-button cursor-pointer p-4">
+    <div
+      class="bg-white opacity-25 h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1 overflow-hidden">
+      <svg class="fill-current h-10 w-10 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path
+          d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z">
+        </path>
+      </svg>
+    </div>
+  </div>
+</nav>
diff --git a/app/templates/components/team-sidebar.hbs b/app/templates/components/team-sidebar.hbs
@@ -0,0 +1,53 @@
+<!-- Team Sidebar -->
+<section class="team-sidebar bg-indigo-darker text-purple-lighter flex-none w-64 pb-6 hidden sm:flex flex-col">
+  <header class="team-sidebar__header text-white mb-2 mt-3 px-4 flex justify-between">
+    <div class="flex-auto">
+      <h1 class="team-sidebar__team-name font-semibold text-xl leading-tight mb-1 truncate">
+        LinkedIn
+      </h1>
+
+      <div class="team-sidebar__current-user-indicator flex items-center mb-6">
+        <svg class="h-2 w-2 fill-current text-green mr-2" viewBox="0 0 20 20">
+          <circle cx="10" cy="10" r="10"></circle>
+        </svg>
+        <span class="team-sidebar__current-user-name text-white opacity-50 text-sm">
+          Mike North
+        </span>
+      </div>
+    </div>
+
+    <div>
+      <svg class="h-6 w-6 fill-current text-white opacity-25" viewBox="0 0 20 20">
+        <path
+          d="M14 8a4 4 0 1 0-8 0v7h8V8zM8.027 2.332A6.003 6.003 0 0 0 4 8v6l-3 2v1h18v-1l-3-2V8a6.003 6.003 0 0 0-4.027-5.668 2 2 0 1 0-3.945 0zM12 18a2 2 0 1 1-4 0h4z"
+          fill-rule="evenodd"></path>
+      </svg>
+    </div>
+  </header>
+
+  <nav class="mb-8 flex-1 team-sidebar__channels-list">
+    <div class="px-4 mb-2 text-white flex justify-between items-center">
+      <h2 class="opacity-75 text-lg">Channels</h2>
+
+      <button class="team-sidebar__join-channel-button text-white" aria-label="Join channel" role="button">
+        <svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+          <path
+            d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z">
+          </path>
+        </svg>
+      </button>
+    </div>
+
+    <a href="/li/general" data-channel-id="general"
+      class="team-sidebar__channel-link py-1 px-4 text-white no-underline block opacity-75 bg-teal-dark">
+      <span aria-hidden="true">#</span>
+      general
+    </a>
+  </nav>
+
+  <footer class="mx-4 mb-2 text-white">
+    <button class="text-white rounded bg-grey-dark hover:bg-red-darker p-2 team-sidebar__logout-button">
+      Logout
+    </button>
+  </footer>
+</section>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,8 @@
   "dependencies": {
     "ember-fetch": "^6.5.1",
     "fastboot-app-server": "^1.1.2-beta.1",
-    "json-server": "^0.14.2"
+    "json-server": "^0.14.2",
+    "yarn": "^1.22.10"
   },
   "volta": {
     "node": "12.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -9935,6 +9935,11 @@ yargs@^12.0.2:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
+yarn@^1.22.10:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.10.tgz#c99daa06257c80f8fa2c3f1490724e394c26b18c"
+  integrity sha512-IanQGI9RRPAN87VGTF7zs2uxkSyQSrSPsju0COgbsKQOOXr5LtcVPeyXWgwVa0ywG3d8dg6kSYKGBuYK021qeA==
+
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"