mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
Frontend: Standardize modal and modal button code (#7740)
This commit is contained in:
parent
c0bb0cc4e7
commit
ecb7c333d2
@ -303,7 +303,7 @@ const WelcomeHost = ({
|
||||
<b>Resolve:</b> {currentPolicyShown.resolution}
|
||||
</p>
|
||||
)}
|
||||
<div className="done">
|
||||
<div className="modal-cta-wrap">
|
||||
<Button
|
||||
variant="brand"
|
||||
onClick={() => setShowPolicyModal(false)}
|
||||
|
@ -157,11 +157,4 @@
|
||||
font-size: $x-small;
|
||||
}
|
||||
}
|
||||
&__policy-modal {
|
||||
.done {
|
||||
margin-top: $pad-large;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -124,7 +124,7 @@ const HostStatusWebhook = ({
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-end">
|
||||
<div className="modal-cta-wrap">
|
||||
<Button type="button" onClick={toggleHostStatusWebhookPreviewModal}>
|
||||
Done
|
||||
</Button>
|
||||
|
@ -71,7 +71,7 @@ const Statistics = ({
|
||||
__html: syntaxHighlight(usageStatsPreview),
|
||||
}}
|
||||
/>
|
||||
<div className="flex-end">
|
||||
<div className="modal-cta-wrap">
|
||||
<Button type="button" onClick={toggleUsageStatsPreviewModal}>
|
||||
Done
|
||||
</Button>
|
||||
|
@ -1,9 +0,0 @@
|
||||
.device-user-info {
|
||||
&__modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
}
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
.delete-host-modal {
|
||||
&__modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
}
|
||||
}
|
@ -21,7 +21,7 @@ interface IRenderOSPolicyModal {
|
||||
osPolicyLabel: string;
|
||||
}
|
||||
|
||||
const baseClass = "render-os-policy-modal";
|
||||
const baseClass = "os-policy-modal";
|
||||
|
||||
const RenderOSPolicyModal = ({
|
||||
onCancel,
|
||||
@ -70,11 +70,7 @@ const RenderOSPolicyModal = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="Operating system"
|
||||
onExit={onCancel}
|
||||
className={`${baseClass}__modal`}
|
||||
>
|
||||
<Modal title="Operating system" onExit={onCancel} className={baseClass}>
|
||||
<>
|
||||
<p>
|
||||
<span className={`${baseClass}__os-modal-title`}>
|
||||
@ -98,12 +94,12 @@ const RenderOSPolicyModal = ({
|
||||
value={osPolicy}
|
||||
/>
|
||||
<div className="modal-cta-wrap">
|
||||
<Button onClick={onCancel} variant="inverse">
|
||||
Close
|
||||
</Button>
|
||||
<Button onClick={onCreateNewPolicy} variant="brand">
|
||||
Create new policy
|
||||
</Button>
|
||||
<Button onClick={onCancel} variant="inverse">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
|
@ -1,12 +1,4 @@
|
||||
.render-os-policy-modal {
|
||||
&__modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
}
|
||||
|
||||
.os-policy-modal {
|
||||
&__os-modal-title {
|
||||
padding-right: $pad-medium;
|
||||
font-size: $medium;
|
||||
|
@ -93,8 +93,10 @@ const SelectQueryModal = ({
|
||||
Expecting to see queries? Try again in a few seconds as the system
|
||||
catches up.
|
||||
</span>
|
||||
<div className="modal-cta-wrap">
|
||||
{!isOnlyObserver && customQueryButton()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -1,12 +1,4 @@
|
||||
.select-query-modal {
|
||||
&__modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
}
|
||||
|
||||
&__no-queries {
|
||||
.info {
|
||||
&__header {
|
||||
|
@ -1,9 +0,0 @@
|
||||
.transfer-host-modal {
|
||||
&__modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
}
|
||||
}
|
@ -1,10 +1,4 @@
|
||||
.add-policy-modal {
|
||||
@include position(absolute, 22px null null null);
|
||||
background-color: $core-white;
|
||||
width: 658px;
|
||||
padding: $pad-xxlarge;
|
||||
border-radius: $pad-small;
|
||||
|
||||
&__policy-selection {
|
||||
padding: $pad-large 0;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user