Merge pull request #372 from answerdev/feat/1.1.0/ui

style: Remove unnecessary `fs-14` and replace it with `small`
2023-05-25 10:44:12 +08:00 · 2023-05-25 10:44:12 +08:00 · 2f60a3e061
parent 37cc7b0bfd 69df077d40
commit 2f60a3e061
46 changed files with 84 additions and 86 deletions
--- a/ui/src/common/interface.ts
+++ b/ui/src/common/interface.ts
@ -109,6 +109,15 @@ enum RoleId {
  Admin = 2,
  Moderator = 3,
 }
+
+export interface User {
+  username: string;
+  rank: number;
+  vote_count: number;
+  display_name: string;
+  avatar: string;
+}
+
 export interface UserInfoBase {
  id?: string;
  avatar: any;
@ -540,14 +549,6 @@ export interface MemberActionItem {
  type: string;
 }

-export interface User {
-  username: string;
-  rank: number;
-  vote_count: number;
-  display_name: string;
-  avatar: string;
-}
-
 export interface QuestionOperationReq {
  id: string;
  operation: 'pin' | 'unpin' | 'hide' | 'show';
--- a/ui/src/components/BaseUserCard/index.tsx
+++ b/ui/src/components/BaseUserCard/index.tsx
@ -19,7 +19,7 @@ const Index: FC<Props> = ({
  showAvatar = true,
  avatarClass = '',
  avatarSize = '20px',
-  className = 'fs-14',
+  className = 'small',
  avatarSearchStr = 's=48',
  showReputation = true,
 }) => {
--- a/ui/src/components/Comment/components/ActionBar/index.tsx
+++ b/ui/src/components/Comment/components/ActionBar/index.tsx
@ -22,7 +22,7 @@ const ActionBar = ({
  const { t } = useTranslation('translation', { keyPrefix: 'comment' });

  return (
-    <div className="d-flex justify-content-between fs-14">
+    <div className="d-flex justify-content-between small">
      <div className="d-flex align-items-center link-secondary">
        {userStatus !== 'deleted' ? (
          <Link to={`/users/${username}`}>{nickName}</Link>
--- a/ui/src/components/Comment/components/Reply/index.tsx
+++ b/ui/src/components/Comment/components/Reply/index.tsx
@ -33,7 +33,7 @@ const Index = ({ userName, onSendReply, onCancel, mode }) => {

  return (
    <div className="mb-2">
-      <div className="fs-14 mb-2">
+      <div className="small mb-2">
        {t('reply_to')} {userName}
      </div>
      <div className="d-flex mb-1 align-items-start flex-column flex-md-row">
--- a/ui/src/components/Comment/index.tsx
+++ b/ui/src/components/Comment/index.tsx
@ -258,13 +258,13 @@ const Comment = ({ objectId, mode, commentId }) => {
            ) : (
              <div className="d-block">
                {item.reply_user_display_name && (
-                  <Link to="." className="fs-14 me-1 text-nowrap">
+                  <Link to="." className="small me-1 text-nowrap">
                    @{item.reply_user_display_name}
                  </Link>
                )}

                <div
-                  className="fmt fs-14 text-break text-wrap"
+                  className="fmt small text-break text-wrap"
                  dangerouslySetInnerHTML={{ __html: item.parsed_text }}
                />
              </div>
@ -306,7 +306,7 @@ const Comment = ({ objectId, mode, commentId }) => {
      <div className="mt-2">
        <Button
          variant="link"
-          className="p-0 fs-14 btn-no-border"
+          className="p-0 small btn-no-border"
          onClick={() => {
            if (tryNormalLogged(true)) {
              setVisibleComment(!visibleComment);
@ -317,7 +317,7 @@ const Comment = ({ objectId, mode, commentId }) => {
        {data && (pageIndex || 1) < Math.ceil((data?.count || 0) / pageSize) && (
          <Button
            variant="link"
-            className="p-0 fs-14 ms-3 btn-no-border"
+            className="p-0 small ms-3 btn-no-border"
            onClick={() => {
              setPageIndex(pageIndex + 1);
            }}>
--- a/ui/src/components/DiffContent/index.tsx
+++ b/ui/src/components/DiffContent/index.tsx
@ -94,7 +94,7 @@ const Index: FC<Props> = ({
      {objectType === 'tag' && opts?.showTagUrlSlug && (
        <div
          className={classnames(
-            'fs-14 font-monospace',
+            'small font-monospace',
            newData.original_text && 'mb-4',
          )}
          dangerouslySetInnerHTML={{
@ -113,7 +113,7 @@ const Index: FC<Props> = ({
        dangerouslySetInnerHTML={{
          __html: diffText(newData.original_text, oldData?.original_text),
        }}
-        className="pre-line text-break font-monospace fs-14"
+        className="pre-line text-break font-monospace small"
      />
    </div>
  );
--- a/ui/src/components/Editor/ToolBars/heading.tsx
+++ b/ui/src/components/Editor/ToolBars/heading.tsx
@ -29,7 +29,7 @@ const Heading: FC<IEditorContext> = (context) => {
      label: t('heading.options.h4'),
    },
    {
-      text: `<h5 class="mb-0 fs-14">${t('heading.options.h5')}</h5>`,
+      text: `<h5 class="mb-0 small">${t('heading.options.h5')}</h5>`,
      level: 5,
      label: t('heading.options.h5'),
    },
--- a/ui/src/components/Footer/index.tsx
+++ b/ui/src/components/Footer/index.tsx
@ -13,7 +13,7 @@ const Index = () => {
  return (
    <footer className="bg-light">
      <Container className="py-3">
-        <p className="text-center mb-0 fs-14 text-secondary">
+        <p className="text-center mb-0 small text-secondary">
          <Trans i18nKey="footer.build_on" values={{ cc }}>
            Built on
            {/* eslint-disable-next-line react/jsx-no-target-blank */}
--- a/ui/src/components/HotQuestions/index.tsx
+++ b/ui/src/components/HotQuestions/index.tsx
@ -29,7 +29,7 @@ const HotQuestions: FC = () => {
              <div className="link-dark">{li.title}</div>
              {li.answer_count > 0 ? (
                <div
-                  className={`d-flex align-items-center fs-14 mt-1 ${
+                  className={`d-flex align-items-center small mt-1 ${
                    li.accepted_answer_id > 0
                      ? 'link-success'
                      : 'link-secondary'
--- a/ui/src/components/Operate/index.tsx
+++ b/ui/src/components/Operate/index.tsx
@ -252,7 +252,7 @@ const Index: FC<IProps> = ({
            <Link
              key={item.action}
              to={editUrl}
-              className="link-secondary p-0 fs-14 ms-3"
+              className="link-secondary p-0 small ms-3"
              onClick={(evt) => handleEdit(evt, editUrl)}
              style={{ lineHeight: '23px' }}>
              {item.name}
@ -263,7 +263,7 @@ const Index: FC<IProps> = ({
          <Button
            key={item.action}
            variant="link"
-            className="link-secondary p-0 fs-14 ms-3"
+            className="link-secondary p-0 small ms-3"
            onClick={() => handleAction(item.action)}>
            {item.name}
          </Button>
@ -273,7 +273,7 @@ const Index: FC<IProps> = ({
        <Dropdown className="ms-3">
          <Dropdown.Toggle
            variant="link"
-            className="link-secondary p-0 fs-14 no-toggle">
+            className="link-secondary p-0 small no-toggle">
            {t('action', { keyPrefix: 'question_detail' })}
          </Dropdown.Toggle>
          <Dropdown.Menu>
--- a/ui/src/components/QuestionList/index.tsx
+++ b/ui/src/components/QuestionList/index.tsx
@ -84,7 +84,7 @@ const QuestionList: FC<Props> = ({
                    {li.status === 2 ? ` [${t('closed')}]` : ''}
                  </NavLink>
                </h5>
-                <div className="d-flex flex-column flex-md-row align-items-md-center fs-14 mb-2 text-secondary">
+                <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}
--- a/ui/src/components/Share/index.tsx
+++ b/ui/src/components/Share/index.tsx
@ -71,7 +71,7 @@ const Index: FC<IProps> = ({ type, qid, aid, title, slugTitle = '' }) => {
      <Dropdown.Toggle
        id="dropdown-share"
        as="a"
-        className="no-toggle fs-14 link-secondary pointer"
+        className="no-toggle small link-secondary pointer"
        onClick={() => setShow(true)}
        style={{ lineHeight: '23px' }}>
        {t('share.name')}
--- a/ui/src/components/SideNav/index.tsx
+++ b/ui/src/components/SideNav/index.tsx
@ -46,7 +46,7 @@ const Index: FC = () => {

        {can_revision || userInfo?.role_id === 2 ? (
          <>
-            <div className="py-2 px-3 mt-3 fs-14 fw-bold">
+            <div className="py-2 px-3 mt-3 small fw-bold">
              {t('header.nav.moderation')}
            </div>
            {can_revision && (
--- a/ui/src/components/TagsLoader/index.tsx
+++ b/ui/src/components/TagsLoader/index.tsx
@ -25,7 +25,7 @@ const Index: FC<Props> = ({ count = 20 }) => {
              />

              <p
-                className="placeholder fs-14 text-truncate-3 w-100"
+                className="placeholder small text-truncate-3 w-100"
                style={{ height: '42px' }}
              />
              <div className="d-flex align-items-center">
@ -34,7 +34,7 @@ const Index: FC<Props> = ({ count = 20 }) => {
                  style={{ width: '80px', height: '31px' }}
                />
                <span
-                  className="placeholder text-secondary fs-14 text-nowrap"
+                  className="placeholder text-secondary small text-nowrap"
                  style={{ width: '100px', height: '21px' }}
                />
              </div>
--- a/ui/src/components/UserCard/index.tsx
+++ b/ui/src/components/UserCard/index.tsx
@ -58,7 +58,7 @@ const Index: FC<Props> = ({
          />
        </>
      )}
-      <div className="fs-14 text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
+      <div className="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
        <div className="me-1 me-md-0">
          {data?.status !== 'deleted' ? (
            <Link to={`/users/${data?.username}`} className="me-1 text-break">
--- a/ui/src/hooks/useEditStatusModal/index.tsx
+++ b/ui/src/hooks/useEditStatusModal/index.tsx
@ -99,7 +99,7 @@ const useEditStatusModal = ({
                      <FormCheck.Label htmlFor={item.type}>
                        <span className="fw-bold">{item.name}</span>
                        <br />
-                        <span className="fs-14 text-secondary">
+                        <span className="small text-secondary">
                          {item.description}
                        </span>
                      </FormCheck.Label>
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@ -31,9 +31,6 @@ a {
  text-decoration: none;
 }

-.fs-14 {
-  font-size: 0.875rem;
-}
 .fs-12 {
  font-size: 0.75rem;
 }
@ -202,7 +199,7 @@ a {
    margin-top: 2rem;
  }
  h5 {
-    @extend .fs-14;
+    @extend .small;
    margin-top: 2rem;
  }
  h6 {
--- a/ui/src/pages/Admin/Answers/index.tsx
+++ b/ui/src/pages/Admin/Answers/index.tsx
@ -146,7 +146,7 @@ const Answers: FC = () => {
                      )}
                    </Stack>
                    <div
-                      className="text-truncate-2 fs-14"
+                      className="text-truncate-2 small"
                      style={{ maxWidth: '30rem' }}>
                      {escapeRemove(li.description)}
                    </div>
@ -158,7 +158,7 @@ const Answers: FC = () => {
                    <BaseUserCard data={li.user_info} />

                    <FormatTime
-                      className="fs-14 text-secondary"
+                      className="small text-secondary"
                      time={li.create_time}
                    />
                  </Stack>
--- a/ui/src/pages/Admin/CssAndHtml/index.tsx
+++ b/ui/src/pages/Admin/CssAndHtml/index.tsx
@ -48,35 +48,35 @@ const Index: FC = () => {
      'ui:widget': 'textarea',
      'ui:options': {
        rows: 10,
-        className: ['fs-14', 'font-monospace'],
+        className: ['small', 'font-monospace'],
      },
    },
    custom_head: {
      'ui:widget': 'textarea',
      'ui:options': {
        rows: 10,
-        className: ['fs-14', 'font-monospace'],
+        className: ['small', 'font-monospace'],
      },
    },
    custom_header: {
      'ui:widget': 'textarea',
      'ui:options': {
        rows: 10,
-        className: ['fs-14', 'font-monospace'],
+        className: ['small', 'font-monospace'],
      },
    },
    custom_sidebar: {
      'ui:widget': 'textarea',
      'ui:options': {
        rows: 10,
-        className: ['fs-14', 'font-monospace'],
+        className: ['small', 'font-monospace'],
      },
    },
    custom_footer: {
      'ui:widget': 'textarea',
      'ui:options': {
        rows: 10,
-        className: ['fs-14', 'font-monospace'],
+        className: ['small', 'font-monospace'],
      },
    },
  };
--- a/ui/src/pages/Admin/Flags/index.tsx
+++ b/ui/src/pages/Admin/Flags/index.tsx
@ -102,7 +102,7 @@ const Flags: FC = () => {
                    </small>
                    <BaseUserCard
                      data={li.reported_user}
-                      className="mt-2 fs-14"
+                      className="mt-2 small"
                    />
                    <a
                      href={pathFactory.questionLanding(
@ -123,11 +123,11 @@ const Flags: FC = () => {
                  <Stack>
                    <FormatTime
                      time={li.created_at}
-                      className="fs-14 text-secondary"
+                      className="small text-secondary"
                    />
                    <BaseUserCard
                      data={li.report_user}
-                      className="mt-2 mb-2 fs-14"
+                      className="mt-2 mb-2 small"
                    />
                    {li.flagged_reason ? (
                      <small>{li.flagged_content}</small>
--- a/ui/src/pages/Admin/Plugins/Installed/index.tsx
+++ b/ui/src/pages/Admin/Plugins/Installed/index.tsx
@ -96,7 +96,7 @@ const Users: FC = () => {
                      plugin.name
                    )}
                  </div>
-                  <div className="fs-14">{plugin.description}</div>
+                  <div className="small">{plugin.description}</div>
                </td>
                <td className="text-break">{plugin.version}</td>
                <td>
--- a/ui/src/pages/Admin/Questions/index.tsx
+++ b/ui/src/pages/Admin/Questions/index.tsx
@ -162,7 +162,7 @@ const Questions: FC = () => {
                  <Stack>
                    <BaseUserCard data={li.user_info} />
                    <FormatTime
-                      className="fs-14 text-secondary"
+                      className="small text-secondary"
                      time={li.create_time}
                    />
                  </Stack>
--- a/ui/src/pages/Install/components/Progress/index.tsx
+++ b/ui/src/pages/Install/components/Progress/index.tsx
@ -7,7 +7,7 @@ interface IProps {

 const Index: FC<IProps> = ({ step }) => {
  return (
-    <div className="d-flex align-items-center fs-14 text-secondary">
+    <div className="d-flex align-items-center small text-secondary">
      <ProgressBar
        now={(step / 5) * 100}
        variant="success"
--- a/ui/src/pages/Install/components/ThirdStep/index.tsx
+++ b/ui/src/pages/Install/components/ThirdStep/index.tsx
@ -33,7 +33,7 @@ const Index: FC<Props> = ({ visible, errorMsg, nextCallback }) => {
              type="text"
              as="textarea"
              rows={8}
-              className="fs-14"
+              className="small"
              value={errorMsg?.default_config}
            />
          </FormGroup>
--- a/ui/src/pages/Questions/Detail/components/Alert/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Alert/index.tsx
@ -23,7 +23,7 @@ const Index: FC<Props> = ({ data }) => {
          ) : (
            <p>{data.msg ? data.msg : data.description}</p>
          )}
-          <div className="fs-14">
+          <div className="small">
            {t('question_detail.closed_in')}{' '}
            <time
              dateTime={dayjs.unix(data.time).tz().toISOString()}
--- a/ui/src/pages/Questions/Detail/components/Answer/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Answer/index.tsx
@ -149,14 +149,14 @@ const Index: FC<Props> = ({
              <FormatTime
                time={Number(data.update_time)}
                preFix={t('edit')}
-                className="link-secondary fs-14"
+                className="link-secondary small"
              />
            </Link>
          ) : (
            <FormatTime
              time={Number(data.update_time)}
              preFix={t('edit')}
-              className="text-secondary fs-14"
+              className="text-secondary small"
            />
          )}
        </div>
--- a/ui/src/pages/Questions/Detail/components/Question/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Question/index.tsx
@ -85,7 +85,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
        </Link>
      </h1>

-      <div className="d-flex flex-wrap align-items-center fs-14 mb-3 text-secondary">
+      <div className="d-flex flex-wrap align-items-center small mb-3 text-secondary">
        <FormatTime
          time={data.create_time}
          preFix={t('Asked')}
@ -169,14 +169,14 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
              <FormatTime
                time={data.edit_time}
                preFix={t('edit')}
-                className="link-secondary fs-14"
+                className="link-secondary small"
              />
            </Link>
          ) : (
            <FormatTime
              time={data.edit_time}
              preFix={t('edit')}
-              className="text-secondary fs-14"
+              className="text-secondary small"
            />
          )}
        </div>
--- a/ui/src/pages/Questions/Detail/components/RelatedQuestions/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/RelatedQuestions/index.tsx
@ -40,7 +40,7 @@ const Index: FC<Props> = ({ id }) => {
              <div className="link-dark">{item.title}</div>
              {item.answer_count > 0 && (
                <div
-                  className={`mt-1 fs-14 me-2 ${
+                  className={`mt-1 small me-2 ${
                    item.accepted_answer_id > 0
                      ? 'link-success'
                      : 'link-secondary'
--- a/ui/src/pages/Search/components/SearchItem/index.tsx
+++ b/ui/src/pages/Search/components/SearchItem/index.tsx
@ -42,7 +42,7 @@ const Index: FC<Props> = ({ data }) => {
            : null}
        </a>
      </div>
-      <div className="d-flex flex-wrap align-items-center fs-14 text-secondary mb-2">
+      <div className="d-flex flex-wrap align-items-center small text-secondary mb-2">
        <BaseUserCard data={data.object?.user_info} showAvatar={false} />

        <span className="split-dot" />
@ -65,7 +65,7 @@ const Index: FC<Props> = ({ data }) => {
      </div>

      {data.object?.excerpt && (
-        <p className="fs-14 text-truncate-2 mb-2 last-p text-break">
+        <p className="small text-truncate-2 mb-2 last-p text-break">
          {escapeRemove(data.object.excerpt)}
        </p>
      )}
--- a/ui/src/pages/Search/components/Tips/index.tsx
+++ b/ui/src/pages/Search/components/Tips/index.tsx
@ -7,7 +7,7 @@ const Index: FC = () => {
  return (
    <Card>
      <Card.Header>{t('search.tips.title')}</Card.Header>
-      <Card.Body className="fs-14 ext-secondary">
+      <Card.Body className="small ext-secondary">
        <div className="mb-1">
          <Trans i18nKey="search.tips.tag" components={{ 1: <code /> }} />
        </div>
--- a/ui/src/pages/Tags/Info/index.tsx
+++ b/ui/src/pages/Tags/Info/index.tsx
@ -143,7 +143,7 @@ const TagIntroduction = () => {
          </Link>
        </h3>

-        <div className="text-secondary mb-4 fs-14">
+        <div className="text-secondary mb-4 small">
          <FormatTime preFix={t('created_at')} time={tagInfo.created_at} />
          <FormatTime
            preFix={t('edited_at')}
@ -163,7 +163,7 @@ const TagIntroduction = () => {
                key={action.name}
                variant="link"
                className={classNames(
-                  'link-secondary btn-no-border p-0 fs-14',
+                  'link-secondary btn-no-border p-0 small',
                  index > 0 && 'ms-3',
                )}
                onClick={() => onAction(action)}>
@ -175,7 +175,7 @@ const TagIntroduction = () => {
            <Link
              to={`/tags/${tagInfo?.tag_id}/timeline`}
              className={classNames(
-                'link-secondary btn-no-border p-0 fs-14',
+                'link-secondary btn-no-border p-0 small',
                tagInfo?.member_actions?.length > 0 && 'ms-3',
              )}>
              {t('history')}
--- a/ui/src/pages/Tags/index.tsx
+++ b/ui/src/pages/Tags/index.tsx
@ -103,7 +103,7 @@ const Tags = () => {
                  <Card.Body className="d-flex flex-column align-items-start">
                    <Tag className="mb-3" data={tag} />

-                    <div className="fs-14 flex-fill text-break text-wrap text-truncate-3 reset-p mb-3">
+                    <div className="small flex-fill text-break text-wrap text-truncate-3 reset-p mb-3">
                      {escapeRemove(tag.excerpt)}
                    </div>
                    <div className="d-flex align-items-center">
@ -116,7 +116,7 @@ const Tags = () => {
                          ? t('button_following')
                          : t('button_follow')}
                      </Button>
-                      <span className="text-secondary fs-14 text-nowrap">
+                      <span className="text-secondary small text-nowrap">
                        {formatCount(tag.question_count)} {t('tag_label')}
                      </span>
                    </div>
--- a/ui/src/pages/Users/Personal/components/Answers/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Answers/index.tsx
@ -32,7 +32,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                {item.question_info?.title}
              </a>
            </h6>
-            <div className="d-flex align-items-center fs-14 text-secondary mb-2">
+            <div className="d-flex align-items-center small text-secondary mb-2">
              <FormatTime
                time={item.create_time}
                className="me-3"
--- a/ui/src/pages/Users/Personal/components/Comments/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Comments/index.tsx
@ -37,7 +37,7 @@ const Index: FC<Props> = ({ visible, data }) => {
              {item.title}
            </a>
            <div
-              className="fs-14 mb-2 last-p text-break text-truncate-2"
+              className="small mb-2 last-p text-break text-truncate-2"
              dangerouslySetInnerHTML={{
                __html: item.content,
              }}
@ -45,7 +45,7 @@ const Index: FC<Props> = ({ visible, data }) => {

            <FormatTime
              time={item.created_at}
-              className="fs-14 text-secondary"
+              className="small text-secondary"
            />
          </ListGroupItem>
        );
--- a/ui/src/pages/Users/Personal/components/DefaultList/index.tsx
+++ b/ui/src/pages/Users/Personal/components/DefaultList/index.tsx
@ -37,7 +37,7 @@ const Index: FC<Props> = ({ visible, tabName, data }) => {
                  : null}
              </a>
            </h6>
-            <div className="d-flex flex-wrap align-items-center fs-14 text-secondary mb-2">
+            <div className="d-flex flex-wrap align-items-center small text-secondary mb-2">
              {tabName === 'bookmarks' && (
                <>
                  <BaseUserCard data={item.user_info} showAvatar={false} />
--- a/ui/src/pages/Users/Personal/components/Reputation/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Reputation/index.tsx
@ -47,7 +47,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                }>
                {item.title}
              </a>
-              <div className="d-flex align-items-center fs-14 text-secondary">
+              <div className="d-flex align-items-center small text-secondary">
                <span>
                  {t(item.rank_type, { keyPrefix: 'personal.rank_type' })}
                </span>
--- a/ui/src/pages/Users/Personal/components/TopList/index.tsx
+++ b/ui/src/pages/Users/Personal/components/TopList/index.tsx
@ -33,7 +33,7 @@ const Index: FC<Props> = ({ data, type }) => {
              {type === 'answer' ? item.question_info.title : item.title}
            </a>

-            <div className="d-inline-block text-secondary ms-3 fs-14">
+            <div className="d-inline-block text-secondary ms-3 small">
              <Icon name="hand-thumbs-up-fill me-1" />
              <span>
                {item.vote_count} {t('votes', { keyPrefix: 'counts' })}
@ -41,7 +41,7 @@ const Index: FC<Props> = ({ data, type }) => {
            </div>
            {type === 'question' && (
              <div
-                className={`d-inline-block text-secondary ms-3 fs-14 ${
+                className={`d-inline-block text-secondary ms-3 small ${
                  Number(item.accepted_answer_id) > 0 ? 'text-success' : ''
                }`}>
                {Number(item.accepted_answer_id) > 0 ? (
@ -58,7 +58,7 @@ const Index: FC<Props> = ({ data, type }) => {
            )}

            {type === 'answer' && item.accepted === 2 && (
-              <div className="d-inline-block text-success ms-3 fs-14">
+              <div className="d-inline-block text-success ms-3 small">
                <Icon name="check-circle-fill" />
                <span> {t('accepted')}</span>
              </div>
--- a/ui/src/pages/Users/Personal/components/Votes/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Votes/index.tsx
@ -43,7 +43,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                }>
                {item.title}
              </a>
-              <div className="d-flex align-items-center fs-14 text-secondary">
+              <div className="d-flex align-items-center small text-secondary">
                <span>{item.object_type}</span>

                <span className="split-dot" />
--- a/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
+++ b/ui/src/pages/Users/Register/components/SignUpForm/index.tsx
@ -253,7 +253,7 @@ const Index: React.FC<Props> = ({ callback }) => {
          </Button>
        </div>
      </Form>
-      <div className="text-center fs-14 mt-3">
+      <div className="text-center small mt-3">
        <Trans i18nKey="login.agreements" ns="translation">
          By registering, you agree to the
          <Link
--- a/ui/src/pages/Users/index.tsx
+++ b/ui/src/pages/Users/index.tsx
@ -61,7 +61,7 @@ const Users = () => {
                        <Link to={`/users/${user.username}`}>
                          {user.display_name}
                        </Link>
-                        <div className="text-secondary fs-14">
+                        <div className="text-secondary small">
                          {key === 'users_with_the_most_vote'
                            ? `${user.vote_count} ${t('votes')}`
                            : `${user.rank} ${t('reputation')}`}
--- a/ui/template/comment.html
+++ b/ui/template/comment.html
@ -2,11 +2,11 @@
 {{range .comments}}
 <div class="border-bottom py-2 comment-item border-top">
  <div class="d-block">
-    <div class="fmt fs-14">
+    <div class="fmt small">
      {{formatLinkNofollow .ParsedText}}
    </div>
  </div>
-  <div class="d-flex justify-content-between fs-14">
+  <div class="d-flex justify-content-between small">
    <div class="d-flex align-items-center link-secondary">
      <a href="/users/{{.Username}}">{{.UserDisplayName}}</a><span
      class="mx-1">•</span>
--- a/ui/template/footer.html
+++ b/ui/template/footer.html
@ -2,7 +2,7 @@
 </div>
        <footer class="bg-light py-3">
            <div class="container">
-                <p class="text-center mb-0 fs-14 text-secondary">
+                <p class="text-center mb-0 small text-secondary">
                  {{$cc := (join " " .siteinfo.Year .siteinfo.General.Name) -}}
                  {{- $ft := translator $.language "ui.footer.build_on" "cc" $cc -}}
                  {{templateHTML (replaceHTMLTag $ft "<a href=\"https://answer.dev/\" target=\"_blank\"> Answer </a>")}}
--- a/ui/template/question-detail.html
+++ b/ui/template/question-detail.html
@ -7,7 +7,7 @@
          <a class="link-dark" href="/questions/{{.detail.ID}}">{{.detail.Title}}</a>
        </h1>
        <div
-          class="d-flex flex-wrap align-items-center fs-14 mb-3 text-secondary">
+          class="d-flex flex-wrap align-items-center small mb-3 text-secondary">
          <time class="me-3"
                datetime="{{timeFormatISO $.timezone .detail.CreateTime}}"
                title="{{translatorTimeFormatLongDate $.language $.timezone .detail.CreateTime}}">{{translator $.language "ui.question_detail.Asked"}} {{translatorTimeFormat $.language $.timezone .detail.CreateTime}}
@ -52,7 +52,7 @@
          </div>
          <div class="mb-3 mb-md-0 col-lg-3">
            <a href="/posts/{{.detail.ID}}/timeline">
-              <time class="link-secondary fs-14"
+              <time class="link-secondary small"
                    datetime="{{timeFormatISO $.timezone .detail.UpdateTime}}"
                    title="{{translatorTimeFormatLongDate $.language $.timezone .detail.UpdateTime}}">
                {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .detail.UpdateTime}}
@ -71,7 +71,7 @@
                class="rounded me-2 d-block d-md-none"
                alt=""/></a>
              <div
-                class="fs-14 text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
+                class="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
                <div class="me-1 me-md-0">
                  <a class="me-1 text-break"
                     href="/users/{{.detail.UserInfo.Username}}">{{.detail.UserInfo.DisplayName}}</a><span
@ -130,7 +130,7 @@
          <div class="mb-3 mb-md-0 col-lg-3">
            <a href="/posts/{{$.detail.ID}}/{{.ID}}/timeline">
              <time
-                class="link-secondary fs-14"
+                class="link-secondary small"
                datetime="{{timeFormatISO $.timezone .UpdateTime}}"
                title="{{translatorTimeFormatLongDate $.language $.timezone .UpdateTime}}">
                {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .UpdateTime}}
@ -149,7 +149,7 @@
                class="rounded me-2 d-block d-md-none"
                alt=""/></a>
              <div
-                class="fs-14 text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
+                class="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
                <div class="me-1 me-md-0">
                  <a class="me-1 text-break"
                     href="/users/{{.UserInfo.Username}}">{{.UserInfo.DisplayName}}</a><span
--- a/ui/template/question.html
+++ b/ui/template/question.html
@ -21,7 +21,7 @@
              {{end}}
            </h5>
            <div
-              class="d-flex flex-column flex-md-row align-items-md-center fs-14 text-secondary"
+              class="d-flex flex-column flex-md-row align-items-md-center small text-secondary"
            >
              <div class="d-flex">
                <div class="text-secondary me-1">
--- a/ui/template/tag-detail.html
+++ b/ui/template/tag-detail.html
@ -30,7 +30,7 @@
              {{end}}
            </h5>
            <div
-              class="d-flex flex-column flex-md-row align-items-md-center fs-14 text-secondary"
+              class="d-flex flex-column flex-md-row align-items-md-center small text-secondary"
            >
              <div class="d-flex">
                <div class="text-secondary me-1">
--- a/ui/template/tags.html
+++ b/ui/template/tags.html
@ -22,10 +22,10 @@
                        <div class="d-flex flex-column align-items-start card-body">
                            <a href="/tags/{{.SlugName}}" class="badge-tag rounded-1 mb-3"><span
                                    class="">{{.SlugName}}</span></a>
-                            <p class="fs-14 flex-fill text-break text-wrap text-truncate-4">{{.ParsedText}}
+                            <p class="small flex-fill text-break text-wrap text-truncate-4">{{.ParsedText}}
                            </p>
                            <div class="d-flex align-items-center">
-                                <span class="text-secondary fs-14 text-nowrap">{{.QuestionCount}}
+                                <span class="text-secondary small text-nowrap">{{.QuestionCount}}
                                    {{translator $.language "ui.tags.tag_label"}}</span>
                            </div>
                        </div>