diff options
Diffstat (limited to 'frontend/src/components')
20 files changed, 133 insertions, 142 deletions
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss index 97ef0a4..cb7fa54 100644 --- a/frontend/src/components/Connection.scss +++ b/frontend/src/components/Connection.scss @@ -1,9 +1,9 @@ -@import '../colors.scss'; +@import "../colors.scss"; .connection { - background-color: $color-primary-0; border-top: 3px solid $color-primary-3; border-bottom: 3px solid $color-primary-3; + background-color: $color-primary-0; td { vertical-align: middle; @@ -15,14 +15,14 @@ } .btn:hover { - background-color: $color-primary-1 !important; color: $color-primary-4; + background-color: $color-primary-1 !important; } } .connection-icon { - font-weight: 600; font-size: 18px; + font-weight: 600; margin-right: 6px; cursor: pointer; } @@ -45,16 +45,16 @@ } .connection-popover { - background-color: $color-primary-4; border: none; + background-color: $color-primary-4; .popover-body { color: $color-primary-1; textarea { - background-color: $color-primary-3; font-size: 12px; width: 200px; + background-color: $color-primary-3; } } diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss index fde54c0..c97a4b0 100644 --- a/frontend/src/components/ConnectionContent.scss +++ b/frontend/src/components/ConnectionContent.scss @@ -1,16 +1,16 @@ -@import '../colors.scss'; +@import "../colors.scss"; .connection-content { - background-color: $color-primary-0; - padding: 10px 10px 0; height: 100%; + padding: 10px 10px 0; + background-color: $color-primary-0; pre { - word-break: break-word; - white-space: pre-wrap; overflow-x: hidden; height: calc(100% - 31px); padding: 0 10px; + white-space: pre-wrap; + word-break: break-word; p { margin: 0; @@ -19,28 +19,28 @@ } .connection-message { + position: relative; + margin: 10px 0; border: 4px solid $color-primary-3; border-top: 0; - margin: 10px 0; - position: relative; .connection-message-header { - background-color: $color-primary-3; height: 25px; + background-color: $color-primary-3; .connection-message-info { font-size: 11px; - margin-left: -10px; margin-top: 6px; + margin-left: -10px; } .connection-message-actions { - margin-right: -18px; display: none; + margin-right: -18px; button { - margin: 0 3px; font-size: 11px; + margin: 0 3px; padding: 5px; } } @@ -55,19 +55,18 @@ } .connection-message-label { + font-size: 12px; position: absolute; - background-color: $color-primary-3; top: 0; padding: 10px 0; - font-size: 12px; - + background-color: $color-primary-3; writing-mode: vertical-rl; text-orientation: mixed; } &.from-client { - color: $color-primary-4; margin-right: 100px; + color: $color-primary-4; .connection-message-label { right: -22px; @@ -75,26 +74,25 @@ } &.from-server { - color: $color-primary-4; margin-left: 100px; + color: $color-primary-4; .connection-message-label { left: -22px; transform: rotate(-180deg); } } - } .connection-content-header { - background-color: $color-primary-2; - padding: 0; height: 33px; + padding: 0; + background-color: $color-primary-2; .header-info { + font-size: 12px; padding-top: 7px; padding-left: 20px; - font-size: 12px; } .header-actions { @@ -105,6 +103,4 @@ } } } - - } diff --git a/frontend/src/components/ConnectionMatchedRules.scss b/frontend/src/components/ConnectionMatchedRules.scss index ed18f3c..65d9ac8 100644 --- a/frontend/src/components/ConnectionMatchedRules.scss +++ b/frontend/src/components/ConnectionMatchedRules.scss @@ -1,4 +1,4 @@ -@import '../colors.scss'; +@import "../colors.scss"; .connection-matches { background-color: $color-primary-0; diff --git a/frontend/src/components/MessageAction.scss b/frontend/src/components/MessageAction.scss index f3a8772..faa23d3 100644 --- a/frontend/src/components/MessageAction.scss +++ b/frontend/src/components/MessageAction.scss @@ -1,8 +1,8 @@ -@import '../colors.scss'; +@import "../colors.scss"; .message-action-value { font-size: 13px; padding: 15px; - background-color: $color-primary-2; color: $color-primary-4; -}
\ No newline at end of file + background-color: $color-primary-2; +} diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index cfd20ff..9e46b9f 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -1,4 +1,4 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .button-field { font-size: 0.9em; @@ -119,5 +119,4 @@ background-color: $color-green-dark; } } - } diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss index ab932b4..14c547e 100644 --- a/frontend/src/components/fields/CheckField.scss +++ b/frontend/src/components/fields/CheckField.scss @@ -1,12 +1,12 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .check-field { font-size: 0.9em; margin: 5px 0; .field-input { - border-radius: 5px; width: fit-content; + border-radius: 5px; background-color: $color-primary-2; input { @@ -25,8 +25,8 @@ } &.field-checked .field-input { - background-color: $color-primary-4 !important; color: $color-primary-3; + background-color: $color-primary-4 !important; } &.field-small { diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss index e7683b7..0b5e510 100644 --- a/frontend/src/components/fields/ChoiceField.scss +++ b/frontend/src/components/fields/ChoiceField.scss @@ -1,4 +1,4 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .choice-field { font-size: 0.9em; @@ -12,29 +12,29 @@ margin-top: 5px; .field-value { - background-color: $color-primary-2; - border: none; - color: $color-primary-4; - border-radius: 5px; padding: 7px 25px 7px 10px; cursor: pointer; + color: $color-primary-4; + border: none; + border-radius: 5px; + background-color: $color-primary-2; &:after { - content: "⋎"; position: absolute; right: 10px; + content: "⋎"; } } .field-options { position: absolute; + z-index: 20; top: 35px; + display: none; width: 100%; - z-index: 20; border-top: 3px solid $color-primary-0; border-radius: 5px; background-color: $color-primary-2; - display: none; .field-option { display: block; diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss index 79e2b7e..7cc34d9 100644 --- a/frontend/src/components/fields/InputField.scss +++ b/frontend/src/components/fields/InputField.scss @@ -1,4 +1,4 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .input-field { font-size: 0.9em; @@ -15,13 +15,13 @@ .field-value { .file-label { - background-color: $color-primary-2; - margin: 0; width: 100%; - color: $color-primary-4; - border-radius: 5px; + margin: 0; padding: 7px 10px; cursor: pointer; + color: $color-primary-4; + border-radius: 5px; + background-color: $color-primary-2; } input[type="file"] { @@ -29,27 +29,27 @@ } .file-label:after { - content: "Browse"; position: absolute; - right: 0; top: 0; + right: 0; padding: 7px 10px 7px 12px; - background-color: $color-primary-1; - border-bottom-right-radius: 5px; + content: "Browse"; border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: $color-primary-1; } } } &.field-active { &.field-inline .field-name { - background-color: $color-primary-4 !important; color: $color-primary-3 !important; + background-color: $color-primary-4 !important; } .field-value input, .field-value .file-label { - background-color: $color-primary-4 !important; color: $color-primary-3 !important; + background-color: $color-primary-4 !important; } .file-label:after { @@ -59,13 +59,13 @@ &.field-invalid { &.field-inline .field-name { - background-color: $color-secondary-2 !important; color: $color-primary-4 !important; + background-color: $color-secondary-2 !important; } .field-value input, .field-value .file-label { - background-color: $color-secondary-2 !important; color: $color-primary-4 !important; + background-color: $color-secondary-2 !important; } .file-label:after { @@ -81,19 +81,19 @@ display: flex; .field-name { - background-color: $color-primary-2; padding: 6px 7px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; + background-color: $color-primary-2; } .field-input { width: 100%; input, .file-label { - border-bottom-left-radius: 0; - border-top-left-radius: 0; padding-left: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } } @@ -103,14 +103,14 @@ } .field-clear { - position: absolute; - right: 8px; - top: 8px; - z-index: 10; font-size: 0.9em; font-weight: 600; - letter-spacing: -0.5px; + position: absolute; + z-index: 10; + top: 8px; + right: 8px; cursor: pointer; + letter-spacing: -0.5px; } &.field-active .field-clear { @@ -118,8 +118,8 @@ } .field-error { - padding: 5px 10px; font-size: 0.9em; + padding: 5px 10px; color: $color-secondary-0; } } diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss index de831fb..c2d6ef5 100644 --- a/frontend/src/components/fields/TextField.scss +++ b/frontend/src/components/fields/TextField.scss @@ -1,4 +1,4 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .text-field { font-size: 0.9em; @@ -15,15 +15,15 @@ &.field-active { textarea { - background-color: $color-primary-4 !important; color: $color-primary-3 !important; + background-color: $color-primary-4 !important; } } &.field-invalid { textarea { - background-color: $color-secondary-2 !important; color: $color-primary-4 !important; + background-color: $color-secondary-2 !important; } } @@ -32,14 +32,14 @@ } .field-clear { - position: absolute; - right: 8px; - top: 8px; - z-index: 10; font-size: 0.9em; font-weight: 600; - letter-spacing: -0.5px; + position: absolute; + z-index: 10; + top: 8px; + right: 8px; cursor: pointer; + letter-spacing: -0.5px; } &.field-active .field-clear { @@ -47,8 +47,8 @@ } .field-error { - padding: 5px 10px; font-size: 0.9em; + padding: 5px 10px; color: $color-secondary-0; } } diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index f83a988..f37369e 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -1,48 +1,47 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .field { - input, textarea { - background-color: $color-primary-2; width: 100%; - border: none; + padding: 7px 10px; color: $color-primary-4; + border: none; border-radius: 5px; - padding: 7px 10px; + background-color: $color-primary-2; &:focus { - background-color: $color-primary-1; color: $color-primary-4; - box-shadow: none; outline: none; + background-color: $color-primary-1; + box-shadow: none; } &[readonly] { - background-color: $color-primary-2; - border: none; color: $color-primary-4; + border: none; + background-color: $color-primary-2; } &[readonly]:focus { - background-color: $color-primary-1; color: $color-primary-4; + background-color: $color-primary-1; box-shadow: none; } } button { - border-radius: 0; - background-color: $color-primary-2; - border: none; + font-weight: 500; + padding: 5px 12px; color: $color-primary-4; + border: none; + border-radius: 0; outline: none; - padding: 5px 12px; - font-weight: 500; + background-color: $color-primary-2; &:hover, &:active { - background-color: $color-primary-1; color: $color-primary-4; + background-color: $color-primary-1; } &:focus, diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss index 6eabbda..26b21f1 100644 --- a/frontend/src/components/fields/extensions/ColorField.scss +++ b/frontend/src/components/fields/extensions/ColorField.scss @@ -1,4 +1,4 @@ -@import '../../../colors.scss'; +@import "../../../colors.scss"; .color-field { .color-input { @@ -9,8 +9,8 @@ flex: 1; input { - border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; } } @@ -20,8 +20,8 @@ .picker-button { font-size: 0.8em; padding: 8px 15px; - border-bottom-right-radius: 5px; border-top-right-radius: 5px; + border-bottom-right-radius: 5px; background-color: $color-primary-1; } } @@ -29,8 +29,8 @@ .color-error { font-size: 0.8em; - color: $color-secondary-0; margin-left: 10px; + color: $color-secondary-0; } } diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js index ed81ed7..19a9e46 100644 --- a/frontend/src/components/fields/extensions/NumericField.js +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -21,7 +21,7 @@ class NumericField extends Component { value = value.toString().replace(/[^\d]/gi, ''); let intValue = 0; if (value !== "") { - intValue = parseInt(value); + intValue = parseInt(value, 10); } const valid = (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) && diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss index 5df0006..71efd0d 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.scss +++ b/frontend/src/components/filters/RulesConnectionsFilter.scss @@ -1,13 +1,13 @@ -@import '../../colors'; +@import "../../colors"; .react-tags { + font-size: 12px; position: relative; + z-index: 10; padding: 0 6px; + cursor: text; border-radius: 4px; background-color: $color-primary-2; - font-size: 12px; - cursor: text; - z-index: 10; } .react-tags.is-focused { @@ -19,20 +19,20 @@ } .react-tags__selected-tag { + font-size: 11px; display: inline-block; - border: none; margin: 0 6px 6px 0; padding: 2px 4px; + color: $color-primary-3; + border: none; border-radius: 2px; background: $color-primary-4; - color: $color-primary-3; - font-size: 11px; } .react-tags__selected-tag::after { - content: '\2715'; - color: $color-primary-3; margin-left: 8px; + content: "\2715"; + color: $color-primary-3; } .react-tags__selected-tag:hover, @@ -42,8 +42,8 @@ .react-tags__search { display: inline-block; - padding: 7px 10px; max-width: 100%; + padding: 7px 10px; } @media screen and (min-width: 30em) { @@ -53,15 +53,15 @@ } .react-tags__search-input { + font-size: inherit; + line-height: inherit; max-width: 100%; margin: 0; padding: 0; + color: $color-primary-4; border: 0; outline: none; background-color: $color-primary-2; - color: $color-primary-4; - font-size: inherit; - line-height: inherit; } .react-tags__search-input::-ms-clear { @@ -82,30 +82,30 @@ } .react-tags__suggestions ul { + font-size: 12px; margin: 4px -1px; padding: 0; list-style: none; - background: $color-primary-4; - border-radius: 2px; color: $color-primary-1; - font-size: 12px; + border-radius: 2px; + background: $color-primary-4; } .react-tags__suggestions li { - border-bottom: 1px solid #ddd; padding: 3px 5px; + border-bottom: 1px solid #ddd; } .react-tags__suggestions li mark { + font-weight: 600; text-decoration: underline; background: none; - font-weight: 600; } .react-tags__suggestions li:hover { cursor: pointer; - background: $color-primary-0; color: $color-primary-4; + background: $color-primary-0; } .react-tags__suggestions li.is-active { @@ -113,6 +113,6 @@ } .react-tags__suggestions li.is-disabled { - opacity: 0.5; cursor: auto; + opacity: 0.5; } diff --git a/frontend/src/components/objects/LinkPopover.scss b/frontend/src/components/objects/LinkPopover.scss index d5f4879..725224c 100644 --- a/frontend/src/components/objects/LinkPopover.scss +++ b/frontend/src/components/objects/LinkPopover.scss @@ -1,7 +1,7 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .link-popover { - text-decoration: underline; font-weight: 500; cursor: pointer; -}
\ No newline at end of file + text-decoration: underline; +} diff --git a/frontend/src/components/panels/ConfigurationPane.scss b/frontend/src/components/panels/ConfigurationPane.scss index 955d2bc..ef48b34 100644 --- a/frontend/src/components/panels/ConfigurationPane.scss +++ b/frontend/src/components/panels/ConfigurationPane.scss @@ -1,10 +1,10 @@ -@import '../../colors'; +@import "../../colors"; .configuration-pane { - height: 100%; display: flex; align-items: center; justify-content: center; + height: 100%; background-color: $color-primary-0; .pane { @@ -15,5 +15,4 @@ .pane-container { padding-bottom: 1px; } - } diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss index 04be347..2973c00 100644 --- a/frontend/src/components/panels/MainPane.scss +++ b/frontend/src/components/panels/MainPane.scss @@ -1,8 +1,8 @@ -@import '../../colors'; +@import "../../colors"; .main-pane { - height: 100%; display: flex; + height: 100%; padding: 0 15px; background-color: $color-primary-2; @@ -19,5 +19,4 @@ flex: 1 1; margin-left: 7.5px; } - } diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss index 721560a..4dbc2b2 100644 --- a/frontend/src/components/panels/PcapPane.scss +++ b/frontend/src/components/panels/PcapPane.scss @@ -1,12 +1,12 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .pcap-pane { display: flex; flex-direction: column; .pcap-list { - flex: 1; overflow: hidden; + flex: 1; .section-content { height: 100%; @@ -35,5 +35,4 @@ font-size: 0.9em; } } - } diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss index d45c366..992445a 100644 --- a/frontend/src/components/panels/RulePane.scss +++ b/frontend/src/components/panels/RulePane.scss @@ -4,8 +4,8 @@ flex-direction: column; .rules-list { - flex: 2 1; overflow: hidden; + flex: 2 1; .section-content { height: 100%; @@ -17,8 +17,8 @@ } .rule-edit { - flex: 3 0; display: flex; + flex: 3 0; flex-direction: column; .section-content { diff --git a/frontend/src/components/panels/ServicePane.scss b/frontend/src/components/panels/ServicePane.scss index 0b154e6..daf7e79 100644 --- a/frontend/src/components/panels/ServicePane.scss +++ b/frontend/src/components/panels/ServicePane.scss @@ -4,8 +4,8 @@ flex-direction: column; .services-list { - flex: 1; overflow: hidden; + flex: 1; .section-content { height: 100%; diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss index ea8da94..121a917 100644 --- a/frontend/src/components/panels/common.scss +++ b/frontend/src/components/panels/common.scss @@ -1,20 +1,20 @@ -@import '../../colors.scss'; +@import "../../colors.scss"; .pane-container { - background-color: $color-primary-3; - padding: 10px 10px 0; height: 100%; + padding: 10px 10px 0; + background-color: $color-primary-3; .pane-section { margin-bottom: 10px; background-color: $color-primary-0; .section-header { - background-color: $color-primary-2; - padding: 5px 10px; - font-weight: 500; font-size: 0.9em; + font-weight: 500; display: flex; + padding: 5px 10px; + background-color: $color-primary-2; .api-request { flex: 1; @@ -31,8 +31,8 @@ .table-error { font-size: 0.8em; - color: $color-secondary-0; margin-left: 10px; + color: $color-secondary-0; } } @@ -40,18 +40,18 @@ margin-bottom: 0; tbody tr { - background-color: $color-primary-3; border-top: 3px solid $color-primary-0; border-bottom: 3px solid $color-primary-0; + background-color: $color-primary-3; } th { - background-color: $color-primary-2; font-size: 0.8em; position: sticky; top: 0; padding: 2px 5px; border: none; + background-color: $color-primary-2; } .row-small { @@ -74,9 +74,9 @@ .section-footer { display: flex; + justify-content: flex-end; padding: 10px; background-color: $color-primary-0; - justify-content: flex-end; .button-field { margin-left: 10px; |