Merge branch 'feat/ui-v0.4' into 'test'

Feat/ui v0.4

See merge request opensource/answer!256

i18n/en_US.yaml

@@ -511,6 +511,7 @@ ui:
     search_tag: Search tag
     hint: "Describe what your question is about, at least one tag is required."
     no_result: No tags matched
+    tag_required_text: Required tag (at least one)
   header:
     nav:
       question: Questions

ui/src/components/Comment/index.tsx

@@ -239,7 +239,7 @@ const Comment = ({ objectId, mode }) => {
                 onCancel={() => handleCancel(item.comment_id)}
               />
             ) : (
-              <div className="d-flex">
+              <div className="d-block">
                 {item.reply_user_display_name && (
                   <Link to="." className="fs-14 me-1 text-nowrap">
                     @{item.reply_user_display_name}

ui/src/components/TagSelector/index.tsx

@@ -19,6 +19,7 @@ interface IProps {
   onBlur?: () => void;
   hiddenDescription?: boolean;
   hiddenCreateBtn?: boolean;
+  showRequiredTagText?: boolean;
   alwaysShowAddBtn?: boolean;
 }
 
@@ -32,6 +33,7 @@ const TagSelector: FC<IProps> = ({
   hiddenDescription = false,
   hiddenCreateBtn = false,
   alwaysShowAddBtn = false,
+  showRequiredTagText = false,
 }) => {
   const [initialValue, setInitialValue] = useState<Type.Tag[]>([...value]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
@@ -224,14 +226,16 @@ const TagSelector: FC<IProps> = ({
                   </Form>
                 </Dropdown.Header>
               )}
-              {tags && tags.filter((v) => v.recommend)?.length > 0 && (
-                <Dropdown.Item
-                  disabled
-                  style={{ fontWeight: 500 }}
-                  className="text-secondary">
-                  Required tag (at least one)
-                </Dropdown.Item>
-              )}
+              {showRequiredTagText &&
+                tags &&
+                tags.filter((v) => v.recommend)?.length > 0 && (
+                  <Dropdown.Item
+                    disabled
+                    style={{ fontWeight: 500 }}
+                    className="text-secondary">
+                    {t('tag_required_text')}
+                  </Dropdown.Item>
+                )}
 
               {tags?.map((item, index) => {
                 return (

ui/src/pages/Legal/Privacy/index.tsx

@@ -1,8 +1,11 @@
 import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useLegalPrivacy } from '@/services';
+import { PageTitle } from '@/components';
 
 const Index: FC = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
   const { data: privacy } = useLegalPrivacy();
   const contentText = privacy?.privacy_policy_original_text;
   let matchUrl: URL | undefined;
@@ -16,13 +19,18 @@ const Index: FC = () => {
     window.location.replace(matchUrl.toString());
     return null;
   }
+
   return (
-    <div
-      className="fmt fs-14"
-      dangerouslySetInnerHTML={{
-        __html: privacy?.privacy_policy_parsed_text || '',
-      }}
-    />
+    <>
+      <PageTitle title={t('privacy')} />
+      <h3>{t('privacy')}</h3>
+      <div
+        className="fmt"
+        dangerouslySetInnerHTML={{
+          __html: privacy?.privacy_policy_parsed_text || '',
+        }}
+      />
+    </>
   );
 };
 

ui/src/pages/Legal/Tos/index.tsx

@@ -1,8 +1,11 @@
 import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useLegalTos } from '@/services';
+import { PageTitle } from '@/components';
 
 const Index: FC = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
   const { data: tos } = useLegalTos();
   const contentText = tos?.terms_of_service_original_text;
   let matchUrl: URL | undefined;
@@ -17,12 +20,16 @@ const Index: FC = () => {
     return null;
   }
   return (
-    <div
-      className="fmt fs-14"
-      dangerouslySetInnerHTML={{
-        __html: tos?.terms_of_service_parsed_text || '',
-      }}
-    />
+    <>
+      <PageTitle title={t('tos')} />
+      <h3>{t('tos')}</h3>
+      <div
+        className="fmt"
+        dangerouslySetInnerHTML={{
+          __html: tos?.terms_of_service_parsed_text || '',
+        }}
+      />
+    </>
   );
 };
 

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

@@ -348,6 +348,7 @@ const Ask = () => {
                 <TagSelector
                   value={formData.tags.value}
                   onChange={handleTagsChange}
+                  showRequiredTagText
                 />
                 <Form.Control.Feedback type="invalid">
                   {formData.tags.errorMsg}