sexy commander

app/components/commander/index.hbs

-<div class="panel commander col">
+<div class="panel commander col m-2 p-2">
   <div class="d-flex justify-content-between">
     <Commander::ActionButtons
       @openNewFolderModal={{this.openNewFolderModal}} />

app/components/nav/topbar.hbs

-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg nav-topbar">
   <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent" >
         <form class="d-flex">
-          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <input class="form-control me-2" type="search" placeholder="Search for documents, tags..." aria-label="Search">
           <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
         {{#if this.session.isAuthenticated}}

app/styles/app.scss

@@ -3,6 +3,7 @@
 @import "./button";
 @import "./node";
 @import "./nav/sidebar";
+@import "./nav/topbar";
 
 
 main {
@@ -25,3 +26,11 @@ main {
     margin: 1rem;
 }
 
+.central-bar {
+  background-color: #f8f9fa;
+}
+
+
+.commander {
+  background-color: white;
+}

app/styles/nav/topbar.scss

+.nav-topbar {
+  background-color: white;
+
+  input {
+    background-color: #f8f9fa;
+    border: none;
+  }
+}

app/templates/authenticated.hbs

 <main>
   <Nav::Sidebar />
-  <div class="w-100">
+  <div class="w-100 central-bar">
     <Nav::Topbar />
-    <div class="container-fluid p-3">
+    <div class="container-fluid mx-2 my-1">
       {{outlet}}
     </div>
   </div>