feat(frontend): update widget badge styles and color scheme

johaven · johaven · commit 10feb97a2b45 · 2026-02-05T00:27:26.000+01:00
diff --git a/frontend/src/app/applications/comments/components/widgets/comments-recents-widget.component.html b/frontend/src/app/applications/comments/components/widgets/comments-recents-widget.component.html
@@ -28,7 +28,7 @@
           </span>
           </div>
           <div class="product-badge">
-            <span class="badge rounded-pill bg-warning">{{ c.modifiedAt | amTimeAgo:true }}</span>
+            <span class="badge rounded-pill bg-purple">{{ c.modifiedAt | amTimeAgo:true }}</span>
           </div>
         </li>
       </ul>
diff --git a/frontend/src/app/applications/files/components/widgets/files-recents-widget.component.html b/frontend/src/app/applications/files/components/widgets/files-recents-widget.component.html
@@ -28,7 +28,7 @@
           </span>
           </div>
           <div class="product-badge">
-            <span class="badge rounded-pill bg-warning">{{ f.mtime | amTimeAgo:true }}</span>
+            <span class="badge rounded-pill bg-purple">{{ f.mtime | amTimeAgo:true }}</span>
           </div>
         </li>
       </ul>
diff --git a/frontend/src/styles/components/_backgrounds.scss b/frontend/src/styles/components/_backgrounds.scss
@@ -49,7 +49,6 @@
 }
 
 .newly {
-  color: white;
   border-bottom: .5px solid $gray-light;
 }
 
@@ -60,17 +59,19 @@
 
 .newly-1, .prop-newly-1 {
   @extend .newly-0;
-  background-color: $orange !important;
+  color: white !important;
+  background-color: $purple !important;
 }
 
 .newly-2, .prop-newly-2 {
   @extend .newly-0;
-  background-color: lighten($orange, 15%) !important;
+  color: white !important;
+  background-color: lighten($purple, 15%) !important;
 }
 
 .newly-3, .prop-newly-3 {
   @extend .newly-0;
-  background-color: lighten($orange, 30%) !important;
+  background-color: lighten($purple, 30%) !important;
   color: inherit !important;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,6 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`.newly {`
`52`		`- color: white;`
`53`	`52`	`border-bottom: .5px solid $gray-light;`
`54`	`53`	`}`
`55`	`54`
`@@ -60,17 +59,19 @@`
`60`	`59`
`61`	`60`	`.newly-1, .prop-newly-1 {`
`62`	`61`	`@extend .newly-0;`
`63`		`- background-color: $orange !important;`
	`62`	`+ color: white !important;`
	`63`	`+ background-color: $purple !important;`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`.newly-2, .prop-newly-2 {`
`67`	`67`	`@extend .newly-0;`
`68`		`- background-color: lighten($orange, 15%) !important;`
	`68`	`+ color: white !important;`
	`69`	`+ background-color: lighten($purple, 15%) !important;`
`69`	`70`	`}`
`70`	`71`
`71`	`72`	`.newly-3, .prop-newly-3 {`
`72`	`73`	`@extend .newly-0;`
`73`		`- background-color: lighten($orange, 30%) !important;`
	`74`	`+ background-color: lighten($purple, 30%) !important;`
`74`	`75`	`color: inherit !important;`
`75`	`76`	`}`
`76`	`77`