style: rdg and resizable tables polished

tyn1998 · Aug 10, 2022 · 416e85c · 416e85c
1 parent e0617d1
commit 416e85c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/src/ui/MessagesView/MessagesView.jsx b/src/ui/MessagesView/MessagesView.jsx
@@ -8,7 +8,7 @@ import React, {
 import ResizableTable from './ResizableTable';
 import DataGrid from 'react-data-grid';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import 'react-tabs/style/react-tabs.css';
+import './react-tabs.scss';
 import JsonView from 'react-json-view';
 import { startCapturing, stopCapturing, getMessages } from '../../capturer';
 import { updateMessages, getParsedMessage } from './messagesHelper';
@@ -184,7 +184,7 @@ const MessagesView = () => {
 
   return (
     <div>
-      <div className="toolbar" style={{ marginBottom: '5px' }}>
+      <div className="toolbar">
         <button
           className={`toolbar-button ${capturing ? 'active' : ''}`}
           onClick={toggleCapturing}
@@ -221,7 +221,7 @@ const MessagesView = () => {
             className={`rdg-light ${
               filters.enabled ? 'filter-container' : undefined
             }`}
-            style={{ fontSize: '10px', height: 'calc(100vh - 42px)' }}
+            style={{ height: 'calc(100vh - 37px)' }}
             ref={gridRef}
             columns={columns}
             rows={filteredRows}

diff --git a/src/ui/MessagesView/MessagesView.scss b/src/ui/MessagesView/MessagesView.scss
@@ -1,5 +1,6 @@
 .toolbar {
   display: flex;
+  margin: 5px;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 5px;
@@ -106,14 +107,22 @@
   background-position: center center;
 }
 
+.rdg {
+    border: 0;
+}
+
 .rdg-header-cell {
+  font-size: 11px;
   font-weight: normal;
   background-color: #f1f3f4;
+  border-color: #cacdd1;
 }
 
 .rdg-body-cell {
+  font-size: 11px;
   font-family: monospace;
   border-bottom: 0;
+  border-color: #cacdd1;
 
   &.column-type {
     text-align: center;

diff --git a/src/ui/MessagesView/ResizableTable.jsx b/src/ui/MessagesView/ResizableTable.jsx
@@ -48,7 +48,7 @@ const ResizableTable = ({ children }) => {
     <table className="rt-table" ref={tableElement}>
       <thead>
         <tr>
-          <td ref={ref1}>
+          <td id="rt-td1" ref={ref1}>
             {children[0]}
             <div
               style={{ height: tableHeight }}

diff --git a/src/ui/MessagesView/ResizableTable.scss b/src/ui/MessagesView/ResizableTable.scss
@@ -1,13 +1,15 @@
 table.rt-table {
   width: 100%;
   height: auto;
+  border-top: 1px solid #cacdd1;
+  border-bottom: 1px solid #cacdd1;
   display: grid;
   overflow: auto;
   grid-template-columns:
     minmax(150px, 7fr)
     minmax(150px, 3fr);
 
-    overflow: hidden;
+  overflow: hidden;
 
   thead,
   tr {
@@ -16,9 +18,14 @@ table.rt-table {
 
   td {
     position: relative;
+    padding: 0;
   }
 }
 
+#rt-td1 {
+  border-right: 1px solid #cacdd1;
+}
+
 .rt-handle {
   display: block;
   position: absolute;