Merge pull request #2405 from EthWorks/plugin-manager-redesign

Change plugin manager styles

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

@@ -19,13 +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;
   }
   .description {
+    font-size: 13px;
+    line-height: 18px;
     text-transform: capitalize;
   }
   .row {
@@ -37,12 +45,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;
   }
 `
 
@@ -90,7 +101,7 @@ class PluginManagerComponent extends ViewPlugin {
     }
     // Beta
     if (api.profile.version && api.profile.version.match(/\b(\w*beta\w*)\b/g)) {
-      versionWarning = yo`<small title="Version Beta" class="${css.versionWarning}">beta</small>`
+      versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
     }
 
     const activationButton = isActive
@@ -104,15 +115,15 @@ 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}">
+      <article id="remixPluginManagerListItem_${name}" class="list-group-item py-1 plugins-list-group-item" title="${displayName}" >
+        <div class="${css.row} justify-content-between align-items-center mb-2">
+          <h6 class="${css.displayName} plugin-name">
             ${displayName}
             ${versionWarning}
           </h6>
           ${activationButton}
         </div>
-        <p class="${css.description}">${api.profile.description}</p>
+        <p class="${css.description} text-body plugin-text">${api.profile.description}</p>
       </article>
     `
   }
@@ -166,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-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+        <span class="navbar-brand plugins-list-title">Active Modules</span>
+        <span class="badge badge-primary">${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-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+        <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
+        <span class="badge badge-primary" style = "cursor: default;">${inactives.length}</span>
       </nav>`
       : ''
 
@@ -183,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

@@ -126,8 +126,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 settings-button">Settings</button>
     </footer>`
   }
 

src/app/components/side-panel.js

@@ -38,7 +38,7 @@ const css = csjs`
   .titleInfo {
     padding-left: 10px;
   }
-  .versionWarning {
+  .versionBadge {
     background-color: var(--light);
     padding: 0 7px;
     font-weight: bolder;
@@ -122,11 +122,11 @@ export class SidePanel extends AbstractPanel {
       name = profile.displayName ? profile.displayName : profile.name
       docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
       if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning}">alpha</small>`
+        versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
       }
       // Beta
       if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Beta" class="${css.versionWarning}">beta</small>`
+        versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
       }
     }
 

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/v1572963493/remix-custom-dark.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