Revamp admin extensions page

- New look
- Groups extensions by keywords

less/admin/ExtensionsPage.less

@@ -6,6 +6,16 @@
 .ExtensionsPage-list {
   padding: 30px 0;
 }
+.ExtensionGroup {
+  margin-bottom: 20px;
+
+  h3 {
+    color: @muted-color;
+    text-transform: uppercase;
+    font-size: 12px;
+    margin: 0 0 10px;
+  }
+}
 
 .ExtensionList {
   margin: 0;
@@ -15,8 +25,8 @@
 
   > li {
     float: left;
-    width: 350px;
-    height: 80px;
+    text-align: center;
+    position: relative;
   }
 }
 .ExtensionListItem.disabled .ExtensionListItem-content {
@@ -28,48 +38,64 @@
   }
 }
 .ExtensionListItem-controls {
-  float: right;
-  margin-top: -5px;
-  visibility: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 120px;
+  border-radius: 6px;
+  background-image: none !important;
+  opacity: 0;
   z-index: 1;
+  margin: 0;
+  padding: 5px 5px 0;
+  .light-contents();
+  .transition(opacity 0.2s);
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+  flex-direction: column;
 
-  .ExtensionListItem:hover &, &.open {
-    visibility: visible;
+  .ExtensionListItem:hover & {
+    opacity: 1;
+  }
+  > li {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    margin-bottom: 5px;
+  }
+  .Button {
+    .Button--block();
   }
 }
 .ExtensionListItem {
-  padding-left: 42px;
-  padding-right: 20px;
-  padding-bottom: 20px;
-}
-.ExtensionListItem-icon {
-  float: left;
-  margin-left: -42px;
-  text-align: center;
-  padding: 3px;
-  font-size: 14px;
+  width: 120px;
+  height: 160px;
+  margin-right: 15px;
+  margin-bottom: 15px;
 }
 .ExtensionListItem-title {
   font-size: 14px;
-  margin: 3px 0 5px;
-
-  small {
-    color: @muted-more-color;
-    font-size: 11px;
-    font-weight: normal;
-    margin-left: 5px;
-  }
+  margin: 10px 0 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.ExtensionListItem-description {
-  font-size: 12px;
-  color: @muted-color;
+.ExtensionListItem-version {
+  color: @muted-more-color;
+  font-size: 11px;
+  font-weight: normal;
 }
 
 .ExtensionIcon {
-  width: 28px;
-  height: 28px;
+  width: 120px;
+  height: 120px;
   background: @control-bg;
   color: @control-color;
   border-radius: 6px;
   display: inline-block;
+  font-size: 60px;
+  line-height: 120px;
+  text-align: center;
 }