Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: command card styling tweaks #234

Merged
merged 8 commits into from
Jun 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,63 +5,54 @@ import { Copy as CopyIcon } from "lucide-react";
const Wrapper = styled("div")`
align-items: center;
color: var(--discord-white-oklch);
display: flex;
font-size: 0.9rem;
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr auto;
`;

const Code = styled("code")`
color: var(--discord-white-oklch);
flex: 1;
letter-spacing: 0.05em;
line-height: 1.1;
line-height: 1.45;
`;

interface CopyButtonProps {
onClick?: () => void;
}

const StyledCopyIcon = styled(CopyIcon)`
height: 1.325rem;
`;

const CopyButton = styled("button")<CopyButtonProps>`
background-color: oklch(var(--discord-white-oklch) / 12%);
border-radius: 0.5rem;
border: none;
color: var(--discord-white-oklch);
border-radius: 0.5rem;
cursor: pointer;
display: flex;
font-size: 1rem;
padding: 0.4rem 0.3rem;
padding: 0.5rem;
place-items: center;
transition: background-color var(--transition-duration-slow) ease;
transition: background-color var(--transition-duration-fast) ease;

&:hover {
:hover {
background-color: oklch(var(--discord-white-oklch) / 24%);
}

&:active {
:active {
background-color: oklch(var(--discord-white-oklch) / 6%);
}
`;

const StyledCopyIcon = styled(CopyIcon)`
block-size: 1.5rem;
inline-size: 1.5rem;
`;

export default function BotCommandCard() {
const { adjustedCoords: coordinates } = useCanvasContext();
if (!coordinates) return null;

const { color } = useSelectedColorContext();
if (!color) return null;

if (!(coordinates && color)) return null;
const { x, y } = coordinates;
const command = `/place x:${x} y:${y} color:${color.code}`;

return (
<Wrapper>
<Code>{command}</Code>
<CopyButton
onClick={() => {
navigator.clipboard.writeText(command);
}}
>
<code>{command}</code>
<CopyButton onClick={() => navigator.clipboard.writeText(command)}>
<StyledCopyIcon />
</CopyButton>
</Wrapper>
Expand Down
31 changes: 17 additions & 14 deletions packages/frontend/src/components/button/PlacePixelButton.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { CircularProgress, styled } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";

import { Cooldown } from "@blurple-canvas-web/types";

import config from "@/config";
import {
useAuthContext,
useCanvasContext,
useSelectedColorContext,
} from "@/contexts";
import { CircularProgress, styled } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";
import { Button } from "./Button";
import DynamicButton from "./DynamicButton";

import { Cooldown } from "@blurple-canvas-web/types";

export const CoordinateLabel = styled("span")`
opacity: 0.6;
`;
Expand All @@ -20,8 +21,8 @@ export default function PlacePixelButton() {
const { canvas, coords, adjustedCoords, setCoords } = useCanvasContext();
const { color, setColor } = useSelectedColorContext();
const isSelected = adjustedCoords && color;
const [timeLeft, setTimeLeft] = useState<number>(0);
const [isPlacing, setIsPlacing] = useState<boolean>(false);
const [timeLeft, setTimeLeft] = useState(0);
const [isPlacing, setIsPlacing] = useState(false);
const { user, signOut } = useAuthContext();

// cooldown timer
Expand Down Expand Up @@ -77,7 +78,7 @@ export default function PlacePixelButton() {
// Both these buttons never show as the logic is hoisted at the level above this
// My issues with having it above is that the user has no indication of why they can't place pixels
if (canvas.isLocked) {
return <Button disabled>Canvas can't be modified</Button>;
return <Button disabled>Canvas cant be modified</Button>;
}
if (!user) {
return <Button disabled>Sign in to place pixels</Button>;
Expand All @@ -86,7 +87,7 @@ export default function PlacePixelButton() {
if (isPlacing) {
return (
<Button variant="contained" disabled>
{"Placing Pixel"}
Placing pixel
<CircularProgress
color="inherit"
// Can't get sizing to work dynamically
Expand Down Expand Up @@ -117,14 +118,16 @@ export default function PlacePixelButton() {
return <Button disabled>Select a pixel</Button>;
}

const { x, y } = adjustedCoords;

return (
<DynamicButton color={color} onAction={handlePixelRequest}>
{isSelected ? "Place pixel" : "Select a pixel"}
<CoordinateLabel>
{isSelected ?
`(${adjustedCoords.x},\u00A0${adjustedCoords.y})`
: undefined}
</CoordinateLabel>
{isSelected && (
<CoordinateLabel>
({x},&nbsp;{y})
</CoordinateLabel>
)}
</DynamicButton>
);
}