Skip to content

Commit

Permalink
fix(templates): website template copy code button darkmode behavior (#…
Browse files Browse the repository at this point in the history
…9715)

### What?
Makes copybutton's CopyIcon behave as expected in darkmode.

### Why?
CopyIcon inverts on its own now and has a preset size.
Therefore this wrapper div creates unwanted behavior and is not needed
anymore.
```tsx
<div className="w-6 h-6 dark:invert">
    <CopyIcon />
</div>
 ```
With div
![image](https://github.com/user-attachments/assets/9ff84539-022a-4b2a-93b8-3b0733b7a915)
Without div
![image](https://github.com/user-attachments/assets/b3a2c1e2-5690-4824-9394-fee704170f5c)
Light mode is unaffected.

### How?
Remove the wrapper div above, leaving only the CopyIcon.
  • Loading branch information
MotorcycleEnjoyer authored Dec 3, 2024
1 parent 67179a7 commit fd9a007
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 8 deletions.
5 changes: 1 addition & 4 deletions templates/website/src/blocks/Code/CopyButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ export function CopyButton({ code }: { code: string }) {
}}
>
<p>{text}</p>

<div className="w-6 h-6 dark:invert">
<CopyIcon />
</div>
<CopyIcon />
</Button>
</div>
)
Expand Down
5 changes: 1 addition & 4 deletions templates/with-vercel-website/src/blocks/Code/CopyButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ export function CopyButton({ code }: { code: string }) {
}}
>
<p>{text}</p>

<div className="w-6 h-6 dark:invert">
<CopyIcon />
</div>
<CopyIcon />
</Button>
</div>
)
Expand Down

0 comments on commit fd9a007

Please sign in to comment.