add switchView and white close icon

app/assets/images/sprite.svg

@@ -13,7 +13,7 @@
         <path d="M20,87.09 L20,84.814 L19.678,84.709 L17.242,83.914 L16.592,82.344 L17.842,79.701 L16.232,78.09 L15.93,78.246 L13.644,79.405 L12.076,78.755 L11.09,76 L8.814,76 L7.914,78.758 L6.344,79.408 L3.699,78.16 L2.09,79.768 L2.244,80.072 L3.402,82.356 L2.754,83.925 L0,84.911 L0,87.187 L0.32,87.291 L2.758,88.088 L3.408,89.656 L2.158,92.301 L3.768,93.911 L4.068,93.757 L6.353,92.597 L7.924,93.248 L8.91,96 L11.186,96 L11.291,95.68 L12.086,93.244 L13.654,92.594 L16.299,93.842 L17.908,92.234 L17.756,91.932 L16.596,89.648 L17.246,88.078 L20,87.09 L20,87.09 Z M10,89.188 C8.24,89.188 6.812,87.762 6.812,86 C6.812,84.24 8.24,82.815 10,82.815 C11.76,82.815 13.185,84.24 13.185,86 C13.185,87.762 11.76,89.188 10,89.188 L10,89.188 L10,89.188 Z" id="dark-cog" fill="#26272E" sketch:type="MSShapeGroup"></path>
         <path d="M31,66 L31,59 L30,59 L30,66 L23,66 L23,67 L30,67 L30,74 L31,74 L31,67 L38,67 L38,66 L31,66 L31,66 Z" id="green-plus" stroke="#38AE6A" stroke-width="2" sketch:type="MSShapeGroup"></path>
         <path d="M31,86 L31,79 L30,79 L30,86 L23,86 L23,87 L30,87 L30,94 L31,94 L31,87 L38,87 L38,86 L31,86 L31,86 Z" id="white-plus" stroke="#FFFFFF" stroke-width="2" sketch:type="MSShapeGroup"></path>
-        <path d="M5.324,110.89 L11.883,105.477 L5.324,100.064 L5.324,103.596 L0,103.596 L0,107.358 L5.324,107.358 L5.324,110.89 L5.324,110.89 Z M3.644,96 L3.644,97.542 L13.052,97.542 L13.052,113.459 L3.644,113.459 L3.644,115 L14.593,115 L14.593,96 L3.644,96 L3.644,96 Z" id="sign-out" fill="#0F94D7" sketch:type="MSShapeGroup"></path>
+        <path d="M5.3764201,111 L12,105.5 L5.3764201,100 L5.3764201,103.588768 L0,103.588768 L0,107.411232 L5.3764201,107.411232 L5.3764201,111 L5.3764201,111 Z M4,97.542 L13.4518221,97.542 L13.4518221,113.459 L4,113.459 L4,115 L15,115 L15,96 L4,96 L4,97.542 Z" id="sign-out" fill="#0F94D7" sketch:type="MSShapeGroup"></path>
         <g id="channels" sketch:type="MSLayerGroup" transform="translate(0.000000, 141.000000)">
             <path d="M11.3246753,9 L8.5,11.5925926 L5.67532468,9 L1,14 L16,14 L11.3246753,9 L11.3246753,9 Z M17,4 L12,8.59183673 L17,14 L17,4 L17,4 Z M0,4 L0,14 L5,8.64646465 L0,4 L0,4 Z M17,3 L0,3 L8.4491018,10 L17,3 L17,3 Z" id="email" fill="#A9BCC4" sketch:type="MSShapeGroup"></path>
             <path d="M31.7211201,1.11066286 C29.6577938,0.407237941 28.6261306,3.2209376 28.3166317,4.92925526 L30.070459,6.73806218 C30.070459,6.73806218 30.070459,7.84344419 27.5944674,10.1546975 C25.1184758,12.4659508 23.9836464,12.3654615 23.9836464,12.3654615 L21.92032,10.355676 C20.5791579,10.5566546 18,12.164483 18,12.164483 C18.3094989,14.5762255 19.96016,16.1840539 22.5393179,15.9830754 C23.5709811,15.8825861 30.6894569,14.375247 33.7844464,6.33610509 C34.4034443,4.52729816 33.6812801,1.81408777 31.7211201,1.11066286 L31.7211201,1.11066286 L31.7211201,1.11066286 Z M17.9876543,7.40740741 L25,8 L24.4074074,0.987654321 L22.3333333,3.0617284 L19.1728395,0 L17,2.17283951 L20.0617284,5.33333333 L17.9876543,7.40740741 L17.9876543,7.40740741 Z" id="calls-in" fill="#A9BCC4" sketch:type="MSShapeGroup"></path>
