forked from p15670423/monkey
Merge pull request #820 from shreyamalviya/MITRE-report-colors
ATT&CK Report UI changes
This commit is contained in:
commit
c0e6467a48
Binary file not shown.
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 158 KiB |
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue