fix(ui): navigation alignment and software icon

!35

app/project-static/base.css

@@ -288,13 +288,15 @@ nav button.collapsible {
   background-color: inherit;
   color: white;
   cursor: pointer;
-  padding: 18px;
+  padding: 0px 18px 0px 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   margin: 0px;
+  line-height: 50px;
+  vertical-align: middle;
 }
 
 nav button.active, .collapsible:hover {

app/templates/icons/software.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M816-672v456q0 29.7-21.15 50.85Q773.7-144 744-144H216q-29.7 0-50.85-21.15Q144-186.3 144-216v-528q0-29.7 21.15-50.85Q186.3-816 216-816h456l144 144Zm-72 30L642-744H216v528h528v-426ZM480-252q45 0 76.5-31.5T588-360q0-45-31.5-76.5T480-468q-45 0-76.5 31.5T372-360q0 45 31.5 76.5T480-252ZM264-552h336v-144H264v144Zm-48-77v413-528 115Z"/></svg>

app/templates/navigation.html.j2

@@ -7,19 +7,20 @@ span.navigation_icon {
    display: inline-block;
     line-height: 30px;
     align-items: center;
-    vertical-align: middle; padding: auto; margin: 0px;
-    fill: #fff;
-    width: 25px;
-    height: 25px;
     vertical-align: middle;
+    /*padding: auto;*/
     margin: 0px;
-    padding: 0px;
+    fill: #fff;
+    width: 20px;
+    height: 20px;
+    /*vertical-align: middle;*/
+    /*margin: 0px;*/
+    /*padding: 0px;*/
     border: none;
     border-radius: 11px;
 }
 
 
-
 </style>
 <button class="collapsible{% if group.is_active %} active{% endif %}">
   <span class="navigation_icon">
@@ -42,6 +43,8 @@ span.navigation_icon {
     <span class="navigation_icon">
     {% if group_urls.name == 'Devices' %}
         {% include 'icons/devices.svg' %}
+    {% elif group_urls.name == 'Software' %}
+        {% include 'icons/software.svg' %}
     {% endif %}
     </span>
     <a href="{{ group_urls.url }}">{{ group_urls.name }}</a>