Bug 912929 - Updated Devtools' App Manager UI to better reflect new style guidelines. r=paul
authorDarrin Henein <darrinhenein@gmail.com>
Fri, 13 Sep 2013 00:54:00 +0200
changeset 159884 e31427ba68784e48b6bd1619141f1abd535c0c08
parent 159883 5f7f853867cfc8c4d1dadd52784e306a57aadef9
child 159885 15ba1cea7963b634705ba4cf8c20c98ca0b0f353
push id2961
push userlsblakk@mozilla.com
push dateMon, 28 Oct 2013 21:59:28 +0000
treeherdermozilla-beta@73ef4f13486f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaul
bugs912929
milestone26.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 912929 - Updated Devtools' App Manager UI to better reflect new style guidelines. r=paul
browser/devtools/app-manager/content/projects.xhtml
browser/locales/en-US/chrome/browser/devtools/app-manager.dtd
browser/themes/shared/devtools/app-manager/device.css
browser/themes/shared/devtools/app-manager/images/index-icons.svg
browser/themes/shared/devtools/app-manager/index.css
browser/themes/shared/devtools/app-manager/projects.css
--- a/browser/devtools/app-manager/content/projects.xhtml
+++ b/browser/devtools/app-manager/content/projects.xhtml
@@ -15,17 +15,17 @@
     <title>&projects.title;</title>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/app-manager/projects.css" type="text/css"/>
   </head>
 
   <body onload="UI.onload()">
     <aside id="sidebar">
       <div id="project-list" template='{"type":"attribute","path":"projects.length","name":"projects-count"}'>
         <div template-loop='{"arrayPath":"projects","childSelector":"#project-item-template"}'></div>
-        <div id="no-project">&projects.noProject;</div>
+        <div id="no-project">&projects.noProjects;</div>
       </div>
       <div id="new-packaged-project" onclick="UI.addPackaged()">&projects.addPackaged;</div>
       <div id="new-hosted-project">&projects.addHosted;
         <form onsubmit="UI.addHosted(); return false;" id="new-hosted-project-wrapper">
           <input value="" id="url-input" type="url" pattern="https?://.+" placeholder="&projects.hostedManifestPlaceHolder2;" size="50" />
           <div onclick="UI.addHosted()" id="new-hosted-project-click"></div>
           <input type="submit" hidden="true"></input>
         </form>
--- a/browser/locales/en-US/chrome/browser/devtools/app-manager.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/app-manager.dtd
@@ -44,9 +44,9 @@
 <!ENTITY projects.appDetails "App Details">
 <!ENTITY projects.removeApp "Remove">
 <!ENTITY projects.reloadFiles "Refresh">
 <!ENTITY projects.installApp "Install">
 <!ENTITY projects.startApp "Start">
 <!ENTITY projects.stopApp "Stop">
 <!ENTITY projects.debugApp "Debug">
 <!ENTITY projects.hostedManifestPlaceHolder2 "http://example.com/app/manifest.webapp">
