Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/icon/icon.module.css

@@ -0,0 +1,123 @@
+.size-xs {
+    font-size: var(--theme-font-size-xs);
+}
+
+.size-sm {
+    font-size: var(--theme-font-size-sm);
+}
+
+.size-md {
+    font-size: var(--theme-font-size-md);
+}
+
+.size-lg {
+    font-size: var(--theme-font-size-lg);
+}
+
+.size-xl {
+    font-size: var(--theme-font-size-xl);
+}
+
+.size-2xl {
+    font-size: var(--theme-font-size-2xl);
+}
+
+.size-3xl {
+    font-size: var(--theme-font-size-3xl);
+}
+
+.size-4xl {
+    font-size: var(--theme-font-size-4xl);
+}
+
+.size-5xl {
+    font-size: var(--theme-font-size-5xl);
+}
+
+.color-default {
+    color: var(--theme-colors-foreground);
+}
+
+.color-primary {
+    color: var(--theme-colors-primary-filled);
+}
+
+.color-muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.color-success {
+    color: var(--theme-colors-state-success);
+}
+
+.color-error {
+    color: var(--theme-colors-state-error);
+}
+
+.color-info {
+    color: var(--theme-colors-state-info);
+}
+
+.color-warn {
+    color: var(--theme-colors-state-warn);
+}
+
+.fill {
+    fill: transparent;
+}
+
+.fill-default {
+    fill: var(--theme-colors-foreground);
+}
+
+.fill-inherit {
+    fill: inherit;
+}
+
+.fill-primary {
+    fill: var(--theme-colors-primary-filled);
+}
+
+.fill-muted {
+    fill: var(--theme-colors-foreground-muted);
+}
+
+.fill-success {
+    fill: var(--theme-colors-state-success);
+}
+
+.fill-error {
+    fill: var(--theme-colors-state-error);
+}
+
+.fill-info {
+    fill: var(--theme-colors-state-info);
+}
+
+.fill-warn {
+    fill: var(--theme-colors-state-warn);
+}
+
+.spin {
+    animation: spin 1s linear infinite;
+}
+
+.pulse {
+    animation: pulse 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.5;
+    }
+}