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:
@ -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)'
|
||||
}
|
||||
|
@ -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'
|
||||
|
@ -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>
|
||||
|
@ -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'
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user