Adds theme colors

brave · Jul 19, 2019 · e939d7d · e939d7d
1 parent e98f573
commit e939d7d
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 37 deletions.
diff --git a/src/features/rewards/modalRedirect/__snapshots__/spec.tsx.snap b/src/features/rewards/modalRedirect/__snapshots__/spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`ModalRedirect tests basic tests matches the snapshot 1`] = `
   font-size: 20px;
   font-weight: 600;
   line-height: 2;
-  color: #4b4c5c;
+  color: #3b3e4f;
   margin-bottom: 20px;
   text-align: center;
 }

diff --git a/src/features/rewards/modalRedirect/style.ts b/src/features/rewards/modalRedirect/style.ts
@@ -5,14 +5,14 @@
 import styled from 'styled-components'
 
 export const StyledWrapper = styled<{}, 'div'>('div')`
-  font-family: Poppins, sans-serif;
+  font-family: ${p => p.theme.fontFamily.heading};
 `
 
 export const StyledTitle = styled<{}, 'div'>('div')`
   font-size: 20px;
   font-weight: 600;
   line-height: 2;
-  color: #4b4c5c;
+  color: ${p => p.theme.palette.grey800};
   margin-bottom: 20px;
   text-align: center;
 `

diff --git a/src/features/rewards/panelVerify/__snapshots__/spec.tsx.snap b/src/features/rewards/panelVerify/__snapshots__/spec.tsx.snap
@@ -104,8 +104,7 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
   text-align: center;
   font-family: Poppins,sans-serif;
   background-image: linear-gradient(180deg,#4C54D2 0%,#563195 100%);
-  padding: 42px;
-  padding-bottom: 30px;
+  padding: 42px 42px 30px;
   top: 0;
   left: 0;
   width: 100%;
@@ -121,7 +120,7 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
   cursor: pointer;
   width: 11px;
   height: 11px;
-  color: #fff;
+  color: #FFFFFF;
 }
 
 .c3 {
@@ -143,15 +142,15 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
 }
 
 .c7 {
-  color: #fff;
+  color: #FFFFFF;
   text-align: left;
   font-size: 22px;
   line-height: 24px;
   font-weight: 600;
 }
 
 .c10 {
-  color: #fff;
+  color: #FFFFFF;
   text-align: left;
   font-family: Muli,sans-serif;
   font-size: 14px;
@@ -164,11 +163,11 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
   text-align: left;
   line-height: 25px;
   padding-bottom: 4px;
-  color: #fff;
+  color: #FFFFFF;
 }
 
 .c14 {
-  color: #fff;
+  color: #FFFFFF;
   margin: 15px 0;
 }
 
@@ -194,7 +193,7 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
-  color: #fff;
+  color: #FFFFFF;
   padding: 30px 24px 20px;
   border-top: 1px solid rgba(255,255,255,0.5433);
   margin: 44px 0 0;
@@ -207,7 +206,7 @@ exports[`PanelVerify tests basic tests matches the snapshot 1`] = `
 .c23 {
   font-family: Muli,sans-serif;
   font-size: 12px;
-  color: #fff;
+  color: #FFFFFF;
   margin-top: 32px;
 }
 

