fix: keep style intact for external modal components

newrelic · Oct 29, 2023 · a5e880e · a5e880e
1 parent 1d2457e
commit a5e880e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/components/configure/modal-tag.js b/components/configure/modal-tag.js
@@ -69,7 +69,7 @@ export default class TagsModal extends React.PureComponent {
         <div className="tag-container">
           <HeadingText
             type={HeadingText.TYPE.HEADING_4}
-            className="add-dependancy-heading"
+            className="add-dependancy-heading modal-heading"
           >
             {' '}
             Add External Dependency Tags
@@ -87,6 +87,7 @@ export default class TagsModal extends React.PureComponent {
           >
             <StackItem>
               <Button
+                className="modal-button"
                 type={Button.TYPE.TERTIARY}
                 onClick={() => {
                   onClose(tags);
@@ -97,6 +98,7 @@ export default class TagsModal extends React.PureComponent {
             </StackItem>
             <StackItem>
               <Button
+                className="modal-button"
                 onClick={this.addTag}
                 type={Button.TYPE.PRIMARY}
                 iconType={Button.ICON_TYPE.INTERFACE__SIGN__PLUS}

diff --git a/nerdlets/status-page-dashboard/main-page.js b/nerdlets/status-page-dashboard/main-page.js
@@ -627,21 +627,26 @@ export default class StatusPagesDashboard extends React.PureComponent {
           hidden={!deleteTileModalActive}
           onClose={() => this.setState({ deleteTileModalActive: false })}
         >
-          <HeadingText type={HeadingText.TYPE.HEADING_2}>
+          <HeadingText
+            className="modal-heading"
+            type={HeadingText.TYPE.HEADING_2}
+          >
             Are you sure you want to delete this service?
           </HeadingText>
-          <p>
+          <p className="modal-paragraph">
             This cannot be undone. Please confirm whether or not you want to
             delete this service from your status pages.
           </p>
 
           <Button
+            className="modal-button"
             type={Button.TYPE.PRIMARY}
             onClick={() => this.setState({ deleteTileModalActive: false })}
           >
             Cancel
           </Button>
           <Button
+            className="modal-button"
             type={Button.TYPE.DESTRUCTIVE}
             onClick={this.deleteHostName}
             iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__TRASH}
@@ -654,10 +659,13 @@ export default class StatusPagesDashboard extends React.PureComponent {
           hidden={!createTileModalActive}
           onClose={() => this.setState({ createTileModalActive: false })}
         >
-          <HeadingText type={HeadingText.TYPE.HEADING_2}>
+          <HeadingText
+            className="modal-heading"
+            type={HeadingText.TYPE.HEADING_2}
+          >
             Add new service
           </HeadingText>
-          <p>
+          <p className="modal-paragraph">
             Select a common services from the "quick setup" dropdown below, or
             provide the information needed to determine the status of the
             service you'd like to add. You will be able to edit this information
@@ -741,12 +749,17 @@ export default class StatusPagesDashboard extends React.PureComponent {
           />
 
           <Button
+            className="modal-button"
             type={Button.TYPE.TERTIARY}
             onClick={() => this.setState({ createTileModalActive: false })}
           >
             Cancel
           </Button>
-          <Button type={Button.TYPE.PRIMARY} onClick={this.handleAddNewService}>
+          <Button
+            className="modal-button"
+            type={Button.TYPE.PRIMARY}
+            onClick={this.handleAddNewService}
+          >
             Add new service
           </Button>
         </Modal>

diff --git a/nerdlets/status-page-dashboard/styles.scss b/nerdlets/status-page-dashboard/styles.scss
@@ -877,22 +877,16 @@ button[class*='Dropdown-trigger'],
   }
 }
 
-[class*='InnerModal-content'] {
-  [class*='Text--type-heading'] {
-    margin-bottom: 16px;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 32px;
-    color: #000d0d;
-  }
+.modal-heading {
+  margin-bottom: 16px;
+}
 
-  p {
-    margin-bottom: 16px;
-  }
+.modal-paragraph {
+  margin-bottom: 16px;
+}
 
-  button {
-    margin-right: 8px;
-  }
+.modal-button {
+  margin-right: 8px;
 }
 
 [class*='InnerModal'] {