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"

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

@@ -25,7 +25,7 @@ const Index: FC<Props> = ({ id }) => {
   }
 
   return (
-    <Card>
+    <Card className="answer_related-questions">
       <Card.Header>{t('title')}</Card.Header>
       <ListGroup variant="flush">
         {data?.list?.map((item) => {

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

@@ -211,7 +211,7 @@ const Index = () => {
   }
 
   return (
-    <Row className="questionDetailPage pt-4 mb-5">
+    <Row className="answer_question-detail-page questionDetailPage pt-4 mb-5">
       <Col className="page-main flex-auto">
         {question?.operation?.level && <Alert data={question.operation} />}
         {isLoading ? (

ui/src/pages/Search/components/SearchItem/index.tsx

@@ -28,8 +28,8 @@ const Index: FC<Props> = ({ data }) => {
   }
 
   return (
-    <ListGroupItem className="py-3 px-0 border-start-0 border-end-0 bg-transparent">
-      <div className="mb-2 clearfix">
+    <ListGroupItem className="answer_search-result py-3 px-0 border-start-0 border-end-0 bg-transparent">
+      <div className="answer_search-result-title mb-2 clearfix">
         <span
           className="float-start me-2 badge text-bg-dark"
           style={{ marginTop: '2px' }}>
@@ -65,7 +65,7 @@ const Index: FC<Props> = ({ data }) => {
       </div>
 
       {data.object?.excerpt && (
-        <p className="small text-truncate-2 mb-2 last-p text-break">
+        <p className="answer_search-result-preview small text-truncate-2 mb-2 last-p text-break">
           {escapeRemove(data.object.excerpt)}
         </p>
       )}

ui/src/pages/Search/components/Tips/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation, Trans } from 'react-i18next';
 const Index: FC = () => {
   const { t } = useTranslation();
   return (
-    <Card>
+    <Card className="answer_search-tips">
       <Card.Header>{t('search.tips.title')}</Card.Header>
       <Card.Body className="small ext-secondary">
         <div className="mb-1">

ui/src/pages/Search/index.tsx

@@ -79,7 +79,7 @@ const Index = () => {
 
   return (
     <Row className="pt-4 mb-5">
-      <Col className="page-main flex-auto">
+      <Col className="answer_search-result-list page-main flex-auto">
         <Head data={extra} />
         <SearchHead sort={order} count={count} />
         <ListGroup className="rounded-0 mb-5">