Change plugin manager styles

src/app/components/plugin-manager-component.js

@@ -19,11 +19,21 @@ const css = csjs`
     z-index: 2;
     margin-bottom: 0px;
   }
+  .pluginSearchInput {
+    height: 38px;
+  }
+  .pluginSearchButton {
+    font-size: 13px;
+  }
   .displayName {
-    text-transform: capitalize;
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    font-size: 11px;
+    line-height: 12px;
+    text-transform: uppercase;
   }
   .description {
     text-transform: capitalize;
@@ -37,12 +47,15 @@ const css = csjs`
     color: 
   }
   .versionWarning {
-    background-color: var(--light);
-    padding: 0 7px;
-    font-weight: bolder;
-    margin-top: 5px;
-    text-transform: lowercase;
+    padding: 4px;
+    margin: 0 8px;
+    font-weight: 700;
+    font-size: 9px;
+    line-height: 12px;
+    text-transform: uppercase;
     cursor: default;
+    border: 1px solid;
+    border-radius: 2px;
   }
 `
 
@@ -104,16 +117,16 @@ class PluginManagerComponent extends ViewPlugin {
       </button>`
 
     return yo`
-      <article id="remixPluginManagerListItem_${name}" class="list-group-item py-1" title="${displayName}" >
-        <div class="${css.row} justify-content-between align-items-center">
-          <h6 class="${css.displayName}">
-            ${displayName}
-            ${versionWarning}
-          </h6>
-          ${activationButton}
-        </div>
-        <p class="${css.description}">${api.profile.description}</p>
-      </article>
+    <article id="remixPluginManagerListItem_${name}" class="list-group-item px-2 pt-2 pb-0 plugins-list-group-item" title="${displayName}" >
+      <div class="${css.row} justify-content-between align-items-center mb-2">
+        <h6 class="${css.displayName} form-control-label">
+          ${displayName}
+          ${versionWarning}
+        </h6>
+        ${activationButton}
+      </div>
+      <p class="${css.description} text-body">${api.profile.description}</p>
+    </article>
     `
   }
 
@@ -164,16 +177,16 @@ class PluginManagerComponent extends ViewPlugin {
 
     const activeTile = actives.length !== 0
       ? yo`
-      <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center">
-        <span class="navbar-brand">Active Modules</span>
-        <span class="badge badge-pill badge-primary">${actives.length}</span>
+      <nav class="plugins-list-header justify-content-start navbar navbar-expand-lg bg-light navbar-light align-items-center px-4 py-3">
+        <span class="h6 mb-0 mr-2">Active Modules</span>
+        <span class="badge badge-pill badge-warning">${actives.length}</span>
       </nav>`
       : ''
     const inactiveTile = inactives.length !== 0
       ? yo`
-      <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between align-items-center">
-        <span class="navbar-brand">Inactive Modules</span>
-        <span class="badge badge-pill badge-primary" style = "cursor: default;">${inactives.length}</span>
+      <nav class="plugins-list-header justify-content-start navbar navbar-expand-lg bg-light navbar-light align-items-center px-4 py-3">
+        <span class="h6 mb-0 mr-2">Inactive Modules</span>
+        <span class="badge badge-pill badge-warning" style = "cursor: default;">${inactives.length}</span>
       </nav>`
       : ''
 
@@ -181,19 +194,19 @@ class PluginManagerComponent extends ViewPlugin {
 
     const rootView = yo`
       <div id='pluginManager'>
-        <header class="form-group ${css.pluginSearch}">
-          <input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search">
-          <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-dark border-0 font-weight-bold mt-2">
+        <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom">
+          <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search">
+          <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline">
             Connect to a Local Plugin
           </button>
         </header>
         <section>
           ${activeTile}
-          <div class="list-group list-group-flush">
+          <div class="list-group list-group-flush plugins-list-group">
             ${actives.map(name => this.renderItem(name))}
           </div>
           ${inactiveTile}
-          <div class="list-group list-group-flush">
+          <div class="list-group list-group-flush plugins-list-group">
             ${inactives.map(name => this.renderItem(name))}
           </div>
         </section>

src/app/components/plugin-manager-settings.js

@@ -11,8 +11,12 @@ const css = csjs`
   align-items: center;
   padding: 5px 20px;
 }
-.permissions button {
-  padding: 2px 5px;
+.permissionsButton {
+  height: 32px;
+  padding: 0 12px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 16px;
   cursor: pointer;
 }
 .permissionForm h4 {
@@ -126,8 +130,8 @@ export class PluginManagerSettings {
 
   render () {
     return yo`
-    <footer class="navbar navbar-light bg-light ${css.permissions}">
-      <button onclick="${() => this.openDialog()}" class="btn btn-info">Settings</button>
+    <footer class="bg-light ${css.permissions} remix-bg-opacity">
+      <button onclick="${() => this.openDialog()}" class="btn btn-primary btn-sm ${css.permissionsButton}">Settings</button>
     </footer>`
   }
 

src/app/components/side-panel.js

@@ -13,7 +13,6 @@ const css = csjs`
   }
   .swapitTitle {
     margin: 0;
-    text-transform: uppercase;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/app/tabs/theme-module.js

@@ -3,7 +3,7 @@ import { EventEmitter } from 'events'
 import * as packageJson from '../../../package.json'
 
 const themes = [
-  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1570118040/remix-dark-theme.css'},
+  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1571151519/custom-dark-theme.css'},
   {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1572342742/light-theme.css'},
 
   // switching to the url Todo: remove when the theme is ready