Merge pull request #75 from metrico/jacovinus-mutiple-label-tooltip

fix: components theming
metrico · Apr 5, 2022 · 8e64cbc · 8e64cbc
2 parents c71a7f3 + f54a650
commit 8e64cbc
Show file tree

Hide file tree

Showing 17 changed files with 538 additions and 512 deletions.
diff --git a/src/components/DataView/styled/index.js b/src/components/DataView/styled/index.js
@@ -1,9 +1,12 @@
 import styled from "@emotion/styled";
 import { THEME_COLORS } from '../theme/theme';
 import { CircularProgress } from "@mui/material";
+import darkTheme from "../../../theme/dark";
+
+const theme = darkTheme;
 
 export const DataViewStyled = styled.div`
-    background: ${THEME_COLORS.dataViewBackground};
+    background: ${theme.viewBg};
     margin: 6px 8px;
     overflow-y: scroll;
     overflow-x: hidden;
@@ -18,7 +21,7 @@ export const DataViewStyled = styled.div`
 
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
-        background: ${THEME_COLORS.scrollbarThumb};
+        background: ${theme.scrollbarThumb};
     }
 `;
 
@@ -30,7 +33,7 @@ export const EmptyViewContainer = styled.div`
     width: 100%;
     height: 175px;
     font-size: 1em;
-    color: ${THEME_COLORS.emptyViewMessage};
+    color: ${theme.textOff};
     text-align: center;
 `;
 
@@ -63,12 +66,13 @@ export const LogRow = styled.div`
 export const RowLogContent = styled.span`
     font-size: 0.95em;
     font-family: monospace;
-    color: ${THEME_COLORS.logContent};
+    color: ${theme.textWhite};
+    line-height: 1.5;
 `;
 
 export const RowTimestamp = styled.span`
     position: relative;
-    color: ${THEME_COLORS.logsTimestamp};
+    color: ${theme.textColor};
     margin-right: 0.25rem;
 `;
 

diff --git a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js
@@ -1,5 +1,7 @@
 import styled from "@emotion/styled";
 import DateRangeIcon from "@mui/icons-material/DateRange";
+import darkTheme from "../../../../../theme/dark";
+const theme = darkTheme;
 const SelectorsContainer = styled.div`
     display: ${(props) => (props.isDisplay ? "flex" : "none")};
     flex-direction: column;
@@ -11,10 +13,11 @@ const SelectorsContainer = styled.div`
 
         .label {
             font-size: 0.85em;
-            color: #aaa;
+            color: ${theme.inputLabelColor};
             width: 50px;
             margin-left: 5px;
             margin-bottom: 2px;
+            white-space: nowrap;
         }
         .input-group {
             display: flex;
@@ -23,7 +26,7 @@ const SelectorsContainer = styled.div`
                 width: 170px;
                 line-height: 1.5;
                 text-align: center;
-                color: #ddd;
+                color: ${theme.textColor};
             }
             button {
                 cursor: pointer;
@@ -34,19 +37,19 @@ const SelectorsContainer = styled.div`
                 padding: 0px 8px;
                 margin: 3px;
                 border-radius: 3px;
-                color: #eee;
-                background: #0c8181;
+                color: ${theme.textColor};
+                background: ${theme.primaryDark};
                 &:hover {
-                    background: #159d9d;
+                    background: ${theme.primaryLight};
                 }
             }
         }
     }
 `;
 
 const AbsoluteSubmitButton = styled.button`
-    color: #eee;
-    background: #0c8181;
+    color: ${theme.textColor};
+    background: ${theme.primaryDark};
     font-size: 0.85em;
     font-weight: bold;
     padding: 8px 0px;
