gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/assets/icons/Caret.js
View File

@ -5,7 +5,11 @@ function Caret() {
<svg viewBox='0 0 100 100' width='25px'> <svg viewBox='0 0 100 100' width='25px'>
<polygon <polygon
points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196' 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={ transform={
'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)' 'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
} }

12
client/src/assets/icons/Fail.js
View File

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

6
client/src/assets/icons/GreenNotCompleted.js
View File

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

12
client/src/assets/icons/GreenPass.js
View File

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

6
client/src/assets/icons/Initial.js
View File

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

12
client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
View File

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

12
client/src/templates/Challenges/components/test-suite.css
View File

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