Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add default style for small button

Browse source
This commit is contained in:
Aneta Jastrzębska 2024-09-21 13:12:22 +02:00
parent e05a399177
commit e893dc0327
2 changed files with 30 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
View file

@ -7,7 +7,7 @@ enum CopyButtonState {
Error = "Could not copy",
}
const COPY_FEEDBACK_TIMEOUT = 2000
const COPY_FEEDBACK_TIMEOUT = 1000
// code block with Apply button at top
const BlockCode = ({
@ -42,9 +42,15 @@ const BlockCode = ({
<div className="relative group">
<div className="absolute top-0 right-0 invisible group-hover:visible">
<div className="flex space-x-2 p-2">
<button
className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
onClick={onCopy}
>
{copyButtonState}
</button>
{!disableApplyButton && (
<button
className="btn btn-secondary px-3 py-1 text-sm border border-vscode-input-border rounded"
className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
onClick={async () => {
getVSCodeAPI().postMessage({ type: "applyCode", code: text })
}}
@ -52,12 +58,6 @@ const BlockCode = ({
Apply
</button>
)}
<button
className="btn btn-secondary px-3 py-1 text-sm border border-vscode-input-border rounded"
onClick={onCopy}
>
{copyButtonState}
</button>
</div>
</div>
<div

40
extensions/void/src/sidebar/styles.css
View file

@ -3,33 +3,37 @@
@tailwind utilities;
html {
font-size: var(--vscode-font-size);
font-size: var(--vscode-font-size);
}
.btn {
@apply cursor-pointer transition-colors;
@apply cursor-pointer transition-colors;
&.btn-primary {
@apply bg-vscode-button-bg text-vscode-button-fg;
&.btn-primary {
@apply bg-vscode-button-bg text-vscode-button-fg;
&:not(:disabled) {
@apply hover:bg-vscode-button-hoverBg;
}
}
&:not(:disabled) {
@apply hover:bg-vscode-button-hoverBg;
}
}
&.btn-secondary {
@apply bg-vscode-button-secondary-bg text-vscode-button-secondary-fg;
&.btn-sm {
@apply px-3 py-1 text-sm;
}
&:not(:disabled) {
@apply hover:bg-vscode-button-secondary-hoverBg;
}
}
&.btn-secondary {
@apply bg-vscode-button-secondary-bg text-vscode-button-secondary-fg;
&:disabled {
@apply opacity-75 cursor-not-allowed;
}
&:not(:disabled) {
@apply hover:bg-vscode-button-secondary-hoverBg;
}
}
&:disabled {
@apply opacity-75 cursor-not-allowed;
}
}
.input {
@apply bg-vscode-input-bg text-vscode-input-fg border-vscode-input-border;
@apply bg-vscode-input-bg text-vscode-input-fg border-vscode-input-border;
}