add styles for workspace table

4 files changed, 57 insertions, 3 deletions

diff --git a/src/components/settings/workspaces/WorkspaceItem.js b/src/components/settings/workspaces/WorkspaceItem.js
index 49d67d429..a71e6583d 100644
--- a/src/components/settings/workspaces/WorkspaceItem.js
+++ b/src/components/settings/workspaces/WorkspaceItem.js
@@ -24,11 +24,11 @@ class WorkspaceItem extends Component {
     return (
       <tr
         className={classnames({
-          'service-table__row': true,
+          'workspace-table__row': true,
         })}
       >
         <td
-          className="service-table__column-name"
+          className="workspace-table__column-name"
           onClick={() => console.log('go to workspace', workspace.name)}
         >
           {workspace.name}
diff --git a/src/components/settings/workspaces/WorkspacesDashboard.js b/src/components/settings/workspaces/WorkspacesDashboard.js
index c6378ac1e..b286adc68 100644
--- a/src/components/settings/workspaces/WorkspacesDashboard.js
+++ b/src/components/settings/workspaces/WorkspacesDashboard.js
@@ -41,7 +41,7 @@ class WorkspacesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <table className="service-table">
+            <table className="workspace-table">
               <tbody>
                 {workspaces.map(workspace => (
                   <WorkspaceItem
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 784a04d3d..30f43532f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -30,6 +30,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './content-tabs.scss';
 @import './invite.scss';
 @import './title-bar.scss';
+@import './workspace-table.scss';
 
 // form
 @import './input.scss';
diff --git a/src/styles/workspace-table.scss b/src/styles/workspace-table.scss
new file mode 100644
index 000000000..05ebfa629
--- /dev/null
+++ b/src/styles/workspace-table.scss
@@ -0,0 +1,53 @@
+@import './config.scss';
+
+.theme__dark .workspace-table {
+  .workspace-table__column-info .mdi { color: $dark-theme-gray-lightest; }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $dark-theme-gray-darker;
+
+    &:hover { background: $dark-theme-gray-darker; }
+    &.workspace-table__row--disabled { color: $dark-theme-gray; }
+  }
+}
+
+.workspace-table {
+  width: 100%;
+
+  .workspace-table__toggle {
+    width: 60px;
+
+    .franz-form__field {
+      margin-bottom: 0;
+    }
+  }
+
+  .workspace-table__column-action {
+    width: 40px
+  }
+
+  .workspace-table__column-info {
+    width: 40px;
+
+    .mdi {
+      color: $theme-gray-light;
+      display: block;
+      font-size: 18px;
+    }
+  }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $theme-gray-lightest;
+
+    &:hover {
+      cursor: initial;
+      background: $theme-gray-lightest;
+    }
+
+    &.workspace-table__row--disabled {
+      color: $theme-gray-light;
+    }
+  }
+
+  td { padding: 10px; }
+}