fix(content-answers): add bdl prefix into the styles (#3421)

Co-authored-by: Jerry Jiang <[email protected]>

Author: TaoJiang98

src/features/content-answers/ContentAnswers.tsx

@@ -25,7 +25,7 @@ const ContentAnswers = ({ fileExtension }: Props) => {
     };
 
     return (
-        <div className="ContentAnswers">
+        <div className="bdl-ContentAnswers">
             <ContentAnswersOpenButton fileExtension={fileExtension} onClick={handleClick} />
             <ContentAnswersModal isOpen={isModalOpen} onRequestClose={handleClose} />
         </div>

src/features/content-answers/ContentAnswersModal.scss

@@ -1,6 +1,6 @@
 @import '../../styles/variables';
 
-.ContentAnswersModal {
+.bdl-ContentAnswersModal {
     .modal-dialog-container {
         display: flex;
         flex-basis: 0;
@@ -30,7 +30,7 @@
             align-items: center;
         }
 
-        .BoxAiLogo {
+        .bdl-BoxAiLogo {
             margin-right: 12px;
         }
     }

src/features/content-answers/ContentAnswersModal.tsx

@@ -19,13 +19,18 @@ type Props = {
 const ContentAnswersModal = ({ isOpen, onRequestClose }: Props) => {
     return (
         <Modal
-            className="ContentAnswersModal"
+            className="bdl-ContentAnswersModal"
             data-testid="content-answers-modal"
             isOpen={isOpen}
             onRequestClose={onRequestClose}
             title={
                 <>
-                    <BoxAiLogo className="BoxAiLogo" data-testid="content-answers-icon-color" width={32} height={32} />
+                    <BoxAiLogo
+                        className="bdl-BoxAiLogo"
+                        data-testid="content-answers-icon-color"
+                        width={32}
+                        height={32}
+                    />
                     <FormattedMessage {...messages.contentAnswersTitle} />
                 </>
             }

src/features/content-answers/ContentAnswersModalContent.scss

@@ -1,6 +1,6 @@
 @import '../../styles/variables';
 
-.ContentAnswersModalContent {
+.bdl-ContentAnswersModalContent {
     flex: 1 1 auto;
     width: auto;
     padding: 0 20px 20px 20px;

src/features/content-answers/ContentAnswersModalContent.tsx

@@ -4,7 +4,7 @@ import './ContentAnswersModalContent.scss';
 
 const ContentAnswersModalContent = () => {
     // TODO: Add Modal Content Detail
-    return <div className="ContentAnswersModalContent">Modal Content</div>;
+    return <div className="bdl-ContentAnswersModalContent">Modal Content</div>;
 };
 
 export default ContentAnswersModalContent;

src/features/content-answers/ContentAnswersModalFooter.scss

@@ -1,6 +1,6 @@
 @import '../../styles/variables';
 
-.ContentAnswersModalFooter {
+.bdl-ContentAnswersModalFooter {
     position: relative;
     z-index: 1;
     display: flex;
@@ -10,12 +10,12 @@
     border-radius: 0 0 $bdl-border-radius-size-xlarge $bdl-border-radius-size-xlarge;
     box-shadow: 0 0 8px rgba(0, 0, 0, .05), 0 -1px 0 $bdl-gray-10;
 
-    .ContentAnswersModalFooter-avatar {
+    .bdl-ContentAnswersModalFooter-avatar {
         height: 32px;
         margin-bottom: 4px;
     }
 
-    .ContentAnswersModalFooter-submitButton {
+    .bdl-ContentAnswersModalFooter-submitButton {
         height: $bdl-btn-height-large;
         margin: 0;
         font-size: 14px;

src/features/content-answers/ContentAnswersModalFooter.tsx

@@ -32,8 +32,8 @@ const ContentAnswersModalFooter = ({ intl }: Props) => {
     };
 
     return (
-        <div className="ContentAnswersModalFooter">
-            <div className="ContentAnswersModalFooter-avatar">
+        <div className="bdl-ContentAnswersModalFooter">
+            <div className="bdl-ContentAnswersModalFooter-avatar">
                 <Avatar />
             </div>
             <TextArea
@@ -52,7 +52,7 @@ const ContentAnswersModalFooter = ({ intl }: Props) => {
                 value={inputMessage}
             />
             <PrimaryButton
-                className="ContentAnswersModalFooter-submitButton"
+                className="bdl-ContentAnswersModalFooter-submitButton"
                 data-testid="content-answers-submit-button"
                 isDisabled={isSubmitDisabled}
             >