style(mcap): add aura to dot

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/components/marketcap/MarketCapChart.kt

@@ -23,7 +23,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -253,55 +255,8 @@ private fun MarketCapChartContent(
         splitFraction = markerFraction + 0.005f,
     )
 
-    val markerFill = CodeTheme.colors.background
-
-    val activeMarker = rememberDefaultCartesianMarker(
-        label = rememberTextComponent(
-            color = Color.Transparent,
-        ),
-        valueFormatter = remember {
-            DefaultCartesianMarker.ValueFormatter.default(colorCode = false)
-        },
-        indicator = {
-            shapeComponent(
-                fill = fill(markerFill),
-                strokeFill = fill(trendColor),
-                strokeThickness = 2.dp,
-                margins = Insets(4f),
-                shape = markerCorneredShape(CorneredShape.Corner.Rounded),
-                shadow = Shadow(
-                    radiusDp = 20f,
-                    color = trendColor.copy(0.20f).toArgb()
-                )
-            )
-        },
-        indicatorSize = CodeTheme.dimens.grid.x4,
-        guideline = null,
-    )
-
-    val persistentMarker = rememberDefaultCartesianMarker(
-        label = rememberTextComponent(
-            color = Color.Transparent,
-        ),
-        valueFormatter = remember {
-            DefaultCartesianMarker.ValueFormatter.default(colorCode = false)
-        },
-        indicator = { color ->
-            shapeComponent(
-                fill = fill(markerFill),
-                strokeFill = fill(color),
-                strokeThickness = 2.dp,
-                margins = Insets(4f),
-                shape = markerCorneredShape(CorneredShape.Corner.Rounded),
-                shadow = Shadow(
-                    radiusDp = 20f,
-                    color = trendColor.copy(0.20f).toArgb()
-                )
-            )
-        },
-        indicatorSize = CodeTheme.dimens.grid.x4,
-        guideline = null,
-    )
+    val activeMarker = rememberChartMarker(strokeFill = trendColor)
+    val persistentMarker = rememberChartMarker()
 
     val chart = rememberCartesianChart(
         rememberLineCartesianLayer(
@@ -323,7 +278,11 @@ private fun MarketCapChartContent(
             ),
         ),
         persistentMarkers = remember(isDragging, persistentMarker) {
-            { persistentMarker at 99.0 } // last point in normalized range
+            if (isDragging) {
+                { persistentMarker at 99.0 }
+            } else {
+                { activeMarker at 99.0 }
+            }
         },
         markerVisibilityListener = markerVisibilityListener,
         markerController = CartesianMarkerController.rememberShowOnPress(consumeMoveEvents = true),
@@ -341,6 +300,34 @@ private fun MarketCapChartContent(
     )
 }
 
+@Composable
+private fun rememberChartMarker(
+    strokeFill: Color = Color.Unspecified,
+    outerFill: Color = strokeFill.takeIf { it.isSpecified }?.copy(0.20f) ?: Color.Transparent,
+): CartesianMarker {
+    val markerFill = CodeTheme.colors.background
+
+    return rememberDefaultCartesianMarker(
+        label = rememberTextComponent(
+            color = Color.Transparent,
+        ),
+        valueFormatter = remember {
+            DefaultCartesianMarker.ValueFormatter.default(colorCode = false)
+        },
+        indicator = { color ->
+            outerFillShapeComponent(
+                outerFill = fill(outerFill),
+                margins = Insets(6f),
+                innerFill = fill(markerFill),
+                strokeFill = fill(strokeFill.takeIf { it.isSpecified } ?: color),
+                strokeThickness = 2.dp,
+            )
+        },
+        indicatorSize = CodeTheme.dimens.grid.x3,
+        guideline = null,
+    )
+}
+
 @Composable
 private fun rememberSplitLineFill(
     leftColor: Color,

apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/components/marketcap/OuterFillShapeComponent.kt

@@ -0,0 +1,73 @@
+package com.flipcash.app.tokens.internal.components.marketcap
+
+import android.graphics.Paint
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.patrykandpatrick.vico.compose.common.component.shapeComponent
+import com.patrykandpatrick.vico.compose.common.shape.markerCorneredShape
+import com.patrykandpatrick.vico.core.common.DrawingContext
+import com.patrykandpatrick.vico.core.common.Fill
+import com.patrykandpatrick.vico.core.common.Insets
+import com.patrykandpatrick.vico.core.common.component.Component
+import com.patrykandpatrick.vico.core.common.shape.CorneredShape
+import com.patrykandpatrick.vico.core.common.shape.Shape
+
+class OuterFillShapeComponent(
+    private val outerFill: Fill,
+    private val outerInsets: Insets,
+    private val inner: Component,
+) : Component {
+
+    private val outerPaint = Paint().apply {
+        style = Paint.Style.FILL
+        isAntiAlias = true
+    }
+
+    override fun draw(
+        context: DrawingContext,
+        left: Float,
+        top: Float,
+        right: Float,
+        bottom: Float,
+    ) {
+        val centerX = (left + right) / 2
+        val centerY = (top + bottom) / 2
+
+        with(context) {
+            val outerLeft = left - outerInsets.startDp.pixels
+            val outerTop = top - outerInsets.topDp.pixels
+            val outerRight = right + outerInsets.endDp.pixels
+            val outerBottom = bottom + outerInsets.bottomDp.pixels
+            val outerRadius = minOf(outerRight - outerLeft, outerBottom - outerTop) / 2
+
+            // Draw outer fill
+            outerPaint.color = outerFill.color
+            canvas.drawCircle(centerX, centerY, outerRadius, outerPaint)
+
+            // Draw inner component
+            inner.draw(context, left, top, right, bottom)
+        }
+    }
+}
+
+fun outerFillShapeComponent(
+    outerFill: Fill,
+    margins: Insets = Insets(4f),
+    innerFill: Fill,
+    strokeFill: Fill,
+    shape: Shape = markerCorneredShape(CorneredShape.Corner.Rounded),
+    strokeThickness: Dp = 2.dp,
+): Component {
+    val inner = shapeComponent(
+        fill = innerFill,
+        shape = shape,
+        strokeFill = strokeFill,
+        strokeThickness = strokeThickness,
+    )
+
+    return OuterFillShapeComponent(
+        outerFill = outerFill,
+        inner = inner,
+        outerInsets = margins,
+    )
+}