@@ -192,5 +192,10 @@
         <path d="M43.9955775,343 C43.4457352,343 43,343.453036 43,343.99703 L43,350.00297 C43,350.553614 43.444837,351 43.9955775,351 L53.0044225,351 C53.5542648,351 54,350.546964 54,350.00297 L54,343.99703 C54,343.446386 53.555163,343 53.0044225,343 L43.9955775,343 Z M46.4077632,341.571429 L46.4023505,341.482613 C46.4030141,341.489235 46.4015696,341.474212 46.4003105,341.455507 C46.379729,341.149748 46.4205913,340.771722 46.5669088,340.429021 C46.8359739,339.798824 47.4008258,339.428571 48.4996473,339.428571 C49.5985181,339.428572 50.1635634,339.798885 50.4328388,340.429174 C50.5793057,340.772007 50.6202475,341.150138 50.599718,341.455859 C50.5984676,341.474479 50.5970325,341.489439 50.5976961,341.482806 L50.592307,341.571429 L50.592307,343 L51.987225,343 L51.987225,341.571429 L51.981836,341.660051 C51.9853834,341.629798 51.9882738,341.599667 51.991349,341.553872 C52.0259563,341.038509 51.9615254,340.443438 51.7107881,339.85654 C51.2171616,338.701116 50.147359,338 48.4996474,338 C46.8518862,338 45.782181,338.701176 45.288829,339.856693 C45.0383141,340.443443 44.9740043,341.038385 45.0086952,341.553755 C45.0117872,341.599689 45.0146936,341.629916 45.0182579,341.660245 L45.0128452,341.571429 L45.0128452,343 L46.4077632,343 L46.4077632,341.571429 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
         <path d="M35.4077632,343 L42.0044225,343 C42.555163,343 43,343.446386 43,343.99703 L43,350.00297 C43,350.546964 42.5542648,351 42.0044225,351 L32.9955775,351 C32.444837,351 32,350.553614 32,350.00297 L32,343.99703 C32,343.453036 32.4457352,343 32.9955775,343 L34.0128452,343 L34.0128452,340.210526 L34.0182579,340.315236 C34.0146936,340.27948 34.0117872,340.243843 34.0086952,340.18969 C33.9740043,339.582096 34.0383141,338.880691 34.288829,338.188943 C34.782181,336.82665 35.8518862,336 37.4996474,336 C39.147359,336 40.2171616,336.826578 40.7107881,338.188763 C40.9615254,338.880684 41.0259563,339.582243 40.991349,340.189828 C40.9882738,340.243818 40.9853834,340.279341 40.981836,340.315007 L40.987225,340.210526 L40.987225,341.894737 L39.592307,341.894737 L39.592307,340.210526 L39.5976961,340.106046 C39.5970325,340.113866 39.5984676,340.096228 39.599718,340.074275 C39.6202475,339.713847 39.5793057,339.26805 39.4328388,338.863868 C39.1635634,338.12079 38.5985181,337.684211 37.4996473,337.684211 C36.4008258,337.68421 35.8359739,338.120718 35.5669088,338.863688 C35.4205913,339.267715 35.379729,339.713387 35.4003105,340.073861 C35.4015696,340.095913 35.4030141,340.113625 35.4023505,340.105817 L35.4077632,340.210526 L35.4077632,343 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
         <path d="M61.9409639,349 L61.9409639,346.9 C61.9409639,346.9 61.9409637,347 65.5,347 C69.0590363,347 70,351 70,351 C70,351 71.0012466,346.376064 69.5,343.5 C68.4923852,341.569628 66.7285772,341 65.5,341 C61.9409637,341 62.0409639,341 62.0409639,341 L61.9409639,339 L59.0409639,341 L55,344 L59.0409639,347 L61.9409639,349 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(62.500000, 345.000000) rotate(-180.000000) translate(-62.500000, -345.000000) "></path>
