From 210d8d8b8a96e9d4232de222dead97fabc51ac38 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Thu, 25 May 2023 09:43:44 -0400 Subject: [PATCH] Fleet UI: Begin updating icons (6 icons only) (#11852) --- ...con-copy-clipboard-fleet-blue-20x20@2x.png | Bin 502 -> 0 bytes assets/images/icon-download-12x12@2x.png | Bin 470 -> 0 bytes assets/images/icon-eye-16x16@2x.png | Bin 867 -> 0 bytes assets/images/icon-pencil-14x14@2x.png | Bin 439 -> 0 bytes assets/images/icon-plus-16x16@2x.png | Bin 353 -> 0 bytes assets/images/icon-trash-14x14@2x.png | Bin 544 -> 0 bytes .../PlatformWrapper/PlatformWrapper.tsx | 46 ++++++++++-------- .../PlatformWrapper/_styles.scss | 17 +++---- .../EnrollSecretModal/EnrollSecretModal.tsx | 5 +- .../EnrollSecretRow/EnrollSecretRow.tsx | 2 +- .../EnrollSecrets/SecretField/SecretField.tsx | 8 ++- .../buttons/ActionButtons/ActionButtons.tsx | 8 ++- frontend/components/buttons/Button/Button.tsx | 3 ++ .../components/buttons/Button/_styles.scss | 23 ++++++++- .../buttons/RevealButton/_styles.scss | 1 - .../InputFieldHiddenContent.tsx | 2 +- frontend/components/icons/Copy.tsx | 35 +++++++++++++ frontend/components/icons/Download.tsx | 21 ++++++-- frontend/components/icons/Eye.tsx | 14 ++++-- frontend/components/icons/Pencil.tsx | 23 +++++++-- frontend/components/icons/Plus.tsx | 15 +++--- frontend/components/icons/TrashCan.tsx | 11 +++-- frontend/components/icons/index.ts | 4 +- .../PackQueriesTable/PackQueriesTable.tsx | 6 +-- .../TeamDetailsWrapper/TeamDetailsWrapper.tsx | 10 ++-- .../hosts/ManageHostsPage/ManageHostsPage.tsx | 7 +-- .../CustomLabelGroupHeading.tsx | 6 +-- .../HostsFilterBlock/HostsFilterBlock.tsx | 11 ++--- .../modals/OSPolicyModal/OSPolicyModal.tsx | 7 ++- .../components/PolicyForm/PolicyForm.tsx | 46 ++++++++++-------- .../components/PolicyForm/_styles.scss | 5 +- .../components/QueryResults/QueryResults.tsx | 14 +++--- .../components/QueryForm/QueryForm.tsx | 31 +++++++----- .../components/QueryForm/_styles.scss | 3 +- .../components/QueryResults/QueryResults.tsx | 14 +++--- frontend/styles/var/padding.scss | 1 + 36 files changed, 250 insertions(+), 149 deletions(-) delete mode 100644 assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png delete mode 100644 assets/images/icon-download-12x12@2x.png delete mode 100644 assets/images/icon-eye-16x16@2x.png delete mode 100644 assets/images/icon-pencil-14x14@2x.png delete mode 100644 assets/images/icon-plus-16x16@2x.png delete mode 100644 assets/images/icon-trash-14x14@2x.png create mode 100644 frontend/components/icons/Copy.tsx diff --git a/assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png b/assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png deleted file mode 100644 index 467bca2c548487f03ab10f8e1bf191fad556f871..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 502 zcmVzB z!axv!cTatf9Z&+=fUyHQ0H28XAasBgs1IsJ9>fml06TyVqyv2xy>-ulk)Obx>>w}u z&15dg-EF??-DM^RU>LgvLCM8ARq2avI8w4uHA08&y9ay*1rC&WPwfJ^K#4qyE7^}} zlx0*xq9-IM-#@y;**dEr9_$Y^xV^ti{AjAd%F@qfFdUgn%cPSSy)9XCn?{d+F2oYnqcBqwvYUldE~8?{IZD6!;g zqfXtihucmEhfpk*Iu9q{skvgMi)<=5foca1YP>R6RFnEktNspd8xz!Gf?7;aiwSBm zK`kbz#RRpOpcWIPc;6LBO-EWRc*FHvw8wGf^;X@OXzu s6!Ereb*2Z4@kyU!9>;7R8OE;p2GzBJ<(}D|Mv0V0sLhxrpcu}i;X5d1PygQ=QVb44Mg|0nXFX%8iRyJd4h;z)uuL} zRyu$VpnnX~^29cIi3pP@-ClWKZv%VKY!;2W)Lk+|kbx|DZy~Q(kfh%!wX20=NnJ+^XJ0r0f2{M10S!B5Qn8cJx>;9d`99<6U7E`|3w;BLQoFJ zhP?l*>2^|DE_^kp5pzdJ(#un3c?lwG zZ}0FCnu4TyZ+Q9%_LVlhK~@W`K#q^00xW|#4u-8k3b1b>%AgvU5=2Ua29hulPAn@n zFh#w8M7|27F({Yo?tV&DRf6n!%CKi;XCz#ew*O;LKO$d*0De!wJNdqL{M_gn!~g&Q M07*qoM6N<$g4Sof7ytkO diff --git a/assets/images/icon-eye-16x16@2x.png b/assets/images/icon-eye-16x16@2x.png deleted file mode 100644 index d4959ce34dab762af6c2b7a0c66fdcdb19447245..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 867 zcmV-p1DyPcP)lMF(*z2&n+O1E>Hq6Nn)n78PJu5cwmvF`2Qcz;uAAATB}az#kbBuyvcg zLnq71oun|C{Dk+x$alMMAGdqE2k?yl9r!24zE9it-(>?mvCBVq0H_+%giI8YjIN}& zm<|S8VOh>n0-8;#3W9SW+GCIHVh0MDA)wl7mAVTVjV~`>%xpgDq)^H>A|50j08_&IL)U4bi%1aN z@MkqPnnpP!MgELX;(gubkA==eo!-!E!xM1YjM|)r^E?sg3{IRwAPg;N`R`>iddZ$110voF*L<>rS5O;0s{l4O+uKGqKzxjSq6AWFY z>Z;{cd#1_cg1Kt0z21fAtKOi#h3Acu8j$eszygyR5fY=rc(G>kVuMj#3WPJ)R=VB* zWk(DK8`E@NKAzBl&5`$Rp)5qywFWnHMT_JH$2|sDoARqsCZni6_@acZ;5WDdZIZI7 zLO#OYg?N))JUL$OAqsQ-W^D6LYc&QEaUb-Q)5S4S%_B_^jB(C3bz|cSu9{4CQE?%x zb;EtL=WfM3PEnx$xsO*_Le*Y95-oExP)|I%eeqHRL4fnLtx73H6xh1pZvreLR6(_i zX1WWy;7rcT3?r9_qM2^<_XtL*w?z4IoF+k{(Rx$Ke`@K@=2iF>Q6m*#y0L}(+0>-= z^O2e9u@jG9uH@uNhT=77q2`ea>e%Ld0?yXH;wk~#Q_BhUjzGNrYmd^b5P+!0H{gIC t>!TWPg&deqg>E-riLvXrpYaSEegVjcw9Pp=3w8hi002ovPDHLkV1jQCip~H4 diff --git a/assets/images/icon-pencil-14x14@2x.png b/assets/images/icon-pencil-14x14@2x.png deleted file mode 100644 index 730406b7e9369e72ba0e93b8fed60734522f1dee..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 439 zcmV;o0Z9IdP){JU#1+F}zOVdH-1RRAl2BLVQoJq{jHOdOsU=>sV zYvjHI_(ny` z5d-TT9k4YBcxKhz5i6|dl79Wn2yN%%fQ&hgcYFi{unWxBLs0mK$W5z-49iJ hlPG8D{qZX><_D7<@mG~dae002ovPDHLkV1fgbtxo^| diff --git a/assets/images/icon-plus-16x16@2x.png b/assets/images/icon-plus-16x16@2x.png deleted file mode 100644 index 6fa0f040337e9e6364c9e89452bea0d289aff9c0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 353 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=}XJ%V0W8u0LP-J)V+^gR&H&4iU##7l+ZQI1 z5V^qcj9GkT)uqG=&H`0_RfEsJ5;K$CQXgNOq|#^o+lwi5Mo(|b@6)2IuN7H7V42ep v=TP9l`+{{-r>4c`fwJ@(C5ZXxi*!>&5UA8?4G3BT z;7U-vv7-4fs03_#>wz{!;^22q- zy`6BLq##G_$+t55MjNX#z6-`QaV1%-97oL!Miq;hr@t30nS>xmQuja7Vr_nhNXdJ- zf{?FN5UP_nnSy1LEE+B_rI62=f+>f$P&S`Z3E@yt01jmdmQCWTjoEX<>rm&?=(IfL zn|!z&lXF-MTJ;*{X19f1^;KttV}%> )} - Download - download - + +

) : (

@@ -288,18 +286,18 @@ const PlatformWrapper = ({ )}{" "} - {copyMessage[packageType] && ( - {`${copyMessage[packageType]} `} - )} + {copyMessage[packageType] && ( + {`${copyMessage[packageType]} `} + )} @@ -344,13 +342,17 @@ const PlatformWrapper = ({ Osquery uses an enroll secret to authenticate with the Fleet server.
- Download - download icon - + +

{renderFleetCertificateBlock("plain")} @@ -368,10 +370,14 @@ const PlatformWrapper = ({ {fetchCertificateError} ) : ( - + )}

diff --git a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss index c4aff4918c..be9f866a48 100644 --- a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss +++ b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss @@ -85,11 +85,14 @@ } .buttons { - display: block; + display: flex; + flex-direction: row-reverse; align-items: center; - position: absolute; - right: 15px; + position: relative; top: 40px; + margin-right: $pad-medium; + height: 12px; + gap: $pad-small; a { display: flex; @@ -104,7 +107,7 @@ &__run-osquery-input { .buttons { - top: 12px; + top: 34px; } } @@ -147,12 +150,6 @@ } } - &__advanced--osqueryd { - .buttons { - top: 73px; - } - } - .download-certificate--tooltip { margin-bottom: 0; div { diff --git a/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx b/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx index f58c15d1b1..85fcaa0c19 100644 --- a/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx +++ b/frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx @@ -5,10 +5,9 @@ import { IEnrollSecret } from "interfaces/enroll_secret"; import Modal from "components/Modal"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import EnrollSecretTable from "../EnrollSecretTable"; -import PlusIcon from "../../../../assets/images/icon-plus-16x16@2x.png"; - interface IEnrollSecretModal { selectedTeam: number; onReturnToApp: () => void; @@ -90,7 +89,7 @@ const EnrollSecretModal = ({ variant="text-icon" > <> - Add secret Add secret icon + Add secret diff --git a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx index a8a9346826..7fdac85b2a 100644 --- a/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx +++ b/frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx @@ -78,7 +78,7 @@ const EnrollSecretRow = ({ className={`${baseClass}__copy-secret-icon`} onClick={onCopySecret} > - + - show/hide + diff --git a/frontend/components/buttons/ActionButtons/ActionButtons.tsx b/frontend/components/buttons/ActionButtons/ActionButtons.tsx index d80ddd4df2..994cc94d13 100644 --- a/frontend/components/buttons/ActionButtons/ActionButtons.tsx +++ b/frontend/components/buttons/ActionButtons/ActionButtons.tsx @@ -4,6 +4,8 @@ import Button from "components/buttons/Button"; import { ButtonVariant } from "components/buttons/Button/Button"; // @ts-ignore import DropdownButton from "components/buttons/DropdownButton"; +import Icon from "components/Icon/Icon"; + import MoreIcon from "../../../../assets/images/icon-more-menu-3x13@2x.png"; export interface IActionButtonProps { @@ -61,11 +63,7 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => { )) diff --git a/frontend/components/buttons/Button/Button.tsx b/frontend/components/buttons/Button/Button.tsx index c0ebb0c852..f5d5e1df2d 100644 --- a/frontend/components/buttons/Button/Button.tsx +++ b/frontend/components/buttons/Button/Button.tsx @@ -15,6 +15,8 @@ export type ButtonVariant = | "label" | "text-link" | "text-icon" + | "icon" // Buttons without text + | "small-icon" // Buttons without text | "inverse" | "inverse-alert" | "block" @@ -113,6 +115,7 @@ class Button extends React.Component { variant === "text-link" || variant === "inverse" || variant === "text-icon" || + variant === "icon" || variant === "label"; return ( diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index d73daeaee0..2111bd32a8 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -196,7 +196,10 @@ $base-class: "button"; } } - &--text-icon { + // &--icon, &--small-icon used for no text and svg icons + &--text-icon, + &--icon, + &--small-icon { @include button-variant(transparent); padding: 0; border: 0; @@ -223,7 +226,25 @@ $base-class: "button"; &:focus { color: $core-vibrant-blue-over; } + + // globally styled gap between text and icon + .children-wrapper { + gap: $pad-small; + } } + + &--icon { + svg { + padding: $pad-icon; + } + } + + &--small-icon { + svg { + padding: $pad-small; + } + } + &--small-text-icon { @include button-variant(transparent); margin-left: $pad-medium; diff --git a/frontend/components/buttons/RevealButton/_styles.scss b/frontend/components/buttons/RevealButton/_styles.scss index b31155aef1..88c3fe554d 100644 --- a/frontend/components/buttons/RevealButton/_styles.scss +++ b/frontend/components/buttons/RevealButton/_styles.scss @@ -2,5 +2,4 @@ display: inline-flex; align-items: center; padding: $pad-small $pad-xxsmall; // larger clickable area - gap: $pad-xsmall; } diff --git a/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx b/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx index f534e2ac78..0c9b0a43de 100644 --- a/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx +++ b/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx @@ -60,7 +60,7 @@ const InputFieldHiddenContent = ({ className={`${baseClass}__copy-secret-icon`} onClick={onCopySecret} > - + diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx index 52e236e277..b270d501d4 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx @@ -35,10 +35,6 @@ import SecretEditorModal from "../../../../components/EnrollSecrets/SecretEditor import AddHostsModal from "../../../../components/AddHostsModal"; import EnrollSecretModal from "../../../../components/EnrollSecrets/EnrollSecretModal"; -import EyeIcon from "../../../../../assets/images/icon-eye-16x16@2x.png"; -import PencilIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png"; -import TrashIcon from "../../../../../assets/images/icon-trash-14x14@2x.png"; - const baseClass = "team-details"; interface ITeamDetailsSubNavItem { @@ -418,21 +414,21 @@ const TeamDetailsWrapper = ({ type: "secondary", label: "Manage enroll secrets", buttonVariant: "text-icon", - icon: EyeIcon, + icon: "eye", onClick: toggleManageEnrollSecretsModal, }, { type: "secondary", label: "Edit team", buttonVariant: "text-icon", - icon: PencilIcon, + icon: "pencil", onClick: toggleEditTeamModal, }, { type: "secondary", label: "Delete team", buttonVariant: "text-icon", - icon: TrashIcon, + icon: "trash", hideAction: !isGlobalAdmin, onClick: toggleDeleteTeamModal, }, diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 4dd3852583..ff43ce20fb 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -60,6 +60,7 @@ import { import { getNextLocationPath } from "utilities/helpers"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; // @ts-ignore import Dropdown from "components/forms/fields/Dropdown"; import TableContainer from "components/TableContainer"; @@ -96,7 +97,6 @@ import DeleteHostModal from "../components/DeleteHostModal"; import DeleteLabelModal from "./components/DeleteLabelModal"; import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png"; import CloseIconBlack from "../../../../assets/images/icon-close-fleet-black-16x16@2x.png"; -import DownloadIcon from "../../../../assets/images/icon-download-12x12@2x.png"; import LabelFilterSelect from "./components/LabelFilterSelect"; import HostsFilterBlock from "./components/HostsFilterBlock"; @@ -1260,10 +1260,11 @@ const ManageHostsPage = ({ )} diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx index ff0a053027..9f3682ba69 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx @@ -4,12 +4,12 @@ * https://react-select.com/components */ import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import { ILabel } from "interfaces/label"; import React, { useRef } from "react"; import { components, GroupHeadingProps } from "react-select-5"; import { IEmptyOption, IGroupOption } from "../LabelFilterSelect/helpers"; -import PlusIcon from "../../../../../../assets/images/icon-plus-16x16@2x.png"; const baseClass = "custom-label-group-heading"; @@ -53,8 +53,8 @@ const CustomLabelGroupHeading = ( className={`${baseClass}__add-label-btn`} > <> - Add label - Add label icon + Add label + )} diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx index 593939acd3..9cd443ed0d 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx @@ -25,6 +25,7 @@ import { // @ts-ignore import Dropdown from "components/forms/fields/Dropdown"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import FilterPill from "../FilterPill"; import PoliciesFilter from "../PoliciesFilter"; @@ -32,8 +33,6 @@ import { MAC_SETTINGS_FILTER_OPTIONS } from "../../HostsPageConfig"; import DiskEncryptionStatusFilter from "../DiskEncryptionStatusFilter"; import BootstrapPackageStatusFilter from "../BootstrapPackageStatusFilter/BootstrapPackageStatusFilter"; -import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png"; -import TrashIcon from "../../../../../../assets/images/icon-trash-14x14@2x.png"; import PolicyIcon from "../../../../../../assets/images/icon-policy-fleet-black-12x12@2x.png"; const baseClass = "hosts-filter-block"; @@ -137,11 +136,11 @@ const HostsFilterBlock = ({ /> {label_type !== "builtin" && !isOnlyObserver && ( <> - - )} diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx index be88be9e37..05749a4564 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx @@ -8,11 +8,10 @@ import InputField from "components/forms/fields/InputField"; import Modal from "components/Modal"; import TooltipWrapper from "components/TooltipWrapper"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import { ITeam } from "interfaces/team"; -import CopyIcon from "../../../../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png"; - interface IRenderOSPolicyModal { onCreateNewPolicy: (team: ITeam) => void; onCancel: () => void; @@ -59,11 +58,11 @@ const OSPolicyModal = ({ >{`${copyMessage} `} )} diff --git a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx b/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx index 6ff5ba22e5..6255d8d351 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx +++ b/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx @@ -26,11 +26,11 @@ import RevealButton from "components/buttons/RevealButton"; import Checkbox from "components/forms/fields/Checkbox"; import TooltipWrapper from "components/TooltipWrapper"; import Spinner from "components/Spinner"; +import Icon from "components/Icon/Icon"; import AutoSizeInputField from "components/forms/fields/AutoSizeInputField"; import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip"; import SaveNewPolicyModal from "../SaveNewPolicyModal"; import InfoIcon from "../../../../../../assets/images/icon-info-purple-14x14@2x.png"; -import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png"; const baseClass = "policy-form"; @@ -288,7 +288,7 @@ const PolicyForm = ({ } return ( - ); @@ -365,16 +369,17 @@ const PolicyForm = ({ onKeyPress={onInputKeypress} isFocused={isEditingDescription} /> - setIsEditingDescription(true)} > - Edit name - + ); @@ -403,16 +408,17 @@ const PolicyForm = ({ onKeyPress={onInputKeypress} isFocused={isEditingResolution} /> - setIsEditingResolution(true)} > - Edit name - + ); diff --git a/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss index e8f64b4dc9..8c397d6c3a 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss +++ b/frontend/pages/policies/PolicyPage/components/PolicyForm/_styles.scss @@ -41,7 +41,8 @@ .edit-link { cursor: pointer; - padding-left: 12px; + padding-left: $pad-small; + height: 16px; } .name-description-resolve { @@ -82,8 +83,6 @@ } } .edit-icon { - width: 14px; - height: 14px; opacity: 1; transition: opacity 0.2s; margin-left: 0; diff --git a/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx b/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx index 97d305e0ec..e6a9fff91c 100644 --- a/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx +++ b/frontend/pages/policies/PolicyPage/components/QueryResults/QueryResults.tsx @@ -11,16 +11,16 @@ import { ICampaign } from "interfaces/campaign"; import { ITarget } from "interfaces/target"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import TabsWrapper from "components/TabsWrapper"; import InfoBanner from "components/InfoBanner"; import ShowQueryModal from "components/modals/ShowQueryModal"; + import QueryResultsHeading from "components/queries/queryResults/QueryResultsHeading"; import AwaitingResults from "components/queries/queryResults/AwaitingResults"; import PolicyQueryTable from "../PolicyQueriesTable/PolicyQueriesTable"; import PolicyQueriesErrorsTable from "../PolicyQueriesErrorsTable/PolicyQueriesErrorsTable"; -import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png"; -import EyeIcon from "../../../../../../assets/images/icon-eye-16x16@2x.png"; interface IQueryResultsProps { campaign: ICampaign; @@ -115,10 +115,10 @@ const QueryResults = ({ diff --git a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx index e5a121ec74..8dd9211ff6 100644 --- a/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx +++ b/frontend/pages/queries/QueryPage/components/QueryForm/QueryForm.tsx @@ -24,10 +24,10 @@ import Button from "components/buttons/Button"; import RevealButton from "components/buttons/RevealButton"; import Checkbox from "components/forms/fields/Checkbox"; import Spinner from "components/Spinner"; +import Icon from "components/Icon/Icon"; import AutoSizeInputField from "components/forms/fields/AutoSizeInputField"; import NewQueryModal from "../NewQueryModal"; import InfoIcon from "../../../../../../assets/images/icon-info-purple-14x14@2x.png"; -import PencilIcon from "../../../../../../assets/images/icon-pencil-14x14@2x.png"; const baseClass = "query-form"; @@ -344,13 +344,17 @@ const QueryForm = ({ onKeyPress={onInputKeypress} isFocused={isEditingName} /> - setIsEditingName(true)}> - Edit name setIsEditingName(true)} + > + - + ); @@ -376,16 +380,17 @@ const QueryForm = ({ onKeyPress={onInputKeypress} isFocused={isEditingDescription} /> - setIsEditingDescription(true)} > - Edit name - + ); diff --git a/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss b/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss index 683b2bd189..b46777bce8 100644 --- a/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss +++ b/frontend/pages/queries/QueryPage/components/QueryForm/_styles.scss @@ -41,7 +41,8 @@ .edit-link { cursor: pointer; - padding-left: 12px; + padding-left: $pad-small; + height: 16px; } .name-description { diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx index d6a06193d0..471ab27f42 100644 --- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx +++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx @@ -11,6 +11,7 @@ import { ICampaign } from "interfaces/campaign"; import { ITarget } from "interfaces/target"; import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; import TableContainer from "components/TableContainer"; import TabsWrapper from "components/TabsWrapper"; import ShowQueryModal from "components/modals/ShowQueryModal"; @@ -19,9 +20,6 @@ import AwaitingResults from "components/queries/queryResults/AwaitingResults"; import resultsTableHeaders from "./QueryResultsTableConfig"; -import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png"; -import EyeIcon from "../../../../../../assets/images/icon-eye-16x16@2x.png"; - interface IQueryResultsProps { campaign: ICampaign; isQueryFinished: boolean; @@ -134,10 +132,10 @@ const QueryResults = ({ diff --git a/frontend/styles/var/padding.scss b/frontend/styles/var/padding.scss index d8110439e6..91b426edcd 100644 --- a/frontend/styles/var/padding.scss +++ b/frontend/styles/var/padding.scss @@ -2,6 +2,7 @@ $pad-auto: auto; $pad-xxsmall: px-to-rem(2); $pad-xsmall: px-to-rem(4); $pad-small: px-to-rem(8); +$pad-icon: px-to-rem(14); $pad-medium: px-to-rem(16); $pad-large: px-to-rem(24); $pad-xlarge: px-to-rem(32);