Frontend: Standardize modal and modal button code (#7740)

This commit is contained in:
RachelElysia 2022-10-03 15:11:36 -04:00 committed by GitHub
parent c0bb0cc4e7
commit ecb7c333d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 12 additions and 70 deletions

View File

@ -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)}

View File

@ -157,11 +157,4 @@
font-size: $x-small;
}
}
&__policy-modal {
.done {
margin-top: $pad-large;
display: flex;
justify-content: flex-end;
}
}
}

View File

@ -124,7 +124,7 @@ const HostStatusWebhook = ({
}}
/>
</div>
<div className="flex-end">
<div className="modal-cta-wrap">
<Button type="button" onClick={toggleHostStatusWebhookPreviewModal}>
Done
</Button>

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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 {

View File

@ -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;
}
}

View File

@ -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;
}