Implement new design for setup menu

awx/ui/static/js/setup-menu/setup-extra.block.less

@@ -0,0 +1,14 @@
+/** @define SetupExtra */
+
+.SetupExtra {
+  &-itemTitle {
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+  &-itemDescription {
+    font-family: merriweather;
+    font-size: 1rem;
+    font-weight: lighter;
+    font-style: italic;
+  }
+}

awx/ui/static/js/setup-menu/setup-item.block.less

@@ -3,51 +3,59 @@
 @import 'shared/branding/colors.less';
 
 .SetupItem {
-    @vertical-basis: 3rem;
+
+  &--aside {
+    padding-bottom: @vertical-basis / 2;
+  }
+    @vertical-basis: 1.4rem;
 
     padding: 0;
     padding-bottom: @vertical-basis;
 
-    &:nth-child(2n) {
+    color: black !important;
-        .SetupItem-icon {
+    flex: 1 0 100%;
-            background-color: @blue;
+    transition: background-color 0.25s ease-in-out;
-        }
+    background-color: white !important;
-    }
+    &:hover, &:focus, &:active {
-
+        color: black;
-    @media screen and (min-width: 931px) and (max-width: 1251px) {
-        &:nth-child(2n) {
-            .SetupItem-icon {
-                background-color: @ansible-red;
-            }
-        }
-        &:nth-child(4n+3), &:nth-child(4n+4) {
-            .SetupItem-icon {
-                background-color: @blue;
-            }
-        }
     }
 
     .SetupItem-icon {
-        display: flex;
+        max-width: 2.8rem;
-        padding: 1.5rem;
+        align-self: center;
-        background-color: @ansible-red;
-        justify-content: center;
-        align-items: center;
         img {
-            height: 26px;
+            width: 2.3rem;
         }
     }
 
     &--button {
+      border: 0;
+      text-align: left;
+      outline: none;
         .SetupItem-icon {
-            width: 100%;
+            // width: 100%;
         }
     }
 
-    .SetupItem-title {
+    &-title {
-        font-size: 3rem;
+        &--aside {
-        text-align: center;
+          font-size: 1.4rem;
-        padding: @vertical-basis;
+          font-weight: bold;
+        }
+        font-size: 2.8rem;
+        padding-bottom: 0.4rem;
+        margin: 0;
+    }
+
+    &-description {
+      &--aside {
+        font-size: 1rem;
+        font-style: italic;
+      }
+      font-family: merriweather;
+      font-weight: lighter;
+      color: black;
+      font-size: 1.4rem;
       margin: 0;
     }
 }

awx/ui/static/js/setup-menu/setup-menu.block.less

@@ -4,9 +4,11 @@
 
 .SetupMenu {
     display: flex;
+    width: 100%;
+    flex-direction: row;
     justify-content: flex-start;
-    background-color: #EDEDED;
     flex-wrap: wrap;
+
     @media screen and (min-width: 571px) {
         margin-top: -2.8rem;
     }

awx/ui/static/js/setup-menu/setup-menu.partial.html

@@ -1,56 +1,57 @@
-<section id="htmlTemplate" class="Container" page-name="SetupMenu">
+<section id="htmlTemplate" class="Container">
   <nav class="SetupMenu Container-main">
-      <a href="#/credentials" class="SetupItem SetupMenu-block">
+      <a href="#/credentials" class="SetupItem Media">
-        <i class="SetupItem-icon"><img src="/static/img/Credentials.svg"></i>
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Credentials.svg"></i>
+        <div class="Media-body">
           <h4 class="SetupItem-title">Credentials</h4>
-        <p class="SetupItem-description">
+          <p class="SetupItem-description">Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.</p>
-          Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.
+        </div>
-        </p>
       </a>
-      <a href="#/users" class="SetupItem SetupMenu-block">
+      <a href="#/users" class="SetupItem Media">
-        <i class="SetupItem-icon"><img src="/static/img/Users.svg"></i>
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Users.svg"></i>
+        <div class="Media-body">
           <h4 class="SetupItem-title">Users</h4>
           <p class="SetupItem-description">
             Allow others to sign into Tower and own content they create.
           </p>
+        </div>
       </a>
-      <a href="#/teams" class="SetupItem SetupMenu-block">
+      <a href="#/teams" class="SetupItem Media">
-        <i class="SetupItem-icon"><img src="/static/img/Teams.svg"></i>
+        <i class="SetupItem-icon Media-figure"><img src="/static/img/Teams.svg"></i>
+        <div class="Media-block">
           <h4 class="SetupItem-title">Teams</h4>
           <p class="SetupItem-description">
             Divide up your organization to associate content and control permissions for groups.
           </p>
+        </div>
       </a>
-      <a href="#/organizations" class="SetupItem SetupMenu-block">
+  </nav>
-        <i class="SetupItem-icon"><img src="/static/img/Organizations.svg"></i>
+  <aside class="Container-aside">
-        <h4 class="SetupItem-title">Organizations</h4>
+      <nav class="SetupMenu Menu Menu--vertical">
-        <p class="SetupItem-description">
+        <a href="#/organizations" class="SetupItem SetupItem--aside">
+            <h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
+            <p class="SetupItem-description SetupItem-description--aside">
               Group all of your content to manage permissions across departments in your company
             </p>
-
+          </div>
         </a>
-      <button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
+        <button class="SetupItem SetupItem--button SetupItem--aside" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
-        <i class="SetupItem-icon"><img src="/static/img/ManagementJobs.svg"></i>
+          <h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
-        <h4 class="SetupItem-title">Management Jobs</h4>
+          <p class="SetupItem-description SetupItem-description--aside">
-        <p class="SetupItem-description">
             Schedule jobs to periodically cleanup job history
           </p>
         </button>
-      <button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
+        <button class="SetupItem SetupItem--button SetupItem--aside" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
-        <i class="SetupItem-icon"><img src="/static/img/InventoryScripts.svg"></i>
+          <h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>
-        <h4 class="SetupItem-title">Inventory Scripts</h4>
+          <p class="SetupItem-description SetupItem-description--aside">
-        <p class="SetupItem-description">
             Create and edit scripts to dynamically load hosts from any sources
           </p>
         </button>
-  </nav>
+        <button href="#/license" ng-click="showLicenseModal()" class="SetupItem SetupItem--button SetupItem--aside">
-  <aside class="Container-aside">
+          <h4 class="SetupItem-title SetupItem-title--aside">View your License</h4>
-      <nav class="DetailNav Menu Menu--vertical">
-        <button href="#/license" ng-click="showLicenseModal()" class="Button--pseudo">
-          <h4 class="DetailNav-title">View your License</h4>
         </button>
-        <button ng-click="showAboutModal()" class="DetailNav--extra Button--pseudo">
+        <button ng-click="showAboutModal()" class="SetupItem SetupItem--button SetupItem--aside">
-          <h4 class="DetailNav-title">About Tower</h4>
+          <h4 class="SetupItem-title SetupItem-title--aside">About Tower</h4>
         </button>
       </nav>
   </aside>

awx/ui/static/js/shared/container/container.block.less

@@ -4,7 +4,7 @@
     display: flex;
     flex-wrap: wrap;
     &-main {
-        flex: 9;
+        flex: 6;
         margin-right: 2.28rem;
     }
     &-aside {

awx/ui/static/js/shared/media-object.block.less

@@ -0,0 +1,14 @@
+/** @define Media */
+
+.Media {
+  display: flex;
+  align-items: flex-start;
+
+  &-figure {
+    margin-right: 1.4rem;
+  }
+
+  &-body {
+    flex: 1;
+  }
+}