ATT&CK report UI changes

- color changes
- strikethrough disabled techiques' text in matrix
This commit is contained in:
Shreya 2020-09-01 23:37:39 +05:30
parent 7107e963fb
commit eba638eaff
4 changed files with 12 additions and 8 deletions

View File

@ -38,7 +38,8 @@ class SelectedTechnique extends React.Component {
</span>
<span>
<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>
</span>
</button>

View File

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

View File

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

View File

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