-<!ENTITY projects.noProject "No project linked. Add a new packaged app below (a directory) or a hosted app (link to a manifest file).">
+<!ENTITY projects.noProjects "No projects. Add a new packaged app below (local directory) or a hosted app (link to a manifest file).">
--- a/browser/themes/shared/devtools/app-manager/device.css
+++ b/browser/themes/shared/devtools/app-manager/device.css
@@ -264,17 +264,17 @@ button {
   flex-shrink: 0;
 }
 
 .sidebar-item:hover {
   background-color: #EEE;
 }
 
 .sidebar-item.selected {
-  background: linear-gradient(to bottom, #276DA3, #155282);
+  background-color: #46AFE3;
   color: #FFF;
 }
 
 
 
 /*****************     HEADER      *****************/
 
 header {
--- a/browser/themes/shared/devtools/app-manager/images/index-icons.svg
+++ b/browser/themes/shared/devtools/app-manager/images/index-icons.svg
@@ -1,150 +1,55 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="160px" height="160px" viewBox="0 0 160 160">
-  <filter
-    id="AI_GaussianBlur_4">
-    <feGaussianBlur
-      stdDeviation="2"
-      id="feGaussianBlur4" />
-  </filter>
-  <g
-    id="g54">
-    <linearGradient
-      id="SVGID_5_"
-      gradientUnits="userSpaceOnUse"
-      x1="40"
-      y1="146.0156"
-      x2="40"
-      y2="93.9844">
-      <stop
-        offset="0"
-        style="stop-color:#58595B"
-        id="stop57" />
-      <stop
-        offset="1"
-        style="stop-color:#808285"
-        id="stop59" />
-    </linearGradient>
-    <path
-      d="M55.609,140.812c0,2.846-2.357,5.203-5.203,5.203H29.594c-2.846,0-5.203-2.357-5.203-5.203V99.188   c0-2.846,2.357-5.203,5.203-5.203h20.812c2.846,0,5.203,2.357,5.203,5.203V140.812z M51.707,105.691   c0-0.691-0.61-1.301-1.301-1.301H29.594c-0.691,0-1.301,0.609-1.301,1.301v28.617c0,0.691,0.61,1.301,1.301,1.301h20.812   c0.691,0,1.301-0.609,1.301-1.301V105.691z M43.252,99.188h-6.504c-0.366,0-0.65,0.284-0.65,0.65s0.285,0.65,0.65,0.65h6.504   c0.366,0,0.65-0.284,0.65-0.65S43.618,99.188,43.252,99.188z M40,137.561c-1.789,0-3.252,1.463-3.252,3.252   s1.463,3.252,3.252,3.252s3.252-1.463,3.252-3.252S41.789,137.561,40,137.561z"
-      id="path61"
-      fill="url(#SVGID_5_)" />
-  </g>
-  <g
-    id="g16">
-    <linearGradient
-      id="SVGID_1_"
-      gradientUnits="userSpaceOnUse"
-      x1="40"
-      y1="55.868"
-      x2="40"
-      y2="15.5872">
-      <stop
-        offset="0"
-        style="stop-color:#58595B"
-        id="stop19" />
-      <stop
-        offset="1"
-        style="stop-color:#808285"
-        id="stop21" />
-    </linearGradient>
-    <path
-      fill="url(#SVGID_1_)"
-      d="M40.001,15.587c-2.742,0.001-8.104,9.047-9.931,18.021l-6.165,6.164v16.095l4.297,0.001l5.991-5.991   c0.612,0.641,1.287,1.181,2.011,1.609h7.581c0.728-0.426,1.408-0.965,2.021-1.609l5.991,5.991l4.298-0.001V39.773l-6.165-6.164   C48.104,24.635,42.741,15.587,40.001,15.587z M40.006,25.023c0.955,0,2.636,2.682,3.683,5.891c-1.134-0.21-2.343-0.328-3.602-0.328   c-1.324,0-2.592,0.132-3.775,0.364C37.358,27.726,39.047,25.023,40.006,25.023z"
-      id="path23" />
-    <linearGradient
-      id="SVGID_2_"
-      gradientUnits="userSpaceOnUse"
-      x1="40"
-      y1="64.4128"
-      x2="40"
-      y2="53.6309">
-      <stop
-        offset="0"
-        style="stop-color:#58595B"
-        id="stop26" />
-      <stop
-        offset="1"
-        style="stop-color:#808285"
-        id="stop28" />
-    </linearGradient>
-    <path
-      fill="url(#SVGID_2_)"
-      d="M41.927,55.598c0,1.891-1.467,3.424-1.957,3.424c-0.489,0-1.957-1.534-1.957-3.424   c0-0.732,0.133-1.409,0.356-1.967h-2.266c-0.266,0.98-0.415,2.077-0.416,3.235c0.001,4.168,3.234,7.547,4.313,7.547   s4.313-3.378,4.313-7.546c0-1.159-0.15-2.254-0.416-3.236l-2.326,0.001C41.794,54.188,41.927,54.865,41.927,55.598z"
-      id="path30" />
-  </g>
-
-  <g
-    id="g38">
-    <linearGradient
-      id="SVGID_3_"
-      gradientUnits="userSpaceOnUse"
-      x1="120"
-      y1="55.868"
-      x2="120"
-      y2="15.5872">
-      <stop
-        offset="0"
-        style="stop-color:#1C75BC"
-        id="stop41" />
-      <stop
-        offset="1"
-        style="stop-color:#27AAE1"
-        id="stop43" />
-    </linearGradient>
-    <path
-      fill="url(#SVGID_3_)"
-      d="M120.001,15.587c-2.742,0.001-8.104,9.047-9.931,18.021l-6.165,6.164v16.095l4.297,0.001   l5.991-5.991c0.612,0.641,1.287,1.181,2.011,1.609h7.581c0.728-0.426,1.408-0.965,2.021-1.609l5.991,5.991l4.298-0.001V39.773   l-6.165-6.164C128.104,24.635,122.741,15.587,120.001,15.587z M120.006,25.023c0.955,0,2.636,2.682,3.683,5.891   c-1.134-0.21-2.343-0.328-3.602-0.328c-1.324,0-2.592,0.132-3.775,0.364C117.358,27.726,119.047,25.023,120.006,25.023z"
-      id="path45" />
-    <linearGradient
-      id="SVGID_4_"
-      gradientUnits="userSpaceOnUse"
-      x1="120"
-      y1="64.4128"
-      x2="120"
-      y2="53.6309">
-      <stop
-        offset="0"
-        style="stop-color:#1C75BC"
-        id="stop48" />
-      <stop
-        offset="1"
-        style="stop-color:#27AAE1"
-        id="stop50" />
-    </linearGradient>
-    <path
-      fill="url(#SVGID_4_)"
-      d="M121.927,55.598c0,1.891-1.467,3.424-1.957,3.424c-0.489,0-1.957-1.534-1.957-3.424   c0-0.732,0.133-1.409,0.356-1.967h-2.266c-0.266,0.98-0.415,2.077-0.416,3.235c0.001,4.168,3.234,7.547,4.313,7.547   s4.313-3.378,4.313-7.546c0-1.159-0.15-2.254-0.416-3.236l-2.326,0.001C121.794,54.188,121.927,54.865,121.927,55.598z"
-      id="path52" />
-  </g>
-
-
-  <g
-    id="g67">
-    <linearGradient
-      id="SVGID_6_"
-      gradientUnits="userSpaceOnUse"
-      x1="120"
-      y1="146.0156"
-      x2="120"
-      y2="93.9844">
-      <stop
-        offset="0"
-        style="stop-color:#1C75BC"
-        id="stop70" />
-      <stop
-        offset="1"
-        style="stop-color:#27AAE1"
-        id="stop72" />
-    </linearGradient>
-    <path
-      fill="url(#SVGID_6_)"
-      d="M135.609,140.812c0,2.846-2.357,5.203-5.203,5.203h-20.812c-2.846,0-5.203-2.357-5.203-5.203V99.188   c0-2.846,2.357-5.203,5.203-5.203h20.812c2.846,0,5.203,2.357,5.203,5.203V140.812z M131.707,105.691   c0-0.691-0.61-1.301-1.301-1.301h-20.812c-0.691,0-1.301,0.609-1.301,1.301v28.617c0,0.691,0.61,1.301,1.301,1.301h20.812   c0.691,0,1.301-0.609,1.301-1.301V105.691z M123.252,99.188h-6.504c-0.366,0-0.65,0.284-0.65,0.65s0.285,0.65,0.65,0.65h6.504   c0.366,0,0.65-0.284,0.65-0.65S123.618,99.188,123.252,99.188z M120,137.561c-1.789,0-3.252,1.463-3.252,3.252   s1.463,3.252,3.252,3.252s3.252-1.463,3.252-3.252S121.789,137.561,120,137.561z"
-      id="path74" />
-  </g>
-
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="160px" height="160px" viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve">
+<rect display="none" fill="#22272D" width="84" height="160"/>
+<rect x="80.75" display="none" fill="#194866" width="84" height="160"/>
+<path fill="#414042" d="M40,21.799c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.83v12l3.204,0l4.467-4.467
+	c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.467l3.204,0v-12l-4.597-4.596
+	C46.042,28.544,42.044,21.799,40,21.799z M40.005,28.834c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+	c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.849,39.289,28.834,40.005,28.834z"/>
+<path fill="#414042" d="M41.436,51.63c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+	c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+	s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,50.578,41.436,51.083,41.436,51.63z"/>
+<g>
+	<g>
+		<path fill="#B2B5B9" d="M40,21.799c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.83v12l3.204,0l4.467-4.467
+			c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.467l3.204,0v-12l-4.597-4.596
+			C46.042,28.544,42.044,21.799,40,21.799z M40.005,28.834c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+			c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.849,39.289,28.834,40.005,28.834z"/>
+		<path fill="#B2B5B9" d="M41.436,51.63c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+			c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+			s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,50.578,41.436,51.083,41.436,51.63z"/>
+	</g>
+</g>
+<g>
+	<path fill="#DCE8F3" d="M120,21.799c-2.044,0.001-6.042,6.745-7.404,13.436L108,39.83v12l3.204,0l4.467-4.467
+		c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.467,4.467l3.204,0v-12l-4.597-4.596
+		C126.042,28.544,122.044,21.799,120,21.799z M120.005,28.834c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+		c-0.987,0-1.933,0.099-2.815,0.271C118.03,30.849,119.289,28.834,120.005,28.834z"/>
+	<path fill="#DCE8F3" d="M121.436,51.63c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+		c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+		s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C121.337,50.578,121.436,51.083,121.436,51.63z"/>
+</g>
+<g>
+	<g>
+		<path fill="#B2B5B9" d="M52.5,136.667c0,2.279-1.888,4.167-4.167,4.167H31.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333
+			c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.667z M49.375,108.542
+			c0-0.554-0.488-1.042-1.042-1.042H31.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667
+			c0.553,0,1.042-0.488,1.042-1.042V108.542z M42.604,103.333h-5.208c-0.293,0-0.521,0.228-0.521,0.521
+			c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C43.125,103.561,42.897,103.333,42.604,103.333z
+			 M40,134.062c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604
+			C42.604,135.234,41.432,134.062,40,134.062z"/>
+	</g>
+</g>
+<g>
+	<path fill="#DCE8F3" d="M132.5,136.667c0,2.279-1.888,4.167-4.167,4.167h-16.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333
+		c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.667z M129.375,108.542
+		c0-0.554-0.488-1.042-1.042-1.042h-16.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667
+		c0.553,0,1.042-0.488,1.042-1.042V108.542z M122.604,103.333h-5.208c-0.293,0-0.521,0.228-0.521,0.521
+		c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C123.125,103.561,122.897,103.333,122.604,103.333z
+		 M120,134.062c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604
+		C122.604,135.234,121.432,134.062,120,134.062z"/>
+</g>
 </svg>
--- a/browser/themes/shared/devtools/app-manager/index.css
+++ b/browser/themes/shared/devtools/app-manager/index.css
@@ -5,41 +5,46 @@
 * {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
 }
 
 #tabs {
-  box-shadow: inset -1px 0 5px rgba(0,0,0,0.9);
-  background: #22272D;
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3);
+  background: #252C33;
 }
 
 .button {
   width: 80px;
-  height: 80px;
+  height: 85px;
+  padding-bottom: 5px;
   -moz-appearance: none;
   border: none;
-  border-top: 1px solid #323234;
   border-bottom: 1px solid #121214;
   background-color: transparent;
-  color: white;
+  color: #B5B8BB;
   cursor: pointer;
   text-align: center;
   -moz-box-align: end;
   font-size: 10px;
-  text-shadow: 0 1px 2px #111;
+  text-shadow: 0 1px 0 #333;
   color: #9FA6AD;
 }
 
