Added new Kitematic icon set.

fonts/kitematic.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="kitematic" horiz-adv-x="512">
+<font-face font-family="kitematic" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#98;" d="M256 11c-4 0-6 2-6 6l0 483c0 3 2 6 6 6 4 0 6-3 6-6l0-483c0-4-2-6-6-6z m239 247l-483 0c-3 0-6 3-6 7 0 3 3 6 6 6l483 0c4 0 6-3 6-6 0-4-2-7-6-7z"/>
+<glyph unicode="&#99;" d="M262 506c3 0 6 0 8-2 50-5 91-27 122-68 14-19 23-40 25-65 4-39-6-74-30-105-18-22-40-38-67-48-1 0-1 0-3-2 34-74 68-149 102-224-2 0-3 2-3 2-54 30-109 61-163 92-1 1-2 1-3 0-55-31-109-62-164-92-2 0-2-2-3-2 35 76 68 151 103 227-6 2-12 5-17 9-27 15-47 36-61 63-9 16-15 33-16 51-4 43 10 80 41 111 23 24 51 40 83 46 9 3 20 4 28 4 0 0 2 0 2 0 5 3 10 3 16 3z m-14-288c20 0 34 1 48 5 36 10 64 28 85 59 21 29 27 62 21 97-6 32-23 57-47 78-31 24-66 36-105 36-16 0-30-3-44-8-34-11-63-31-82-61-18-28-24-59-18-91 7-33 23-59 49-80 28-24 61-35 93-35z m-139-196c1 0 1 1 2 1 46 26 91 51 137 77 2 1 3 1 4 0 46-26 91-51 137-77 0 0 1 0 1-1-28 64-57 126-85 190-18-5-36-7-55-7-18 0-36 4-54 10-30-64-58-128-87-193z m144 247c-29 1-55 11-74 34-25 31-24 75 3 105 15 18 36 28 59 31 27 4 52-3 74-19 18-14 28-32 31-54 3-24-4-47-21-65-17-18-37-28-60-31-4 0-8 0-12-1z m2 13c2 0 6 0 11 1 21 2 39 11 51 28 13 15 18 33 16 53-3 19-12 34-27 46-18 14-38 19-60 18-21-3-39-11-53-26-25-27-24-69 3-95 15-16 34-24 59-25z"/>
+<glyph unicode="&#100;" d="M257 176c-9 0-14 6-14 14 0 8 5 14 14 14 8 0 14-6 14-14 0-8-6-14-14-14z m0 16c-2 0-3-1-3-2 0-3 5-3 5 0 0 1 0 2-2 2z m0-79c-4 0-6 2-6 6l0 63c0 3 2 5 6 5 3 0 5-2 5-5l0-63c0-4-2-6-5-6z m172-103l-343 0 0 294 343 0z m-332 12l320 0 0 270-320 0z m282 276l-12 0 0 74c0 57-44 119-110 119-67 0-111-62-111-119l0-74-12 0 0 74c0 63 49 131 123 131 73 0 122-68 122-131z"/>
+<glyph unicode="&#101;" d="M256 6c-138 0-250 112-250 250 0 138 112 250 250 250 138 0 250-112 250-250 0-138-112-250-250-250z m0 488c-131 0-238-107-238-238 0-131 107-238 238-238 131 0 238 107 238 238 0 131-107 238-238 238z m-98-292l-15 59-14-59-14 0-23 74 13 0 16-60 15 60 13 0 15-60 17 60 13 0-24-74z m109 0l-16 59-14-59-13 0-24 74 13 0 17-60 14 60 13 0 16-60 16 60 13 0-23-74z m108 0l-15 59-15-59-13 0-24 74 13 0 17-60 14 60 14 0 15-60 17 60 13 0-24-74z"/>
+<glyph unicode="&#102;" d="M9 2c-2 0-3 1-6 4-3 3-3 7 0 11l482 482c4 3 8 3 12 0 3-4 3-8 0-12l-482-481c-1-4-4-4-6-4z m485 8c-2 0-3 1-5 3l-481 481c-3 4-3 8 0 12 3 3 8 3 11 0l482-482c4-4 4-8 0-12-1-1-4-2-7-2z"/>
+<glyph unicode="&#104;" d="M346 494c2-1 6-1 8-2 10-5 16-14 16-26 0-52 0-104 0-157 0-1 0-1 0-2 49-7 85-31 111-73 18-29 24-61 20-95-11-71-70-123-139-128-75-3-140 49-154 121-1 0-1 0-2 0-57 0-113 0-170 0-14 0-26 11-28 24 0 0 0 0 0 1 0 105 0 209 0 313 0 0 0 0 0 1 1 9 7 17 16 21 2 1 6 2 9 2 105 0 208 0 313 0z m-139-352c0 1 0 1 0 0-1 16-1 31 2 46 7 34 24 62 50 84 2 1 2 2 2 3 0 44 0 86 0 129 0 0 0 1 0 1 0 2 2 5 4 6 2 0 6-1 6-4 0-1 0-2 0-2 0-40 0-81 0-121 0-1 0-1 0-2 27 17 56 26 87 25 0 1 0 1 0 2 0 53 0 105 0 157 0 11-6 18-17 18-102 0-203 0-306 0-10 0-17-7-17-18 0-102 0-203 0-306 0-10 7-17 17-17 56 0 113 0 169 0 2-1 2-1 3-1z m285 17c0 77-62 136-136 137-76 1-139-59-139-137 0-76 62-137 138-137 75 0 137 61 137 137z m-374 160c0-30 0-58 0-88 0-3-2-6-5-6-4 0-5 3-6 5 0 0 0 1 0 1 0 58 0 116 0 174 0 2 1 5 3 6 4 1 8-1 8-5 0-8 0-16 0-24 0-21 0-43 0-63z m49 0c0-30 0-58 0-88 0-3-2-6-5-6-3 0-5 3-6 5 0 0 0 1 0 1 0 58 0 115 0 173 0 1 0 2 0 3 1 3 3 5 6 4 2 0 4-3 4-6 0-6 0-10 0-16 1-23 1-47 1-70z m45 0c0 29 0 58 0 87 0 5 3 7 6 6 3-1 4-2 4-5 0 0 0-1 0-1 0-58 0-116 0-174 0-4-2-7-6-7-2 0-4 3-4 5 0 0 0 1 0 1 0 30 0 58 0 88z m102-154c-3 5-7 8-10 12-6 7-13 15-18 22-2 2-3 4-2 6 2 3 7 4 10 1 3-5 8-9 11-14 8-9 16-18 24-27 0 0 0-1 1-1-3-4-7-8-10-12-9-10-17-20-26-29-3-2-5-4-7-1-3 1-4 3-3 5 0 2 2 3 3 4 9 11 18 21 28 33-2 0-2 0-1 1z m73-44c-12 0-22 0-33 0-2 0-5 1-6 3-1 2 0 5 2 6 2 1 3 1 5 1 19 0 39 0 58 0 2 0 5 0 7 0 3 0 6-2 6-6 0-3-3-6-6-6-12 2-22 2-33 2z"/>
+<glyph unicode="&#105;" d="M294 296c-1 0-4 0-5 1-3 3-3 7 0 9l197 197c3 3 6 3 9 0 2-2 2-6 0-8l-198-198c-1-1-2-1-3-1z m-282-281c-1 0-3 0-5 1-2 2-2 6 0 8l198 198c2 2 6 2 8 0 3-3 3-6 0-9l-197-197c0 0-3-1-4-1z m483 343c-4 0-6 3-6 6l0 130-129 0c-4 0-6 2-6 6 0 3 2 6 6 6l135 0c4 0 6-3 6-6l0-136c0-3-2-6-6-6z m-347-347l-136 0c-3 0-6 2-6 6l0 135c0 4 3 6 6 6 4 0 6-2 6-6l0-129 130 0c3 0 6-2 6-6 0-4-3-6-6-6z"/>
+<glyph unicode="&#106;" d="M256 30c-1 0-2 0-3 1-11 7-244 180-244 311 0 87 64 140 125 140 44 0 97-28 122-104 26 76 78 104 123 104 61 0 125-53 125-140 0-131-235-304-244-311-1-1-2-1-4-1z m-122 440c-56 0-114-48-114-128 0-117 207-277 236-299 30 22 237 182 237 299 0 80-59 128-114 128-56 0-99-43-117-114-1-6-10-6-11 0-18 71-61 114-117 114z"/>
+<glyph unicode="&#107;" d="M29 10c-2 0-4 1-5 1-3 2-3 4-1 7l57 113c-47 42-74 98-74 154 0 120 112 217 249 217 137 0 249-97 249-217 0-121-112-218-249-218-32 0-62 8-84 15l-140-70c-1-1-1-2-2-2z m226 481c-131 0-237-93-237-206 0-54 26-108 72-148 3-1 3-5 2-7l-52-100 127 63c1 1 3 1 4 0 22-7 52-16 83-16 131 0 237 93 237 206 0 114-105 208-236 208z m-105-136l205 0 0-12-205 0z m0-59l205 0 0-11-205 0z m0-57l205 0 0-12-205 0z"/>
+<glyph unicode="&#108;" d="M69 196c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 62-28 62-62 0-33-29-61-62-61z m0 112c-28 0-52-23-52-51 0-27 24-50 52-50 28 0 51 23 51 50-1 28-23 51-51 51z m188-112c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 63-28 63-62 0-33-29-61-63-61z m0 112c-28 0-51-23-51-51 0-27 23-50 51-50 28 0 51 23 51 50-1 28-23 51-51 51z m189-112c-35 0-63 28-63 61 0 34 28 62 63 62 35 0 63-28 63-62 0-33-28-61-63-61z m0 112c-28 0-52-23-52-51 0-27 24-50 52-50 28 0 51 23 51 50 0 28-23 51-51 51z"/>
+<glyph unicode="&#109;" d="M298 6l-85 0c-3 0-6 2-6 6l0 65c-3 2-7 3-12 5-10 4-22 8-32 13l-45-45c-3-2-6-2-8 0l-60 60c-1 1-1 2-1 4 0 3 1 4 1 5l45 45c-8 16-15 38-19 62l-64 0c-4 0-6 3-6 6l0 66c0 3 2 6 6 6l64 0c4 10 11 29 18 45l-45 45c-3 3-3 6 0 8l59 60c3 2 6 2 9 0l45-45c14 8 33 15 45 19l0 64c0 4 3 6 6 6l85 0c3 0 6-2 6-6l0-64c10-4 31-11 45-19l45 45c3 2 6 2 8 0l60-60c1-1 1-2 1-4 0-3-1-4-1-5l-45-45c8-13 14-30 18-46l64 0c3 0 6-2 6-6l0-67c0-4-3-6-6-6l-63 0c-5-36-11-48-19-62l45-46c2-2 2-5 0-8l-60-59c-2-3-5-3-8 0l-45 45c-10-5-23-10-32-13-5-1-10-4-12-5l0-65c-1-2-4-4-7-4z m-78 12l73 0 0 63c0 2 1 5 3 5 4 2 10 3 17 7 11 3 25 8 35 14 2 1 4 1 7-1l44-44 51 51-44 44c-2 3-2 5-1 7l1 2c10 14 16 25 20 65 0 4 3 5 6 5l63 0 0 56-63 0c-2 0-5 2-6 4-4 18-12 36-20 50-1 3-1 6 1 8l44 44-51 51-44-44c-2-3-5-3-7-1-16 9-42 19-50 20-3 0-5 3-5 6l0 63-73 0 0-63c0-3-2-5-4-6-11-2-35-12-50-20-3-2-6-2-7 1l-45 44-51-51 44-44c3-3 3-5 2-8-10-15-18-40-21-50-1-2-3-4-6-4l-63 0 0-56 63 0c4 0 6-3 6-5 4-25 12-51 21-67 1-2 1-6-2-7l-44-44 51-51 45 44c2 2 4 2 7 1 9-6 22-11 34-14 7-3 13-5 17-7 2-1 3-4 3-5l0-63z m36 139c-55 0-99 44-99 99 0 55 44 99 99 99 55 0 99-44 99-99 0-55-44-99-99-99z m0 186c-48 0-87-39-87-87 0-48 39-87 87-87 48 0 87 39 87 87 0 48-39 87-87 87z"/>
+<glyph unicode="&#110;" d="M85 208c-2 0-3 1-4 2l-75 107c-2 2-1 5 1 7 3 2 6 1 8-1l70-101 92 101c2 2 5 2 8 0 2-2 2-5 0-7l-96-107c0 0-3-1-4-1z m217-160c-3 0-5 2-5 5 0 4 2 6 5 6 54 2 105 24 142 65 35 38 54 88 52 139-4 109-98 195-209 190-56-2-107-25-143-67-38-43-57-101-52-164 0-3-2-5-6-5-3 0-5 2-5 5-5 66 14 127 54 172 39 43 92 68 151 70 117 4 215-85 220-201 2-54-17-106-56-147-37-41-91-66-148-68z"/>
+<glyph unicode="&#111;" d="M475 3l-438 0c-19 0-34 15-34 34l0 438c0 19 15 34 34 34l438 0c19 0 34-15 34-34l0-438c0-19-15-34-34-34z m-438 492c-11 0-20-9-20-20l0-438c0-11 9-20 20-20l438 0c11 0 20 9 20 20l0 438c0 11-9 20-20 20z"/>
+<glyph unicode="&#97;" d="M242 489c0-29 0-59 0-89 30 0 59 0 89 0 0-30 0-59 0-89 10 0 19 0 29 1 10 3 19 5 28 10-1 3-2 5-5 7-5 12-6 24-6 38 1 9 2 19 6 27 4 6 7 11 12 17 2 2 3 4 5 6 3-3 6-5 10-8 11-10 20-21 27-35 2-5 4-10 6-16 15 4 28 4 43-2 8-3 16-8 24-12-1-3-3-5-4-9-4-8-9-15-15-22-9-9-22-15-35-18-9-2-16-2-24-2-2 0-2 0-3-1-6-16-14-32-24-46 0 0 0 0 0-1 1 0 1 0 3 0 22 0 44 0 67 0 15 0 27-12 27-27 0-57 0-116 0-173 0-15-12-26-27-26-80 0-160 0-242 0-14 0-24 8-26 22 0 1 0 3 0 4 0 27 0 55 0 82 0 2 0 2 0 3-2 0-5 0-7 0-13-1-26-1-39 0-32 2-62 11-89 30-19 13-33 30-45 50-7 15-12 29-16 46-1 6-1 13-2 19 0 0 0 1 0 1 0 5 0 10 0 16 0 0 0 0 0 1 0 3 0 6 1 9 0 3 1 6 1 10 15 0 30 0 44 0 0 31 0 60 0 89 30 0 59 0 89 0 0 29 0 59 0 89 33-1 65-1 98-1z m111-254c-41 0-80 0-121 0-9 0-16-7-16-17 0-57 0-115 0-173 0-9 7-17 17-17 80 0 161 0 241 0 10 0 17 8 17 17 0 57 0 115 0 173 0 10-7 16-17 16-40 1-80 1-121 1z m47 167c-4-4-6-8-8-13-5-14-6-26-4-41 2-10 5-20 12-28 0 0 1-1 1-1-18-12-36-18-57-18-107 0-214 0-321 0-1 0-1 0-2 0 0-6-1-12-1-17 0-8 1-17 2-25 2-16 7-30 15-44 10-19 24-34 40-46 25-17 55-26 85-28 9-1 20 0 29 0 5 0 10 1 15 1 0 1 0 2 0 2 0 25 0 50 0 76 0 2 0 4 0 5 2 13 12 22 26 22 52 0 106 0 158 0 1 0 2 0 3 1 11 17 21 36 28 56 0 1 1 2 2 2 11-1 21 0 30 2 15 4 27 12 35 23 2 3 4 7 6 10-9 6-20 9-30 9-11 1-21-1-32-5 0 11-5 22-10 32-5 10-12 18-22 25z m-246 77c0-27 0-53 0-78 26 0 52 0 77 0 0 26 0 52 0 78-25 0-51 0-77 0z m0-167c26 0 52 0 77 0 0 27 0 53 0 78-26 0-52 0-77 0 0-26 0-51 0-78z m166 0c0 27 0 53 0 78-26 0-53 0-78 0 0-26 0-52 0-78 27 0 52 0 78 0z m-177 0c0 27 0 53 0 78-26 0-52 0-77 0 0-26 0-52 0-78 26 0 51 0 77 0z m187-174c-2-2-4-4-6-7-9-11-20-20-29-31-1-1-3-2-6-2-4 1-5 5-2 9 2 2 6 5 8 7 7 7 14 15 21 22 0 0 0 0 0 1-3 2-6 5-8 7-7 8-14 15-21 22-2 2-2 5 0 7 2 3 6 3 8 0 11-10 23-23 35-35-1 0 0 0 0 0z m49-27c10 0 19 0 30 0 2 0 4-1 5-3 1-2 0-5-2-6-1-1-2-1-3-1-19 0-39 0-58 0-3 0-5 2-5 6 0 3 2 5 5 5 9-1 19-1 28-1z m-236 121c0-15-10-28-24-31-16-5-30 4-36 18-7 16 0 35 14 42 18 10 39 0 45-20 0-1 1-3 1-4 0-1 0-3 0-5z m-53 0c0-1 1-4 1-7 4-13 19-18 30-11 8 5 12 15 10 24-4 13-16 20-28 16-7-3-12-12-13-22z"/>
+<glyph unicode="&#103;" d="M267 6c-7 0-15 0-21 0-3 0-7 0-10 1-11 1-20 3-31 5-26 5-51 15-75 28-34 21-62 47-82 79-25 38-38 80-41 124 0 0 0 1 0 1 0 7 0 14 0 20 0 0 0 2 0 2 1 23 5 46 13 69 19 53 53 96 100 128 38 25 80 38 125 41 0 0 1 0 1 0 8 0 15 0 21 0 0 0 1 0 1 0 11-2 20-2 31-4 26-3 50-12 72-25 40-20 71-49 95-86 25-38 38-79 40-123 0 0 0-2 0-2 0-7 0-14 0-20 0 0 0-1 0-1-1-18-4-35-7-51-18-68-58-119-118-154-21-13-45-21-70-27-12-3-24-5-36-5-2 0-6 0-8 0z m-73 186c-40 33-43 91-11 128 31 35 85 41 122 12 19-14 31-34 34-58 5-31-4-57-27-79 26-13 46-32 61-57 14-26 18-53 13-82 75 46 128 146 102 256-26 110-130 189-249 181-114-8-208-99-219-214-2-29 0-59 7-86 8-29 21-54 37-78 18-23 38-42 63-59-9 62 24 114 67 136z m24-1c-2-2-4-3-6-3-14-6-27-14-39-25-31-32-42-69-34-113 0-1 2-2 3-2 37-21 76-30 118-29 13 0 26 1 39 4 25 4 47 13 70 25 1 0 1 1 2 2 4 17 5 35 2 51-9 42-34 70-73 87-5 3-9 4-13 5 1 0 1 1 2 1 6 5 13 10 18 14 17 19 24 42 19 67-7 44-50 71-93 62-38-8-66-45-59-88 3-23 15-41 36-54 2-1 6-2 8-4z"/>
+</font></defs></svg>

