Resolve Patch/mood 81: updating track buttons (#97)

* changed track icons and made them smaller * edited the background color of the mobile queue/playlist confirmations after i got really annoyed with the gradient it had before * there was an extra your in playlist generation
scott-street · Dec 22, 2020 · 47a32c6 · 47a32c6
1 parent 2de87dc
commit 47a32c6
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 28 deletions.
diff --git a/common/hooks/useSpotify.tsx b/common/hooks/useSpotify.tsx
@@ -163,7 +163,7 @@ export const SpotifyProvider: React.FunctionComponent<SpotifyProviderProps> = (p
                     public: "false",
                     description: `a ${Mood[
                         mood
-                    ].toLowerCase()} playlist based on your ${getSourcesString(
+                    ].toLowerCase()} playlist based on ${getSourcesString(
                         sources
                     )} - created with love by moodqueue <3`,
                 }),

diff --git a/components/results/results.tsx b/components/results/results.tsx
@@ -164,8 +164,9 @@ export const Results: FunctionComponent<ResultsProps> = (props) => {
                             }}
                             secondary
                             tooltip={{
-                                text:
-                                    "click to either create a new moodqueue playlist or add to an existing one!",
+                                text: `click to either create a new moodqueue ${Mood[
+                                    mood
+                                ].toLowerCase()} playlist or add to an existing one!`,
                                 id: "playlist-tooltip",
                                 active: true,
                             }}
