💄 Improve UI of Users' Rule Page

package.json

@@ -83,7 +83,7 @@
     "react-pose": "^4.0.10",
     "sharp": "^0.32.6",
     "ssw.megamenu": "4.0.1",
-    "ssw.rules.widget": "^2.0.2",
+    "ssw.rules.widget": "^2.0.3",
     "svg-react-loader": "^0.4.6",
     "webpack-assets-manifest": "5.1.0"
   },

src/components/latest-rules-content/latestRulesContent.js

@@ -7,6 +7,8 @@ import React from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import locale from 'date-fns/locale/en-AU';
 import { sanitizeName } from '../../helpers/sanitizeName';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClock } from '@fortawesome/free-solid-svg-icons';
 
 const LatestRulesContent = ({
   filteredItems,
@@ -47,6 +49,8 @@ const LatestRulesContent = ({
 
   const FormatDate = ({ item }) => (
     <span className="block text-light-grey text-right">
+      <FontAwesomeIcon icon={faClock} size="sm" className="mr-1" />
+
       {filteredItems.filter === FilterOptions.RecentlyUpdated
         ? formatDistanceToNow(new Date(item.file.node.lastUpdated), {
             locale: {
@@ -114,7 +118,9 @@ const LatestRulesContent = ({
               <div
                 key={idx}
                 className={`cat-grid-container ${
-                  isShowAuthor ? 'lg:grid-cols-[2rem_auto_8.5rem_6.5rem]' : ''
+                  isShowAuthor
+                    ? 'lg:grid-cols-[2rem_auto_8.5rem_6.5rem]'
+                    : 'sm:grid-cols-[2rem_auto_auto]'
                 }`}
               >
                 <div className="cat-rule-num">{idx + 1}.</div>

src/pages/user/index.js

@@ -279,7 +279,9 @@ const UserRules = ({ data, location }) => {
             </span>
             <hr className="mt-0" />
             <span className="flex">
-              <h3 className="flex-1 text-ssw-red">Last Modified</h3>
+              <h3 className="flex-1 text-ssw-red">
+                Last Modified ({filteredItems.list.length})
+              </h3>
             </span>
             <div className="rule-index archive no-gutters rounded mb-12">
               <LatestRulesContent
@@ -292,7 +294,9 @@ const UserRules = ({ data, location }) => {
             </div>
 
             <span className="flex">
-              <h3 className="flex-1 text-ssw-red">Acknowledged</h3>
+              <h3 className="flex-1 text-ssw-red">
+                Acknowledged ({authorRules.list.length})
+              </h3>
             </span>
             <div className="rule-index archive no-gutters rounded mb-12">
               <LatestRulesContent

yarn.lock

@@ -5412,7 +5412,7 @@ __metadata:
     react-pose: "npm:^4.0.10"
     sharp: "npm:^0.32.6"
     ssw.megamenu: "npm:4.0.1"
-    ssw.rules.widget: "npm:^2.0.2"
+    ssw.rules.widget: "npm:^2.0.3"
     svg-react-loader: "npm:^0.4.6"
     tailwindcss: "npm:^3.3.3"
     webpack-assets-manifest: "npm:5.1.0"
@@ -21949,9 +21949,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ssw.rules.widget@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "ssw.rules.widget@npm:2.0.2"
+"ssw.rules.widget@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "ssw.rules.widget@npm:2.0.3"
   dependencies:
     "@tanstack/react-query": "npm:^5.14.1"
     date-fns: "npm:^2.30.0"
@@ -21960,7 +21960,7 @@ __metadata:
     react-icons: "npm:^4.12.0"
     style-inject: "npm:^0.3.0"
     vite-plugin-css-injected-by-js: "npm:^3.3.0"
-  checksum: 5d1ffb44f9ea19d58a4265466fa5bcf4e162311b32bd3b9c0e9f81472344f186447c23b3875e79384de5bacbb7ecbb12960d8cfe1d5ba9bcf97bc59e8287da82
+  checksum: 614ace0c19bd56363c717bee0b89ac1b7e4b17f27574e48e241f4cdbaa21cf299297d01c2413a8bef24cd4e0aaa5cde17fecbfbc8a661af8a3c78d357d05ca87
   languageName: node
   linkType: hard