Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-19 13:19:39 +02:00
Code Issues Releases Activity Actions 1

feature(dark mode): misc design fixes (#2215)

Browse source 
* Fix category dark mode styles

* Fix sidebar account tab states

* Fix dashboard balance sheet group styles

* Fix budget dark mode styles

* Fix chart gradient split

* Fix prose styles in dark mode

* Add back chat nav id for tests
This commit is contained in:
Zach Gollwitzer 2025-05-07 09:26:06 -04:00 • committed by GitHub
parent c26a7dd2dd
commit fb7107d614
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 254 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/javascript/controllers/time_series_chart_controller.js
View file

@ -138,36 +138,48 @@ export default class extends Controller {
.attr("x1", this._d3XScale.range()[0])
.attr("x2", this._d3XScale.range()[1]);
// First stop - solid trend color
gradient
.append("stop")
.attr("class", "start-color")
.attr("offset", "0%")
.attr("stop-color", this.dataValue.trend.color);
// Second stop - trend color right before split
gradient
.append("stop")
.attr("class", "middle-color")
.attr("class", "split-before")
.attr("offset", "100%")
.attr("stop-color", this.dataValue.trend.color);
// Third stop - gray color right after split
gradient
.append("stop")
.attr("class", "split-after")
.attr("offset", "100%")
.attr("stop-color", "var(--color-gray-400)");
// Fourth stop - solid gray to end
gradient
.append("stop")
.attr("class", "end-color")
.attr("offset", "100%")
.attr("class", "fg-subdued")
.attr("stop-color", "currentColor");
.attr("stop-color", "var(--color-gray-400)");
}
_setTrendlineSplitAt(percent) {
const position = percent * 100;
// Update both stops at the split point
this._d3Svg
.select(`#${this.element.id}-split-gradient`)
.select(".middle-color")
.attr("offset", `${percent * 100}%`);
.select(".split-before")
.attr("offset", `${position}%`);
this._d3Svg
.select(`#${this.element.id}-split-gradient`)
.select(".end-color")
.attr("offset", `${percent * 100}%`);
.select(".split-after")
.attr("offset", `${position}%`);
this._d3Svg
.select(`#${this.element.id}-trendline-gradient-rect`)