Merge pull request #477 from entur/fix/tooltip

Readable tooltip for dark theme
entur · Oct 5, 2021 · a704a49 · a704a49
2 parents fddd864 + 337fbc9
commit a704a49
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/src/containers/Admin/EditTab/index.tsx b/src/containers/Admin/EditTab/index.tsx
@@ -5,13 +5,7 @@ import React, {
     useCallback,
     SyntheticEvent,
 } from 'react'
-import {
-    Heading2,
-    Heading3,
-    Heading4,
-    Label,
-    SubParagraph,
-} from '@entur/typography'
+import { Heading2, Heading3, Heading4, SubParagraph } from '@entur/typography'
 import { Switch, TextField } from '@entur/form'
 import { Tooltip } from '@entur/tooltip'
 import { ValidationInfoIcon } from '@entur/icons'
@@ -72,11 +66,13 @@ const COLS: { [key: string]: number } = {
 const toolTip = (
     <Tooltip
         content={
-            <Label className="weather-tooltip-text">
-                Tilgjengelig i visningstyper kompakt, kronologisk og kart.
-                Værdata fra YR (met.no). Noe værdata kan bli skjult ved liten
-                boksstørrelse.
-            </Label>
+            <div>
+                <SubParagraph className="tooltip-container-weather">
+                    Tilgjengelig i visningstyper kompakt, kronologisk og kart.
+                    Værdata fra YR (met.no). Noe værdata kan bli skjult ved
+                    liten boksstørrelse.
+                </SubParagraph>
+            </div>
         }
         placement="top"
     >

diff --git a/src/containers/Admin/EditTab/styles.scss b/src/containers/Admin/EditTab/styles.scss
@@ -15,6 +15,11 @@
             color: var(--tavla-box-background-color);
         }
     }
+    .tooltip-container-weather {
+        color: var(--tavla-box-background-color);
+        margin: 0;
+    }
+
     .eds-form-control,
     .eds-form-control__append {
         font-size: inherit;
@@ -52,10 +57,6 @@
         overflow-x: visible;
     }
 
-    .weather-tooltip-text {
-        color: var(--tavla-input-font-color);
-    }
-
     .eds-checkbox-icon {
         background-color: var(--tavla-checkbox-color);
     }