diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index bd51860..399094a 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -104,30 +104,21 @@ input:focus-visible {
gap: 6px;
}
-.currency-display-toggle {
- height: 32px;
- display: inline-flex;
- align-items: stretch;
+.currency-display-button {
+ width: 34px;
+ height: 34px;
+ display: inline-grid;
+ place-items: center;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 7px;
- padding: 2px;
+ padding: 0;
background: rgba(0, 0, 0, 0.12);
+ color: rgba(255, 255, 255, 0.82);
}
-.currency-display-toggle button {
- min-width: 32px;
- border: 0;
- border-radius: 5px;
- padding: 0 6px;
- background: transparent;
- color: rgba(255, 255, 255, 0.72);
- font-size: 11px;
- font-weight: 700;
-}
-
-.currency-display-toggle button.active {
- background: rgba(255, 255, 255, 0.92);
- color: #24766d;
+.currency-display-button.active {
+ background: rgba(255, 255, 255, 0.2);
+ color: #ffffff;
}
.participant-avatars {
diff --git a/apps/web/src/views/LedgerView.vue b/apps/web/src/views/LedgerView.vue
index f8e3772..06537c1 100644
--- a/apps/web/src/views/LedgerView.vue
+++ b/apps/web/src/views/LedgerView.vue
@@ -2,6 +2,7 @@
import { formatCurrencyAmount, type LedgerEntry } from "@cents/domain";
import {
BookOpen,
+ ArrowLeftRight,
ChevronLeft,
ChevronDown,
ChevronRight,
@@ -437,10 +438,17 @@ async function shareLedger() {