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; `;