+        <g id="view-change" sketch:type="MSLayerGroup" transform="translate(15.000000, 96.000000)" fill="#FFFFFF">
+            <path d="M10,7.3 C9.4,7.3 8.9,7.8 8.9,8.4 C8.9,9 9.4,9.5 10,9.5 C10.6,9.5 11.1,9 11.1,8.4 C11.2,7.9 10.7,7.3 10,7.3 L10,7.3 Z M10,5.2 C7,5.2 3.9,8.5 3.9,8.5 C3.9,8.5 6.9,11.8 10,11.8 C13,11.8 16.1,8.5 16.1,8.5 C16.1,8.5 13.1,5.2 10,5.2 L10,5.2 Z M10,10.8 C8.7,10.8 7.7,9.8 7.7,8.5 C7.7,7.2 8.7,6.2 10,6.2 C11.3,6.2 12.3,7.2 12.3,8.5 C12.4,9.8 11.3,10.8 10,10.8 L10,10.8 Z" id="eye" sketch:type="MSShapeGroup"></path>
+            <path d="M6.5,1.6 C8.1,0.8 9.9,0.6 11.8,1 L12.1,4.38538095e-15 C7.2,-1.2 2.9,1.4 1.4,5.7 C0.6,8 0.6,10.3 1.6,12.4 L2.1,13.2 L0,13.8 L4.5,17 L4.9,12.1 L4.9,12 L4.9,11.5 L3,12.9 L2.7,12.1 C1.8,10.2 1.7,8.1 2.4,6.1 C3.1,4.1 4.6,2.5 6.5,1.6 Z M17.4,4 L19.5,3.5 L15,0.3 L14.6,5.8 L16.6,4.3 L17.1,5.2 C18.1,7.1 18.3,9.3 17.6,11.3 C16.9,13.3 15.6,15 13.7,15.9 C12.1,16.7 9.8,16.7 8.8,16.6 L8.5,17.6 C12.4,18.4 17.2,16 18.7,11.7 C19.5,9.4 19.2,7 18.1,4.8 L17.4,4 Z" id="change" fill-opacity="0.7" sketch:type="MSShapeGroup"></path>
+        </g>
+        <path d="M76.4767712,343.142686 L81.2904338,338.295361 C81.679595,337.903479 82.3127561,337.901273 82.7046388,338.290434 C83.0965214,338.679595 83.0987275,339.312756 82.7095663,339.704639 L77.8909934,344.556908 L82.7039017,349.369816 C83.094426,349.760341 83.094426,350.393506 82.7039017,350.78403 C82.3133774,351.174554 81.6802124,351.174554 81.2896881,350.78403 L76.4817074,345.976049 L71.7095663,350.781562 C71.3204051,351.173444 70.6872439,351.175651 70.2953613,350.786489 C69.9034787,350.397328 69.9012726,349.764167 70.2904338,349.372284 L75.0674852,344.561827 L70.2127651,339.707107 C69.8222408,339.316583 69.8222408,338.683418 70.2127651,338.292893 C70.6032893,337.902369 71.2364543,337.902369 71.6269786,338.292893 L76.4767712,343.142686 Z" id="white-close" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
     </g>
 </svg>

app/assets/stylesheets/zzz.css.erb

@@ -107,6 +107,12 @@ small {
   background: hsla(50,100%,50%,.13);
 }
 
+.close,
+.close:hover {
+  float: none;
+  opacity: 1;
+}
+
 #app > nav {
   position: relative;
   z-index: 1;
@@ -814,6 +820,12 @@ ol.tabs li {
     background-position: 0 -96px;
   }
 
+  .switchView.icon {
+    width: 19px;
+    height: 18px;
+    background-position: -15px -96px;
+  }
+
   .priority.icon {
     background: none;
     border-radius: 100%;
@@ -853,43 +865,11 @@ ol.tabs li {
         @-ms-keyframes fade { from { opacity: 0 } to { opacity: 1 } }
             @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
 
-  .close.icon {
-    position: relative;
-    background: none;
-    opacity: 1 !important;
-  }
-
   .close-task.icon {
     background: #2c2d36;
     border-radius: 100%;
   }
 
-  .close.icon:before,
-  .close.icon:after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    margin-left: -1px;
-    top: 10%;
-    height: 80%;
-    width: 2px;
-    background: #85888a;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-  }
-
-  .close.icon:after {
-    -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
-  }
-
-  .close-task.icon:before,
-  .close-task.icon:after {
-    top: 20%;
-    height: 60%;
-    background: #586066;
-  }
-
   .organisation.icon {
     height: 13px;
     width: 14px;
@@ -1246,6 +1226,12 @@ ol.tabs li {
     background-position: -54px -339px;
   }
 
+  .white.close.icon {
+    width: 13px;
+    height: 13px;
+    background-position: -70px -338px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs