Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better buttons and color consistency

This commit is contained in:
Seth Forsgren 2022-11-24 20:58:44 -08:00
parent cf4cfcb428
commit e48a885309
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Info.tsx
View File

@ -18,12 +18,18 @@ justify-content: center;
export default function Info(){
const [open, setOpen] = useState(false);
var classNameCondition = ""
if (open) {
classNameCondition="fixed z-90 top-8 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
}
return (
<>
<button
title="Info"
className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
className= {classNameCondition}
onClick={() => setOpen(true)}
>
<FiInfo />
@ -83,7 +89,7 @@ export default function Info(){
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
className="inline-flex justify-center rounded-md border border-transparent bg-sky-300 px-4 py-2 text-sm font-medium text-sky-900 hover:bg-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
onClick={() => setOpen(false)}
>
Let&apos;s Riff 🎸

11
components/Pause.tsx
View File

@ -9,12 +9,19 @@ export default function Pause({
paused,
setPaused,
}: PauseProps) {
var classNameCondition = ""
if (paused) {
classNameCondition="fixed z-90 top-28 right-8 bg-sky-300 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
}
return (
<>
<button
title="Pause"
className="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
className= {classNameCondition}
onClick={() => setPaused(!paused)}
>
{paused ? <FiPlay /> : <FiPause />}

2
components/PromptPanel.tsx
View File

@ -47,7 +47,7 @@ export default function PromptPanel({
}}
>
<input
className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-400 border-4 focus:outline-none focus:border-sky-500"
className="fixed w-1/2 h-12 pl-3 text-xl text-sky-900 rounded-lg border-sky-300 border-4 focus:outline-none focus:border-sky-500"
ref={inputPrompt}
type="text"
id="prompt"