Add unread ball

Author: GuidoBR

frontend/src/pages/Home/components/ReportItem/ReportItem.scss

@@ -8,33 +8,36 @@
 
   &__content {
     flex: 1;
-    margin-left: 16px;
+    margin-left: 8px;
+    width: 60%;
+  }
+
+  &__status-bullet {
+      width: 8px;
+      height: 8px;
+      margin-top: 5px;
+      display: inline-block;
+      background-color: #fead7f;
+      border-radius: 50%;
+      vertical-align: middle;
   }
 
   &__category-label {
     font-size: 13px;
     color: #4355b9;
     margin-bottom: 4px;
     font-weight: 700;
-
-    // Add a small bullet before brain category
-    &:before {
-      content: '';
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      background-color: #fd6a6a;
-      border-radius: 50%;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
   }
 
   &__title {
     font-weight: 600;
     font-size: 16px;
     color: #111;
     margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &__date {
@@ -51,11 +54,11 @@
     margin-right: 6px;
 
     &-icon {
-      font-size: 12px;
+      font-size: 11px;
       color: #aaa;
       transition: all 0.2s ease;
-      width: 12px;
-      height: 12px;
+      width: 34px;
+      height: 34px;
       display: flex;
       align-items: center;
       justify-content: center;

frontend/src/pages/Home/components/ReportItem/ReportItem.tsx

@@ -28,7 +28,6 @@ const ReportItem: React.FC<ReportItemProps> = ({
 }) => {
   const { t } = useTranslation(['common', 'report']);
   const { title, category, createdAt, status, bookmarked } = report;
-  console.log('status', status);
 
   // Treat category as string
   const categoryStr = category.toString().toLowerCase();
@@ -85,7 +84,11 @@ const ReportItem: React.FC<ReportItemProps> = ({
   return (
     <div className="report-item" onClick={onClick}>
       {getCategoryIcon()}
-
+      {status === 'UNREAD' && (
+          <div className="report-item__status-bullet">
+            <figure className="circle"></figure>
+          </div>
+        )}
       <div className="report-item__content">
         <div className="report-item__category-label">
           {t(getCategoryTranslationKey(), { ns: 'report' })}