Merge pull request #997 from funmusicplace/various-fixes

fix: various style improvements to buttons

client/src/components/Artist/ArtistContainer.tsx

@@ -10,6 +10,7 @@ import { bp } from "../../constants";
 import { useQuery } from "@tanstack/react-query";
 import { queryArtist } from "queries";
 import { useAuthContext } from "state/AuthContext";
+import FixedButtonLink from "components/common/FixedButton";
 
 const ArtistContainer: React.FC = () => {
   const { t } = useTranslation("translation", { keyPrefix: "manageArtist" });
@@ -39,6 +40,10 @@ const ArtistContainer: React.FC = () => {
               display: flex;
               flex-direction: column;
 
+              a:first-of-type {
+                margin-bottom: 1rem;
+              }
+
               @media screen and (max-width: ${bp.medium}px) {
                 left: 1rem;
                 bottom: 75px;
@@ -48,60 +53,22 @@ const ArtistContainer: React.FC = () => {
               }
             `}
           >
-            <ButtonLink
+            <FixedButtonLink
               to={`/manage/artists/${artist.id}/customize`}
               startIcon={<FaEye />}
               size="compact"
               variant="dashed"
-              className={css`
-                box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
-                margin-bottom: 1rem;
-                background-color: rgba(255, 255, 255, 0.9) !important;
-                color: black !important;
-                padding: 1.2rem !important;
-                :hover {
-                  background-color: rgba(0, 0, 0, 0.7) !important;
-                  color: white !important;
-                }
-
-                @media screen and (max-width: ${bp.medium}px) {
-                  left: 1rem;
-                  bottom: 75px;
-                  top: auto;
-                  right: auto;
-                  padding: 1rem !important;
-                }
-              `}
             >
               {t("customizeLook")}
-            </ButtonLink>
-            <ButtonLink
+            </FixedButtonLink>
+            <FixedButtonLink
               to={`/manage/artists/${artist.id}`}
               startIcon={<FaPen />}
               size="compact"
               variant="dashed"
-              className={css`
-                box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
-
-                background-color: rgba(255, 255, 255, 0.9) !important;
-                color: black !important;
-                padding: 1.2rem !important;
-                :hover {
-                  background-color: rgba(0, 0, 0, 0.7) !important;
-                  color: white !important;
-                }
-
-                @media screen and (max-width: ${bp.medium}px) {
-                  left: 1rem;
-                  bottom: 75px;
-                  top: auto;
-                  right: auto;
-                  padding: 1rem !important;
-                }
-              `}
             >
               {t("editPage")}
-            </ButtonLink>
+            </FixedButtonLink>
           </div>
         )}
       {!isPostOrRelease && (

client/src/components/Artist/ArtistRouterLink.tsx

@@ -0,0 +1,51 @@
+import { css } from "@emotion/css";
+import { useQuery } from "@tanstack/react-query";
+import Button, { ButtonProps } from "components/common/Button";
+import { queryArtist } from "queries";
+import { Link, LinkProps, useParams } from "react-router-dom";
+
+const ArtistRouterLink: React.FC<LinkProps> = (props) => {
+  const { artistId } = useParams();
+
+  const { data: artist, isLoading: isLoadingArtist } = useQuery(
+    queryArtist({ artistSlug: artistId ?? "" })
+  );
+
+  const colors = artist?.properties?.colors;
+  return (
+    <Link
+      {...props}
+      className={
+        colors &&
+        css`
+          color: ${colors?.primary} !important;
+          background-color: ${colors?.background} !important;
+        `
+      }
+    />
+  );
+};
+
+export const ArtistButton: React.FC<
+  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = (props) => {
+  const { artistId } = useParams();
+
+  const { data: artist, isLoading: isLoadingArtist } = useQuery(
+    queryArtist({ artistSlug: artistId ?? "" })
+  );
+
+  const colors = artist?.properties?.colors;
+
+  return (
+    <Button
+      {...props}
+      className={css`
+        color: ${colors?.secondary} !important;
+        background-color: ${colors?.primary} !important;
+      `}
+    />
+  );
+};
+
+export default ArtistRouterLink;

client/src/components/Header/Header.tsx

@@ -246,15 +246,21 @@ const Header = () => {
             startIcon={<FaHandHoldingHeart />}
             className={css`
               display: block;
-              margin-left: 1rem;
+              margin-left: 0.75rem;
               text-decoration: none;
               text-align: center;
               &:hover {
                 text-decoration: underline;
               }
 
               color: var(--mi-white) !important;
+
+              svg {
+                fill: white !important;
+              }
+
               background-color: var(--mi-black) !important;
+
               @media (prefers-color-scheme: dark) {
                 background-color: var(--mi-white) !important;
                 color: var(--mi-black) !important;

client/src/components/Player/index.tsx

@@ -76,6 +76,58 @@ const Player = () => {
       `}
       id="player"
     >
+      {currentTrack?.trackGroup.artistId && (
+        <div
+          className={css`
+            z-index: 999999;
+            top: 75px;
+            right: 1rem;
+            position: fixed;
+            display: flex;
+            flex-direction: column;
+
+            right: 1rem;
+            bottom: 75px;
+            top: auto;
+            left: auto;
+            padding: 1rem !important;
+
+            flex-direction: row;
+
+            button {
+              box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.5);
+              background-color: rgba(255, 255, 255, 0.9) !important;
+              margin-left: 1rem;
+              color: black !important;
+
+              svg {
+                fill: black !important;
+              }
+
+              &:hover {
+                background-color: rgba(0, 0, 0, 0.7) !important;
+                color: white !important;
+
+                svg {
+                  fill: white !important;
+                }
+              }
+            }
+
+            @media (min-width: ${bp.small}px) {
+              .tip-artist,
+              .wishlist {
+                display: none;
+              }
+            }
+          `}
+        >
+          <Wishlist trackGroup={{ id: currentTrack.trackGroupId }} />
+          {state.playing && (
+            <TipArtist artistId={currentTrack.trackGroup.artistId} />
+          )}
+        </div>
+      )}
       <div
         className={css`
           display: flex;
@@ -134,22 +186,31 @@ const Player = () => {
               button {
                 margin-right: 0.25rem;
               }
-              span {
-                margin-left: 0.25rem;
+
+              @media (max-width: ${bp.small}px) {
+                .tip-artist,
+                .wishlist {
+                  display: none;
+                }
               }
             `}
           >
-            <span>
+            <div
+              className={css`
+                display: flex;
+              `}
+            >
               <Wishlist trackGroup={{ id: currentTrack.trackGroupId }} />
               {state.playing && currentTrack.trackGroup.artistId && (
                 <TipArtist artistId={currentTrack.trackGroup.artistId} />
               )}
-            </span>
+            </div>
             <span
               className={css`
                 display: inline-block;
                 min-width: 3rem;
                 text-align: right;
+                margin-right: 1rem;
               `}
             >
               {fmtMSS(currentSeconds)}
@@ -170,28 +231,11 @@ const Player = () => {
 
                 <ShuffleButton />
               </span>
-              <div
-                className={css`
-                  @media (max-width: ${bp.small}px) {
-                    button {
-                      padding: 0em 0.5em 0em 0em;
-                      background: transparent;
-                    }
-                  }
-                `}
-              >
+              <div>
                 <PreviousButton />
               </div>
               <PlayControlButton playerButton />
-              <div
-                className={css`
-                @media (max-width: ${bp.small}px) {
-                    button {
-                      padding: 0em 0em 0em .5em;
-                      background: transparent;
-                    }
-              `}
-              >
+              <div>
                 <NextButton />
               </div>
               <VolumeControl setVolume={setVolume} volume={volume} />

client/src/components/TrackGroup/ArtistByLine.tsx

@@ -1,4 +1,5 @@
 import { css } from "@emotion/css";
+import ArtistRouterLink from "components/Artist/ArtistRouterLink";
 
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -28,7 +29,11 @@ const ArtistByLine: React.FC<{ artist: Artist; fromAlbum?: TrackGroup }> = ({
               album: fromAlbum.title,
             }}
             components={{
-              albumLink: <Link to={getReleaseUrl(artist, fromAlbum)}></Link>,
+              albumLink: (
+                <ArtistRouterLink
+                  to={getReleaseUrl(artist, fromAlbum)}
+                ></ArtistRouterLink>
+              ),
             }}
           />{" "}
         </>
@@ -40,7 +45,9 @@ const ArtistByLine: React.FC<{ artist: Artist; fromAlbum?: TrackGroup }> = ({
           artist: artist.name,
         }}
         components={{
-          artistLink: <Link to={getArtistUrl(artist)}></Link>,
+          artistLink: (
+            <ArtistRouterLink to={getArtistUrl(artist)}></ArtistRouterLink>
+          ),
         }}
       />
     </div>

client/src/components/TrackGroup/PurchaseOrDownloadAlbumModal.tsx

@@ -8,6 +8,7 @@ import DownloadAlbumButton from "components/common/DownloadAlbumButton";
 import Button from "components/common/Button";
 import AddToCollection from "./AddToCollection";
 import { useAuthContext } from "state/AuthContext";
+import { ArtistButton } from "components/Artist/ArtistRouterLink";
 
 const PurchaseOrDownloadAlbum: React.FC<{
   trackGroup: TrackGroup;
@@ -86,12 +87,12 @@ const PurchaseOrDownloadAlbum: React.FC<{
               z-index: 2;
             `}
           >
-            <Button
+            <ArtistButton
               variant="outlined"
               onClick={() => setIsPurchasingAlbum(true)}
             >
               {t(preOrderOrBuyText)}
-            </Button>
+            </ArtistButton>
           </div>
         )}
         {addToCollection && <AddToCollection trackGroup={trackGroup} />}

client/src/components/TrackGroup/TrackGroup.tsx

@@ -282,14 +282,14 @@ function TrackGroup() {
                   tracks={trackGroup.tracks}
                   trackGroup={trackGroup}
                 />
-                <small
+                <p
                   className={css`
                     margin-left: 2.5rem;
                     margin-top: 1rem;
                   `}
                 >
-                  {t("downloadCodecsInfo")}
-                </small>
+                  <small>{t("downloadCodecsInfo")}</small>
+                </p>
               </TrackListingWrapper>
             </div>
           </div>

client/src/components/TrackGroup/TrackGroupEmbed.tsx

@@ -8,6 +8,7 @@ import { getReleaseUrl, getTrackGroupWidget } from "utils/artist";
 import { FaCopy } from "react-icons/fa";
 import { BsShare } from "react-icons/bs";
 import { useSnackbar } from "state/SnackbarContext";
+import { ArtistButton } from "components/Artist/ArtistRouterLink";
 
 const TrackGroupEmbed: React.FC<{
   trackGroup: TrackGroup;
@@ -90,7 +91,7 @@ const TrackGroupEmbed: React.FC<{
         </div>
       </Modal>
       <div>
-        <Button
+        <ArtistButton
           onlyIcon
           onClick={() => setIsPopupOpen(true)}
           startIcon={<BsShare />}
@@ -99,7 +100,7 @@ const TrackGroupEmbed: React.FC<{
             font-size: 1.2rem;
             margin-left: 0.2rem;
           `}
-        ></Button>
+        ></ArtistButton>
       </div>
     </div>
   );

client/src/components/TrackGroup/Wishlist.tsx

@@ -1,6 +1,4 @@
-import { css } from "@emotion/css";
 import Button from "components/common/Button";
-import { bp } from "../../constants";
 import React from "react";
 import { IoIosHeart, IoIosHeartEmpty } from "react-icons/io";
 import api from "services/api";
@@ -32,6 +30,7 @@ const Wishlist: React.FC<{ trackGroup: { id: number } }> = ({ trackGroup }) => {
     <Button
       onClick={onClick}
       aria-label={buttonLabel}
+      className="wishlist"
       title={buttonLabel}
       startIcon={isInWishlist ? <IoIosHeart /> : <IoIosHeartEmpty />}
     />