feat(css): Add specific classes for customization purposes

Author: heubeck

ui/src/components/Comment/index.tsx

@@ -309,7 +309,7 @@ const Comment = ({ objectId, mode, commentId }) => {
     );
   };
   return (
-    <div className="comments-wrap">
+    <div className="answer_comments comments-wrap">
       {comments.map((item, index) => {
         return (
           <div

ui/src/components/FollowingTags/index.tsx

@@ -35,7 +35,7 @@ const Index: FC = () => {
     return null;
   }
   return isEdit ? (
-    <Card className="mb-4">
+    <Card className="answer_following-tags mb-4">
       <Card.Header className="text-nowrap d-flex justify-content-between">
         {t('following_tags')}
         <Button
@@ -56,7 +56,7 @@ const Index: FC = () => {
       </Card.Body>
     </Card>
   ) : (
-    <Card className="mb-4">
+    <Card className="answer_following-tags mb-4">
       <Card.Header className="text-nowrap d-flex justify-content-between text-capitalize">
         {t('following_tags')}
         <Button

ui/src/components/Footer/index.tsx

@@ -11,7 +11,7 @@ const Index = () => {
   const siteName = siteInfoStore((state) => state.siteInfo.name);
   const cc = `${fullYear} ${siteName}`;
   return (
-    <footer className="bg-light">
+    <footer className="answer_footer bg-light">
       <Container className="py-3">
         <p className="text-center mb-0 small text-secondary">
           <Trans i18nKey="footer.build_on" values={{ cc }}>

ui/src/components/Header/index.tsx

@@ -112,7 +112,7 @@ const Header: FC = () => {
     <Navbar
       variant={navbarStyle === 'theme-colored' ? 'dark' : ''}
       expand="lg"
-      className={classnames('sticky-top', navbarStyle)}
+      className={classnames('answer_header', 'sticky-top', navbarStyle)}
       id="header">
       <Container className="d-flex align-items-center">
         <Navbar.Toggle

ui/src/components/HotQuestions/index.tsx

@@ -14,7 +14,7 @@ const HotQuestions: FC = () => {
     return null;
   }
   return (
-    <Card>
+    <Card className="answer_hot-questions">
       <Card.Header className="text-nowrap text-capitalize">
         {t('hot_questions')}
       </Card.Header>

ui/src/components/PluginRender/index.tsx

@@ -60,7 +60,7 @@ const Index: FC<Props> = ({ slug_name, type, children, ...props }) => {
         const PluginFC = ps.component;
         return (
           // @ts-ignore
-          <PluginFC key={ps.info.slug_name} {...props}>
+          <PluginFC className="answer_plugin" key={ps.info.slug_name} {...props}>
             {children}
           </PluginFC>
         );

ui/src/components/QuestionList/index.tsx

@@ -47,7 +47,7 @@ const QuestionList: FC<Props> = ({
   const count = data?.count || 0;
   return (
     <div>
-      <div className="mb-3 d-flex flex-wrap justify-content-between">
+      <div className="answer_questions-head mb-3 d-flex flex-wrap justify-content-between">
         <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
           {source === 'questions'
             ? t('all_questions')
@@ -60,7 +60,7 @@ const QuestionList: FC<Props> = ({
           i18nKeyPrefix="question"
         />
       </div>
-      <ListGroup className="rounded-0">
+      <ListGroup className="answer_questions-list rounded-0">
         {isLoading ? (
           <QuestionListLoader />
         ) : (

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -3,6 +3,8 @@ import { Button, Alert, Badge } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Link, useSearchParams } from 'react-router-dom';
 
+import classNames from 'classnames';
+
 import {
   Actions,
   Operate,
@@ -73,7 +75,13 @@ const Index: FC<Props> = ({
   }
 
   return (
-    <div id={data.id} ref={answerRef} className="answer-item py-4">
+    <div
+      id={data.id}
+      ref={answerRef}
+      className={classNames(
+        'answer_answer answer-item py-4',
+        data?.accepted === 2 && 'answer_answer-accepted',
+      )}>
       {data.status === 10 && (
         <Alert variant="danger" className="mb-4">
           {t('post_deleted', { keyPrefix: 'messages' })}

ui/src/pages/Questions/Detail/components/InviteToAnswer/index.tsx

@@ -95,7 +95,7 @@ const Index: FC<Props> = ({ questionId, readOnly = false }) => {
   }
 
   return (
-    <Card className="mt-4">
+    <Card className="answer_people-asked mt-4">
       <Card.Header className="text-nowrap d-flex justify-content-between text-capitalize">
         {t('title')}
         {showSaveButton ? (

ui/src/pages/Questions/Detail/components/Question/index.tsx

@@ -65,8 +65,8 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
   }
 
   return (
-    <div>
-      <h1 className="h3 mb-3 text-wrap text-break">
+    <div className="answer_question-asked">
+      <h1 className="answer_question-title h3 mb-3 text-wrap text-break">
         {data?.pin === 2 && (
           <Icon
             name="pin-fill"