Merge pull request #485 from answerdev/feat/1.1.2/ui

Feat/1.1.2/UI

Author: dashuai

ui/src/components/BaseUserCard/index.tsx

@@ -24,7 +24,7 @@ const Index: FC<Props> = ({
   showReputation = true,
 }) => {
   return (
-    <div className={`text-secondary ${className}`}>
+    <div className={`d-flex align-items-center  text-secondary ${className}`}>
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data?.username}`}>
           {showAvatar && (
@@ -36,7 +36,9 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-break">{data?.display_name}</span>
+          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
+            {data?.display_name}
+          </span>
         </Link>
       ) : (
         <>
@@ -49,7 +51,9 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-break">{data?.display_name}</span>
+          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
+            {data?.display_name}
+          </span>
         </>
       )}
 

ui/src/components/Counts/index.tsx

@@ -30,10 +30,9 @@ const Index: FC<Props> = ({
   const { t } = useTranslation('translation', { keyPrefix: 'counts' });
 
   return (
-    <div
-      className={classname('d-flex align-items-center flex-wrap', className)}>
+    <div className={classname('d-flex align-items-center', className)}>
       {showVotes && (
-        <div className="d-flex align-items-center flex-shrink-0">
+        <div className="d-flex align-items-center">
           <Icon name="hand-thumbs-up-fill me-1" />
           <span>
             {data.votes} {t('votes')}
@@ -42,15 +41,15 @@ const Index: FC<Props> = ({
       )}
 
       {showAccepted && (
-        <div className="d-flex align-items-center ms-3 text-success flex-shrink-0">
+        <div className="d-flex align-items-center ms-3 text-success">
           <Icon name="check-circle-fill me-1" />
           <span>{t('accepted')}</span>
         </div>
       )}
 
       {showAnswers && (
         <div
-          className={`d-flex align-items-center ms-3 flex-shrink-0 ${
+          className={`d-flex align-items-center ms-3 ${
             isAccepted ? 'text-success' : ''
           }`}>
           {isAccepted ? (
@@ -64,7 +63,7 @@ const Index: FC<Props> = ({
         </div>
       )}
       {showViews && (
-        <span className="summary-stat ms-3 flex-shrink-0">
+        <span className="summary-stat ms-3">
           <Icon name="eye-fill" />
           <em className="fst-normal ms-1">
             {data.views} {t('views')}

ui/src/components/QuestionList/index.tsx

@@ -84,10 +84,8 @@ const QuestionList: FC<Props> = ({
                     {li.status === 2 ? ` [${t('closed')}]` : ''}
                   </NavLink>
                 </h5>
-                <div
-                  className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary flex-wrap"
-                  style={{ gap: '0.5rem' }}>
-                  <div className="d-flex flex-shrink-0 me-0 me-md-3 flex-nowrap">
+                <div className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary">
+                  <div className="d-flex">
                     <BaseUserCard
                       data={li.operator}
                       showAvatar={false}
@@ -107,7 +105,7 @@ const QuestionList: FC<Props> = ({
                       views: li.view_count,
                     }}
                     isAccepted={li.accepted_answer_id >= 1}
-                    className="justify-content-start-end justify-content-md-end flex-fill"
+                    className="ms-0 ms-md-3 mt-2 mt-md-0"
                   />
                 </div>
                 <div className="question-tags m-n1">

ui/src/components/SchemaForm/index.tsx

@@ -365,10 +365,7 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
               {fieldState?.errorMsg}
             </Form.Control.Feedback>
             {description ? (
-              <Form.Text
-                className="text-muted"
-                dangerouslySetInnerHTML={{ __html: description }}
-              />
+              <Form.Text dangerouslySetInnerHTML={{ __html: description }} />
             ) : null}
           </Form.Group>
         );

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -355,7 +355,7 @@ const Index: React.FC = () => {
                       className="me-3 rounded"
                       alt={formData.display_name.value}
                     />
-                    <Form.Text className="text-muted mt-1">
+                    <Form.Text className="mt-1">
                       <span>{t('avatar.gravatar_text')}</span>
                       <a
                         href={
@@ -399,7 +399,7 @@ const Index: React.FC = () => {
                         </Button>
                       </ButtonGroup>
                     </Stack>
-                    <Form.Text className="text-muted mt-1">
+                    <Form.Text className="mt-1">
                       <Trans i18nKey="settings.profile.avatar.text">
                         You can upload your image.
                       </Trans>