fix: pinned styles adjusted, hover effect added to list, footer spacing optimized

ui/src/components/Counts/index.tsx

@@ -69,7 +69,7 @@ const Index: FC<Props> = ({
       {showAnswers && (
         <div
           className={`d-flex flex-shrink-0 align-items-center ms-3 ${
-            isAccepted ? 'text-bg-success rounded-2 px-2 py-1 lh-1' : ''
+            isAccepted ? 'text-bg-success rounded-pill px-2 ' : ''
           }`}>
           {isAccepted ? (
             <Icon name="check-circle-fill me-1" />

ui/src/components/Footer/index.tsx

@@ -33,11 +33,11 @@ const Index = () => {
   const cc = `${fullYear} ${siteName}`;
 
   return (
-    <footer className="bg-light">
+    <footer className="py-3 bg-light">
       <Container>
         <p className="text-center mb-0 small">
           {/* Link to Terms of Service with right margin */}
-          <Link to="/tos" className="me-2">
+          <Link to="/tos" className="me-3">
             {t('label', { keyPrefix: 'admin.legal.terms_of_service' })}
           </Link>
 

ui/src/components/PinList/index.tsx

@@ -18,7 +18,7 @@
  */
 
 import { FC } from 'react';
-import { ListGroup, Stack, Card } from 'react-bootstrap';
+import { ListGroup, Stack } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -41,20 +41,21 @@ const PinList: FC<IProps> = ({ data }) => {
         className="overflow-x-auto align-items-stretch">
         {data.map((item) => {
           return (
-            <Card
+            <ListGroup.Item
+              action
+              as="li"
               key={item.id}
+              className="rounded border-top p-3"
               style={{
                 minWidth: '238px',
                 width: `${100 / data.length}%`,
               }}>
-              <Card.Body>
-                <h6 className="text-wrap text-break">
-                  <NavLink
-                    to={pathFactory.questionLanding(item.id, item.url_title)}
-                    className="link-dark text-truncate-2">
-                    {item.title}
-                    {item.status === 2 ? ` [${t('closed')}]` : ''}
-                  </NavLink>
+              <NavLink
+                to={pathFactory.questionLanding(item.id, item.url_title)}
+                className="h-100 d-flex flex-column justify-content-between">
+                <h6 className="text-wrap link-dark text-break text-truncate-2">
+                  {item.title}
+                  {item.status === 2 ? ` [${t('closed')}]` : ''}
                 </h6>
 
                 <Counts
@@ -67,8 +68,8 @@ const PinList: FC<IProps> = ({ data }) => {
                   showViews={false}
                   className="mt-2 mt-md-0 small text-secondary"
                 />
-              </Card.Body>
-            </Card>
+              </NavLink>
+            </ListGroup.Item>
           );
         })}
       </Stack>

ui/src/components/QuestionList/index.tsx

@@ -139,7 +139,10 @@ const QuestionList: FC<Props> = ({
               return (
                 <ListGroup.Item
                   key={li.id}
-                  className="bg-transparent py-3 px-2 border-start-0 border-end-0">
+                  action
+                  as={NavLink}
+                  to={pathFactory.questionLanding(li.id, li.url_title)}
+                  className="py-3 px-2 border-start-0 border-end-0">
                   <div className="d-flex flex-wrap text-secondary small mb-12">
                     <BaseUserCard
                       data={li.operator}
@@ -160,12 +163,8 @@ const QuestionList: FC<Props> = ({
                     />
                   </div>
                   <h5 className="text-wrap text-break">
-                    <NavLink
-                      to={pathFactory.questionLanding(li.id, li.url_title)}
-                      className="link-dark">
-                      {li.title}
-                      {li.status === 2 ? ` [${t('closed')}]` : ''}
-                    </NavLink>
+                    {li.title}
+                    {li.status === 2 ? ` [${t('closed')}]` : ''}
                   </h5>
                   {viewType === 'card' && (
                     <p

ui/src/pages/Admin/Answers/index.tsx

@@ -75,7 +75,8 @@ const Answers: FC = () => {
       title: t('title', { keyPrefix: 'delete_permanently' }),
       content: t('content', { keyPrefix: 'delete_permanently' }),
       cancelBtnVariant: 'link',
-      confirmText: t('ok', { keyPrefix: 'btns' }),
+      confirmText: t('delete', { keyPrefix: 'btns' }),
+      confirmBtnVariant: 'danger',
       onConfirm: () => {
         deletePermanently('answers').then(() => {
           toastStore.getState().show({
@@ -104,7 +105,7 @@ const Answers: FC = () => {
             sortKey="status"
             i18nKeyPrefix="btns"
           />
-          {curFilter === 'deleted' ? (
+          {curFilter === 'deleted' && count > 0 ? (
             <Button
               variant="outline-danger"
               size="sm"

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

@@ -73,7 +73,8 @@ const Questions: FC = () => {
       title: t('title', { keyPrefix: 'delete_permanently' }),
       content: t('content', { keyPrefix: 'delete_permanently' }),
       cancelBtnVariant: 'link',
-      confirmText: t('ok', { keyPrefix: 'btns' }),
+      confirmText: t('delete', { keyPrefix: 'btns' }),
+      confirmBtnVariant: 'danger',
       onConfirm: () => {
         deletePermanently('questions').then(() => {
           toastStore.getState().show({
@@ -102,7 +103,7 @@ const Questions: FC = () => {
             sortKey="status"
             i18nKeyPrefix="btns"
           />
-          {curFilter === 'deleted' ? (
+          {curFilter === 'deleted' && count > 0 ? (
             <Button
               variant="outline-danger"
               size="sm"

ui/src/pages/Admin/Users/index.tsx

@@ -158,7 +158,8 @@ const Users: FC = () => {
       title: t('title', { keyPrefix: 'delete_permanently' }),
       content: t('content', { keyPrefix: 'delete_permanently' }),
       cancelBtnVariant: 'link',
-      confirmText: t('ok', { keyPrefix: 'btns' }),
+      confirmText: t('delete', { keyPrefix: 'btns' }),
+      confirmBtnVariant: 'danger',
       onConfirm: () => {
         deletePermanently('users').then(() => {
           toastStore.getState().show({
@@ -197,7 +198,7 @@ const Users: FC = () => {
             sortKey="filter"
             i18nKeyPrefix="admin.users"
           />
-          {curFilter === 'deleted' ? (
+          {curFilter === 'deleted' && Number(data?.count) > 0 ? (
             <Button
               variant="outline-danger"
               size="sm"

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

@@ -92,13 +92,6 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
   return (
     <div>
       <h1 className="h3 mb-3 text-wrap text-break">
-        {data?.pin === 2 && (
-          <Icon
-            name="pin-fill"
-            className="me-1"
-            title={t('pinned', { keyPrefix: 'btns' })}
-          />
-        )}
         <Link
           className="link-dark"
           reloadDocument
@@ -111,6 +104,16 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
       </h1>
 
       <div className="d-flex flex-wrap align-items-center small mb-3 text-secondary">
+        {data?.pin === 2 && (
+          <div className="me-3">
+            <Icon
+              name="pin-fill"
+              className="me-1"
+              title={t('pinned', { keyPrefix: 'btns' })}
+            />
+            <span>{t('pinned', { keyPrefix: 'btns' })}</span>
+          </div>
+        )}
         <FormatTime
           time={data.create_time}
           preFix={t('Asked')}