@@ -55,11 +58,12 @@ const AbsoluteSubmitButton = styled.button`
     border-radius: 3px;
     transition: 0.2s all;
     margin: 10px;
-    margin-top: {props => (props.isHorizontal && props.isMobile ? '20px':'40px')}
+    margin-top: ${(props) =>
+        props.isHorizontal && props.isMobile ? "20px" : "40px"};
     cursor: pointer;
     &:hover {
-        background: #159d9d;
-    } 
+        background: ${theme.primaryLight};
+    }
 `;
 
 export default function AbsoluteSelector({
@@ -72,7 +76,6 @@ export default function AbsoluteSelector({
     isFullCalendar,
     setStopCalendar,
     setStartCalendar,
-    calendarOpen,
     startCalendarOpen,
     stopCalendarOpen,
     isHorizontal,

diff --git a/src/components/StatusBar/components/daterangepicker/components/Heading.js b/src/components/StatusBar/components/daterangepicker/components/Heading.js
@@ -8,14 +8,15 @@ import { MONTHS } from "../consts";
 import { HeadingStyles, theme } from "./styles";
 import { generateYears } from "../utils";
 import styled from "@emotion/styled";
-
+import darkTheme from "../../../../../theme/dark";
+const ctheme = darkTheme;
 const DateSelect = styled.select`
     cursor: pointer;
 
     position: relative;
     font-size: 1em;
-    color: #ddd;
-    background: #121212;
+    color: ${ctheme.textColor};
+    background: ${ctheme.inputBg};
     border: none;
     border-radius: 3px;
     padding: 4px 8px;
@@ -28,7 +29,7 @@ const DateSelect = styled.select`
 
     &::-webkit-scrollbar-thumb {
         border-radius: 10px;
-        background: #444;
+        background: ${ctheme.scrollbarThumb};
     }
 `;
 

diff --git a/src/components/StatusBar/styled/index.js b/src/components/StatusBar/styled/index.js
@@ -42,10 +42,11 @@ export const StatusCont = styled.div`
             text-transform: uppercase;
             background: ${theme.inputLabelBg};
             border-radius: 4px;
+            white-space: nowrap;
         }
     }
     input {
-        color: #ddd;
+        color: ${theme.textColor};
         background: ${theme.inputBg};
         border: none;
         outline: none;
@@ -60,9 +61,7 @@ export const StatusCont = styled.div`
         &.limit {
             width: 50px;
         }
-        &.url {
-            width: 175px;
-        }
+  
         &.date-time-range {
             width: 120px;
         }
@@ -89,9 +88,7 @@ export const ApiSelectorStyled = styled.div`
         &:focus {
             color: orange;
         }
-        &.url {
-            width: 175px;
-        }
+    
     }
 
     button {
@@ -100,16 +97,16 @@ export const ApiSelectorStyled = styled.div`
         border: none;
         padding: 4px 8px;
         border-radius: 3px;
-        background: #7b7b7b3b;
-        color: #d1d1d1;
+        background: ${theme.buttonDefault};
+        color: ${theme.textColor};
         font-size: 1em;
         cursor: pointer;
         line-height: 1.5;
         white-space: nowrap;
         text-overflow: ellipsis;
         transition: 0.2s all;
         &:hover {
-            background: #9e9e9e3b;
+            background: ${theme.buttonHover};
         }
     }
 
@@ -123,6 +120,7 @@ export const ApiSelectorStyled = styled.div`
             text-transform: uppercase;
             background: ${theme.inputLabelBg};
             border-radius: 4px;
+            white-space: nowrap;
         }
     }
     & div {
@@ -139,9 +137,9 @@ export const UrlCopyButton = styled.button`
     align-items: center;
     border: none;
     padding: 4px 8px;
-    background: #7b7b7b3b;
+    background: ${theme.buttonDefault};
     border-radius: 3px;
-    color: ${({ isActive }) => (isActive ? "orange" : "#7b7b7b")};
+    color: ${({ isActive }) => (isActive ? "orange" : theme.textColor)};
     cursor: ${({ isActive }) => (isActive ? "pointer" : "not-allowed")};
     align-items: center;
     white-space: nowrap;
@@ -154,7 +152,7 @@ export const UrlCopyButton = styled.button`
         color: ${theme.textColor};
     }
     &:hover {
-        background: #9e9e9e3b;
+        background:${theme.buttonHover};
     }
 `;
 
@@ -170,6 +168,7 @@ export const DatePickerButton = styled.button`
     display: flex;
     align-items: center;
     margin-left: 10px;
+    height:32px;
     span{ margin-left:5px;}
     &:hover{
         color:orange;

diff --git a/src/plugins/charts/ChartLabelList.js b/src/plugins/charts/ChartLabelList.js
@@ -23,12 +23,11 @@ const ChartLabel = styled("div")`
     font-family: sans-serif;
     display: flex;
     align-items: center;
-
+    line-height: 1.5;
     padding-right: 10px;
     cursor: pointer;
     opacity: ${(props) => (props.isVisible ? "1" : ".5")};
     border-radius: 3px;
-    height: 20px !important;
     &:hover {
         background: black;
     }