From 05c8bf4d59ba5166d12d98f8fc0932ed6596dbca Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 1 Jun 2022 12:08:44 +0200
Subject: [PATCH] fix(ui): red color changes, menu controls, performance crash

---
 .../Announcements/announcements.module.css    |  4 +-
 .../Header/notifications.module.css           |  2 +-
 .../Session_/Performance/Performance.tsx      |  2 +-
 .../Player/Controls/controlButton.module.css  | 12 ++--
 .../shared/EventFilter/eventFilter.css        | 59 +++++++++++++++++++
 .../components/ui/Button/button.module.css    |  2 +-
 .../ui/InputAutocomplete/dropdownItem.css     |  5 ++
 7 files changed, 76 insertions(+), 10 deletions(-)
 create mode 100644 frontend/app/components/shared/EventFilter/eventFilter.css
 create mode 100644 frontend/app/components/ui/InputAutocomplete/dropdownItem.css

diff --git a/frontend/app/components/Announcements/announcements.module.css b/frontend/app/components/Announcements/announcements.module.css
index 58cc5d0ec..5a3704af2 100644
--- a/frontend/app/components/Announcements/announcements.module.css
+++ b/frontend/app/components/Announcements/announcements.module.css
@@ -25,7 +25,7 @@
   position: absolute;
   top: 8px;
   left: 24px;
-  background-color: red;
+  background-color: #CC0000;
   color: white;
   font-size: 9px;
   font-weight: 300;
@@ -36,4 +36,4 @@
   align-items: center;
   justify-content: center;
   padding: 3px;
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Header/notifications.module.css b/frontend/app/components/Header/notifications.module.css
index e026229d9..1b7a62ddf 100644
--- a/frontend/app/components/Header/notifications.module.css
+++ b/frontend/app/components/Header/notifications.module.css
@@ -25,7 +25,7 @@
   position: absolute;
   top: 8px;
   left: 24px;
-  background-color: red;
+  background-color: #CC0000;
   color: white;
   font-size: 9px;
   font-weight: 300;
diff --git a/frontend/app/components/Session_/Performance/Performance.tsx b/frontend/app/components/Session_/Performance/Performance.tsx
index 5f261a69e..8a9706be2 100644
--- a/frontend/app/components/Session_/Performance/Performance.tsx
+++ b/frontend/app/components/Session_/Performance/Performance.tsx
@@ -59,7 +59,7 @@ const NODES_COUNT = "Nodes Сount";
 
 
 const FPSTooltip = ({ active, payload }) => {
-  if (!active || payload.length < 3) {
+  if (!active || !payload || payload.length < 3) {
     return null;
   }
   if (payload[0].value === null) {
diff --git a/frontend/app/components/Session_/Player/Controls/controlButton.module.css b/frontend/app/components/Session_/Player/Controls/controlButton.module.css
index 2b82b3379..b72ec0bd7 100644
--- a/frontend/app/components/Session_/Player/Controls/controlButton.module.css
+++ b/frontend/app/components/Session_/Player/Controls/controlButton.module.css
@@ -11,16 +11,12 @@
   border-right: 0px;
   min-width: 60px;
   position: relative;
-  &:hover {
-    background-color: $gray-lightest;
-    transition: all 0.2s;
-  }
 
   & .errorSymbol {
     width: 6px;
     height: 6px;
     border-radius: 3px;
-    background-color: red;
+    background-color: #CC0000;
     margin-right: 3px;
   }
   & .labels {
@@ -29,6 +25,7 @@
     right: -6px;
     display: flex;
     align-items: center;
+    height: 16px;
   }
   
   & .countLabel {
@@ -49,6 +46,11 @@
     /* padding-top: 5px; */
     font-size: 10px;
     height: 16px;
+
+    &:hover {
+      color: $main!important;
+      transition: all 0.2s;
+    }
   }
 
   &.disabled {
diff --git a/frontend/app/components/shared/EventFilter/eventFilter.css b/frontend/app/components/shared/EventFilter/eventFilter.css
new file mode 100644
index 000000000..6a4b28147
--- /dev/null
+++ b/frontend/app/components/shared/EventFilter/eventFilter.css
@@ -0,0 +1,59 @@
+.searchField {
+  box-shadow: none !important;
+  & input {
+    box-shadow: none !important;
+    border-radius: 3 !important;
+    border: solid thin $gray-light !important;    
+    height: 46px !important;
+    font-size: 16px;
+  }
+}
+
+.wrapper {  
+  box-shadow: none !important;
+  position: relative;
+
+  & .clearStepsButton {
+    position: absolute;
+    bottom: 10px;
+    right: 10x;
+  } 
+}
+
+.randomElement {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 8;
+  padding: 15px;
+  padding-left: 40px;
+}
+
+.dropdownMenu {
+  max-width: 100%;  
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+
+  &[data-hidden=true] {
+    display: none !important;
+  }
+}
+
+
+.header {
+  padding: 5px 10px;
+  letter-spacing: 1.5px;
+  background-color: $gray-lightest;
+  color: $gray-medium;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.dateRange {
+  color: #CC0000;
+  z-index: 8;
+  position: absolute;
+  right: 9px;
+  top: 9px;
+}
diff --git a/frontend/app/components/ui/Button/button.module.css b/frontend/app/components/ui/Button/button.module.css
index 414499809..df5653857 100644
--- a/frontend/app/components/ui/Button/button.module.css
+++ b/frontend/app/components/ui/Button/button.module.css
@@ -42,7 +42,7 @@
     transition: all 0.2s;
   }
   &.disabled {
-    color: red !important;
+    color: #CC0000 !important;
   }
 }
 
diff --git a/frontend/app/components/ui/InputAutocomplete/dropdownItem.css b/frontend/app/components/ui/InputAutocomplete/dropdownItem.css
new file mode 100644
index 000000000..4e8ba2613
--- /dev/null
+++ b/frontend/app/components/ui/InputAutocomplete/dropdownItem.css
@@ -0,0 +1,5 @@
+.wrapper {
+  & .values {
+    color: #CC0000;
+  }
+}