3796 fix dependencies modal theme (#3865)

* fix(SearchDependencies): remove important from base search css

* fix(SearchDependencies): fix input background, add 'important' to algoia link and logo

* fix(Modal): use 'ThemeProvider' from styled-component

* fix(SearchDependencies): use dialog foreground and background color from theme

* fix(SearchDependencies): fix the highlighted text color

Author: tanmoyopenroot

packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/elements.js

@@ -4,39 +4,35 @@ import Select from '@codesandbox/common/lib/components/Select';
 import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
 import { GitHubLogo } from 'app/components/GitHubLogo';
 
-export const GitHubLogoStyled = styled(GitHubLogo)`
-  color: ${props =>
-    !props.theme.light ? 'inherit' : 'rgba(255, 255, 255, 0.8)'};
-`;
+export const GitHubLogoStyled = styled(GitHubLogo)``;
 
 const getContainerColor = props => {
   if (props.highlighted) {
-    return Color(props.theme['sideBar.background'])
+    return Color(props.theme.colors.dialog.background)
       .darken(0.2)
       .rgbString();
   }
 
-  return props.theme['sideBar.background'];
+  return props.theme.colors.dialog.background;
 };
 
 export const Container = styled.div`
   display: flex;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'};
+  color: ${props => props.theme.colors.dialog.foreground};
   background-color: ${getContainerColor};
   cursor: pointer;
 
   &:not(:last-child) {
     border-bottom: 1px solid
       ${props =>
-        Color(props.theme['sideBar.background'])
+        Color(props.theme.colors.dialog.background)
           .darken(0.4)
           .rgbString()};
   }
 
   &:hover {
     background-color: ${props =>
-      Color(props.theme['sideBar.background'])
+      Color(props.theme.colors.dialog.background)
         .darken(0.2)
         .rgbString()};
   }
@@ -62,7 +58,9 @@ export const Description = styled(Row)`
   font-size: 0.875rem;
 
   color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'};
+    Color(props.theme.colors.dialog.foreground)
+      .alpha(0.6)
+      .rgbString()};
 `;
 
 export const Downloads = styled.span`
@@ -74,19 +72,31 @@ export const Downloads = styled.span`
 export const License = styled.span`
   border: 1px solid
     ${props =>
-      !props.theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
+      Color(props.theme.colors.dialog.border)
+        .alpha(0.4)
+        .rgbString()};
   border-radius: 3px;
   padding: 1px 3px;
 
   color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'};
+    Color(props.theme.colors.dialog.foreground)
+      .alpha(0.6)
+      .rgbString()};
   font-size: 12px;
 `;
 
 export const IconLink = styled.a`
   font-size: 1rem;
   color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+    Color(props.theme.colors.icon.foreground)
+      .alpha(1)
+      .rgbString()};
+
+  ${GitHubLogoStyled} {
+    circle {
+      fill: transparent;
+    }
+  }
 `;
 
 export const StyledSelect = styled(Select)`

packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/elements.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Color from 'color';
 
 export const AutoCompleteInput = styled.input`
   width: 100%;
@@ -10,8 +11,7 @@ export const AutoCompleteInput = styled.input`
   font-family: inherit;
   letter-spacing: 0.45px;
 
-  color: ${props =>
-    props.theme.light ? props.theme.black : props.theme.white};
+  color: ${props => Color(props.theme.colors.dialog.foreground).rgbString()};
   padding: 0.75em 1em;
   z-index: 2;
 `;
@@ -21,7 +21,9 @@ export const SuggestionInput = styled(AutoCompleteInput)`
   top: 0;
   left: 0;
   color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.3)'};
+    Color(props.theme.colors.dialog.foreground)
+      .alpha(0.3)
+      .rgbString()};
   background-color: transparent;
   z-index: 1;
   pointer-events: none;

packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.js

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import Color from 'color';
 
 export default createGlobalStyle`
 .ReactModal__Content div[class^='Modal__ModalBody'] {
@@ -22,8 +23,12 @@ export default createGlobalStyle`
   }
 
   .ais-Pagination-link {
+    &:not(.ais-Pagination-link--selected) {
       color: ${props =>
-        props.theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'};
+        Color(props.theme.colors.dialog.foreground)
+          .alpha(0.6)
+          .rgbString()} !important;
+    }
   }
 
   .ais-Pagination-item--selected {
@@ -32,24 +37,30 @@ export default createGlobalStyle`
   }
 
   .ais-Highlight-highlighted {
-       color: ${props => props.theme['button.hoverBackground']};
+    color: ${props => props.theme.colors.button.background};
   }
 
-  .ais-PoweredBy-link svg path:nth-child(4) {
-        fill: ${props =>
-          props.theme.light
-            ? 'rgba(0, 0, 0, 0.8)'
-            : 'rgba(255, 255, 255, 0.8)'} !important;
+  .ais-PoweredBy-link svg {
+    fill: ${props =>
+      Color(props.theme.colors.dialog.foreground)
+        .alpha(0.8)
+        .rgbString()} !important;
+
+    path:nth-child(4) {
+      fill: ${props =>
+        Color(props.theme.colors.dialog.foreground)
+          .alpha(0.8)
+          .rgbString()} !important;
+    }
   }
 
   footer {
     height: 40px;
     background-color: ${props => props.theme['sideBar.background']};
 
     .ais-PoweredBy {
-          color: ${props =>
-            props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'};
-
+      color: ${props =>
+        Color(props.theme.colors.dialog.foreground).rgbString()} !important;
     }
   }
 }

packages/app/src/app/pages/Search/search.ts

@@ -209,10 +209,10 @@ const styles = css`
           svg {
             height: 1.2em;
             vertical-align: bottom;
-            fill: rgba(255, 255, 255, 0.8) !important;
+            fill: rgba(255, 255, 255, 0.8);
 
             path:nth-child(4) {
-              fill: rgba(255, 255, 255, 0.8) !important;
+              fill: rgba(255, 255, 255, 0.8);
             }
           }
         }