fix(style): rework color scheme for icons (#36760)

* fix(style): rework color scheme for icons

* fix: update snapshot

* fix(style): add some space in and around test area

* fix(style): lessen padding
This commit is contained in:
Tom
2019-09-06 04:26:08 -05:00
committed by mrugesh
parent 418a1061dd
commit 40b6b68178
7 changed files with 36 additions and 30 deletions

View File

@ -5,7 +5,11 @@ function Caret() {
<svg viewBox='0 0 100 100' width='25px'>
<polygon
points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196'
style={{ stroke: '#858591', fill: '#858591', strokeWidth: '1px' }}
style={{
stroke: 'var(--primary-color)',
fill: 'var(--primary-color)',
strokeWidth: '1px'
}}
transform={
'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
}

View File

@ -13,17 +13,17 @@ function RedFail() {
<circle
cx='100'
cy='99'
fill='#858591'
fill='var(--primary-color)'
r='95'
stroke='#858591'
stroke='(var--primary-color)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
/>
<rect
fill='#ffffff'
fill='var(--primary-background)'
height='30'
stroke='#ffffff'
stroke='var(--primary-background)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
@ -33,9 +33,9 @@ function RedFail() {
y='88'
/>
<rect
fill='#ffffff'
fill='var(--primary-background)'
height='30'
stroke='#ffffff'
stroke='var(--primary-background)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

View File

@ -18,13 +18,13 @@ function GreenNotCompleted(props) {
<circle
cx='100'
cy='99'
fill='#FFFFFF'
fill='var(--primary-background)'
r='95'
stroke='#858591'
stroke='var(--primary-color)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
strokeWidth='5'
strokeWidth='10'
/>
</g>
</svg>

View File

@ -16,17 +16,17 @@ function GreenPass(props) {
<circle
cx='100'
cy='99'
fill='#858591'
fill='var(--primary-color)'
r='95'
stroke='#858591'
stroke='var(--primary-color)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
/>
<rect
fill='#ffffff'
fill='var(--primary-background)'
height='30'
stroke='#ffffff'
stroke='var(--primary-background)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
@ -36,9 +36,9 @@ function GreenPass(props) {
y='91.32089'
/>
<rect
fill='#ffffff'
fill='var(--primary-background)'
height='30'
stroke='#ffffff'
stroke='var(--primary-background)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

View File

@ -14,9 +14,9 @@ function Initial(props) {
<circle
cx='100'
cy='99'
fill='#858591'
fill='var(--primary-color)'
r='95'
stroke='#858591'
stroke='var(--primary-color)'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
@ -42,7 +42,7 @@ function Initial(props) {
'447 1-1zm3 3c0-.552-.448-1-1-1s-1 .448-1 1 .448 1 1 1 1-.448 ' +
'1-1z'
}
fill='#fff'
fill='var(--primary-background)'
/>
</svg>
</g>

View File

@ -40,17 +40,17 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
<circle
cx="100"
cy="99"
fill="#858591"
fill="var(--primary-color)"
r="95"
stroke="#858591"
stroke="var(--primary-color)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
/>
<rect
fill="#ffffff"
fill="var(--primary-background)"
height="30"
stroke="#ffffff"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"
@ -60,9 +60,9 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
y="91.32089"
/>
<rect
fill="#ffffff"
fill="var(--primary-background)"
height="30"
stroke="#ffffff"
stroke="var(--primary-background)"
strokeDasharray="null"
strokeLinecap="null"
strokeLinejoin="null"

View File

@ -2,7 +2,7 @@
display: flex;
justify-content: flex-start;
flex-direction: column;
margin-top: 15px;
margin: 15px 0;
}
.test-result {
@ -16,16 +16,18 @@
}
.test-output {
margin-left: 15px;
padding: 5px 10px;
}
.test-status-icon {
display: flex;
align-items: center;
margin-left: 3px;
justify-content: center;
min-width: 60px;
min-height: 60px;
}
.test-status-icon > svg {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
}