Fix various styles

- Disabled/loading button brightness
- Tag cursor
- Input border

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) => {
                           <h6>Related artists</h6>
                           <TagGroup>
                             {artistInfo.similarArtist?.map((artist: any) => (
-                              <StyledTag key={artist.id}>
-                                <TagLink
-                                  onClick={() => {
-                                    if (!rest.isModal) {
-                                      history.push(`/library/artist/${artist.id}`);
-                                    } else {
-                                      dispatch(
-                                        addModalPage({
-                                          pageType: 'artist',
-                                          id: artist.id,
-                                        })
-                                      );
-                                    }
-                                  }}
-                                >
-                                  {artist.name}
-                                </TagLink>
+                              <StyledTag
+                                key={artist.id}
+                                onClick={() => {
+                                  if (!rest.isModal) {
+                                    history.push(`/library/artist/${artist.id}`);
+                                  } else {
+                                    dispatch(
+                                      addModalPage({
+                                        pageType: 'artist',
+                                        id: artist.id,
+                                      })
+                                    );
+                                  }
+                                }}
+                              >
+                                {artist.name}
                               </StyledTag>
                             ))}
                           </TagGroup>

src/components/library/styled.tsx

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const TagLink = styled.a`
-  color: #e9ebf0;
-  cursor: pointer;
-
-  &:hover {
-    color: #e9ebf0;
-    text-decoration: none;
-  }
-`;

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