web: tweak styles for filter term input field to align better with de…

…sign (#4676)
tilt-dev · Jun 22, 2021 · 66e60f9 · 66e60f9
1 parent 19743b1
commit 66e60f9
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/web/src/OverviewActionBar.tsx b/web/src/OverviewActionBar.tsx
@@ -274,11 +274,10 @@ const FilterTermTextField = styled(TextField)`
     &:hover:not(.Mui-focused, .Mui-error) fieldset {
       border: 1px solid ${Color.blue};
     }
-    & .Mui-focused fieldset {
-      border: 1px solid ${Color.grayLighter};
-      outline: none;
+    &.Mui-focused fieldset {
+      border: 1px solid ${Color.grayLightest};
     }
-    & .Mui-error fieldset {
+    &.Mui-error fieldset {
       border: 1px solid ${Color.red};
     }
     & .MuiOutlinedInput-input {
@@ -297,6 +296,7 @@ const FieldErrorTooltip = styled.span`
   align-items: center;
   background-color: ${Color.grayDark};
   box-sizing: border-box;
+  color: ${Color.red};
   display: flex;
   font-family: ${Font.monospace};
   font-size: ${FontSize.smallest};
@@ -320,10 +320,6 @@ const FieldErrorTooltip = styled.span`
     top: -8px;
     width: 0;
   }
-
-  .Mui-error {
-    color: ${Color.red};
-  }
 `
 
 const AlertIcon = styled(AlertSvg)`