+.button:first-child {
+  border-top: none;
+}
+
 .button[selected] {
-  color: #26A6DE;
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496;
+  color: #DCE8F3;
+  background-color: #1A4766;
   border-color: #191B1E;
-  box-shadow: inset -5px 0 5px #111;
 }
 
 .button::-moz-focus-inner {
   border-width: 0;
 }
 
 .panel {
   border-width: 0;
@@ -54,26 +59,22 @@
   background-position: left -5px;
 }
 
 .projects-button[selected] {
   background-position: right -5px;
 }
 
 .device-button {
-  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'), radial-gradient(at center left, red 40%, transparent);
+  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
   background-position: left -85px, top left;
   background-repeat: no-repeat, no-repeat;
   background-size: 160px 160px, 2px 80px;
 }
 
-.connected .device-button {
-  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'), radial-gradient(at center left, #B1FC0D 40%, transparent);
-}
-
 .device-button[selected] {
   background-position: right -85px, top left;
 }
 
 #connection-footer {
   border-width: 0;
   height: 50px;
   min-height: 50px;
--- a/browser/themes/shared/devtools/app-manager/projects.css
+++ b/browser/themes/shared/devtools/app-manager/projects.css
@@ -40,19 +40,19 @@ strong {
 
 
 #sidebar {
   display: flex;
   flex-direction: column;
   flex: 0 0 350px;
   overflow: hidden;
   z-index: 100;
-  background: #EEE;
+  background-color: #E9EAEB;
   position: relative;
-  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
+  box-shadow: 3px 0 1.5px rgba(0,0,0,0.08);
 }
 
 #project-list {
   height: 100%;
   overflow: auto;
 }
 
 #project-list:not([projects-count="0"]) > #no-project {