src/components/ContainerDetailsHeader.react.js

@@ -23,8 +23,10 @@ var ContainerDetailsHeader = React.createClass({
       state = <span className="status stopped">STOPPED</span>;
     }
     return (
-      <div className="details-header">
-        <h1>{this.props.container.Name}</h1>{state}
+      <div className="header-section">
+        <div className="text">
+          {this.props.container.Name}{state}
+        </div>
       </div>
     );
   }

src/components/Containers.react.js

@@ -162,7 +162,7 @@ var Containers = React.createClass({
               <h4>Containers</h4>
               <div className="create">
                 <Router.Link to="new">
-                  <span className="btn-new icon icon-add-3"></span>
+                  <span className="btn-new icon icon-add"></span>
                 </Router.Link>
               </div>
             </section>
@@ -170,9 +170,9 @@ var Containers = React.createClass({
               <ContainerList containers={this.state.sorted} newContainer={this.state.newContainer} />
             </section>
             <section className="sidebar-buttons">
-              <span className="btn-sidebar btn-terminal" onClick={this.handleClickDockerTerminal} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><RetinaImage src="whaleicon.png"/> <span className="text">DOCKER CLI</span></span>
-              <span className="btn-sidebar btn-feedback" onClick={this.handleClickReportIssue} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><RetinaImage src="feedback.png"/></span>
-              <span className="btn-sidebar" onClick={this.handleClickPreferences} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><RetinaImage src="preferences.png"/></span>
+              <span className="btn-sidebar btn-terminal" onClick={this.handleClickDockerTerminal} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-docker-cli"></span><span className="text">DOCKER CLI</span></span>
+              <span className="btn-sidebar btn-feedback" onClick={this.handleClickReportIssue} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-feedback"></span></span>
+              <span className="btn-sidebar btn-preferences" onClick={this.handleClickPreferences} onMouseEnter={this.handleMouseEnterDockerTerminal} onMouseLeave={this.handleMouseLeaveDockerTerminal}><span className="icon icon-preferences"></span></span>
             </section>
           </div>
           <Router.RouteHandler pending={this.state.pending} containers={this.state.containers} container={container}/>

src/components/Header.react.js

@@ -128,7 +128,7 @@ var Header = React.createClass({
       username = (
         <div className="login-wrapper">
           <div className="login no-drag" onClick={this.handleUserClick}>
-            <RetinaImage src="user.png"/> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
+            <span className="icon icon-user"></span> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
           </div>
         </div>
       );
@@ -136,7 +136,7 @@ var Header = React.createClass({
       username = (
         <div className="login-wrapper">
           <div className="login no-drag" onClick={this.handleLoginClick}>
-            <RetinaImage src="user.png"/> LOGIN
+            <span className="icon icon-user"></span> LOGIN
           </div>
         </div>
       );

styles/header.less

@@ -44,7 +44,7 @@
     align-items: center;
     border-left: 1px solid @color-divider;
     border-right: 1px solid @color-divider;
-    padding: 0 1rem 0 0.6rem;
+    padding: 0 1rem 0 1rem;
     .box-button();
 
     &:active {

styles/left-panel.less

@@ -12,7 +12,7 @@
   .sidebar-header {
     flex: 0 auto;
     min-width: @sidebar-width;
-    min-height: 42px;
+    min-height: 45px;
     display: flex;
     border-bottom: 1px solid transparent;
     transition: border-bottom 0.25s;
@@ -22,7 +22,7 @@
     }
     h4 {
       align-self: flex-start;
-      padding: 0.2rem 0 0 1.4rem;
+      padding: 0.4rem 0 0 1.4rem;
       display: inline-block;
       position: relative;
     }
@@ -30,7 +30,7 @@
       display: flex;
       flex: 1 auto;
       justify-content: flex-end;
-      margin: 0.6rem 1rem 0 0;
+      margin: 0.8rem 1rem 0 0;
       a {
         display: block;
         text-decoration: none;
@@ -282,12 +282,18 @@
   .btn-terminal {
     flex: 1 auto;
     border-right: 1px solid @color-divider;
-    img {
-      margin-right: 10px;
-    }
+    color: @brand-primary;
   }
   .btn-feedback {
     border-right: 1px solid @color-divider;
+    .icon {
+      margin-right: 0;
+    }
+  }
+  .btn-preferences {
+    .icon {
+      margin-right: 0;
+    }
   }
   .btn {
     position: relative;

styles/mixins.less

@@ -41,6 +41,11 @@
   color: @gray-light;
   font-size: 10px;
   font-weight: 500;
+  .icon {
+    font-size: 2rem;
+    margin-right: 0.7rem;
+    margin-top: 0.5rem;
+  }
   &:hover {
     background-color: @color-box-button;
   }

styles/new-container.less

@@ -86,7 +86,7 @@
   }
   .new-container-header {
     background-color: white;
-    height: 42px;
+    height: 45px;
     border-bottom: 1px solid @color-divider;
     display: flex;
     flex: 0 auto;
@@ -115,7 +115,7 @@
           top: -1px;
           left: -1px;
           font-size: 13px;
-          height: 43px;
+          height: 46px;
           padding: 4px 8px 4px 40px;
           color: @gray-darkest;
           box-shadow: none;
@@ -138,11 +138,6 @@
       font-size: 13px;
       margin: 1.2rem 1.2rem 0 0;
 
-      .results-filter {
-        text-align: center;
-        min-width: 30px;
-      }
-
       .results-filter-title {
         color: @gray-lighter;
         font-weight: 400;

styles/right-panel.less

@@ -14,6 +14,24 @@
       color: @gray-darker;
       font-weight: 500;
       margin-left: 1.2rem;
+      .status {
+        font-size: 10px;
+        font-weight: 500;
+        position: relative;
+        left: 1rem;
+        &.running {
+          color: @brand-positive;
+        }
+        &.paused {
+          color: @gray-lighter;
+        }
+        &.stopped {
+          color: @gray-lighter;
+        }
+        &.downloading {
+          color: @brand-action;
+        }
+      }
     }
   }
   .details-subheader {
@@ -23,14 +41,12 @@
     position: relative;
     border-bottom: 1px solid @color-divider;
     background-color: white;
-    height: 51px;
-    padding: 6px 10px 10px 24px;
-    font-size: 13px;
+    height: 45px;
+    font-size: 10px;
     color: @gray-normal;
     .details-header-actions {
       flex: 1 auto;
       text-align: left;
-      margin-top: -12px;
       .action {
         display: inline-block;
         position: relative;
@@ -87,40 +103,6 @@
       margin-top: 3px;
     }
   }
-  .details-header {
-    flex: 0 auto;
-    display: flex;
-    flex-direction: row;
-    padding: 18px 24px 24px 24px;
-    position: relative;
-    background-color: white;
-    h1 {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 400;
-      margin: 0;
-      color: @gray-darkest;
-    }
-    .status {
-      font-size: 10px;
-      font-weight: 500;
-      position: relative;
-      top: 8px;
-      left: 14px;
-      &.running {
-        color: @brand-positive;
-      }
-      &.paused {
-        color: @gray-lighter;
-      }
-      &.stopped {
-        color: @gray-lighter;
-      }
-      &.downloading {
-        color: @brand-action;
-      }
-    }
-  }
 
   .tab {
     font-weight: 400;
@@ -129,6 +111,9 @@
     transition: all 0.3s;
     color: @gray-normal;
     border-bottom: 3px solid transparent;
+    text-align: center;
+    min-width: 30px;
+    padding-bottom: 0.2rem;
     &.active {
       color: @gray-darkest;
       border-bottom: 3px solid @brand-primary;