redesign album detail page

src/shared/components/pill/pill.module.css

@@ -3,6 +3,7 @@
     user-select: auto;
     background: alpha(var(--theme-colors-background), 0.5);
     border: 1px solid var(--theme-colors-border);
+    transition: background-color 0.2s ease-in-out;
 
     &[data-variant='outline'] {
         background: transparent;
@@ -10,6 +11,10 @@
     }
 }
 
+.root.link:hover {
+    background: alpha(var(--theme-colors-surface), 0.5);
+}
+
 .label {
     font-family: var(--theme-content-font-family);
 }

src/shared/components/pill/pill.tsx

@@ -80,7 +80,7 @@ export const PillLink = forwardRef<HTMLDivElement, PillLinkProps>(({ children, .
                     [styles.xs]: size === 'xs',
                 }),
                 remove: styles.remove,
-                root: styles.root,
+                root: clsx(styles.root, styles.link),
                 ...classNames,
             }}
             component={Link}

src/shared/components/rating/rating.module.css

@@ -1,26 +1,36 @@
 .root.xs {
     --rating-size: var(--theme-font-size-xs) !important;
+
+    padding: 0 var(--theme-spacing-xs);
 }
 
 .root.sm {
     --rating-size: var(--theme-font-size-sm) !important;
+
+    padding: 0 var(--theme-spacing-sm);
 }
 
 .root.md {
     --rating-size: var(--theme-font-size-md) !important;
+
+    padding: 0 var(--theme-spacing-md);
 }
 
 .root.lg {
     --rating-size: var(--theme-font-size-lg) !important;
+
+    padding: 0 var(--theme-spacing-md);
 }
 
 .root.xl {
     --rating-size: var(--theme-font-size-xl) !important;
+
+    padding: 0 var(--theme-spacing-md);
 }
 
 .symbol-body {
     svg {
-        stroke: alpha(var(--theme-colors-foreground), 0.7);
+        stroke: var(--theme-colors-foreground);
         stroke-width: 2px;
 
         &:not([data-filled='true']) {