better extension ui

app/assets/stylesheets/app/_header.scss

@@ -278,14 +278,51 @@ Extensions
 
   .extension {
     margin-bottom: 18px;
+    background-color: #ededed;
+    padding: 10px;
+    color: black;
+
     > .name {
       font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    > .subtitle {
+      font-size: 14px;
+      margin-bottom: 10px;
     }
 
     > .actions {
+      margin-top: 15px;
+      font-size: 14px;
+
       .action {
-        font-weight: bold;
+        margin-bottom: 10px;
+
+        > .name {
+          font-weight: bold;
+        }
+
+        > .execute {
+          a {
+            color: $blue-color;
+          }
+          font-weight: bold;
+          margin-bottom: 3px;
+          font-size: 12px;
+        }
+
+        > .execute-type {
+          font-size: 12px;
+        }
+
+        > .last-run {
+          opacity: 0.5;
+          font-size: 12px;
+        }
       }
+
     }
   }
 

app/assets/stylesheets/app/_main.scss

@@ -3,6 +3,7 @@ $secondary-text-color: rgba($main-text-color, 0.8);
 $bg-color: #e3e3e3;
 $selection-color: $bg-color;
 $selected-text-color: black;
+$blue-color: #086dd6;
 
 @mixin MQ-Small() {
   @media (max-width: $screen-xs-max) {

app/assets/stylesheets/app/_notes.scss

@@ -53,8 +53,6 @@
     }
   }
 
-  $note-selection-color: #086dd6;
-
   .note {
     width: 100%;
     padding: 15px;
@@ -75,13 +73,9 @@
     }
 
     &.selected {
-      background-color: $note-selection-color;
+      background-color: $blue-color;
       color: white;
     }
 
-    // &:hover:not(.selected) {
-    //   background-color: $note-selection-color;
-    //   color: white;
-    // }
   }
 }