Merge pull request #820 from shreyamalviya/MITRE-report-colors

ATT&CK Report UI changes
This commit is contained in:
Shreya Malviya 2020-09-03 00:16:02 +05:30 committed by GitHub
commit c0e6467a48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 8 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 158 KiB

View File

@ -38,7 +38,8 @@ class SelectedTechnique extends React.Component {
</span> </span>
<span> <span>
<a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}> <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}>
<FontAwesomeIcon icon={faQuestionCircle}/> <FontAwesomeIcon icon={faQuestionCircle}
color={AttackReport.getComponentClass(tech_id, this.state.techniques) === 'collapse-default' ? '#ffffff' : '#000000'}/>
</a> </a>
</span> </span>
</button> </button>

View File

@ -43,8 +43,9 @@ class TechniqueDropdowns extends React.Component{
{this.state.techniques[tech_id].title} {this.state.techniques[tech_id].title}
</span> </span>
<span> <span>
<a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}> <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank'>
<FontAwesomeIcon icon={faQuestionCircle}/> <FontAwesomeIcon icon={faQuestionCircle} className={'link-to-technique'}
color={AttackReport.getComponentClass(tech_id, this.state.techniques) === 'collapse-default' ? '#ffffff' : '#000000'}/>
</a> </a>
<FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/> <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
</span> </span>

View File

@ -1,9 +1,9 @@
$transition: 300ms cubic-bezier(0.6, 0.3, 0.3, 0.6); $transition: 300ms cubic-bezier(0.6, 0.3, 0.3, 0.6);
$danger-color: #ebbcba; $danger-color: #ebbcba;
$disabled-color: #f4f4f4; $disabled-color: #f2f2f2;
$info-color: #ade3eb; $info-color: #ade3eb;
$default-color: #cbcbcb; $default-color: #8c8c8c;
$warning-color: #ffe28d; $warning-color: #ffe28d;
.collapse-item button { .collapse-item button {
@ -53,6 +53,7 @@ $warning-color: #ffe28d;
.collapse-default { .collapse-default {
background-color: $default-color !important; background-color: $default-color !important;
color: #ffffff;
} }
.collapse-disabled { .collapse-disabled {

View File

@ -1,13 +1,13 @@
// colors // colors
$disabled: #f4f4f4; $disabled: #f2f2f2;
$not-attempted: #cbcbcb; $not-attempted: #8c8c8c;
$attempted: #ffe28d; $attempted: #ffe28d;
$used: #ebbcba; $used: #ebbcba;
$black: #3a3a3a; $black: #3a3a3a;
.attack-matrix .status-0 { .attack-matrix .status-0 {
background-color: $not-attempted !important; background-color: $not-attempted !important;
color: $black; color: #ffffff;
} }
.attack-matrix .status-1 { .attack-matrix .status-1 {
@ -23,6 +23,7 @@ $black: #3a3a3a;
.attack-matrix .status-3 { .attack-matrix .status-3 {
background-color: $disabled !important; background-color: $disabled !important;
color: $black; color: $black;
text-decoration: line-through;
} }
.attack-matrix div.rt-td:hover { .attack-matrix div.rt-td:hover {