diff --git a/src/features/rewards/panelVerify/style.ts b/src/features/rewards/panelVerify/style.ts
@@ -14,10 +14,9 @@ interface StyleProps {
 export const StyledWrapper = styled<{}, 'div'>('div')`
   position: absolute;
   text-align: center;
-  font-family: Poppins, sans-serif;
-  background-image: linear-gradient(180deg, #4C54D2 0%, #563195 100%);
-  padding: 42px;
-  padding-bottom: 30px;
+  font-family: ${p => p.theme.fontFamily.heading};
+  background-image: linear-gradient(180deg, ${p => p.theme.palette.blurple500} 0%, #563195 100%);
+  padding: 42px 42px 30px;
   top: 0;
   left: 0;
   width: 100%;
@@ -33,7 +32,7 @@ export const StyledClose = styled<{}, 'div'>('div')`
   cursor: pointer;
   width: 11px;
   height: 11px;
-  color: #fff;
+  color: ${p => p.theme.palette.white};
 `
 
 export const StyledHeader = styled<StyleProps, 'div'>('div')`
@@ -55,17 +54,17 @@ export const StyledHeaderText = styled<{}, 'div'>('div')`
 `
 
 export const StyledTitle = styled(Heading)`
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   text-align: left;
   font-size: 22px;
   line-height: 24px;
   font-weight: 600;
 `
 
 export const StyledSubtitle = styled(Heading)`
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   text-align: left;
-  font-family: Muli, sans-serif;
+  font-family: ${p => p.theme.fontFamily.body};
   font-size: 14px;
   line-height: 24px;
 `
@@ -76,11 +75,11 @@ export const StyledListTitle = styled(Heading)`
   text-align: left;
   line-height: 25px;
   padding-bottom: 4px;
-  color: #fff;
+  color: ${p => p.theme.palette.white};
 `
 
 export const StyledListItem = styled<StyleProps, 'div'>('div')`
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   margin: ${p => p.compact ? '10px' : '15px'} 0;
 `
 
@@ -94,7 +93,7 @@ export const StyledListIcon = styled<{}, 'div'>('div')`
 export const StyledListItemText = styled<{}, 'div'>('div')`
   vertical-align: middle;
   text-align: left;
-  font-family: Muli, sans-serif;
+  font-family: ${p => p.theme.fontFamily.body};
   font-size: 15px;
   line-height: 20px;
   display: inline-block;
@@ -106,7 +105,7 @@ export const StyledIDNotice = styled<StyleProps, 'div'>('div')`
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   padding: ${p => p.compact ? '20px' : '30px'} 24px 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.5433);
   margin: ${p => p.compact ? '25px' : '44px'} 0 0;
@@ -117,9 +116,9 @@ export const StyledButton = styled(Button as ComponentType<ButtonProps>)`
 `
 
 export const StyledFooter = styled<StyleProps, 'div'>('div')`
-  font-family: Muli, sans-serif;
+font-family: ${p => p.theme.fontFamily.body};
   font-size: 12px;
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   margin-top: ${p => p.compact ? '28px' : '32px'};
 `
 

diff --git a/src/features/rewards/walletPopup/__snapshots__/spec.tsx.snap b/src/features/rewards/walletPopup/__snapshots__/spec.tsx.snap
@@ -15,11 +15,11 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
 
 .c1 {
   margin: 52px auto;
-  background: #fff;
+  background: #FFFFFF;
   border-radius: 6px;
   overflow: hidden;
   position: relative;
-  box-shadow: 0px 0px 12px 0px rgba(12,13,33,0.44);
+  box-shadow: 0 0 12px 0 rgba(12,13,33,0.44);
 }
 
 .c2 {
@@ -28,15 +28,15 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
 
 .c3 {
   font-weight: bold;
-  border-bottom: 1px solid #d1d1d7;
+  border-bottom: 1px solid #c2c4cf;
   padding-bottom: 5px;
   margin-bottom: 10px;
 }
 
 .c6 {
   font-weight: normal;
   float: right;
-  color: #1bba6a;
+  color: #39a84c;
 }
 
 .c4 {

diff --git a/src/features/rewards/walletPopup/style.ts b/src/features/rewards/walletPopup/style.ts
@@ -18,11 +18,11 @@ export const StyledWrapper = styled<{}, 'div'>('div')`
 
 export const StyledDialog = styled<{}, 'div'>('div')`
   margin: 52px auto;
-  background: #fff;
+  background: ${p => p.theme.palette.white};
   border-radius: 6px;
   overflow: hidden;
   position: relative;
-  box-shadow: 0px 0px 12px 0px rgba(12, 13, 33, 0.44);
+  box-shadow: 0 0 12px 0 rgba(12, 13, 33, 0.44);
 `
 
 export const StyledContent = styled<{}, 'div'>('div')`
@@ -31,15 +31,15 @@ export const StyledContent = styled<{}, 'div'>('div')`
 
 export const StyledHeader = styled<{}, 'div'>('div')`
   font-weight: bold;
-  border-bottom: 1px solid #d1d1d7;
+  border-bottom: 1px solid ${p => p.theme.palette.grey400};
   padding-bottom: 5px;
   margin-bottom: 10px;
 `
 
 export const StyledStatus = styled<{}, 'div'>('div')`
   font-weight: normal;
   float: right;
-  color: #1bba6a;
+  color: ${p => p.theme.palette.green600};
 `
 
 export const StyledIcon = styled<{}, 'span'>('span')`

diff --git a/src/features/rewards/walletWrapper/style.ts b/src/features/rewards/walletWrapper/style.ts
@@ -83,7 +83,7 @@ export const StyledBalanceTokens = styled<{}, 'div'>('div')`
 export const StyledBalanceUnavailable = styled<{}, 'div'>('div')`
   font-size: 24px;
   opacity: 0.66;
-  color: #fff;
+  color: ${p => p.theme.palette.white};
   margin: 10px 0;
   font-weight: 300;
 `
@@ -344,7 +344,7 @@ export const StyledVerifiedButton = styled<{active: boolean}, 'button'>('button'
   min-width: 88px;
   padding: 7px 10px;
   color: #fff;
-  background: #1bba6a;
+  background: ${palette.green600};
   border: 1px solid ${p => p.theme.color[p.active ? 'brandBatActive' : 'brandBat']};
   :active:enabled {
     border-color: ${p => p.theme.color.brandBatActive};
@@ -372,7 +372,7 @@ export const StyledVerifiedButtonIcon = styled<{position: string}, 'div'>('div')
 
 export const StyledTextIcon = styled<{}, 'div'>('div')`
   line-height: initial;
-  background: #392dd1;
+  background: ${palette.blurple600};
   width: 16px;
   height: 16px;
   border-radius: 8px;