@@ -182,15 +183,17 @@ export const Results: FunctionComponent<ResultsProps> = (props) => {
                             tooltip={{
                                 text:
                                     userProduct === "premium"
-                                        ? "click here to add the above songs to your queue!"
+                                        ? `click here to add the above ${Mood[
+                                              mood
+                                          ].toLowerCase()} songs to your queue!`
                                         : "unfortunately, this feature is limited to spotify premium users only :(",
                                 id: "queue-tooltip",
                                 active: true,
                             }}
                         />
                         <Button
                             id="reset-btn"
-                            title="start over to begin a new moodqueue"
+                            title="start over to begin a new moodqueue!"
                             icon={<Back width="26px" height="26px" />}
                             text="start over"
                             onClick={resetForm}
@@ -208,7 +211,9 @@ export const Results: FunctionComponent<ResultsProps> = (props) => {
             {showPlaylistWarningModal && !showQueueWarningModal && (
                 <Confirmation
                     id="playlist-confirm"
-                    descText="pressing continue will either create a new moodqueue playlist or add to an existing one"
+                    descText={`pressing continue will either create a new moodqueue ${Mood[
+                        mood
+                    ].toLowerCase()} playlist or add to an existing one`}
                     headerText="playlist"
                     btnText="continue"
                     close={() => setShowPlaylistWarningModal(false)}
@@ -223,7 +228,9 @@ export const Results: FunctionComponent<ResultsProps> = (props) => {
             {showQueueWarningModal && !showPlaylistWarningModal && (
                 <Confirmation
                     id="queue-confirm"
-                    descText="pressing the button below will add the songs above to your queue if you have spotify already open and playing"
+                    descText={`pressing the button below will add the ${tracks.length} ${Mood[
+                        mood
+                    ].toLowerCase()} songs to your queue only if you have your spotify open and playing`}
                     headerText="queue"
                     btnText="add to queue"
                     close={() => setShowQueueWarningModal(false)}

diff --git a/ui/confirmation/Confirmation.tsx b/ui/confirmation/Confirmation.tsx
@@ -39,25 +39,25 @@ export const Confirmation: React.FunctionComponent<ConfirmationProps> = (props)
             >
                 <Box
                     id={id}
+                    align="center"
+                    gap="medium"
                     style={{
                         background: !secondary
-                            ? "linear-gradient(180deg, rgba(111,255,176,1) 0%, rgba(66,105,108,1) 50%, rgba(57,73,94,1) 75%)"
-                            : "linear-gradient(180deg, rgba(129,252,237,1) 0%, rgba(68,99,115,1) 50%, rgba(57,73,94,1) 75%)",
+                            ? "linear-gradient(45deg, rgba(72,201,176,1) 25%, rgba(163,196,255,1) 100%)"
+                            : "linear-gradient(45deg, rgba(93,173,226,1) 25%, rgba(163,196,255,1) 100%)",
+                        opacity: 0.9,
+                    }}
+                    background={{
+                        color: !secondary ? "#48C9B0" : "#5DADE2",
+                        dark: true,
+                        opacity: 0.9,
                     }}
-                    align="center"
-                    gap="large"
-                    background={{ color: "#34495E" }}
                     pad="medium"
                     round="large"
-                    border={{
-                        color: secondary ? "accent-3" : "accent-1",
-                        size: "large",
-                        side: "bottom",
-                        style: "groove",
-                    }}
+                    justify="between"
                 >
-                    <Description header text={headerText} textAlign="center" />
-                    <Description textAlign="center" text={descText} />
+                    <Description header text={headerText} textAlign="center" size="small" />
+                    <Description textAlign="center" text={descText} size="small" />
                     <Button
                         small
                         onClick={() => {

diff --git a/ui/track/Track.tsx b/ui/track/Track.tsx
@@ -1,13 +1,17 @@
 import React, { useState } from "react"
 import { OuterBox, InnerBoxStart } from "./Track.styles"
 import { Box, Image, Text } from "grommet"
-import { More, SubtractCircle, Trash } from "grommet-icons"
+import { Trash } from "grommet-icons"
 import { Track as TrackType } from "../../types/Track"
 import { Button } from "../button/Button"
 import { MoonLoader } from "react-spinners"
 import { useNotification } from "../../common/hooks/useNotification"
 import { useDrag } from "react-use-gesture"
 import { motion, useMotionValue, useTransform } from "framer-motion"
+import { MoreHoriz as More } from "@styled-icons/material/MoreHoriz"
+import { RemoveCircle } from "@styled-icons/material-twotone/RemoveCircle"
+//@styled-icons/material-rounded/RemoveCircle
+//@styled-icons/material-rounded/RemoveCircleOutline
 
 interface TrackProps {
     size?: any
@@ -85,7 +89,7 @@ export const Track: React.FunctionComponent<TrackProps> = (trackProps) => {
                 >
                     <InnerBoxStart
                         gap="small"
-                        pad={{ vertical: "small", right: "small" }}
+                        pad={{ vertical: "small" }}
                         round="small"
                         background={{ dark: true }}
                     >
@@ -145,13 +149,13 @@ export const Track: React.FunctionComponent<TrackProps> = (trackProps) => {
                                 id="more-details-btn"
                                 title="more"
                                 fill={false}
-                                icon={<More />}
+                                icon={<More width="24px" height="24px" color="white" />}
                                 small
                                 hover="dark-1"
                                 onClick={onClickMore}
                             />
                         ) : (
-                            <Trash />
+                            <Button icon={<Trash />} fill={false} small />
                         )}
                     </InnerBoxStart>
                 </OuterBox>
@@ -253,18 +257,31 @@ export const Track: React.FunctionComponent<TrackProps> = (trackProps) => {
                         </Box>
                         <Button
                             id="more-details-btn"
-                            title="more"
                             fill={false}
-                            icon={<More size="large" />}
+                            title="more"
+                            icon={
+                                <More
+                                    width={size === "large" ? "48px" : "40px"}
+                                    height={size === "large" ? "48px" : "40px"}
+                                    color="white"
+                                />
+                            }
                             hover="#24C0FF"
                             onClick={onClickMore}
                         />
                     </InnerBoxStart>
                     <Button
                         id="remove-track-btn"
-                        color="dark-1"
+                        fill={false}
                         title="remove"
-                        icon={<SubtractCircle color="status-error" size="large" />}
+                        hover="dark-1"
+                        icon={
+                            <RemoveCircle
+                                color="#FF4040"
+                                width={size === "large" ? "48px" : "40px"}
+                                height={size === "large" ? "48px" : "40px"}
+                            />
+                        }
                         onClick={() => {
                             onClickRemove()
                             notifySuccess(