diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
index 3273edb55..9aaa9bb72 100644
--- a/src/components/jars/Jar.module.css
+++ b/src/components/jars/Jar.module.css
@@ -62,6 +62,7 @@
--bs-code-color: var(--bs-blue);
color: var(--bs-blue);
font-size: 0.75rem;
+ min-height: 1rem;
}
.selectableJarContainer {
@@ -77,21 +78,20 @@
cursor: none;
}
-.selectableJarContainer > .selectionCircle {
- height: 1.25rem;
- width: 1.25rem;
- margin-top: 0.8rem;
+.selectableJarContainer .selectionCircle {
+ height: 1.5rem;
+ width: 1.5rem;
border-radius: 50%;
display: inline-block;
border: 1px solid var(--bs-body-color);
}
-.selectableJarContainer:not(.selectable) > .selectionCircle {
+.selectableJarContainer:not(.selectable) .selectionCircle {
visibility: hidden;
}
-.selectableJarContainer.selected > .selectionCircle {
+.selectableJarContainer.selected .selectionCircle {
visibility: visible !important;
background-color: var(--bs-body-color);
}
diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
index ae6b9463d..be92d80fe 100644
--- a/src/components/jars/Jar.tsx
+++ b/src/components/jars/Jar.tsx
@@ -22,6 +22,7 @@ interface JarProps {
interface SelectableJarProps {
isSelectable: boolean
isSelected: boolean
+ variant?: 'default' | 'warning'
onClick: (index: JarIndex) => void
}
@@ -127,16 +128,18 @@ const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarPr
- {frozenBalance && frozenBalance > 0 ? (
-
-
-
-
- ) : null}
+
+ {frozenBalance && frozenBalance > 0 ? (
+ <>
+
+
+ >
+ ) : null}
+
)
@@ -153,6 +156,7 @@ const SelectableJar = ({
isSelectable,
isSelected,
onClick,
+ variant = 'default',
}: JarProps & SelectableJarProps) => {
return (