diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx
index afa09ce..c27a45d 100644
--- a/src/components/library/ArtistView.tsx
+++ b/src/components/library/ArtistView.tsx
@@ -27,7 +27,6 @@ import GridViewType from '../viewtypes/GridViewType';
import PageLoader from '../loader/PageLoader';
import GenericPageHeader from '../layout/GenericPageHeader';
import CustomTooltip from '../shared/CustomTooltip';
-import { TagLink } from './styled';
import { addModalPage } from '../../redux/miscSlice';
import {
appendPlayQueue,
@@ -234,23 +233,22 @@ const ArtistView = ({ ...rest }: any) => {
Related artists
{artistInfo.similarArtist?.map((artist: any) => (
-
- {
- if (!rest.isModal) {
- history.push(`/library/artist/${artist.id}`);
- } else {
- dispatch(
- addModalPage({
- pageType: 'artist',
- id: artist.id,
- })
- );
- }
- }}
- >
- {artist.name}
-
+ {
+ if (!rest.isModal) {
+ history.push(`/library/artist/${artist.id}`);
+ } else {
+ dispatch(
+ addModalPage({
+ pageType: 'artist',
+ id: artist.id,
+ })
+ );
+ }
+ }}
+ >
+ {artist.name}
))}
diff --git a/src/components/library/styled.tsx b/src/components/library/styled.tsx
deleted file mode 100644
index ea3e530..0000000
--- a/src/components/library/styled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const TagLink = styled.a`
- color: #e9ebf0;
- cursor: pointer;
-
- &:hover {
- color: #e9ebf0;
- text-decoration: none;
- }
-`;
diff --git a/src/components/shared/styled.ts b/src/components/shared/styled.ts
index 5b39418..5f86ce4 100644
--- a/src/components/shared/styled.ts
+++ b/src/components/shared/styled.ts
@@ -40,6 +40,8 @@ export const StyledButton = styled(Button)<{ width: number }>`
? `${props.theme.colors.button.link.color}`
: `${props.theme.colors.button.default.color}`} !important;
+ filter: ${(props) => (props.disabled || props.loading ? 'brightness(0.7)' : 'none')};
+ transition: 0.5s;
width: ${(props) => `${props.width}px`};
&:active,
@@ -132,7 +134,7 @@ export const StyledInputNumber = styled(InputNumber)<{ width: number }>`
`;
export const StyledInput = styled(Input)<{ width: number }>`
- border: 1px #3c3f43 solid;
+ border: 1px #3c3f43 solid !important;
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
color: ${(props) => props.theme.colors.input.color} !important;
@@ -196,6 +198,8 @@ export const StyledIconButton = styled(IconButton)`
? undefined
: `${props.theme.colors.button.default.color}`};
+ filter: ${(props) => (props.disabled || props.loading ? 'brightness(0.7)' : 'none')};
+ transition: 0.5s;
width: ${(props) => `${props.width}px`};
&:active,
@@ -476,7 +480,8 @@ export const StyledTagPicker = styled(TagPicker)`
`;
export const StyledTag = styled(Tag)`
- color: ${(props) => props.theme.colors.tag.text};
+ color: ${(props) => props.theme.colors.tag.text} !important;
background: ${(props) => props.theme.colors.tag.background};
border-radius: ${(props) => props.theme.other.tag.borderRadius};
+ cursor: pointer;
`;