Add calendar icon and fix menu colours

Author: kano31

bin/generate_colours.js

@@ -28,7 +28,8 @@ var namespaces = [
     "shape",
     "geolocation",
     "size",
-    "text"
+    "text",
+    "date"
 ];
 
 var typeToNamespace = {
@@ -50,7 +51,8 @@ var typeToNamespace = {
     "string": "string",
     "geolocation": "geolocation",
     "size": "size",
-    "motion": "motion"
+    "motion": "motion",
+    "date": "date"
 }
 
 /* For 23 namespaces we want to scatter them across the hsl wheel

css/app.css

@@ -226,7 +226,7 @@ wb-accordion.geolocation > header:after{ background-color: hsl(300, 50%, 75%); }
 wb-accordion.size > header:after{ background-color: hsl(45, 50%, 50%); }
 wb-accordion.text > header:after{ background-color: hsl(150, 50%, 50%); }
 wb-accordion.vector > header:after{ background-color: hsl(75, 50%, 50%); }
-
+wb-accordion.date > header:after{ background-color: hsl(55, 76%, 70%); }
 
 /* Prevent selecting text while dragging */
 .dragging *{

css/block.css

@@ -233,6 +233,7 @@ wb-value[type*=rect] > input{background-image: url(../images/icon/rect.svg);}
 wb-value[type*=string] > input{background-image: url(../images/icon/string.svg);}
 wb-value[type*=geolocation] > input{ background-image: url(../images/icon/geolocation.svg);}
 wb-value[type*=size] > input{ background-image: url(../images/icon/size.svg);}
+wb-value[type*=date] > input{ background-image: url(../images/icon/calendar.svg);}
 
 wb-value[type*=array][type*=string] > input{
     background-image: url(../images/icon/array.svg), url(../images/icon/string.svg);
@@ -287,6 +288,7 @@ wb-expression[type=rect]:before{ background-image: url(../images/icon/rect.svg);
 wb-expression[type=string]:before{ background-image: url(../images/icon/string.svg); }
 wb-expression[type=geolocation]:before{ background-image: url(../images/icon/geolocation.svg); }
 wb-expression[type=size]:before{ background-image: url(../images/icon/size.svg);}
+wb-expression[type=date]:before{ background-image: url(../images/icon/calendar.svg); }
 
 /* Used for input resizing */
 .sekrit-svg{

css/block_colors.css

@@ -219,6 +219,11 @@ wb-accordion[open=true] > header{
     fill: #666;
 }
 
+.cat-icon.big-icon{
+    height:26px;
+    left:6px;
+}
+
 wb-accordion > header:after{
     content: '';
     position: absolute;

css/widget.css

@@ -393,7 +393,7 @@ <h1>Waterbear with Custom Elements</h1>
 
             <wb-accordion class="date">
                 <header>
-                    <img class="cat-icon" src="">
+                    <img class="cat-icon big-icon" src="images/icon/calendar.svg">
                     Date
                 </header>
                 <p>Dates are used to represent a date and to do basic calculations.</p>
@@ -643,7 +643,7 @@ <h1>Waterbear with Custom Elements</h1>
             </wb-accordion>
             <wb-accordion class="random">
                 <header>
-                    <img class="cat-icon" src="images/icon/random.svg">
+                    <img class="cat-icon big-icon" src="images/icon/random.svg">
                     Random
                 </header>
                 <p>There are many types of randomness in Waterbear.</p>