fix logs row styles

metrico · Apr 25, 2022 · 98b3df4 · 98b3df4
1 parent 0e80cbc
commit 98b3df4
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 71 deletions.
diff --git a/src/components/DataView/LogsRow.js b/src/components/DataView/LogsRow.js
@@ -1,38 +1,39 @@
-import { formatDate, getRowColor, toggleActiveStyles } from "./helpers";
-import { LogRow, RowLogContent, RowTimestamp } from "./styled";
-import ValueTags from "./ValueTags";
-import { useSelector, useDispatch } from "react-redux";
-import setLogs from "../../actions/setLogs";
-
-export default function LogsRow({ message }) {
-    const dispatch = useDispatch();
-    const messages = useSelector((store) => store.logs);
-
-    function toggleTagsActive(idx) {
-        let arrCopy = [...messages];
-        arrCopy.forEach((entry) => {
-            if (entry.id === idx) {
-                entry.showLabels = entry.showLabels ? false : true;
-            }
-        });
-        dispatch(setLogs(arrCopy));
-    }
-
-    return (
-        <LogRow
-            rowColor={getRowColor(message.tags)}
-            onClick={(e) => {
-                toggleTagsActive(message.id);
-            }}
-        >
-            <RowTimestamp>{formatDate(message.timestamp)}</RowTimestamp>
-            <RowLogContent>{message.text}</RowLogContent>
-
-            {message.tags && (
-                <div className={toggleActiveStyles(message)}>
-                    <ValueTags tags={message.tags} />
-                </div>
-            )}
-        </LogRow>
-    );
-}
+import { formatDate, getRowColor, toggleActiveStyles } from "./helpers";
+import { LogRow, RowLogContent, RowTimestamp } from "./styled";
+import ValueTags from "./ValueTags";
+import { useSelector, useDispatch } from "react-redux";
+import setLogs from "../../actions/setLogs";
+
+export default function LogsRow({ message }) {
+    const dispatch = useDispatch();
+    const messages = useSelector((store) => store.logs);
+
+    function toggleTagsActive(idx) {
+        let arrCopy = [...messages];
+        arrCopy.forEach((entry) => {
+            if (entry.id === idx) {
+                entry.showLabels = entry.showLabels ? false : true;
+            }
+        });
+        dispatch(setLogs(arrCopy));
+    }
+
+    return (
+        <LogRow
+            rowColor={getRowColor(message.tags)}
+            onClick={(e) => {
+                toggleTagsActive(message.id);
+            }}
+        >
+            <div className="log-ts-row">
+                <RowTimestamp>{formatDate(message.timestamp)}</RowTimestamp>
+                <RowLogContent>{message.text}</RowLogContent>
+            </div>
+            {message.tags && (
+                <div className={toggleActiveStyles(message)}>
+                    <ValueTags tags={message.tags} />
+                </div>
+            )}
+        </LogRow>
+    );
+}
diff --git a/src/components/DataView/consts/consts.js b/src/components/DataView/consts/consts.js
@@ -1,8 +1,8 @@
-export const TAGS_LEVEL = {
-    critical: ["emerg", "fatal", "alert", "crit", "critical"],
-    error: ["err", "eror", "error", "warning"],
-    warning: ["warn", "warning"],
-    info: ["info", "information", "notice"],
-    debug: ["dbug", "debug"],
-    trace: ["trace"],
-};
+export const TAGS_LEVEL = {
+    critical: ["emerg", "fatal", "alert", "crit", "critical"],
+    error: ["err", "eror", "error"],
+    warning: ["warn", "warning"],
+    info: ["info", "information", "notice"],
+    debug: ["dbug", "debug"],
+    trace: ["trace"],
+};
diff --git a/src/components/DataView/styled/index.js b/src/components/DataView/styled/index.js
@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { THEME_COLORS } from '../theme/theme';
 import { CircularProgress } from "@mui/material";
 import darkTheme from "../../../theme/dark";
 
@@ -44,28 +43,33 @@ export const DataViewCont = styled.div`
 `;
 
 export const LogRow = styled.div`
-    padding: 0.3rem;
+    font-family: monospace;
     color: white;
     font-size: 12px;
     cursor: pointer;
-    margin-bottom: 4px;
     padding-left: 0.5rem;
     margin-left: 0.25rem;
     transition: 0.2s all;
+    display: flex;
+    flex-direction: column;
+    border-left: 4px solid ${(props) => props.rowColor};
+    margin-bottom: 2px;
+    margin-top: 2px;
     &:hover {
         background: black;
     }
 
     p {
         display: inline-block;
     }
-
-    border-left: 4px solid ${(props) => props.rowColor};
+    .log-ts-row {
+        display: flex;
+    }
 `;
 
 export const RowLogContent = styled.span`
     font-size: 12px;
-    font-family: monospace;
+
     color: ${theme.textWhite};
     line-height: 1.5;
 `;
@@ -74,6 +78,8 @@ export const RowTimestamp = styled.span`
     position: relative;
     color: ${theme.textColor};
     margin-right: 0.25rem;
+    white-space: nowrap;
+    line-height: 1.5;
 `;
 
 export const Loader = styled(CircularProgress)`

diff --git a/src/components/DataView/theme/theme.js b/src/components/DataView/theme/theme.js
@@ -1,19 +1,17 @@
-
-export const THEME_COLORS = {
-    logsTimestamp: "#e8e8e8",
-    scrollbarThumb: "#616161",
-    logContent: "#ddd",
-    dataViewBackground: "#1a1a1a",
-    emptyViewMessage: "#aaa",
-};
-
-
-export const LEVEL_COLORS = {
-    critical: "purple",
-    error: "red",
-    warning: "yellow",
-    info: "green",
-    debug: "blue",
-    trace: "lightblue",
-    unknown: "gray",
-};
+export const THEME_COLORS = {
+    logsTimestamp: "#e8e8e8",
+    scrollbarThumb: "#616161",
+    logContent: "#ddd",
+    dataViewBackground: "#1a1a1a",
+    emptyViewMessage: "#aaa",
+};
+
+export const LEVEL_COLORS = {
+    critical: "purple",
+    error: "red",
+    warning: "orange",
+    info: "green",
+    debug: "blue",
+    trace: "lightblue",
+    unknown: "gray",
+};