fix(project): make header buttons visible when using a light header b…

…ackground
jwplayer · Jun 23, 2021 · dd94c5d · dd94c5d
1 parent 15a5eaa
commit dd94c5d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -29,7 +29,7 @@ $large-button-height: 40px;
   }
 
   &.default {
-    color: theme.$btn-default-color;
+    color: currentColor;
     background-color: theme.$btn-default-bg;
   }
 

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -10,7 +10,8 @@
 .header {
   height: variables.$header-height;
   padding: 10px variables.$base-spacing * 4;
-  background: var(--header-background);
+  color: var(--header-contrast-color, variables.$white);
+  background: var(--header-background, transparent);
 
   //
   // Make header fixed
@@ -53,6 +54,10 @@
 .iconButton {
   width: 36px;
   height: 36px;
+
+  > svg {
+    fill: currentColor;
+  }
 }
 
 //

diff --git a/src/components/IconButton/IconButton.module.scss b/src/components/IconButton/IconButton.module.scss
@@ -7,8 +7,7 @@
   align-items: center;
   width: 40px;
   height: 40px;
-  outline: none;
-  outline-color: var(--highlight-color, white);
+  outline: var(--highlight-color, white) none;
 
   cursor: pointer;
   opacity: 0.7;

diff --git a/src/components/SearchBar/SearchBar.module.scss b/src/components/SearchBar/SearchBar.module.scss
@@ -18,7 +18,7 @@
   height: 100%;
   padding: 0 36px 0 36px;
 
-  color: variables.$white;
+  color: currentColor;
   font-weight: 700;
   font-size: 16px;
 
@@ -29,6 +29,11 @@
 
   transition: border 0.1s ease, background 0.1s ease;
 
+  &::-webkit-input-placeholder {
+    color: currentColor;
+    opacity: 0.5;
+  }
+
   &:focus,
   &:active {
     border-color: variables.$white;

diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx
@@ -82,6 +82,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     }
     if (root && headerBackground) {
       root.style.setProperty('--header-background', headerBackground);
+      root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground));
     }
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,6 +82,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({ @@
         }
         if (root && headerBackground) {
           root.style.setProperty('--header-background', headerBackground);
+          root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground));
         }
       };
@@ Expand Down @@