@@ -67,67 +67,78 @@ strong {
 }
 
 
 /********* PROJECT MENU ***********/
 
 
 .project-item {
   padding: 10px 0;
-  background-color: #F6F6F6;
+  background-color: #F0F1F2;
   box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
   color: #666;
   line-height: 120%;
   cursor: pointer;
   display: flex;
+  position: relative;
 }
 
 .project-item:hover {
   background-color: #EEE;
 }
 
 .project-item > * {
   flex-shrink: 0;
 }
 
 .project-item.selected {
-  background-color: #FFF;
+  background-color: #46AFE3;
+}
+
+.project-item.selected strong {
+  color: #FFF;
+}
+
+.project-item.selected p,
+.project-item.selected span {
+  color: #C1DCF0;
 }
 
 .button-remove {
   background-image: url('remove.svg');
   background-size: 20px;
   width: 20px;
   height: 20px;
-  float: right;
-  margin-right: 10px;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
   visibility: hidden;
 }
 
 .project-item:hover .button-remove {
   visibility: visible;
 }
 
 .project-item-status {
-  width: 10px;
+  width: 6px;
   margin: -10px 0;
   border-right: 1px solid rgba(0,0,0,0.1);
-  box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2);
 }
 
 .project-item-status[status="warning"] {
-  background: linear-gradient(to bottom, #F5BD56, #E3A93D);
+  background-color: #F2B33F;
+}
+
+.project-item-status[status="valid"] {
+  background-color: #70BF53;
 }
 
 .project-item-status[status="error"] {
-  background: linear-gradient(to bottom, #E34F22, #B83C16);
-}
-
-.project-item-status[status="valid"] {
-  background: linear-gradient(to bottom, #90D11F, #77AD18);
+  background-color: #ED4C62;
 }
 
 .project-item-icon {
   width: 32px;
   height: 32px;
   margin: 0 10px;
 }
 
@@ -136,28 +147,29 @@ strong {
   flex-shrink: 1 !important;
 }
 
 .project-item-type {
   font-size: 10px;
   line-height: 20px;
   float: right;
   padding-right: 10px;
-  color: #AAA;
+  color: #7597B9;
   text-transform: uppercase;
 }
 
 .project-item-description {
-  color: #AAA;
+  color: #888;
+  font-size: 90%;
 }
 
 /********* ADD PROJECT ***********/
 
 #new-packaged-project {
-  box-shadow: 0 -1px 10px rgba(0,0,0,0.3);
+  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
   background-position: calc(100% - 10px) 10px;
 }
 
 #new-packaged-project,
 #new-hosted-project {
   background-color: #EEE;
   border: none;
   border-top: 1px solid #DDD;
@@ -236,27 +248,31 @@ strong {
 .project-status {
   display: flex;
 }
 
 .project-title {
   flex-direction: row;
   display: flex;
   align-items: flex-start;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #CCC;
+  margin-bottom: 10px;
 }
 
 .project-title > h1 {
   flex-grow: 1;
   font-size: 24px;
 }
 
 .project-location {
   color: gray;
   font-size: 10px;
   cursor: pointer;
+  font-family: monospace;
 }
 
 .project-location:hover {
   text-decoration: underline;
 }
 
 .project-header {
   display: flex;
@@ -264,16 +280,17 @@ strong {
   margin: 10px 20px 10px 20px;
   padding-bottom: 10px;
 }
 
 .project-icon {
   flex-shrink: 0;
   width: 64px;
   height: 64px;
+  margin-right: 10px;
 }
 
 .project-location {
   font-size: 11px;
   color: #999;
 }
 
 .project-description {
@@ -290,25 +307,25 @@ strong {
   line-height: 10px;
 }
 
 .project-validation {
   color: #FFF;
 }
 
 [status="valid"] > .project-validation {
-  background-color: #82BD1B;
+  background-color: #70BF53;
 }
 
 [status="warning"] > .project-validation {
-  background-color: #ECB51F;
+  background-color: #F2B33F;
 }
 
 [status="error"] > .project-validation {
-  background-color: #C24119;
+  background-color: #ED4C62;
 }
 
 
 
 /********* PROJECT BUTTONS ***********/
 
 
 
@@ -389,23 +406,25 @@ strong {
   display: block;
 }
 
 .project-warnings {
   margin: 20px 20px 0;
   padding: 10px 10px;
   border-left: 3px solid #ECB51E;
   background-color: rgba(236, 181, 20, 0.1);
+  font-family: monospace;
 }
 
 .project-errors {
   margin: 20px;
   padding: 10px 10px;
-  border-left: 3px solid #E34F22;
-  background-color: rgba(227,79,34,0.1);
+  border-left: 3px solid #ED4C62;
+  background-color: rgba(237,76,98,0.1);
+  font-family: monospace;
 }
 
 .project-item-warnings {
   background-image: url('warning.svg');
 }
 
 .project-item-errors {
   background-image: url('error.svg');