From 65e392f93bb95b931b3f5d864a877a9186ba0ebd Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Tue, 9 Jul 2024 20:49:11 +0200
Subject: [PATCH 01/12] work in progress tutorials in compose

---
 .../screens/tutorial/IntroTutorialScreen.kt   | 166 ++++++++++++++++++
 .../tutorial/OverlaysTutorialScreen.kt        | 158 +++++++++++++++++
 .../screens/tutorial/TutorialScreen.kt        | 114 ++++++++++++
 .../user/achievements/AnimatedTadaShine.kt    |   6 +-
 .../streetcomplete/ui/common/MapButton.kt     |  44 +++++
 .../streetcomplete/ui/common/Pin.kt           |  40 +++++
 app/src/main/res/values/textStyles.xml        |   4 +-
 7 files changed, 527 insertions(+), 5 deletions(-)
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/ui/common/Pin.kt

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
new file mode 100644
index 00000000000..568f65899a3
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -0,0 +1,166 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.R
+import de.westnordost.streetcomplete.ui.common.MapButton
+import de.westnordost.streetcomplete.ui.common.Pin
+import de.westnordost.streetcomplete.ui.theme.headlineSmall
+import de.westnordost.streetcomplete.ui.theme.titleSmall
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun IntroTutorialScreen(
+    onFinished: () -> Unit,
+) {
+    TutorialScreen(
+        pageCount = 3,
+        onFinished = onFinished,
+        illustration = { page ->
+            Box(contentAlignment = Alignment.TopStart) {
+                IntroTutorialIllustration(page)
+            }
+        }
+    ) { page ->
+        Column(
+            modifier = Modifier.fillMaxSize(1f),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            when (page) {
+                0 -> IntroTutorialStep1Text()
+                1 -> IntroTutorialStep2Text()
+                2 -> IntroTutorialStep3Text()
+            }
+        }
+    }
+}
+
+@Composable
+private fun IntroTutorialIllustration(
+    page: Float
+) {
+    // TODO animate steps
+
+    Box(Modifier.size(width = 226.dp, height = 222.dp)) {
+        Image(
+            painter = painterResource(R.drawable.logo_osm_map),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+        Image(
+            painter = painterResource(R.drawable.logo_osm_map_lighting),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+    }
+
+    MapButton(
+        onClick = {},
+        modifier = Modifier.absoluteOffset(x = 200.dp, y = 130.dp)
+    ) {
+        Icon(painterResource(R.drawable.ic_location_no_location_24dp), null)
+    }
+
+    Pin(
+        iconPainter = painterResource(R.drawable.ic_quest_recycling),
+        modifier = Modifier.absoluteOffset(x = 120.dp, y = 60.dp)
+    )
+    Pin(
+        iconPainter = painterResource(R.drawable.ic_quest_street),
+        modifier = Modifier.absoluteOffset(x = 45.dp, y = 110.dp)
+    )
+    Pin(
+        iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
+        modifier = Modifier.absoluteOffset(x = 0.dp, y = 25.dp)
+    )
+
+    // TODO checkmark circle
+
+    Image(
+        painter = painterResource(R.drawable.logo_osm_magnifier),
+        contentDescription = null,
+        modifier = Modifier
+            .size(185.dp)
+            .offset(x = 20.dp, y = 16.dp)
+    )
+}
+
+@Composable
+private fun IntroTutorialStep1Text() {
+    Text(
+        text = stringResource(R.string.tutorial_welcome_to_osm),
+        style = MaterialTheme.typography.headlineSmall,
+        textAlign = TextAlign.Center
+    )
+    Text(
+        text = stringResource(R.string.tutorial_welcome_to_osm_subtitle),
+        style = MaterialTheme.typography.titleSmall,
+        textAlign = TextAlign.Center
+    )
+    Text(
+        text = stringResource(R.string.tutorial_intro),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+        modifier = Modifier.padding(top = 24.dp)
+    )
+}
+
+@Composable
+private fun IntroTutorialStep2Text() {
+    Text(
+        text = stringResource(R.string.tutorial_solving_quests),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+    )
+    Text(
+        text = stringResource(R.string.no_location_permission_warning),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+        modifier = Modifier.padding(top = 24.dp)
+    )
+}
+
+@Composable
+private fun IntroTutorialStep3Text() {
+    Text(
+        text = stringResource(R.string.tutorial_stay_safe),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+    )
+    Text(
+        text = stringResource(R.string.tutorial_happy_mapping),
+        style = MaterialTheme.typography.headlineSmall,
+        textAlign = TextAlign.Center,
+        modifier = Modifier.padding(top = 24.dp)
+    )
+}
+
+@Preview
+@Composable
+private fun PreviewIntroTutorialIllustration() {
+    IntroTutorialIllustration(page = 0f)
+}
+
+@Preview
+@Composable
+private fun PreviewIntroTutorialScreen() {
+    IntroTutorialScreen {}
+}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
new file mode 100644
index 00000000000..3291f2b34bd
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -0,0 +1,158 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.R
+import de.westnordost.streetcomplete.screens.user.achievements.AnimatedTadaShine
+import de.westnordost.streetcomplete.ui.common.MapButton
+import de.westnordost.streetcomplete.ui.theme.headlineSmall
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun OverlaysTutorialScreen(
+    onFinished: () -> Unit,
+) {
+    TutorialScreen(
+        pageCount = 3,
+        onFinished = onFinished,
+        illustration = { page ->
+            Box(contentAlignment = Alignment.TopStart) {
+                OverlaysTutorialIllustration(page)
+            }
+        },
+    ) { page ->
+        Column(
+            modifier = Modifier.fillMaxSize(1f),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            when (page) {
+                0 -> OverlaysTutorialStepIntroText()
+                1 -> OverlaysTutorialStepDisplayText()
+                2 -> OverlaysTutorialStepEditText()
+            }
+        }
+    }
+}
+
+@Composable
+private fun OverlaysTutorialStepIntroText() {
+    Text(
+        text = stringResource(R.string.overlays_tutorial_title),
+        style = MaterialTheme.typography.headlineSmall,
+        textAlign = TextAlign.Center,
+    )
+    Text(
+        text = stringResource(R.string.overlays_tutorial_intro),
+        style = MaterialTheme.typography.body1,
+        modifier = Modifier.padding(top = 24.dp),
+        textAlign = TextAlign.Center,
+    )
+}
+
+@Composable
+private fun OverlaysTutorialStepDisplayText() {
+    Text(
+        text = stringResource(R.string.overlays_tutorial_display),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+    )
+}
+
+@Composable
+private fun OverlaysTutorialStepEditText() {
+    Text(
+        text = stringResource(R.string.overlays_tutorial_edit),
+        style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center,
+    )
+}
+
+@Composable
+private fun OverlaysTutorialIllustration(
+    page: Float
+) {
+    // TODO animate steps
+
+    Box(Modifier.size(width = 226.dp, height = 222.dp)) {
+        Image(
+            painter = painterResource(R.drawable.logo_osm_map),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+        Image(
+            painter = painterResource(R.drawable.overlay_osm_map),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+
+        Image(
+            painter = painterResource(R.drawable.ic_preset_fas_shopping_cart),
+            contentDescription = null,
+            modifier = Modifier
+                .size(24.dp)
+                .absoluteOffset(80.dp, 40.dp)
+        )
+        Image(
+            painter = painterResource(R.drawable.ic_preset_maki_fuel),
+            contentDescription = null,
+            modifier = Modifier
+                .size(24.dp)
+                .absoluteOffset(180.dp, 170.dp)
+        )
+        Image(
+            painter = painterResource(R.drawable.overlay_osm_map_edit),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
+    }
+
+    Image(
+        painter = painterResource(R.drawable.paint_roller),
+        contentDescription = null,
+        modifier = Modifier.rotate(-45f)
+    )
+
+    Box(
+        modifier = Modifier
+            .size(56.dp)
+            .absoluteOffset(x = 228.dp, y = 158.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        AnimatedTadaShine()
+
+        MapButton(onClick = {},) {
+            Icon(painterResource(R.drawable.ic_overlay_black_24dp), null)
+        }
+    }
+
+}
+
+@Preview
+@Composable
+private fun PreviewOverlaysTutorialIllustration() {
+    OverlaysTutorialIllustration(page = 0f)
+}
+
+@Preview
+@Composable
+private fun PreviewOverlaysTutorialScreen() {
+    OverlaysTutorialScreen {}
+}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
new file mode 100644
index 00000000000..a58622352eb
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
@@ -0,0 +1,114 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerScope
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Button
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.R
+import kotlinx.coroutines.launch
+
+/** Generic multiple-page tutorial screen */
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun TutorialScreen(
+    pageCount: Int,
+    onFinished: () -> Unit,
+    illustration: @Composable (pageAnimated: Float) -> Unit,
+    pageContent: @Composable PagerScope.(page: Int) -> Unit
+) {
+    val state = rememberPagerState { pageCount }
+    val coroutineScope = rememberCoroutineScope()
+    val pageAnimated = remember(state.currentPage, state.currentPageOffsetFraction) {
+        derivedStateOf { state.currentPage + state.currentPageOffsetFraction }
+    }
+// TODO deal with landscape layout?
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Box(
+            modifier = Modifier.weight(0.5f),
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            illustration(pageAnimated.value)
+        }
+        HorizontalPager(
+            state = state,
+            modifier = Modifier.weight(0.5f),
+            contentPadding = PaddingValues(horizontal = 16.dp),
+            pageSpacing = 32.dp,
+            pageContent = pageContent
+        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Row {
+                repeat(pageCount) { page ->
+                    PagerIndicator(isCurrentPage = state.currentPage == page)
+                }
+            }
+            Button(onClick = {
+                if (state.isOnLastPage()) {
+                    onFinished()
+                } else {
+                    coroutineScope.launch {
+                        state.animateScrollToPage(state.currentPage + 1)
+                    }
+                }
+            }) {
+                Text(stringResource(if (state.isOnLastPage()) R.string.letsgo else R.string.next))
+            }
+        }
+    }
+}
+
+@Composable
+private fun PagerIndicator(
+    isCurrentPage: Boolean,
+    modifier: Modifier = Modifier
+) {
+    val alpha by animateFloatAsState(
+        if (isCurrentPage) ContentAlpha.high else ContentAlpha.disabled
+    )
+    Box(modifier
+        .padding(4.dp)
+        .alpha(alpha)
+        .background(color = MaterialTheme.colors.onSurface, shape = CircleShape)
+        .size(12.dp)
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+private fun PagerState.isOnLastPage(): Boolean = currentPage >= pageCount - 1
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/user/achievements/AnimatedTadaShine.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/user/achievements/AnimatedTadaShine.kt
index d1f60425651..2765cfbbdd7 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/user/achievements/AnimatedTadaShine.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/user/achievements/AnimatedTadaShine.kt
@@ -19,7 +19,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import de.westnordost.streetcomplete.R
 
 @Composable
-fun AnimatedTadaShine() {
+fun AnimatedTadaShine(modifier: Modifier = Modifier) {
     val infiniteTransition = rememberInfiniteTransition("ta-da shine rotation")
     val rotation by infiniteTransition.animateFloat(
         0f, 360f,
@@ -27,8 +27,8 @@ fun AnimatedTadaShine() {
         "ta-da shine rotation"
     )
 
-    TadaShine(Modifier.rotate(rotation * 2f))
-    TadaShine(Modifier.rotate(180f - rotation))
+    TadaShine(modifier.rotate(rotation * 2f))
+    TadaShine(modifier.rotate(180f - rotation))
 }
 
 @Composable
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt b/app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt
new file mode 100644
index 00000000000..6bf289f0ef5
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt
@@ -0,0 +1,44 @@
+package de.westnordost.streetcomplete.ui.common
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.R
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun MapButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    content: @Composable() (BoxScope.() -> Unit)
+) {
+    Surface(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        shape = CircleShape,
+        color = Color.White,
+        elevation = 4.dp
+    ) {
+        Box(Modifier.padding(16.dp), content = content)
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewMapButton() {
+    MapButton(onClick = {}) {
+        Icon(painterResource(R.drawable.ic_location_24dp), null)
+    }
+}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/common/Pin.kt b/app/src/main/java/de/westnordost/streetcomplete/ui/common/Pin.kt
new file mode 100644
index 00000000000..a09a277a077
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/ui/common/Pin.kt
@@ -0,0 +1,40 @@
+package de.westnordost.streetcomplete.ui.common
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.R
+
+@Composable
+fun Pin(
+    iconPainter: Painter,
+    modifier: Modifier = Modifier
+) {
+    Box(modifier) {
+        Image(
+            painter = painterResource(R.drawable.pin),
+            contentDescription = null,
+            modifier = Modifier.size(66.dp)
+        )
+        Image(
+            painter = iconPainter,
+            contentDescription = null,
+            modifier = Modifier
+                .absoluteOffset(x = 20.dp, y = 7.dp)
+                .size(42.dp)
+        )
+    }
+}
+
+@Composable
+@Preview
+private fun PinPreview() {
+    Pin(painterResource(R.drawable.ic_quest_recycling))
+}
diff --git a/app/src/main/res/values/textStyles.xml b/app/src/main/res/values/textStyles.xml
index f6c759d5bb0..f4ddbeeb885 100644
--- a/app/src/main/res/values/textStyles.xml
+++ b/app/src/main/res/values/textStyles.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="TextAppearance.HeadlineSmall" parent="TextAppearance.AppCompat.Headline">
+    <style name="TextAppearance.HeadlineSmall" parent="TextAppearance.AppCompat.Headline"><!-- TODO remove -->
         <item name="android:textSize">24sp</item>
     </style>
-    <style name="TextAppearance.Subhead" parent="TextAppearance.AppCompat.Subhead">
+    <style name="TextAppearance.Subhead" parent="TextAppearance.AppCompat.Subhead"><!-- TODO remove -->
         <item name="android:textSize">15sp</item>
     </style>
     <style name="TextAppearance.BigBody" parent="TextAppearance.Body">

From f481a1ebe291e51f1bda511c49b54a9f1440e309 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Tue, 9 Jul 2024 21:32:12 +0200
Subject: [PATCH 02/12] remove unused file

---
 .../main/res/layout/view_icon_progress.xml    | 37 -------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 app/src/main/res/layout/view_icon_progress.xml

diff --git a/app/src/main/res/layout/view_icon_progress.xml b/app/src/main/res/layout/view_icon_progress.xml
deleted file mode 100644
index 5492b30922c..00000000000
--- a/app/src/main/res/layout/view_icon_progress.xml
+++ /dev/null
@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merge
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    tools:parentTag="android.widget.RelativeLayout"
-    tools:background="#f0f"
-    android:layout_width="64dp"
-    android:layout_height="64dp">
-
-    <ImageView
-        android:id="@+id/iconView"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_centerInParent="true"
-        android:padding="8dp"
-        tools:src="@drawable/ic_quest_street"/>
-
-    <ProgressBar
-        android:id="@+id/progressView"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:indeterminate="true"
-        android:alpha="0"
-        tools:alpha="1"/>
-
-    <ImageView
-        android:id="@+id/checkmarkView"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:padding="6dp"
-        app:srcCompat="@drawable/ic_animated_checkmark_circle"
-        android:alpha="0"
-        tools:alpha="1"
-        tools:src="@drawable/ic_checkmark_circle"/>
-
-</merge>

From c37468b08d99966c7bf7f6ccb1a09158879f6385 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Tue, 9 Jul 2024 21:33:03 +0200
Subject: [PATCH 03/12] add (experimental) animated vector drawable

---
 .../screens/tutorial/CheckmarkCircle.kt       | 39 +++++++++++++++++++
 res/graphics/tutorial/checkmark_circle.svg    |  8 ++--
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
new file mode 100644
index 00000000000..3919d70c369
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
@@ -0,0 +1,39 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.vector.Path
+import androidx.compose.ui.graphics.vector.PathParser
+import androidx.compose.ui.graphics.vector.VectorPainter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun checkmarkCircle(progress: Float): VectorPainter = rememberVectorPainter(
+    defaultWidth = 128.dp,
+    defaultHeight = 128.dp,
+    viewportWidth = 128f,
+    viewportHeight = 128f,
+    autoMirror = false
+) { _, _ ->
+    Path(
+        pathData = circlePath,
+        strokeLineWidth = 12f,
+        stroke = SolidColor(Color.Black),
+        trimPathEnd = (progress * 3f/2).coerceIn(0f, 1f)
+    )
+    Path(
+        pathData = checkmarkPath,
+        strokeLineWidth = 12f,
+        stroke = SolidColor(Color.Black),
+        trimPathEnd = ((progress - 2f/3) * 3f).coerceIn(0f, 1f)
+    )
+}
+
+private val circlePath = PathParser().parsePathString(
+    "m122,64a58,58 0,0 1,-58 58,58 58,0 0,1 -58,-58 58,58 0,0 1,58 -58,58 58,0 0,1 58,58z"
+).toNodes()
+private val checkmarkPath = PathParser().parsePathString(
+    "m28.459,67.862c7.344,4.501 19.241,13.97 27.571,23.732 11.064,-20.587 27.756,-39.206 44.333,-55.458"
+).toNodes()
diff --git a/res/graphics/tutorial/checkmark_circle.svg b/res/graphics/tutorial/checkmark_circle.svg
index a3dc0460bfd..58273a5527f 100644
--- a/res/graphics/tutorial/checkmark_circle.svg
+++ b/res/graphics/tutorial/checkmark_circle.svg
@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100%" height="100%" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
- <g transform="translate(0 -994.52)" fill="none" stroke="#000">
-  <path d="m122 1058.5a58 58 0 0 1-58 58 58 58 0 0 1-58-58 58 58 0 0 1 58-58 58 58 0 0 1 58 58z" stroke-linecap="square" stroke-linejoin="round" stroke-width="12"/>
-  <path d="m28.459 1062.4c7.344 4.5011 19.241 13.97 27.571 23.732 11.064-20.587 27.756-39.206 44.333-55.458" stroke-width="12"/>
- </g>
+<svg version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+ <path d="m122 63.98a58 58 0 0 1-58 58 58 58 0 0 1-58-58 58 58 0 0 1 58-58 58 58 0 0 1 58 58z" fill="none" stroke="#000" stroke-linecap="square" stroke-linejoin="round" stroke-width="12"/>
+ <path d="m28.459 67.88c7.344 4.5011 19.241 13.97 27.571 23.732 11.064-20.587 27.756-39.206 44.333-55.458" fill="none" stroke="#000" stroke-width="12"/>
 </svg>

From 5bb763dd91761ff6c8409a9a2f7cd0b03fdb90f8 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Thu, 11 Jul 2024 22:05:22 +0200
Subject: [PATCH 04/12] landscape layout, scrollable text, more space for text

---
 .../screens/tutorial/IntroTutorialScreen.kt   |  13 +-
 .../screens/tutorial/TutorialScreen.kt        | 181 +++++++++++++-----
 2 files changed, 142 insertions(+), 52 deletions(-)

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index 568f65899a3..627b7c06933 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -1,6 +1,5 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,7 +17,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.ui.common.MapButton
@@ -26,7 +27,6 @@ import de.westnordost.streetcomplete.ui.common.Pin
 import de.westnordost.streetcomplete.ui.theme.headlineSmall
 import de.westnordost.streetcomplete.ui.theme.titleSmall
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun IntroTutorialScreen(
     onFinished: () -> Unit,
@@ -153,13 +153,8 @@ private fun IntroTutorialStep3Text() {
     )
 }
 
-@Preview
-@Composable
-private fun PreviewIntroTutorialIllustration() {
-    IntroTutorialIllustration(page = 0f)
-}
-
-@Preview
+@Preview(device = Devices.NEXUS_5) // darn small device
+@PreviewScreenSizes
 @Composable
 private fun PreviewIntroTutorialScreen() {
     IntroTutorialScreen {}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
index a58622352eb..54ff66b8036 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
@@ -3,20 +3,24 @@ package de.westnordost.streetcomplete.screens.tutorial
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.PagerScope
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
@@ -29,6 +33,8 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
@@ -41,55 +47,143 @@ fun TutorialScreen(
     pageCount: Int,
     onFinished: () -> Unit,
     illustration: @Composable (pageAnimated: Float) -> Unit,
-    pageContent: @Composable PagerScope.(page: Int) -> Unit
+    pageContent: @Composable (page: Int) -> Unit
 ) {
     val state = rememberPagerState { pageCount }
-    val coroutineScope = rememberCoroutineScope()
     val pageAnimated = remember(state.currentPage, state.currentPageOffsetFraction) {
         derivedStateOf { state.currentPage + state.currentPageOffsetFraction }
     }
-// TODO deal with landscape layout?
 
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(bottom = 16.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.spacedBy(16.dp)
-    ) {
-        Box(
-            modifier = Modifier.weight(0.5f),
-            contentAlignment = Alignment.BottomCenter
-        ) {
+    TutorialScreenLayout(
+        illustration = {
             illustration(pageAnimated.value)
+        },
+        pageContent = {
+            HorizontalPager(
+                state = state,
+                modifier = Modifier.width(480.dp),
+                contentPadding = PaddingValues(horizontal = 16.dp),
+                pageSpacing = 32.dp,
+                pageContent = { page ->
+                    Box(
+                        Modifier
+                            .verticalScroll(rememberScrollState())
+                            .padding(bottom = 96.dp)
+                    ) {
+                        pageContent(page)
+                    }
+                }
+            )
+        },
+        controls = {
+            PagerControls(
+                state = state,
+                onLastPageFinished = onFinished,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(
+                        Brush.verticalGradient(
+                            .0f to Color.Transparent,
+                            .5f to MaterialTheme.colors.surface
+                        )
+                    )
+                    .padding(bottom = 16.dp)
+            )
         }
-        HorizontalPager(
-            state = state,
-            modifier = Modifier.weight(0.5f),
-            contentPadding = PaddingValues(horizontal = 16.dp),
-            pageSpacing = 32.dp,
-            pageContent = pageContent
-        )
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(8.dp)
-        ) {
-            Row {
-                repeat(pageCount) { page ->
-                    PagerIndicator(isCurrentPage = state.currentPage == page)
+    )
+}
+
+@Composable
+private fun TutorialScreenLayout(
+    modifier: Modifier = Modifier,
+    illustration: @Composable () -> Unit,
+    pageContent: @Composable () -> Unit,
+    controls: @Composable () -> Unit,
+) {
+    BoxWithConstraints(modifier) {
+        if (maxHeight > maxWidth) {
+            Column(
+                modifier = Modifier.fillMaxSize(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(16.dp),
+            ) {
+                Box(
+                    modifier = Modifier.weight(0.4f),
+                    contentAlignment = Alignment.BottomCenter
+                ) {
+                    illustration()
+                }
+                Box(
+                    modifier = Modifier.weight(0.6f),
+                    contentAlignment = Alignment.TopCenter
+                ) {
+                    pageContent()
+                    Box(Modifier.align(Alignment.BottomCenter)) {
+                        controls()
+                    }
                 }
             }
-            Button(onClick = {
-                if (state.isOnLastPage()) {
-                    onFinished()
-                } else {
-                    coroutineScope.launch {
-                        state.animateScrollToPage(state.currentPage + 1)
+        } else {
+            Box(Modifier.fillMaxSize()) {
+                Row(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(16.dp)
+                ) {
+                    Box(
+                        modifier = Modifier.weight(0.4f),
+                        contentAlignment = Alignment.CenterEnd
+                    ) {
+                        illustration()
+                    }
+                    Box(
+                        modifier = Modifier.weight(0.6f),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        pageContent()
+                    }
+                }
+                Row(
+                    modifier = Modifier.fillMaxSize(),
+                    horizontalArrangement = Arrangement.spacedBy(16.dp)
+                ) {
+                    Spacer(Modifier.weight(0.4f))
+                    Box(Modifier.weight(0.6f).align(Alignment.Bottom)) {
+                        controls()
                     }
                 }
-            }) {
-                Text(stringResource(if (state.isOnLastPage()) R.string.letsgo else R.string.next))
+
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun PagerControls(
+    state: PagerState,
+    onLastPageFinished: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val coroutineScope = rememberCoroutineScope()
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+    ) {
+        Row {
+            repeat(state.pageCount) { page ->
+                PagerIndicator(isCurrentPage = state.currentPage == page)
+            }
+        }
+        Button(onClick = {
+            if (state.isOnLastPage()) {
+                onLastPageFinished()
+            } else {
+                coroutineScope.launch { state.animateScrollToPage(state.currentPage + 1) }
             }
+        }) {
+            Text(stringResource(if (state.isOnLastPage()) R.string.letsgo else R.string.next))
         }
     }
 }
@@ -102,11 +196,12 @@ private fun PagerIndicator(
     val alpha by animateFloatAsState(
         if (isCurrentPage) ContentAlpha.high else ContentAlpha.disabled
     )
-    Box(modifier
-        .padding(4.dp)
-        .alpha(alpha)
-        .background(color = MaterialTheme.colors.onSurface, shape = CircleShape)
-        .size(12.dp)
+    Box(
+        modifier
+            .padding(4.dp)
+            .alpha(alpha)
+            .background(color = MaterialTheme.colors.onSurface, shape = CircleShape)
+            .size(12.dp)
     )
 }
 

From 6cbefde66e6d96e9478f578ebc020145fa559b35 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Fri, 12 Jul 2024 20:27:36 +0200
Subject: [PATCH 05/12] add some animated vector drawables

---
 .../screens/tutorial/CheckmarkCircle.kt       | 16 ++--
 .../screens/tutorial/IntroTutorialScreen.kt   | 88 +++++++++++--------
 .../screens/tutorial/MapEditHighlighted.kt    | 53 +++++++++++
 .../tutorial/OverlaysTutorialScreen.kt        |  9 +-
 .../screens/tutorial/PaintRoller.kt           | 72 +++++++++++++++
 .../streetcomplete/ui/util/PathParser.kt      |  7 ++
 6 files changed, 196 insertions(+), 49 deletions(-)
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/ui/util/PathParser.kt

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
index 3919d70c369..762bd8f3429 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
@@ -1,13 +1,13 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.vector.Path
-import androidx.compose.ui.graphics.vector.PathParser
 import androidx.compose.ui.graphics.vector.VectorPainter
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.ui.theme.LeafGreen
+import de.westnordost.streetcomplete.ui.util.svgPath
 
 @Composable
 fun checkmarkCircle(progress: Float): VectorPainter = rememberVectorPainter(
@@ -20,20 +20,20 @@ fun checkmarkCircle(progress: Float): VectorPainter = rememberVectorPainter(
     Path(
         pathData = circlePath,
         strokeLineWidth = 12f,
-        stroke = SolidColor(Color.Black),
+        stroke = SolidColor(LeafGreen),
         trimPathEnd = (progress * 3f/2).coerceIn(0f, 1f)
     )
     Path(
         pathData = checkmarkPath,
         strokeLineWidth = 12f,
-        stroke = SolidColor(Color.Black),
+        stroke = SolidColor(LeafGreen),
         trimPathEnd = ((progress - 2f/3) * 3f).coerceIn(0f, 1f)
     )
 }
 
-private val circlePath = PathParser().parsePathString(
+private val circlePath = svgPath(
     "m122,64a58,58 0,0 1,-58 58,58 58,0 0,1 -58,-58 58,58 0,0 1,58 -58,58 58,0 0,1 58,58z"
-).toNodes()
-private val checkmarkPath = PathParser().parsePathString(
+)
+private val checkmarkPath = svgPath(
     "m28.459,67.862c7.344,4.501 19.241,13.97 27.571,23.732 11.064,-20.587 27.756,-39.206 44.333,-55.458"
-).toNodes()
+)
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index 627b7c06933..66126b09349 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -3,11 +3,14 @@ package de.westnordost.streetcomplete.screens.tutorial
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.absoluteOffset
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -35,9 +38,7 @@ fun IntroTutorialScreen(
         pageCount = 3,
         onFinished = onFinished,
         illustration = { page ->
-            Box(contentAlignment = Alignment.TopStart) {
-                IntroTutorialIllustration(page)
-            }
+            IntroTutorialIllustration(page)
         }
     ) { page ->
         Column(
@@ -57,50 +58,59 @@ fun IntroTutorialScreen(
 private fun IntroTutorialIllustration(
     page: Float
 ) {
-    // TODO animate steps
+    Box(
+        contentAlignment = Alignment.TopStart,
+        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
+    ) {
+        // TODO animate steps
+
+        Box(Modifier.size(width = 226.dp, height = 222.dp)) {
+            Image(
+                painter = painterResource(R.drawable.logo_osm_map),
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize()
+            )
+            Image(
+                painter = painterResource(R.drawable.logo_osm_map_lighting),
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+
+        MapButton(
+            onClick = {},
+            modifier = Modifier.absoluteOffset(x = 200.dp, y = 130.dp)
+        ) {
+            Icon(painterResource(R.drawable.ic_location_no_location_24dp), null)
+        }
+
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_recycling),
+            modifier = Modifier.absoluteOffset(x = 120.dp, y = 60.dp)
+        )
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_street),
+            modifier = Modifier.absoluteOffset(x = 45.dp, y = 110.dp)
+        )
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
+            modifier = Modifier.absoluteOffset(x = 0.dp, y = 25.dp)
+        )
 
-    Box(Modifier.size(width = 226.dp, height = 222.dp)) {
         Image(
-            painter = painterResource(R.drawable.logo_osm_map),
+            painter = checkmarkCircle(progress = 1f),
             contentDescription = null,
-            modifier = Modifier.fillMaxSize()
+            modifier = Modifier.align(Alignment.Center)
         )
+
         Image(
-            painter = painterResource(R.drawable.logo_osm_map_lighting),
+            painter = painterResource(R.drawable.logo_osm_magnifier),
             contentDescription = null,
-            modifier = Modifier.fillMaxSize()
+            modifier = Modifier
+                .size(185.dp)
+                .offset(x = 20.dp, y = 16.dp)
         )
     }
-
-    MapButton(
-        onClick = {},
-        modifier = Modifier.absoluteOffset(x = 200.dp, y = 130.dp)
-    ) {
-        Icon(painterResource(R.drawable.ic_location_no_location_24dp), null)
-    }
-
-    Pin(
-        iconPainter = painterResource(R.drawable.ic_quest_recycling),
-        modifier = Modifier.absoluteOffset(x = 120.dp, y = 60.dp)
-    )
-    Pin(
-        iconPainter = painterResource(R.drawable.ic_quest_street),
-        modifier = Modifier.absoluteOffset(x = 45.dp, y = 110.dp)
-    )
-    Pin(
-        iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
-        modifier = Modifier.absoluteOffset(x = 0.dp, y = 25.dp)
-    )
-
-    // TODO checkmark circle
-
-    Image(
-        painter = painterResource(R.drawable.logo_osm_magnifier),
-        contentDescription = null,
-        modifier = Modifier
-            .size(185.dp)
-            .offset(x = 20.dp, y = 16.dp)
-    )
 }
 
 @Composable
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
new file mode 100644
index 00000000000..9a4094bf7c9
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
@@ -0,0 +1,53 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
+import androidx.compose.ui.graphics.vector.Path
+import androidx.compose.ui.graphics.vector.VectorPainter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.ui.util.svgPath
+import kotlin.math.PI
+import kotlin.math.cos
+
+@Composable
+fun mapEditHighlighted(progress: Float): VectorPainter = rememberVectorPainter(
+    defaultWidth = 226.dp,
+    defaultHeight = 222.dp,
+    viewportWidth = 226f,
+    viewportHeight = 222f,
+    autoMirror = false
+) { _, _ ->
+    val breathing = -cos(progress * 2 * PI) / 2.0 + 0.5 // 0..1
+    Path(
+        pathData = wayPath,
+        strokeLineJoin = StrokeJoin.Round,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineWidth = ((breathing + 1) * 8).toFloat(), // 8..16
+        stroke = SolidColor(Color(0xffD14000)),
+        strokeAlpha = ((1 - breathing) * 0.5 + 0.5).toFloat() // 1 .. 0.5
+    )
+}
+
+@Composable
+fun mapEditDone(progress: Float): VectorPainter = rememberVectorPainter(
+    defaultWidth = 226.dp,
+    defaultHeight = 222.dp,
+    viewportWidth = 226f,
+    viewportHeight = 222f,
+    autoMirror = false
+) { _, _ ->
+    Path(
+        pathData = wayPath,
+        strokeLineJoin = StrokeJoin.Round,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineWidth = 8 + (1 - progress) * 16,
+        stroke = SolidColor(Color(0xff10C1B8)),
+        strokeAlpha = progress
+    )
+}
+
+private val wayPath = svgPath("m53.97,113.51 l-11.99,11.49 0.5,4.5 20.24,24.49 13.99,-6.75 20.49,18.49 -10.49,28.23 10.24,8.5")
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
index 3291f2b34bd..ec6146e0794 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -25,7 +25,6 @@ import de.westnordost.streetcomplete.screens.user.achievements.AnimatedTadaShine
 import de.westnordost.streetcomplete.ui.common.MapButton
 import de.westnordost.streetcomplete.ui.theme.headlineSmall
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun OverlaysTutorialScreen(
     onFinished: () -> Unit,
@@ -102,6 +101,12 @@ private fun OverlaysTutorialIllustration(
             contentDescription = null,
             modifier = Modifier.fillMaxSize()
         )
+        val painter = mapEditDone(0f) // mapEditHighlighted(0f)
+        Image(
+            painter = painter,
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize()
+        )
 
         Image(
             painter = painterResource(R.drawable.ic_preset_fas_shopping_cart),
@@ -125,7 +130,7 @@ private fun OverlaysTutorialIllustration(
     }
 
     Image(
-        painter = painterResource(R.drawable.paint_roller),
+        painter = paintRoller(1f),
         contentDescription = null,
         modifier = Modifier.rotate(-45f)
     )
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt
new file mode 100644
index 00000000000..9e28f026c6a
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt
@@ -0,0 +1,72 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
+import androidx.compose.ui.graphics.vector.Group
+import androidx.compose.ui.graphics.vector.Path
+import androidx.compose.ui.graphics.vector.VectorPainter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.ui.util.svgPath
+
+@Composable
+fun paintRoller(progress: Float): VectorPainter = rememberVectorPainter(
+    defaultWidth = 234.dp,
+    defaultHeight = 234.dp,
+    viewportWidth = 26f,
+    viewportHeight = 26f,
+    autoMirror = false
+) { _, _ ->
+    Path(
+        pathData = rodPath,
+        strokeLineWidth = 1.5f,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineJoin = StrokeJoin.Round,
+        stroke = SolidColor(Color(0xff788ca4))
+    )
+    Path(
+        pathData = rodShinePath,
+        strokeLineWidth = 0.5f,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineJoin = StrokeJoin.Round,
+        stroke = SolidColor(Color(0xff9baabb))
+    )
+    Path(
+        pathData = rollerPath,
+        fill = SolidColor(Color(0xfffef0c1))
+    )
+    Group(clipPathData = rollerLintClipPath) {
+        Group(translationY = progress * 9f) {
+            Path(
+                pathData = rollerLintPath,
+                fill = SolidColor(Color(0xffe2cf90))
+            )
+        }
+    }
+    Path(
+        pathData = rollerShadowPath,
+        fill = SolidColor(Color(0xffe2cf90))
+    )
+    Path(
+        pathData = handlePath,
+        fill = SolidColor(Color(0xffef4431))
+    )
+    Path(
+        pathData = gripPath,
+        strokeLineWidth = 1f,
+        stroke = SolidColor(Color(0xffac3024))
+    )
+}
+
+private val rodPath = svgPath("m12.5,14v-3l12,-2v-5h-23")
+private val rodShinePath = svgPath("m12.25,13.625v-3l12,-2v-5h-23")
+private val rollerPath = svgPath("M3.5,1L21.5,1A1,1 0,0 1,22.5 2L22.5,6A1,1 0,0 1,21.5 7L3.5,7A1,1 0,0 1,2.5 6L2.5,2A1,1 0,0 1,3.5 1z")
+private val rollerLintPath = svgPath("m11,-8v2h1v-2zM4,-7v2h1v-2zM15,-7v2h1v-2zM7,-6v2h1v-2zM19,-6v2h1v-2zM10,-4v2h1v-2zM3,-3v2h1v-2zM21,-3v2h1v-2zM16,-2v2h1v-2zM6,-1v2h1v-2zM11,1v2h1v-2zM4,2v2h1v-2zM15,2v2h1v-2zM7,3v2h1v-2zM19,3v2h1v-2z")
+private val rollerLintClipPath = svgPath("M3.5,1L21.5,1A1,1 0,0 1,22.5 2L22.5,4A1,1 0,0 1,21.5 5L3.5,5A1,1 0,0 1,2.5 4L2.5,2A1,1 0,0 1,3.5 1z")
+private val rollerShadowPath = svgPath("m4.5,5h16.104c0.496,0 0.896,-0.33 0.896,-0.979v-3.021s1,0 1,1v4.104c0,0.496 -0.4,0.896 -0.896,0.896h-18.104v-1s0,-1 1,-1z")
+private val handlePath = svgPath("M11.5,13L13.5,13A1,1 0,0 1,14.5 14L14.5,24A1,1 0,0 1,13.5 25L11.5,25A1,1 0,0 1,10.5 24L10.5,14A1,1 0,0 1,11.5 13z M10.375,13L14.625,13A0.875,0.875 0,0 1,15.5 13.875L15.5,14.125A0.875,0.875 0,0 1,14.625 15L10.375,15A0.875,0.875 0,0 1,9.5 14.125L9.5,13.875A0.875,0.875 0,0 1,10.375 13z")
+private val gripPath = svgPath("M13.5,16v8 M11.5,16v8")
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/util/PathParser.kt b/app/src/main/java/de/westnordost/streetcomplete/ui/util/PathParser.kt
new file mode 100644
index 00000000000..5ed0d8ddb8f
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/ui/util/PathParser.kt
@@ -0,0 +1,7 @@
+package de.westnordost.streetcomplete.ui.util
+
+import androidx.compose.ui.graphics.vector.PathNode
+import androidx.compose.ui.graphics.vector.PathParser
+
+fun svgPath(string: String): List<PathNode> =
+    PathParser().parsePathString(string).toNodes()

From 6c3c4745e380affe7d7092aa5ca82fe8605dcad1 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Sat, 13 Jul 2024 19:47:38 +0200
Subject: [PATCH 06/12] implement tutorial screen in compose

---
 .../screens/main/MainFragment.kt              |   9 +-
 .../screens/main/controls/LocationState.kt    |  17 +
 .../main/controls/LocationStateButton.kt      |  31 +-
 .../main/controls/LocationStateButton2.kt     |  81 ++++
 .../main/controls}/MapButton.kt               |   2 +-
 .../screens/tutorial/IntroTutorialScreen.kt   | 192 +++++++---
 .../tutorial/OverlaysTutorialScreen.kt        |   7 +-
 .../screens/tutorial/TutorialFragment.kt      | 218 +----------
 .../screens/tutorial/TutorialScreen.kt        |  37 +-
 .../drawable/ic_animated_checkmark_circle.xml |  32 --
 .../main/res/drawable/ic_checkmark_circle.xml |  16 -
 app/src/main/res/layout/fragment_tutorial.xml | 361 ------------------
 12 files changed, 284 insertions(+), 719 deletions(-)
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationState.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton2.kt
 rename app/src/main/java/de/westnordost/streetcomplete/{ui/common => screens/main/controls}/MapButton.kt (95%)
 delete mode 100644 app/src/main/res/drawable/ic_animated_checkmark_circle.xml
 delete mode 100644 app/src/main/res/drawable/ic_checkmark_circle.xml
 delete mode 100644 app/src/main/res/layout/fragment_tutorial.xml

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/main/MainFragment.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/main/MainFragment.kt
index 4e0046532ac..0c7cdc48c15 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/main/MainFragment.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/main/MainFragment.kt
@@ -78,6 +78,7 @@ import de.westnordost.streetcomplete.screens.main.bottom_sheet.IsMapOrientationA
 import de.westnordost.streetcomplete.screens.main.bottom_sheet.IsMapPositionAware
 import de.westnordost.streetcomplete.screens.main.bottom_sheet.MoveNodeFragment
 import de.westnordost.streetcomplete.screens.main.bottom_sheet.SplitWayFragment
+import de.westnordost.streetcomplete.screens.main.controls.LocationState
 import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
 import de.westnordost.streetcomplete.screens.main.controls.MainMenuDialog
 import de.westnordost.streetcomplete.screens.main.edithistory.EditHistoryFragment
@@ -668,7 +669,7 @@ class MainFragment :
 
     @SuppressLint("MissingPermission")
     private fun onLocationIsEnabled() {
-        binding.gpsTrackingButton.state = LocationStateButton.State.SEARCHING
+        binding.gpsTrackingButton.state = LocationState.SEARCHING
         mapFragment!!.startPositionTracking()
 
         setIsFollowingPosition(wasFollowingPosition ?: true)
@@ -677,8 +678,8 @@ class MainFragment :
 
     private fun onLocationIsDisabled() {
         binding.gpsTrackingButton.state = when {
-            requireContext().hasLocationPermission -> LocationStateButton.State.ALLOWED
-            else -> LocationStateButton.State.DENIED
+            requireContext().hasLocationPermission -> LocationState.ALLOWED
+            else -> LocationState.DENIED
         }
         binding.gpsTrackingButton.isNavigation = false
         binding.locationPointerPin.visibility = View.GONE
@@ -688,7 +689,7 @@ class MainFragment :
 
     private fun onLocationChanged(location: Location) {
         viewLifecycleScope.launch {
-            binding.gpsTrackingButton.state = LocationStateButton.State.UPDATING
+            binding.gpsTrackingButton.state = LocationState.UPDATING
             updateLocationPointerPin()
         }
     }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationState.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationState.kt
new file mode 100644
index 00000000000..1192999d879
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationState.kt
@@ -0,0 +1,17 @@
+package de.westnordost.streetcomplete.screens.main.controls
+
+/** State of location updates */
+enum class LocationState {
+    /** user declined to give this app access to location */
+    DENIED,
+    /** user allowed this app to access location (but location disabled) */
+    ALLOWED,
+    /** location service is turned on (but no location request active) */
+    ENABLED,
+    /** requested location updates and waiting for first fix */
+    SEARCHING,
+    /** receiving location updates */
+    UPDATING;
+    
+    val isEnabled: Boolean get() = ordinal >= ENABLED.ordinal
+}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton.kt
index ed4aaf0a2fa..0360b96b697 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton.kt
@@ -23,12 +23,12 @@ class LocationStateButton @JvmOverloads constructor(
     defStyle: Int = 0
 ) : AppCompatImageButton(context, attrs, defStyle) {
 
-    var state: State
-        get() = _state ?: State.DENIED
+    var state: LocationState
+        get() = _state ?: LocationState.DENIED
         set(value) { _state = value }
 
     // this is necessary because state is accessed before it is initialized (in constructor of super)
-    private var _state: State? = null
+    private var _state: LocationState? = null
         set(value) {
             if (field != value) {
                 field = value
@@ -55,12 +55,12 @@ class LocationStateButton @JvmOverloads constructor(
         a.recycle()
     }
 
-    private fun determineStateFrom(a: TypedArray): State = when {
-        a.getBoolean(R.styleable.LocationStateButton_state_updating, false) ->  State.UPDATING
-        a.getBoolean(R.styleable.LocationStateButton_state_searching, false) -> State.SEARCHING
-        a.getBoolean(R.styleable.LocationStateButton_state_enabled, false) ->   State.ENABLED
-        a.getBoolean(R.styleable.LocationStateButton_state_allowed, false) ->   State.ALLOWED
-        else -> State.DENIED
+    private fun determineStateFrom(a: TypedArray): LocationState = when {
+        a.getBoolean(R.styleable.LocationStateButton_state_updating, false) ->  LocationState.UPDATING
+        a.getBoolean(R.styleable.LocationStateButton_state_searching, false) -> LocationState.SEARCHING
+        a.getBoolean(R.styleable.LocationStateButton_state_enabled, false) ->   LocationState.ENABLED
+        a.getBoolean(R.styleable.LocationStateButton_state_allowed, false) ->   LocationState.ALLOWED
+        else -> LocationState.DENIED
     }
 
     override fun drawableStateChanged() {
@@ -103,18 +103,7 @@ class LocationStateButton @JvmOverloads constructor(
         }
     }
 
-    enum class State {
-        DENIED, // user declined to give this app access to location
-        ALLOWED, // user allowed this app to access location (but location disabled)
-        ENABLED, // location service is turned on (but no location request active)
-        SEARCHING, // requested location updates and waiting for first fix
-        UPDATING;
-
-        // receiving location updates
-        val isEnabled: Boolean get() = ordinal >= ENABLED.ordinal
-    }
-
-    private val State.styleableAttributes: List<Int> get() =
+    private val LocationState.styleableAttributes: List<Int> get() =
         listOf(
             R.attr.state_allowed,
             R.attr.state_enabled,
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton2.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton2.kt
new file mode 100644
index 00000000000..063ca8202a4
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/LocationStateButton2.kt
@@ -0,0 +1,81 @@
+package de.westnordost.streetcomplete.screens.main.controls
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import de.westnordost.streetcomplete.R
+import kotlinx.coroutines.delay
+
+@Composable
+fun LocationStateButton(
+    onClick: () -> Unit,
+    state: LocationState,
+    modifier: Modifier = Modifier,
+    isNavigationMode: Boolean = false,
+    isFollowing: Boolean = false,
+    enabled: Boolean = true
+) {
+    var iconResource by remember(state) { mutableStateOf(getIcon(state, isNavigationMode)) }
+
+    MapButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled
+    ) {
+        LaunchedEffect(state) {
+            if (state == LocationState.SEARCHING) {
+                while (true) {
+                    delay(750)
+                    iconResource = getIcon(LocationState.UPDATING, isNavigationMode)
+                    delay(750)
+                    iconResource = getIcon(LocationState.ENABLED, isNavigationMode)
+                }
+            }
+        }
+        Icon(
+            painter = painterResource(iconResource),
+            contentDescription = stringResource(R.string.map_btn_gps_tracking),
+            tint = if (isFollowing) MaterialTheme.colors.secondary else Color.Black
+        )
+    }
+}
+
+private fun getIcon(state: LocationState, isNavigationMode: Boolean) = when (state) {
+    LocationState.DENIED,
+    LocationState.ALLOWED ->
+        R.drawable.ic_location_disabled_24dp
+    LocationState.ENABLED,
+    LocationState.SEARCHING ->
+        if (isNavigationMode) R.drawable.ic_location_navigation_no_location_24dp
+        else R.drawable.ic_location_no_location_24dp
+    LocationState.UPDATING ->
+        if (isNavigationMode) R.drawable.ic_location_navigation_24dp
+        else R.drawable.ic_location_24dp
+}
+
+@Preview
+@Composable
+private fun PreviewLocationButton() {
+    Column {
+        for (state in LocationState.entries) {
+            Row {
+                LocationStateButton(onClick = {}, state = state)
+                LocationStateButton(onClick = {}, state = state, isNavigationMode = true)
+                LocationStateButton(onClick = {}, state = state, isFollowing = true)
+                LocationStateButton(onClick = {}, state = state, isNavigationMode = true, isFollowing = true)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/MapButton.kt
similarity index 95%
rename from app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt
rename to app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/MapButton.kt
index 6bf289f0ef5..bce6cebefc4 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/ui/common/MapButton.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/main/controls/MapButton.kt
@@ -1,4 +1,4 @@
-package de.westnordost.streetcomplete.ui.common
+package de.westnordost.streetcomplete.screens.main.controls
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index 66126b09349..507f6c2717b 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -1,22 +1,31 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.slideInVertically
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -25,17 +34,20 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
-import de.westnordost.streetcomplete.ui.common.MapButton
+import de.westnordost.streetcomplete.screens.main.controls.LocationState
+import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
 import de.westnordost.streetcomplete.ui.common.Pin
-import de.westnordost.streetcomplete.ui.theme.headlineSmall
-import de.westnordost.streetcomplete.ui.theme.titleSmall
+import de.westnordost.streetcomplete.ui.theme.headlineLarge
+import de.westnordost.streetcomplete.ui.theme.titleLarge
+import kotlinx.coroutines.launch
 
+/** Shows a short tutorial for first-time users */
 @Composable
 fun IntroTutorialScreen(
     onFinished: () -> Unit,
 ) {
     TutorialScreen(
-        pageCount = 3,
+        pageCount = 4,
         onFinished = onFinished,
         illustration = { page ->
             IntroTutorialIllustration(page)
@@ -46,88 +58,160 @@ fun IntroTutorialScreen(
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             when (page) {
-                0 -> IntroTutorialStep1Text()
-                1 -> IntroTutorialStep2Text()
-                2 -> IntroTutorialStep3Text()
+                0 -> IntroTutorialStep0Text()
+                1 -> IntroTutorialStep1Text()
+                2 -> IntroTutorialStep2Text()
+                3 -> IntroTutorialStep3Text()
             }
         }
     }
 }
 
 @Composable
-private fun IntroTutorialIllustration(
-    page: Float
+private fun BoxScope.IntroTutorialIllustration(
+    page: Int
 ) {
-    Box(
-        contentAlignment = Alignment.TopStart,
-        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
-    ) {
-        // TODO animate steps
+    val mapTilt = remember { Animatable(0f) }
+    val mapScale = remember { Animatable(1f) }
+    val mapShine = remember { Animatable(1f) }
+
+    LaunchedEffect(page) {
+        val mapSpec = tween<Float>(800)
+        launch { mapTilt.animateTo(if (page == 0) 0f else 50f, mapSpec) }
+        launch { mapScale.animateTo(if (page == 0) 1f else 1.5f, mapSpec) }
+        launch { mapShine.animateTo(if (page == 0) 1f else 0f, mapSpec) }
+    }
 
+    Box(contentAlignment = Alignment.TopStart) {
         Box(Modifier.size(width = 226.dp, height = 222.dp)) {
             Image(
                 painter = painterResource(R.drawable.logo_osm_map),
                 contentDescription = null,
-                modifier = Modifier.fillMaxSize()
+                modifier = Modifier
+                    .fillMaxSize()
+                    .graphicsLayer {
+                        rotationX = mapTilt.value
+                        scaleX = mapScale.value
+                        scaleY = mapScale.value
+                    }
             )
             Image(
                 painter = painterResource(R.drawable.logo_osm_map_lighting),
                 contentDescription = null,
-                modifier = Modifier.fillMaxSize()
+                modifier = Modifier
+                    .fillMaxSize()
+                    .graphicsLayer {
+                        rotationX = mapTilt.value
+                        scaleX = mapScale.value
+                        scaleY = mapScale.value
+                        alpha = mapShine.value
+                    }
             )
         }
 
-        MapButton(
-            onClick = {},
-            modifier = Modifier.absoluteOffset(x = 200.dp, y = 130.dp)
+        AnimatedVisibility(
+            visible = page == 2,
+            enter = slideInVertically(tween(400, 400)) + fadeIn(tween(400, 400)),
+            exit = fadeOut(tween(400))
+        ) {
+            Pin(
+                iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
+                modifier = Modifier.absolutePadding(left = 0.dp, top = 25.dp)
+            )
+        }
+        AnimatedVisibility(
+            visible = page == 2,
+            enter = slideInVertically(tween(400, 600)) + fadeIn(tween(400, 600)),
+            exit = fadeOut(tween(400))
+        ) {
+            Pin(
+                iconPainter = painterResource(R.drawable.ic_quest_street),
+                modifier = Modifier.absolutePadding(left = 45.dp, top = 110.dp)
+            )
+        }
+        AnimatedVisibility(
+            visible = page == 2,
+            enter = slideInVertically(tween(400, 800)) + fadeIn(tween(400, 800)),
+            exit = fadeOut(tween(400))
         ) {
-            Icon(painterResource(R.drawable.ic_location_no_location_24dp), null)
+            Pin(
+                iconPainter = painterResource(R.drawable.ic_quest_recycling),
+                modifier = Modifier.absolutePadding(left = 160.dp, top = 70.dp)
+            )
         }
 
-        Pin(
-            iconPainter = painterResource(R.drawable.ic_quest_recycling),
-            modifier = Modifier.absoluteOffset(x = 120.dp, y = 60.dp)
-        )
-        Pin(
-            iconPainter = painterResource(R.drawable.ic_quest_street),
-            modifier = Modifier.absoluteOffset(x = 45.dp, y = 110.dp)
-        )
-        Pin(
-            iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
-            modifier = Modifier.absoluteOffset(x = 0.dp, y = 25.dp)
-        )
+        val zoomScale = 6f
+        val magnifierOrigin = TransformOrigin(0.67f, 0.33f)
+        val magnifierAnimSpec = tween<Float>(800)
+        AnimatedVisibility(
+            visible = page == 0,
+            exit =
+                scaleOut(magnifierAnimSpec, zoomScale, magnifierOrigin) +
+                fadeOut(magnifierAnimSpec),
+            enter =
+                scaleIn(magnifierAnimSpec, zoomScale, magnifierOrigin) +
+                fadeIn(magnifierAnimSpec)
+        ) {
+            Image(
+                painter = painterResource(R.drawable.logo_osm_magnifier),
+                contentDescription = null,
+                modifier = Modifier
+                    .size(225.dp)
+                    .absolutePadding(left = 15.dp, top = 15.dp)
+            )
+        }
+    }
 
-        Image(
-            painter = checkmarkCircle(progress = 1f),
-            contentDescription = null,
-            modifier = Modifier.align(Alignment.Center)
+    AnimatedVisibility(
+        visible = page in 1..2,
+        enter = fadeIn(tween(400, 400)),
+        exit = fadeOut(tween(400)),
+        modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
+    ) {
+        LocationStateButton(
+            onClick = {},
+            state = if (page == 1) LocationState.SEARCHING else LocationState.UPDATING,
         )
+    }
 
+    if (page == 3) {
+        val checkmarkProgress = remember { Animatable(0f) }
+        LaunchedEffect(page) {
+            checkmarkProgress.animateTo(1f, tween(800, 400, LinearEasing))
+        }
         Image(
-            painter = painterResource(R.drawable.logo_osm_magnifier),
+            painter = checkmarkCircle(progress = checkmarkProgress.value),
             contentDescription = null,
-            modifier = Modifier
-                .size(185.dp)
-                .offset(x = 20.dp, y = 16.dp)
+            modifier = Modifier.align(Alignment.Center)
         )
     }
 }
 
 @Composable
-private fun IntroTutorialStep1Text() {
+private fun IntroTutorialStep0Text() {
     Text(
         text = stringResource(R.string.tutorial_welcome_to_osm),
-        style = MaterialTheme.typography.headlineSmall,
+        style = MaterialTheme.typography.headlineLarge,
         textAlign = TextAlign.Center
     )
     Text(
         text = stringResource(R.string.tutorial_welcome_to_osm_subtitle),
-        style = MaterialTheme.typography.titleSmall,
-        textAlign = TextAlign.Center
+        style = MaterialTheme.typography.titleLarge,
+        textAlign = TextAlign.Center,
+        modifier = Modifier.padding(top = 24.dp)
     )
+}
+
+@Composable
+private fun IntroTutorialStep1Text() {
     Text(
         text = stringResource(R.string.tutorial_intro),
         style = MaterialTheme.typography.body1,
+        textAlign = TextAlign.Center
+    )
+    Text(
+        text = stringResource(R.string.no_location_permission_warning),
+        style = MaterialTheme.typography.body1,
         textAlign = TextAlign.Center,
         modifier = Modifier.padding(top = 24.dp)
     )
@@ -140,12 +224,6 @@ private fun IntroTutorialStep2Text() {
         style = MaterialTheme.typography.body1,
         textAlign = TextAlign.Center,
     )
-    Text(
-        text = stringResource(R.string.no_location_permission_warning),
-        style = MaterialTheme.typography.body1,
-        textAlign = TextAlign.Center,
-        modifier = Modifier.padding(top = 24.dp)
-    )
 }
 
 @Composable
@@ -157,7 +235,7 @@ private fun IntroTutorialStep3Text() {
     )
     Text(
         text = stringResource(R.string.tutorial_happy_mapping),
-        style = MaterialTheme.typography.headlineSmall,
+        style = MaterialTheme.typography.headlineLarge,
         textAlign = TextAlign.Center,
         modifier = Modifier.padding(top = 24.dp)
     )
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
index ec6146e0794..e28d374114d 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -1,6 +1,5 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -22,7 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.screens.user.achievements.AnimatedTadaShine
-import de.westnordost.streetcomplete.ui.common.MapButton
+import de.westnordost.streetcomplete.screens.main.controls.MapButton
 import de.westnordost.streetcomplete.ui.theme.headlineSmall
 
 @Composable
@@ -86,7 +85,7 @@ private fun OverlaysTutorialStepEditText() {
 
 @Composable
 private fun OverlaysTutorialIllustration(
-    page: Float
+    page: Int
 ) {
     // TODO animate steps
 
@@ -153,7 +152,7 @@ private fun OverlaysTutorialIllustration(
 @Preview
 @Composable
 private fun PreviewOverlaysTutorialIllustration() {
-    OverlaysTutorialIllustration(page = 0f)
+    OverlaysTutorialIllustration(page = 0)
 }
 
 @Preview
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
index b897ba97100..2831d66c842 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
@@ -1,223 +1,27 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
-import android.annotation.SuppressLint
-import android.content.pm.ActivityInfo
-import android.graphics.drawable.AnimatedVectorDrawable
 import android.os.Bundle
+import android.view.LayoutInflater
 import android.view.View
-import android.view.animation.AccelerateDecelerateInterpolator
-import android.view.animation.AccelerateInterpolator
-import android.view.animation.BounceInterpolator
+import android.view.ViewGroup
+import androidx.compose.material.Surface
 import androidx.fragment.app.Fragment
-import de.westnordost.streetcomplete.R
-import de.westnordost.streetcomplete.databinding.FragmentTutorialBinding
-import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
-import de.westnordost.streetcomplete.util.ktx.dpToPx
-import de.westnordost.streetcomplete.util.ktx.pxToDp
-import de.westnordost.streetcomplete.util.ktx.viewLifecycleScope
-import de.westnordost.streetcomplete.util.viewBinding
-import de.westnordost.streetcomplete.view.insets_animation.respectSystemInsets
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
+import de.westnordost.streetcomplete.ui.util.composableContent
 
-/** Shows a short tutorial for first-time users */
-class TutorialFragment : Fragment(R.layout.fragment_tutorial) {
-
-    private var currentPage: Int = 0
-
-    private val binding by viewBinding(FragmentTutorialBinding::bind)
+class TutorialFragment : Fragment() {
 
     interface Listener {
         fun onTutorialFinished()
     }
     private val listener: Listener? get() = parentFragment as? Listener ?: activity as? Listener
 
-    @SuppressLint("SourceLockedOrientationActivity")
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-        view.respectSystemInsets()
-        updateIndicatorDots()
-        enableNextButton()
-    }
-
-    override fun onDestroy() {
-        super.onDestroy()
-        activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
-    }
-
-    private fun nextStep() {
-        disableNextButton()
-        when (currentPage) {
-            0 -> {
-                currentPage = 1
-                step1Transition()
-            }
-            1 -> {
-                currentPage = 2
-                step2Transition()
-            }
-            MAX_PAGE_INDEX -> {
-                listener?.onTutorialFinished()
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View =
+        composableContent {
+            Surface {
+                IntroTutorialScreen(
+                    onFinished = { listener?.onTutorialFinished() }
+                )
             }
         }
-    }
-
-    private fun disableNextButton() {
-        binding.nextButton.setOnClickListener(null)
-        binding.nextButton.isClickable = false
-    }
-
-    private fun enableNextButton() {
-        binding.nextButton.isClickable = true
-        binding.nextButton.setOnClickListener { nextStep() }
-    }
-
-    private fun step1Transition() = viewLifecycleScope.launch {
-        val ctx = requireContext()
-
-        updateIndicatorDots()
-
-        // magnifier flies towards viewer and fades out
-        binding.magnifierImageView.animate()
-            .setDuration(500)
-            .setInterpolator(AccelerateInterpolator())
-            .scaleX(6f).scaleY(6f)
-            .alpha(0f)
-            .start()
-
-        // map zooms in and tilts
-        val mapTranslate = ctx.resources.dpToPx(-50)
-        val mapRotate = 50f
-        val mapScale = 1.5f
-
-        binding.mapImageView.animate()
-            .setDuration(800)
-            .setInterpolator(AccelerateDecelerateInterpolator())
-            .rotationX(mapRotate)
-            .scaleY(mapScale).scaleX(mapScale)
-            .translationY(mapTranslate)
-            .start()
-
-        binding.mapLightingImageView.animate()
-            .setDuration(800)
-            .setInterpolator(AccelerateDecelerateInterpolator())
-            .rotationX(mapRotate)
-            .alpha(0f)
-            .scaleY(mapScale).scaleX(mapScale)
-            .translationY(mapTranslate)
-            .start()
-
-        // 1st text fade out
-        disappearText(binding.tutorialStepIntro)
-
-        delay(200)
-
-        // flashing GPS button appears
-        binding.tutorialGpsButton.state = LocationStateButton.State.SEARCHING
-        binding.tutorialGpsButton.animate()
-            .alpha(1f)
-            .setDuration(200)
-            .start()
-
-        delay(400)
-
-        // 2nd text fade in
-        appearText(binding.tutorialStepSolvingQuests)
-
-        delay(1400)
 
-        // ...and after a few seconds, stops flashing
-        binding.tutorialGpsButton.state = LocationStateButton.State.UPDATING
-
-        delay(800)
-
-        // quest pins fall into place
-        listOf(binding.questPin1, binding.questPin2, binding.questPin3).forEach { pin ->
-            delay(400)
-
-            pin.translationY = ctx.resources.pxToDp(-200)
-            pin.animate()
-                .setInterpolator(BounceInterpolator())
-                .setDuration(400)
-                .translationY(0f)
-                .alpha(1f)
-                .start()
-        }
-
-        enableNextButton()
-    }
-
-    private fun step2Transition() = viewLifecycleScope.launch {
-        updateIndicatorDots()
-        binding.nextButton.setText(R.string.letsgo)
-
-        // 2nd text fade out
-        disappearText(binding.tutorialStepSolvingQuests)
-
-        delay(400)
-
-        // 3rd text fade in
-        appearText(binding.tutorialStepStaySafe)
-
-        // quest pins fade out
-        listOf(binding.questPin1, binding.questPin2, binding.questPin3).forEach { pin ->
-            pin.animate()
-                .setInterpolator(AccelerateInterpolator())
-                .setDuration(300)
-                .alpha(0f)
-                .start()
-        }
-
-        delay(1400)
-        // checkmark fades in and animates
-
-        binding.checkmarkView.animate()
-            .setDuration(600)
-            .alpha(1f)
-            .start()
-
-        (binding.checkmarkView.drawable as? AnimatedVectorDrawable)?.start()
-
-        enableNextButton()
-    }
-
-    private fun appearText(view: View) {
-        view.translationY = view.resources.pxToDp(-100)
-        view.animate()
-            .withStartAction { view.visibility = View.VISIBLE }
-            .setDuration(300)
-            .alpha(1f)
-            .translationY(0f)
-            .start()
-    }
-
-    private fun disappearText(view: View) {
-        view.animate()
-            .setDuration(300)
-            .alpha(0f)
-            .translationY(view.resources.pxToDp(100))
-            .withEndAction { view.visibility = View.GONE }
-            .start()
-    }
-
-    private fun updateIndicatorDots() {
-        listOf(binding.dot1, binding.dot2, binding.dot3).forEachIndexed { index, dot ->
-            dot.setImageResource(
-                if (currentPage == index) {
-                    R.drawable.indicator_dot_selected
-                } else {
-                    R.drawable.indicator_dot_default
-                }
-            )
-        }
-    }
-
-    companion object {
-        private const val MAX_PAGE_INDEX = 2
-    }
 }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
index 54ff66b8036..b2a883cf51b 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
@@ -3,8 +3,11 @@ package de.westnordost.streetcomplete.screens.tutorial
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.snapping.SnapFlingBehavior
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -26,13 +29,12 @@ import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
@@ -46,24 +48,21 @@ import kotlinx.coroutines.launch
 fun TutorialScreen(
     pageCount: Int,
     onFinished: () -> Unit,
-    illustration: @Composable (pageAnimated: Float) -> Unit,
+    illustration: @Composable BoxScope.(page: Int) -> Unit,
     pageContent: @Composable (page: Int) -> Unit
 ) {
     val state = rememberPagerState { pageCount }
-    val pageAnimated = remember(state.currentPage, state.currentPageOffsetFraction) {
-        derivedStateOf { state.currentPage + state.currentPageOffsetFraction }
-    }
 
     TutorialScreenLayout(
         illustration = {
-            illustration(pageAnimated.value)
+            illustration(state.currentPage)
         },
         pageContent = {
             HorizontalPager(
                 state = state,
                 modifier = Modifier.width(480.dp),
                 contentPadding = PaddingValues(horizontal = 16.dp),
-                pageSpacing = 32.dp,
+                pageSpacing = 64.dp,
                 pageContent = { page ->
                     Box(
                         Modifier
@@ -96,7 +95,7 @@ fun TutorialScreen(
 @Composable
 private fun TutorialScreenLayout(
     modifier: Modifier = Modifier,
-    illustration: @Composable () -> Unit,
+    illustration: @Composable BoxScope.() -> Unit,
     pageContent: @Composable () -> Unit,
     controls: @Composable () -> Unit,
 ) {
@@ -105,17 +104,17 @@ private fun TutorialScreenLayout(
             Column(
                 modifier = Modifier.fillMaxSize(),
                 horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.spacedBy(16.dp),
+                verticalArrangement = Arrangement.spacedBy(32.dp),
             ) {
                 Box(
-                    modifier = Modifier.weight(0.4f),
+                    modifier = Modifier.fillMaxSize().weight(0.4f).clipToBounds(),
                     contentAlignment = Alignment.BottomCenter
                 ) {
                     illustration()
                 }
                 Box(
                     modifier = Modifier.weight(0.6f),
-                    contentAlignment = Alignment.TopCenter
+                    contentAlignment = Alignment.Center
                 ) {
                     pageContent()
                     Box(Modifier.align(Alignment.BottomCenter)) {
@@ -128,10 +127,10 @@ private fun TutorialScreenLayout(
                 Row(
                     modifier = Modifier.fillMaxSize(),
                     verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.spacedBy(16.dp)
+                    horizontalArrangement = Arrangement.spacedBy(32.dp)
                 ) {
                     Box(
-                        modifier = Modifier.weight(0.4f),
+                        modifier = Modifier.fillMaxSize().weight(0.4f).clipToBounds(),
                         contentAlignment = Alignment.CenterEnd
                     ) {
                         illustration()
@@ -152,7 +151,6 @@ private fun TutorialScreenLayout(
                         controls()
                     }
                 }
-
             }
         }
     }
@@ -173,7 +171,12 @@ private fun PagerControls(
     ) {
         Row {
             repeat(state.pageCount) { page ->
-                PagerIndicator(isCurrentPage = state.currentPage == page)
+                PagerIndicator(
+                    isCurrentPage = state.currentPage == page,
+                    onClick = {
+                        coroutineScope.launch { state.animateScrollToPage(page) }
+                    }
+                )
             }
         }
         Button(onClick = {
@@ -191,6 +194,7 @@ private fun PagerControls(
 @Composable
 private fun PagerIndicator(
     isCurrentPage: Boolean,
+    onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     val alpha by animateFloatAsState(
@@ -202,6 +206,7 @@ private fun PagerIndicator(
             .alpha(alpha)
             .background(color = MaterialTheme.colors.onSurface, shape = CircleShape)
             .size(12.dp)
+            .clickable { onClick() }
     )
 }
 
diff --git a/app/src/main/res/drawable/ic_animated_checkmark_circle.xml b/app/src/main/res/drawable/ic_animated_checkmark_circle.xml
deleted file mode 100644
index 7818bb713ec..00000000000
--- a/app/src/main/res/drawable/ic_animated_checkmark_circle.xml
+++ /dev/null
@@ -1,32 +0,0 @@
-<animated-vector
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt"
-    android:drawable="@drawable/ic_checkmark_circle">
-
-  <target android:name="circle">
-    <aapt:attr name="android:animation">
-      <objectAnimator
-          android:duration="500"
-          android:propertyName="trimPathEnd"
-          android:valueFrom="0"
-          android:valueTo="1" />
-    </aapt:attr>
-  </target>
-
-  <target android:name="check" >
-    <aapt:attr name="android:animation">
-      <set android:ordering="sequentially">
-        <objectAnimator
-            android:duration="500"
-            android:propertyName="trimPathEnd"
-            android:valueFrom="0"
-            android:valueTo="0"/>
-        <objectAnimator
-            android:duration="250"
-            android:propertyName="trimPathEnd"
-            android:valueFrom="0"
-            android:valueTo="1"/>
-      </set>
-    </aapt:attr>
-  </target>
-</animated-vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_checkmark_circle.xml b/app/src/main/res/drawable/ic_checkmark_circle.xml
deleted file mode 100644
index 46896c82660..00000000000
--- a/app/src/main/res/drawable/ic_checkmark_circle.xml
+++ /dev/null
@@ -1,16 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="128dp"
-    android:height="128dp"
-    android:viewportWidth="128"
-    android:viewportHeight="128">
-  <path
-      android:name="circle"
-      android:pathData="m122,64a58,58 0,0 1,-58 58,58 58,0 0,1 -58,-58 58,58 0,0 1,58 -58,58 58,0 0,1 58,58z"
-      android:strokeWidth="12"
-      android:strokeColor="#262"/>
-  <path
-      android:pathData="m28.459,67.862c7.344,4.501 19.241,13.97 27.571,23.732 11.064,-20.587 27.756,-39.206 44.333,-55.458"
-      android:name="check"
-      android:strokeWidth="12"
-      android:strokeColor="#262"/>
-</vector>
diff --git a/app/src/main/res/layout/fragment_tutorial.xml b/app/src/main/res/layout/fragment_tutorial.xml
deleted file mode 100644
index 98d99334940..00000000000
--- a/app/src/main/res/layout/fragment_tutorial.xml
+++ /dev/null
@@ -1,361 +0,0 @@
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:focusable="true"
-    android:clickable="true"
-    android:background="?android:attr/colorBackground">
-    <!-- clickable and focussable = true so that touch input is not passed below this fragment -->
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:gravity="center_horizontal"
-        tools:ignore="ContentDescription">
-
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/verticalCenter"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            app:layout_constraintGuide_percent="0.40"
-            android:orientation="horizontal"/>
-
-        <ImageView
-            android:id="@+id/mapImageView"
-            android:layout_width="200dp"
-            android:layout_height="200dp"
-            app:srcCompat="@drawable/logo_osm_map"
-            app:layout_constraintBottom_toTopOf="@id/tutorialTextContainer"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"/>
-
-        <ImageView
-            android:id="@+id/mapLightingImageView"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            app:srcCompat="@drawable/logo_osm_map_lighting"
-            app:layout_constraintTop_toTopOf="@id/mapImageView"
-            app:layout_constraintStart_toStartOf="@id/mapImageView"
-            app:layout_constraintEnd_toEndOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"/>
-
-        <de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
-            android:id="@+id/tutorialGpsButton"
-            android:layout_width="64dp"
-            android:layout_height="64dp"
-            android:scaleType="center"
-            style="@style/RoundWhiteButton"
-            app:srcCompat="@drawable/ic_location_state_24dp"
-            android:clickable="false"
-            app:state_searching="true"
-            android:layout_marginBottom="16dp"
-            app:layout_constraintLeft_toRightOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"
-            android:alpha="0"
-            tools:alpha="1"/>
-
-        <RelativeLayout
-            android:id="@+id/questPin3"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="80dp"
-            android:layout_marginLeft="140dp"
-            app:layout_constraintStart_toStartOf="@id/mapImageView"
-            app:layout_constraintEnd_toEndOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"
-            tools:ignore="RtlHardcoded"
-            android:alpha="0"
-            tools:alpha="1">
-
-            <ImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingRight="16dp"
-                app:srcCompat="@drawable/pin"
-                android:layout_gravity="right"
-                tools:ignore="RtlHardcoded,RtlSymmetry"/>
-
-            <ImageView
-                android:layout_width="42dp"
-                android:layout_height="42dp"
-                android:layout_marginTop="7dp"
-                android:layout_centerHorizontal="true"
-                app:srcCompat="@drawable/ic_quest_recycling" />
-
-        </RelativeLayout>
-
-        <RelativeLayout
-            android:id="@+id/questPin2"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="20dp"
-            android:layout_marginRight="80dp"
-            app:layout_constraintStart_toStartOf="@id/mapImageView"
-            app:layout_constraintEnd_toEndOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"
-            tools:ignore="RtlHardcoded"
-            tools:alpha="1"
-            android:alpha="0">
-
-            <ImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingRight="16dp"
-                app:srcCompat="@drawable/pin"
-                android:layout_gravity="right"
-                tools:ignore="RtlHardcoded,RtlSymmetry"/>
-
-            <ImageView
-                android:layout_width="42dp"
-                android:layout_height="42dp"
-                android:layout_marginTop="7dp"
-                android:layout_centerHorizontal="true"
-                app:srcCompat="@drawable/ic_quest_street" />
-
-        </RelativeLayout>
-
-        <RelativeLayout
-            android:id="@+id/questPin1"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="110dp"
-            android:layout_marginRight="200dp"
-            app:layout_constraintStart_toStartOf="@id/mapImageView"
-            app:layout_constraintEnd_toEndOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"
-            tools:ignore="RtlHardcoded"
-            android:alpha="0"
-            tools:alpha="1">
-
-            <ImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingRight="16dp"
-                app:srcCompat="@drawable/pin"
-                android:layout_gravity="right"
-                tools:ignore="RtlHardcoded,RtlSymmetry"/>
-
-            <ImageView
-                android:layout_width="42dp"
-                android:layout_height="42dp"
-                android:layout_marginTop="7dp"
-                android:layout_centerHorizontal="true"
-                app:srcCompat="@drawable/ic_quest_traffic_lights" />
-
-        </RelativeLayout>
-
-        <ImageView
-            android:id="@+id/checkmarkView"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:srcCompat="@drawable/ic_animated_checkmark_circle"
-            app:layout_constraintTop_toTopOf="@id/mapImageView"
-            app:layout_constraintStart_toStartOf="@id/mapImageView"
-            app:layout_constraintEnd_toEndOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"
-            android:alpha="0"/>
-
-        <FrameLayout
-            android:id="@+id/tutorialTextContainer"
-            android:background="?android:attr/colorBackground"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/verticalCenter"
-            android:gravity="top|center_horizontal">
-
-            <ScrollView
-                android:id="@+id/tutorialStepIntro"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:orientation="vertical"
-                android:gravity="top|center_horizontal"
-                android:visibility="visible">
-
-                <RelativeLayout
-                    android:layout_width="@dimen/tutorial_textbox_width"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:paddingTop="24dp"
-                    android:paddingBottom="112dp">
-
-                    <TextView
-                        android:id="@+id/titleTextView"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerHorizontal="true"
-                        android:gravity="center"
-                        android:textAppearance="@style/TextAppearance.HeadlineSmall"
-                        android:text="@string/tutorial_welcome_to_osm"/>
-
-                    <TextView
-                        android:id="@+id/subtitleTextView"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerHorizontal="true"
-                        android:gravity="center"
-                        android:layout_below="@id/titleTextView"
-                        android:textAppearance="@style/TextAppearance.Subhead"
-                        android:text="@string/tutorial_welcome_to_osm_subtitle"/>
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_below="@id/subtitleTextView"
-                        android:layout_marginTop="24dp"
-                        android:gravity="center"
-                        android:textAppearance="@style/TextAppearance.BigBody"
-                        android:text="@string/tutorial_intro"/>
-
-                </RelativeLayout>
-
-            </ScrollView>
-
-            <ScrollView
-                android:id="@+id/tutorialStepSolvingQuests"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:orientation="vertical"
-                android:gravity="top|center_horizontal"
-                android:visibility="gone">
-
-                <LinearLayout
-                    android:layout_width="@dimen/tutorial_textbox_width"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:paddingTop="24dp"
-                    android:paddingBottom="112dp"
-                    android:orientation="vertical">
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:textAppearance="@style/TextAppearance.BigBody"
-                        android:text="@string/tutorial_solving_quests"/>
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:layout_marginTop="24dp"
-                        android:textAppearance="@style/TextAppearance.BigBody"
-                        android:text="@string/no_location_permission_warning"/>
-
-                </LinearLayout>
-
-            </ScrollView>
-
-            <ScrollView
-                android:id="@+id/tutorialStepStaySafe"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:orientation="vertical"
-                android:gravity="top|center_horizontal"
-                android:visibility="gone">
-
-                <RelativeLayout
-                    android:layout_width="@dimen/tutorial_textbox_width"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_horizontal"
-                    android:paddingTop="24dp"
-                    android:paddingBottom="112dp">
-
-                    <TextView
-                        android:id="@+id/staySafeTextView"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:gravity="center"
-                        android:textAppearance="@style/TextAppearance.BigBody"
-                        android:text="@string/tutorial_stay_safe"/>
-
-                    <TextView
-                        android:id="@+id/happyMappingTextView"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerHorizontal="true"
-                        android:layout_below="@id/staySafeTextView"
-                        android:layout_marginTop="24dp"
-                        android:gravity="center"
-                        android:textAppearance="@style/TextAppearance.HeadlineSmall"
-                        android:text="@string/tutorial_happy_mapping"/>
-
-                </RelativeLayout>
-
-            </ScrollView>
-
-        </FrameLayout>
-
-        <RelativeLayout
-            android:id="@+id/bottomPart"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            android:paddingBottom="@dimen/activity_vertical_margin"
-            android:paddingTop="@dimen/activity_vertical_margin"
-            android:background="@drawable/gradient_transparent_to_background">
-
-            <LinearLayout
-                android:id="@+id/dotsContainer"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:showDividers="middle"
-                android:layout_centerInParent="true"
-                android:layout_alignParentTop="true"
-                android:divider="@drawable/space_8dp">
-
-                <ImageView
-                    android:id="@+id/dot1"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/indicator_dot_selected"/>
-
-                <ImageView
-                    android:id="@+id/dot2"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/indicator_dot_default"/>
-
-                <ImageView
-                    android:id="@+id/dot3"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/indicator_dot_default"/>
-
-            </LinearLayout>
-
-            <Button
-                android:id="@+id/nextButton"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="@string/next"
-                android:layout_marginTop="16dp"
-                android:layout_below="@id/dotsContainer"
-                android:layout_centerInParent="true"/>
-
-        </RelativeLayout>
-
-        <ImageView
-            android:id="@+id/magnifierImageView"
-            android:layout_width="185dp"
-            android:layout_height="185dp"
-            app:srcCompat="@drawable/logo_osm_magnifier"
-            android:transformPivotX="140dp"
-            android:transformPivotY="60dp"
-            android:translationX="10dp"
-            android:translationY="10dp"
-            android:rotation="0"
-            android:scaleX="1"
-            android:scaleY="1"
-            app:layout_constraintRight_toRightOf="@id/mapImageView"
-            app:layout_constraintBottom_toBottomOf="@id/mapImageView"/>
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-</RelativeLayout>

From 35d055014dc77704eaa4b197539ad98f46a900ee Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 12:41:38 +0200
Subject: [PATCH 07/12] use higher level animation api

---
 .../screens/tutorial/IntroTutorialScreen.kt   | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index 507f6c2717b..3b2f3759e68 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -3,7 +3,9 @@ package de.westnordost.streetcomplete.screens.tutorial
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
@@ -21,6 +23,7 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -39,7 +42,6 @@ import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
 import de.westnordost.streetcomplete.ui.common.Pin
 import de.westnordost.streetcomplete.ui.theme.headlineLarge
 import de.westnordost.streetcomplete.ui.theme.titleLarge
-import kotlinx.coroutines.launch
 
 /** Shows a short tutorial for first-time users */
 @Composable
@@ -71,18 +73,11 @@ fun IntroTutorialScreen(
 private fun BoxScope.IntroTutorialIllustration(
     page: Int
 ) {
-    val mapTilt = remember { Animatable(0f) }
-    val mapScale = remember { Animatable(1f) }
-    val mapShine = remember { Animatable(1f) }
-
-    LaunchedEffect(page) {
-        val mapSpec = tween<Float>(800)
-        launch { mapTilt.animateTo(if (page == 0) 0f else 50f, mapSpec) }
-        launch { mapScale.animateTo(if (page == 0) 1f else 1.5f, mapSpec) }
-        launch { mapShine.animateTo(if (page == 0) 1f else 0f, mapSpec) }
-    }
-
     Box(contentAlignment = Alignment.TopStart) {
+        val mapTransition = updateTransition(page)
+        val mapTilt by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 0f else 50f }
+        val mapScale by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 1f else 1.5f }
+        val mapShine by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 1f else 0f }
         Box(Modifier.size(width = 226.dp, height = 222.dp)) {
             Image(
                 painter = painterResource(R.drawable.logo_osm_map),
@@ -90,9 +85,9 @@ private fun BoxScope.IntroTutorialIllustration(
                 modifier = Modifier
                     .fillMaxSize()
                     .graphicsLayer {
-                        rotationX = mapTilt.value
-                        scaleX = mapScale.value
-                        scaleY = mapScale.value
+                        rotationX = mapTilt
+                        scaleX = mapScale
+                        scaleY = mapScale
                     }
             )
             Image(
@@ -101,10 +96,10 @@ private fun BoxScope.IntroTutorialIllustration(
                 modifier = Modifier
                     .fillMaxSize()
                     .graphicsLayer {
-                        rotationX = mapTilt.value
-                        scaleX = mapScale.value
-                        scaleY = mapScale.value
-                        alpha = mapShine.value
+                        rotationX = mapTilt
+                        scaleX = mapScale
+                        scaleY = mapScale
+                        alpha = mapShine
                     }
             )
         }
@@ -166,7 +161,9 @@ private fun BoxScope.IntroTutorialIllustration(
         visible = page in 1..2,
         enter = fadeIn(tween(400, 400)),
         exit = fadeOut(tween(400)),
-        modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
+        modifier = Modifier
+            .align(Alignment.BottomEnd)
+            .padding(32.dp)
     ) {
         LocationStateButton(
             onClick = {},

From 995a37feb1d52be21d2c4bdce36139a64fd42764 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 20:09:13 +0200
Subject: [PATCH 08/12] implement overlay tutorial etc

---
 ...arkCircle.kt => CheckmarkCirclePainter.kt} |  10 +-
 .../screens/tutorial/IntroTutorialScreen.kt   | 187 ++++++------
 .../screens/tutorial/MapEditHighlighted.kt    |  53 ----
 .../screens/tutorial/OverlayPainter.kt        |  93 ++++++
 .../tutorial/OverlaysTutorialFragment.kt      | 232 +--------------
 .../tutorial/OverlaysTutorialScreen.kt        | 254 +++++++++++------
 .../{PaintRoller.kt => PaintRollerPainter.kt} |   2 +-
 .../screens/tutorial/TutorialFragment.kt      |   1 -
 .../screens/tutorial/TutorialScreen.kt        |  27 +-
 .../ui/ktx/GraphicsLayerScope.kt              |  17 ++
 .../res/drawable/indicator_dot_default.xml    |   7 -
 .../res/drawable/indicator_dot_selected.xml   |   7 -
 app/src/main/res/drawable/overlay_osm_map.xml |  30 --
 .../res/drawable/overlay_osm_map_animated.xml |  15 -
 .../res/drawable/overlay_osm_map_edit.xml     |  13 -
 .../overlay_osm_map_edit_animated.xml         |  27 --
 .../overlay_osm_map_edit_done_animated.xml    |  29 --
 app/src/main/res/drawable/paint_roller.xml    |  38 ---
 .../res/drawable/paint_roller_animated.xml    |  17 --
 .../res/layout/fragment_overlays_tutorial.xml | 268 ------------------
 app/src/main/res/values-sw600dp/dimens.xml    |   5 -
 app/src/main/res/values/colors.xml            |   3 -
 app/src/main/res/values/dimens.xml            |   4 -
 23 files changed, 413 insertions(+), 926 deletions(-)
 rename app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/{CheckmarkCircle.kt => CheckmarkCirclePainter.kt} (73%)
 delete mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
 rename app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/{PaintRoller.kt => PaintRollerPainter.kt} (97%)
 create mode 100644 app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt
 delete mode 100644 app/src/main/res/drawable/indicator_dot_default.xml
 delete mode 100644 app/src/main/res/drawable/indicator_dot_selected.xml
 delete mode 100644 app/src/main/res/drawable/overlay_osm_map.xml
 delete mode 100644 app/src/main/res/drawable/overlay_osm_map_animated.xml
 delete mode 100644 app/src/main/res/drawable/overlay_osm_map_edit.xml
 delete mode 100644 app/src/main/res/drawable/overlay_osm_map_edit_animated.xml
 delete mode 100644 app/src/main/res/drawable/overlay_osm_map_edit_done_animated.xml
 delete mode 100644 app/src/main/res/drawable/paint_roller.xml
 delete mode 100644 app/src/main/res/drawable/paint_roller_animated.xml
 delete mode 100644 app/src/main/res/layout/fragment_overlays_tutorial.xml
 delete mode 100644 app/src/main/res/values-sw600dp/dimens.xml

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCirclePainter.kt
similarity index 73%
rename from app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
rename to app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCirclePainter.kt
index 762bd8f3429..7cbe6765233 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCircle.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/CheckmarkCirclePainter.kt
@@ -10,7 +10,7 @@ import de.westnordost.streetcomplete.ui.theme.LeafGreen
 import de.westnordost.streetcomplete.ui.util.svgPath
 
 @Composable
-fun checkmarkCircle(progress: Float): VectorPainter = rememberVectorPainter(
+fun checkmarkCirclePainter(progress: Float): VectorPainter = rememberVectorPainter(
     defaultWidth = 128.dp,
     defaultHeight = 128.dp,
     viewportWidth = 128f,
@@ -31,9 +31,5 @@ fun checkmarkCircle(progress: Float): VectorPainter = rememberVectorPainter(
     )
 }
 
-private val circlePath = svgPath(
-    "m122,64a58,58 0,0 1,-58 58,58 58,0 0,1 -58,-58 58,58 0,0 1,58 -58,58 58,0 0,1 58,58z"
-)
-private val checkmarkPath = svgPath(
-    "m28.459,67.862c7.344,4.501 19.241,13.97 27.571,23.732 11.064,-20.587 27.756,-39.206 44.333,-55.458"
-)
+private val circlePath = svgPath("m122,64a58,58 0,0 1,-58 58,58 58,0 0,1 -58,-58 58,58 0,0 1,58 -58,58 58,0 0,1 58,58z")
+private val checkmarkPath = svgPath("m28.459,67.862c7.344,4.501 19.241,13.97 27.571,23.732 11.064,-20.587 27.756,-39.206 44.333,-55.458")
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index 3b2f3759e68..e2f869cbdec 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -1,20 +1,12 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.core.updateTransition
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.scaleIn
-import androidx.compose.animation.scaleOut
-import androidx.compose.animation.slideInVertically
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.absoluteOffset
 import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -23,10 +15,10 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.painterResource
@@ -40,8 +32,10 @@ import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.screens.main.controls.LocationState
 import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
 import de.westnordost.streetcomplete.ui.common.Pin
+import de.westnordost.streetcomplete.ui.ktx.scale
 import de.westnordost.streetcomplete.ui.theme.headlineLarge
 import de.westnordost.streetcomplete.ui.theme.titleLarge
+import kotlinx.coroutines.launch
 
 /** Shows a short tutorial for first-time users */
 @Composable
@@ -73,115 +67,116 @@ fun IntroTutorialScreen(
 private fun BoxScope.IntroTutorialIllustration(
     page: Int
 ) {
+    val mapZoom = remember { Animatable(0f) }
+    val button = remember { Animatable(0f) }
+    val pin1 = remember { Animatable(0f) }
+    val pin2 = remember { Animatable(0f) }
+    val pin3 = remember { Animatable(0f) }
+    val checkmark = remember { Animatable(0f) }
+
+    LaunchedEffect(page) {
+        // map is zoomed in and magnifier is zoomed out and faded out on page > 0
+        launch { mapZoom.animateTo(if (page == 0) 0f else 1f, tween(800)) }
+
+        // show button on page 1 and 2 (appear with delay)
+        if (page in 1..2) {
+            launch { button.animateTo(1f, tween(400, 400)) }
+        } else {
+            launch { button.animateTo(0f, tween(400)) }
+        }
+
+        // drop pins on page 2
+        launch { pin1.animateTo(if (page == 2) 1f else 0f, tween(400, 400)) }
+        launch { pin2.animateTo(if (page == 2) 1f else 0f, tween(400, 600)) }
+        launch { pin3.animateTo(if (page == 2) 1f else 0f, tween(400, 800)) }
+
+        // checkmark on page 3
+        if (page == 3) {
+            checkmark.animateTo(1f, tween(1200, 1200))
+        } else {
+            checkmark.animateTo(0f, tween(400))
+        }
+    }
+
     Box(contentAlignment = Alignment.TopStart) {
-        val mapTransition = updateTransition(page)
-        val mapTilt by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 0f else 50f }
-        val mapScale by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 1f else 1.5f }
-        val mapShine by mapTransition.animateFloat({ tween(800) }) { if (it == 0) 1f else 0f }
-        Box(Modifier.size(width = 226.dp, height = 222.dp)) {
+        Box(
+            Modifier
+                .size(width = 226.dp, height = 222.dp)
+                .graphicsLayer {
+                    rotationX = mapZoom.value * 50f
+                    scale = 1f + mapZoom.value * 0.5f
+                }
+        ) {
             Image(
                 painter = painterResource(R.drawable.logo_osm_map),
                 contentDescription = null,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .graphicsLayer {
-                        rotationX = mapTilt
-                        scaleX = mapScale
-                        scaleY = mapScale
-                    }
+                modifier = Modifier.fillMaxSize()
             )
             Image(
                 painter = painterResource(R.drawable.logo_osm_map_lighting),
                 contentDescription = null,
                 modifier = Modifier
                     .fillMaxSize()
-                    .graphicsLayer {
-                        rotationX = mapTilt
-                        scaleX = mapScale
-                        scaleY = mapScale
-                        alpha = mapShine
-                    }
+                    .alpha(1f - mapZoom.value)
             )
         }
 
-        AnimatedVisibility(
-            visible = page == 2,
-            enter = slideInVertically(tween(400, 400)) + fadeIn(tween(400, 400)),
-            exit = fadeOut(tween(400))
-        ) {
-            Pin(
-                iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
-                modifier = Modifier.absolutePadding(left = 0.dp, top = 25.dp)
-            )
-        }
-        AnimatedVisibility(
-            visible = page == 2,
-            enter = slideInVertically(tween(400, 600)) + fadeIn(tween(400, 600)),
-            exit = fadeOut(tween(400))
-        ) {
-            Pin(
-                iconPainter = painterResource(R.drawable.ic_quest_street),
-                modifier = Modifier.absolutePadding(left = 45.dp, top = 110.dp)
-            )
-        }
-        AnimatedVisibility(
-            visible = page == 2,
-            enter = slideInVertically(tween(400, 800)) + fadeIn(tween(400, 800)),
-            exit = fadeOut(tween(400))
-        ) {
-            Pin(
-                iconPainter = painterResource(R.drawable.ic_quest_recycling),
-                modifier = Modifier.absolutePadding(left = 160.dp, top = 70.dp)
-            )
-        }
-
-        val zoomScale = 6f
-        val magnifierOrigin = TransformOrigin(0.67f, 0.33f)
-        val magnifierAnimSpec = tween<Float>(800)
-        AnimatedVisibility(
-            visible = page == 0,
-            exit =
-                scaleOut(magnifierAnimSpec, zoomScale, magnifierOrigin) +
-                fadeOut(magnifierAnimSpec),
-            enter =
-                scaleIn(magnifierAnimSpec, zoomScale, magnifierOrigin) +
-                fadeIn(magnifierAnimSpec)
-        ) {
-            Image(
-                painter = painterResource(R.drawable.logo_osm_magnifier),
-                contentDescription = null,
-                modifier = Modifier
-                    .size(225.dp)
-                    .absolutePadding(left = 15.dp, top = 15.dp)
-            )
-        }
-    }
+        val pinDropHeight = 200.dp
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_traffic_lights),
+            modifier = Modifier
+                .absolutePadding(left = 0.dp, top = 25.dp)
+                .graphicsLayer {
+                    alpha = pin1.value
+                    translationY = -(1f - pin1.value) * pinDropHeight.toPx()
+                }
+        )
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_street),
+            modifier = Modifier
+                .absolutePadding(left = 45.dp, top = 110.dp)
+                .graphicsLayer {
+                    alpha = pin2.value
+                    translationY = -(1f - pin2.value) * pinDropHeight.toPx()
+                }
+        )
+        Pin(
+            iconPainter = painterResource(R.drawable.ic_quest_recycling),
+            modifier = Modifier
+                .absolutePadding(left = 160.dp, top = 70.dp)
+                .graphicsLayer {
+                    alpha = pin3.value
+                    translationY = -(1f - pin3.value) * pinDropHeight.toPx()
+                }
+        )
 
-    AnimatedVisibility(
-        visible = page in 1..2,
-        enter = fadeIn(tween(400, 400)),
-        exit = fadeOut(tween(400)),
-        modifier = Modifier
-            .align(Alignment.BottomEnd)
-            .padding(32.dp)
-    ) {
         LocationStateButton(
             onClick = {},
             state = if (page == 1) LocationState.SEARCHING else LocationState.UPDATING,
+            modifier = Modifier
+                .absoluteOffset(150.dp, 150.dp)
+                .alpha(button.value)
         )
-    }
 
-    if (page == 3) {
-        val checkmarkProgress = remember { Animatable(0f) }
-        LaunchedEffect(page) {
-            checkmarkProgress.animateTo(1f, tween(800, 400, LinearEasing))
-        }
         Image(
-            painter = checkmarkCircle(progress = checkmarkProgress.value),
+            painter = painterResource(R.drawable.logo_osm_magnifier),
             contentDescription = null,
-            modifier = Modifier.align(Alignment.Center)
+            modifier = Modifier
+                .size(225.dp)
+                .absolutePadding(left = 15.dp, top = 15.dp)
+                .graphicsLayer {
+                    transformOrigin = TransformOrigin(0.67f, 0.33f)
+                    alpha = 1f - mapZoom.value
+                    scale = 1f + mapZoom.value * 5f
+                }
         )
     }
+
+    Image(
+        painter = checkmarkCirclePainter(checkmark.value),
+        contentDescription = null,
+        modifier = Modifier.align(Alignment.Center)
+    )
 }
 
 @Composable
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
deleted file mode 100644
index 9a4094bf7c9..00000000000
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/MapEditHighlighted.kt
+++ /dev/null
@@ -1,53 +0,0 @@
-package de.westnordost.streetcomplete.screens.tutorial
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.StrokeCap
-import androidx.compose.ui.graphics.StrokeJoin
-import androidx.compose.ui.graphics.vector.Path
-import androidx.compose.ui.graphics.vector.VectorPainter
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
-import androidx.compose.ui.unit.dp
-import de.westnordost.streetcomplete.ui.util.svgPath
-import kotlin.math.PI
-import kotlin.math.cos
-
-@Composable
-fun mapEditHighlighted(progress: Float): VectorPainter = rememberVectorPainter(
-    defaultWidth = 226.dp,
-    defaultHeight = 222.dp,
-    viewportWidth = 226f,
-    viewportHeight = 222f,
-    autoMirror = false
-) { _, _ ->
-    val breathing = -cos(progress * 2 * PI) / 2.0 + 0.5 // 0..1
-    Path(
-        pathData = wayPath,
-        strokeLineJoin = StrokeJoin.Round,
-        strokeLineCap = StrokeCap.Round,
-        strokeLineWidth = ((breathing + 1) * 8).toFloat(), // 8..16
-        stroke = SolidColor(Color(0xffD14000)),
-        strokeAlpha = ((1 - breathing) * 0.5 + 0.5).toFloat() // 1 .. 0.5
-    )
-}
-
-@Composable
-fun mapEditDone(progress: Float): VectorPainter = rememberVectorPainter(
-    defaultWidth = 226.dp,
-    defaultHeight = 222.dp,
-    viewportWidth = 226f,
-    viewportHeight = 222f,
-    autoMirror = false
-) { _, _ ->
-    Path(
-        pathData = wayPath,
-        strokeLineJoin = StrokeJoin.Round,
-        strokeLineCap = StrokeCap.Round,
-        strokeLineWidth = 8 + (1 - progress) * 16,
-        stroke = SolidColor(Color(0xff10C1B8)),
-        strokeAlpha = progress
-    )
-}
-
-private val wayPath = svgPath("m53.97,113.51 l-11.99,11.49 0.5,4.5 20.24,24.49 13.99,-6.75 20.49,18.49 -10.49,28.23 10.24,8.5")
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
new file mode 100644
index 00000000000..0505c5a8cf0
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
@@ -0,0 +1,93 @@
+package de.westnordost.streetcomplete.screens.tutorial
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
+import androidx.compose.ui.graphics.vector.Group
+import androidx.compose.ui.graphics.vector.Path
+import androidx.compose.ui.graphics.vector.VectorComposable
+import androidx.compose.ui.graphics.vector.VectorPainter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+import de.westnordost.streetcomplete.ui.util.svgPath
+import kotlin.math.PI
+import kotlin.math.cos
+
+@Composable
+fun overlayPainter(progress: Float): VectorPainter = rememberMapOverlayPainter {
+    val translate = -(1f - progress) * 317f
+    Group(
+        clipPathData = clipPath,
+        translationX = translate,
+        translationY = translate,
+    ) {
+        Group(
+            translationX = -translate,
+            translationY = -translate,
+        ) {
+            Path(
+                pathData = way1Path,
+                strokeLineJoin = StrokeJoin.Round,
+                strokeLineCap = StrokeCap.Round,
+                strokeLineWidth = 8f,
+                stroke = SolidColor(Color(0xffeebd0d))
+            )
+            Path(
+                pathData = way2Path,
+                strokeLineJoin = StrokeJoin.Round,
+                strokeLineCap = StrokeCap.Round,
+                strokeLineWidth = 8f,
+                stroke = SolidColor(Color(0xffff0000))
+            )
+            Path(
+                pathData = way3Path,
+                strokeLineJoin = StrokeJoin.Round,
+                strokeLineCap = StrokeCap.Round,
+                strokeLineWidth = 8f,
+                stroke = SolidColor(Color(0xff1a87e6))
+            )
+        }
+    }
+}
+
+@Composable
+fun overlayEditHighlightedPainter(progress: Float): VectorPainter = rememberMapOverlayPainter {
+    val breathing = -cos(progress * 2 * PI) / 2.0 + 0.5 // 0..1
+    Path(
+        pathData = way2Path,
+        strokeLineJoin = StrokeJoin.Round,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineWidth = ((breathing + 1) * 8).toFloat(), // 8..16
+        stroke = SolidColor(Color(0xffD14000)),
+        strokeAlpha = ((1 - breathing) * 0.5 + 0.5).toFloat() // 1 .. 0.5
+    )
+}
+
+@Composable
+fun overlayEditDonePainter(progress: Float): VectorPainter = rememberMapOverlayPainter {
+    Path(
+        pathData = way2Path,
+        strokeLineJoin = StrokeJoin.Round,
+        strokeLineCap = StrokeCap.Round,
+        strokeLineWidth = 8 + (1 - progress) * 16,
+        stroke = SolidColor(Color(0xff10C1B8)),
+        strokeAlpha = progress
+    )
+}
+
+@Composable
+private fun rememberMapOverlayPainter(content: @Composable @VectorComposable () -> Unit) =
+    rememberVectorPainter(
+        defaultWidth = 226.dp,
+        defaultHeight = 222.dp,
+        viewportWidth = 226f,
+        viewportHeight = 222f,
+        autoMirror = false
+    ) { _, _ -> content() }
+
+private val clipPath = svgPath("M-111,111 l317,317 l317,-317 l-317,-317z")
+private val way1Path = svgPath("m48.72,10.05 l-8.5,28.23 17.99,6.25 7.75,36.23 -20.99,22.24 8.99,10.49")
+private val way2Path = svgPath("m53.97,113.51 l-11.99,11.49 0.5,4.5 20.24,24.49 13.99,-6.75 20.49,18.49 -10.49,28.23 10.24,8.5")
+private val way3Path = svgPath("M94.19,215.44 l2.5,-13.24 l12.49,-27.73 10.99,-7 27.48,15.74 20.49,-3.75 -0.25,-15.74 -10.24,-6 12.74,-26.23 5.75,-3.75 38.73,-9.99")
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialFragment.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialFragment.kt
index ae46c7cb505..40baab9125a 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialFragment.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialFragment.kt
@@ -1,236 +1,26 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
-import android.animation.TimeAnimator
-import android.annotation.SuppressLint
-import android.content.pm.ActivityInfo
-import android.graphics.drawable.AnimatedVectorDrawable
 import android.os.Bundle
+import android.view.LayoutInflater
 import android.view.View
-import android.view.animation.AccelerateDecelerateInterpolator
-import android.view.animation.AnticipateInterpolator
-import android.view.animation.LinearInterpolator
-import androidx.core.view.isInvisible
+import android.view.ViewGroup
+import androidx.compose.material.Surface
 import androidx.fragment.app.Fragment
-import de.westnordost.streetcomplete.R
-import de.westnordost.streetcomplete.databinding.FragmentOverlaysTutorialBinding
-import de.westnordost.streetcomplete.util.ktx.dpToPx
-import de.westnordost.streetcomplete.util.ktx.pxToDp
-import de.westnordost.streetcomplete.util.ktx.viewLifecycleScope
-import de.westnordost.streetcomplete.util.viewBinding
-import de.westnordost.streetcomplete.view.insets_animation.respectSystemInsets
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
+import de.westnordost.streetcomplete.ui.util.composableContent
 
-class OverlaysTutorialFragment : Fragment(R.layout.fragment_overlays_tutorial) {
-
-    private var currentPage: Int = 0
-
-    private var shineAnimation: TimeAnimator? = null
-
-    private val binding by viewBinding(FragmentOverlaysTutorialBinding::bind)
+class OverlaysTutorialFragment : Fragment() {
 
     interface Listener {
         fun onOverlaysTutorialFinished()
     }
     private val listener: Listener? get() = parentFragment as? Listener ?: activity as? Listener
 
-    @SuppressLint("SourceLockedOrientationActivity")
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-        view.respectSystemInsets()
-        updateIndicatorDots()
-        enableNextButton()
-
-        val anim = TimeAnimator()
-        anim.setTimeListener { _, _, deltaTime ->
-            binding.shineView1.rotation += deltaTime / 25f
-            binding.shineView2.rotation -= deltaTime / 50f
-        }
-        anim.start()
-        shineAnimation = anim
-    }
-
-    override fun onDestroyView() {
-        super.onDestroyView()
-        shineAnimation?.cancel()
-    }
-
-    override fun onDestroy() {
-        super.onDestroy()
-        activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
-    }
-
-    private fun nextStep() {
-        disableNextButton()
-        when (currentPage) {
-            0 -> {
-                currentPage = 1
-                step1Transition()
-            }
-            1 -> {
-                currentPage = 2
-                step2Transition()
-            }
-            MAX_PAGE_INDEX -> {
-                listener?.onOverlaysTutorialFinished()
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View =
+        composableContent {
+            Surface {
+                OverlaysTutorialScreen(
+                    onFinished = { listener?.onOverlaysTutorialFinished() }
+                )
             }
         }
-    }
-
-    private fun disableNextButton() {
-        binding.nextButton.setOnClickListener(null)
-        binding.nextButton.isClickable = false
-    }
-
-    private fun enableNextButton() {
-        binding.nextButton.isClickable = true
-        binding.nextButton.setOnClickListener { nextStep() }
-    }
-
-    private fun step1Transition() = viewLifecycleScope.launch {
-        val ctx = requireContext()
-
-        updateIndicatorDots()
-
-        disappearText(binding.tutorialStepIntro)
-
-        // "explode" overlay button
-        binding.overlaysButton.animate()
-            .setInterpolator(AnticipateInterpolator())
-            .setDuration(450)
-            .alpha(0f)
-            .scaleX(3f)
-            .scaleY(3f)
-            .start()
-
-        listOf(binding.shineView1, binding.shineView2).forEach {
-            it.animate()
-                .setDuration(250)
-                .alpha(0f)
-                .start()
-        }
-
-        // reveal paint roller "behind" the button
-        binding.paintRollerView.isInvisible = false
-        binding.paintRollerView.rotation = -15f
-        binding.paintRollerView.scaleX = 0.1f
-        binding.paintRollerView.scaleY = 0.1f
-        binding.paintRollerView.translationX = ctx.resources.dpToPx(132)
-        binding.paintRollerView.translationY = ctx.resources.dpToPx(66)
-
-        delay(300)
-
-        // move paint roller to start position
-        binding.paintRollerView.animate()
-            .setInterpolator(AccelerateDecelerateInterpolator())
-            .setDuration(700)
-            .translationX(-binding.paintRollerView.width / 4f)
-            .translationY(-binding.paintRollerView.height / 4f)
-            .rotation(-45f)
-            .scaleX(1f)
-            .scaleY(1f)
-            .start()
-
-        delay(700)
-
-        // move the paint roller from left to right
-        (binding.paintRollerView.drawable as? AnimatedVectorDrawable)?.start()
-
-        binding.paintRollerView.animate()
-            .setInterpolator(LinearInterpolator())
-            .setDuration(1000)
-            .translationX(binding.paintRollerView.width.toFloat())
-            .translationY(binding.paintRollerView.height.toFloat())
-            .start()
-
-        // reveal overlay colors
-        binding.overlayImageView.isInvisible = false
-        (binding.overlayImageView.drawable as? AnimatedVectorDrawable)?.start()
-
-        delay(200)
-        binding.overlayIcon1.isInvisible = false
-
-        delay(400)
-        binding.overlayIcon2.isInvisible = false
-
-        appearText(binding.tutorialStepDisplay)
-
-        enableNextButton()
-    }
-
-    private fun step2Transition() = viewLifecycleScope.launch {
-        val ctx = requireContext()
-
-        updateIndicatorDots()
-
-        binding.nextButton.setText(R.string.letsgo)
-
-        disappearText(binding.tutorialStepDisplay)
-
-        delay(400)
-
-        binding.mapImageContainer.animate()
-            .setInterpolator(AccelerateDecelerateInterpolator())
-            .setDuration(900)
-            .scaleX(2f)
-            .scaleY(2f)
-            .rotation(-15f)
-            .translationX(ctx.resources.dpToPx(+60))
-            .translationY(ctx.resources.dpToPx(-120))
-            .start()
-
-        binding.overlaySelectedImageView.isInvisible = false
-        (binding.overlaySelectedImageView.drawable as? AnimatedVectorDrawable)?.start()
-
-        delay(600)
-
-        appearText(binding.tutorialStepEdit)
-
-        delay(3000)
-
-        binding.overlaySelectedImageView.setImageResource(R.drawable.overlay_osm_map_edit_done_animated)
-        (binding.overlaySelectedImageView.drawable as? AnimatedVectorDrawable)?.start()
-
-        enableNextButton()
-    }
-
-    private fun appearText(view: View) {
-        view.translationY = view.resources.pxToDp(-100)
-        view.animate()
-            .withStartAction { view.visibility = View.VISIBLE }
-            .setDuration(300)
-            .alpha(1f)
-            .translationY(0f)
-            .start()
-    }
-
-    private fun disappearText(view: View) {
-        view.animate()
-            .setDuration(300)
-            .alpha(0f)
-            .translationY(view.resources.pxToDp(100))
-            .withEndAction { view.visibility = View.GONE }
-            .start()
-    }
-
-    private fun updateIndicatorDots() {
-        listOf(binding.dot1, binding.dot2, binding.dot3).forEachIndexed { index, dot ->
-            dot.setImageResource(
-                if (currentPage == index) {
-                    R.drawable.indicator_dot_selected
-                } else {
-                    R.drawable.indicator_dot_default
-                }
-            )
-        }
-    }
-
-    companion object {
-        private const val MAX_PAGE_INDEX = 2
-    }
 }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
index e28d374114d..6f14d445386 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -1,7 +1,14 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.absoluteOffset
 import androidx.compose.foundation.layout.fillMaxSize
@@ -11,18 +18,31 @@ import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.screens.user.achievements.AnimatedTadaShine
 import de.westnordost.streetcomplete.screens.main.controls.MapButton
-import de.westnordost.streetcomplete.ui.theme.headlineSmall
+import de.westnordost.streetcomplete.ui.ktx.scale
+import de.westnordost.streetcomplete.ui.ktx.translation
+import de.westnordost.streetcomplete.ui.theme.headlineLarge
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
 @Composable
 fun OverlaysTutorialScreen(
@@ -32,9 +52,7 @@ fun OverlaysTutorialScreen(
         pageCount = 3,
         onFinished = onFinished,
         illustration = { page ->
-            Box(contentAlignment = Alignment.TopStart) {
-                OverlaysTutorialIllustration(page)
-            }
+            OverlaysTutorialIllustration(page)
         },
     ) { page ->
         Column(
@@ -50,11 +68,160 @@ fun OverlaysTutorialScreen(
     }
 }
 
+private enum class ShowEdit { No, Selected, Done }
+
+@Composable
+private fun BoxScope.OverlaysTutorialIllustration(
+    page: Int
+) {
+    val density = LocalDensity.current.density
+    val paintRollerPosition = remember { Animatable(0f) }
+    val paintRollerAlpha = remember { Animatable(0f) }
+    val overlayPaint = remember { Animatable(0f) }
+    val button = remember { Animatable(0f) }
+    val mapZoom = remember { Animatable(0f) }
+    var showSelection by remember { mutableStateOf(ShowEdit.No) }
+    val showEdit = remember { Animatable(0f) }
+    LaunchedEffect(page) {
+        // button only visible on page 0
+        launch { button.animateTo(if (page == 0) 0f else 1f, tween(450)) }
+
+        // paint roller rolls from the top left to the bottom right
+        if (page == 1) {
+            launch {
+                paintRollerAlpha.animateTo(1f, tween(300, 300))
+                paintRollerAlpha.animateTo(0f, tween(300, 450))
+            }
+            launch { paintRollerPosition.animateTo(1f, tween(900, 300, LinearEasing)) }
+        } else {
+            launch { paintRollerAlpha.animateTo(0f, tween(300)) }
+            launch { paintRollerPosition.animateTo(0f, tween(300, 300)) }
+        }
+        // overlay paint is visible on pages > 0
+        if (page > 0) {
+            launch { overlayPaint.animateTo(1f, tween(900, 600, LinearEasing)) }
+        } else {
+            launch { overlayPaint.animateTo(0f, tween(600)) }
+        }
+        // map zooms in on page 2, shows selection etc.
+        if (page == 2) {
+            showSelection = ShowEdit.Selected
+            mapZoom.animateTo(1f, tween(900))
+            delay(3600)
+            showSelection = ShowEdit.Done
+            showEdit.animateTo(1f, tween(450))
+        } else {
+            showSelection = ShowEdit.No
+            showEdit.animateTo(0f, tween(300))
+            mapZoom.animateTo(0f, tween(900))
+        }
+    }
+
+    Box(contentAlignment = Alignment.TopStart) {
+        Box(
+            Modifier
+                .size(width = 226.dp, height = 222.dp)
+                .graphicsLayer {
+                    scale = 1f + mapZoom.value
+                    rotationZ = mapZoom.value * -15f
+                    transformOrigin = TransformOrigin(0.25f, 0.75f)
+                    translationX = 45f * mapZoom.value * density
+                }
+        ) {
+            Image(
+                painter = painterResource(R.drawable.logo_osm_map),
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize()
+            )
+
+            Image(
+                painter = overlayPainter(overlayPaint.value),
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize()
+            )
+
+            if (overlayPaint.value > 0.2f) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_preset_fas_shopping_cart),
+                    contentDescription = null,
+                    tint = Color.Black,
+                    modifier = Modifier
+                        .size(24.dp)
+                        .absoluteOffset(80.dp, 40.dp)
+                )
+            }
+            if (overlayPaint.value > 0.8f) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_preset_maki_fuel),
+                    contentDescription = null,
+                    tint = Color.Black,
+                    modifier = Modifier
+                        .size(24.dp)
+                        .absoluteOffset(180.dp, 170.dp)
+                )
+            }
+
+            if (showSelection == ShowEdit.Selected) {
+                val highlightTransition = rememberInfiniteTransition()
+                val highlight by highlightTransition.animateFloat(
+                    initialValue = 0f,
+                    targetValue = 1f,
+                    animationSpec = infiniteRepeatable(tween(1200, 0, LinearEasing))
+                )
+                Image(
+                    painter = overlayEditHighlightedPainter(highlight),
+                    contentDescription = null,
+                    modifier = Modifier.fillMaxSize()
+                )
+            } else if (showSelection == ShowEdit.Done) {
+                Image(
+                    painter = overlayEditDonePainter(showEdit.value),
+                    contentDescription = null,
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
+        }
+
+        val paintRollingTransition = rememberInfiniteTransition()
+        val paintRolling by paintRollingTransition.animateFloat(
+            initialValue = 0f,
+            targetValue = 1f,
+            animationSpec = infiniteRepeatable(tween(600, 0, LinearEasing))
+        )
+        Image(
+            painter = paintRollerPainter(paintRolling),
+            contentDescription = null,
+            modifier = Modifier.graphicsLayer {
+                translation = (-128 + paintRollerPosition.value * 256) * density
+                rotationZ = -45.0f
+                alpha = paintRollerAlpha.value
+            }
+        )
+
+        Box(
+            modifier = Modifier
+                .size(56.dp)
+                .absoluteOffset(150.dp, 150.dp)
+                .alpha(1f - button.value),
+            contentAlignment = Alignment.Center,
+        ) {
+            AnimatedTadaShine()
+            MapButton(onClick = {}) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_overlay_black_24dp),
+                    contentDescription = null,
+                    tint = Color.Black
+                )
+            }
+        }
+    }
+}
+
 @Composable
 private fun OverlaysTutorialStepIntroText() {
     Text(
         text = stringResource(R.string.overlays_tutorial_title),
-        style = MaterialTheme.typography.headlineSmall,
+        style = MaterialTheme.typography.headlineLarge,
         textAlign = TextAlign.Center,
     )
     Text(
@@ -83,79 +250,8 @@ private fun OverlaysTutorialStepEditText() {
     )
 }
 
-@Composable
-private fun OverlaysTutorialIllustration(
-    page: Int
-) {
-    // TODO animate steps
-
-    Box(Modifier.size(width = 226.dp, height = 222.dp)) {
-        Image(
-            painter = painterResource(R.drawable.logo_osm_map),
-            contentDescription = null,
-            modifier = Modifier.fillMaxSize()
-        )
-        Image(
-            painter = painterResource(R.drawable.overlay_osm_map),
-            contentDescription = null,
-            modifier = Modifier.fillMaxSize()
-        )
-        val painter = mapEditDone(0f) // mapEditHighlighted(0f)
-        Image(
-            painter = painter,
-            contentDescription = null,
-            modifier = Modifier.fillMaxSize()
-        )
-
-        Image(
-            painter = painterResource(R.drawable.ic_preset_fas_shopping_cart),
-            contentDescription = null,
-            modifier = Modifier
-                .size(24.dp)
-                .absoluteOffset(80.dp, 40.dp)
-        )
-        Image(
-            painter = painterResource(R.drawable.ic_preset_maki_fuel),
-            contentDescription = null,
-            modifier = Modifier
-                .size(24.dp)
-                .absoluteOffset(180.dp, 170.dp)
-        )
-        Image(
-            painter = painterResource(R.drawable.overlay_osm_map_edit),
-            contentDescription = null,
-            modifier = Modifier.fillMaxSize()
-        )
-    }
-
-    Image(
-        painter = paintRoller(1f),
-        contentDescription = null,
-        modifier = Modifier.rotate(-45f)
-    )
-
-    Box(
-        modifier = Modifier
-            .size(56.dp)
-            .absoluteOffset(x = 228.dp, y = 158.dp),
-        contentAlignment = Alignment.Center,
-    ) {
-        AnimatedTadaShine()
-
-        MapButton(onClick = {},) {
-            Icon(painterResource(R.drawable.ic_overlay_black_24dp), null)
-        }
-    }
-
-}
-
-@Preview
-@Composable
-private fun PreviewOverlaysTutorialIllustration() {
-    OverlaysTutorialIllustration(page = 0)
-}
 
-@Preview
+@PreviewScreenSizes
 @Composable
 private fun PreviewOverlaysTutorialScreen() {
     OverlaysTutorialScreen {}
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
similarity index 97%
rename from app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt
rename to app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
index 9e28f026c6a..1b4b0bb4375 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRoller.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
@@ -14,7 +14,7 @@ import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.ui.util.svgPath
 
 @Composable
-fun paintRoller(progress: Float): VectorPainter = rememberVectorPainter(
+fun paintRollerPainter(progress: Float): VectorPainter = rememberVectorPainter(
     defaultWidth = 234.dp,
     defaultHeight = 234.dp,
     viewportWidth = 26f,
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
index 2831d66c842..e7db3f13dba 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialFragment.kt
@@ -23,5 +23,4 @@ class TutorialFragment : Fragment() {
                 )
             }
         }
-
 }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
index b2a883cf51b..24e141f9621 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/TutorialScreen.kt
@@ -1,10 +1,10 @@
 package de.westnordost.streetcomplete.screens.tutorial
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.snapping.SnapFlingBehavior
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
@@ -52,6 +53,12 @@ fun TutorialScreen(
     pageContent: @Composable (page: Int) -> Unit
 ) {
     val state = rememberPagerState { pageCount }
+    val coroutineScope = rememberCoroutineScope()
+    BackHandler(state.currentPage > 0) {
+        coroutineScope.launch {
+            state.animateScrollToPage(state.currentPage - 1)
+        }
+    }
 
     TutorialScreenLayout(
         illustration = {
@@ -88,7 +95,8 @@ fun TutorialScreen(
                     )
                     .padding(bottom = 16.dp)
             )
-        }
+        },
+        modifier = Modifier.safeDrawingPadding()
     )
 }
 
@@ -107,7 +115,10 @@ private fun TutorialScreenLayout(
                 verticalArrangement = Arrangement.spacedBy(32.dp),
             ) {
                 Box(
-                    modifier = Modifier.fillMaxSize().weight(0.4f).clipToBounds(),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(0.4f)
+                        .clipToBounds(),
                     contentAlignment = Alignment.BottomCenter
                 ) {
                     illustration()
@@ -130,7 +141,10 @@ private fun TutorialScreenLayout(
                     horizontalArrangement = Arrangement.spacedBy(32.dp)
                 ) {
                     Box(
-                        modifier = Modifier.fillMaxSize().weight(0.4f).clipToBounds(),
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .weight(0.4f)
+                            .clipToBounds(),
                         contentAlignment = Alignment.CenterEnd
                     ) {
                         illustration()
@@ -147,7 +161,10 @@ private fun TutorialScreenLayout(
                     horizontalArrangement = Arrangement.spacedBy(16.dp)
                 ) {
                     Spacer(Modifier.weight(0.4f))
-                    Box(Modifier.weight(0.6f).align(Alignment.Bottom)) {
+                    Box(
+                        Modifier
+                            .weight(0.6f)
+                            .align(Alignment.Bottom)) {
                         controls()
                     }
                 }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt b/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt
new file mode 100644
index 00000000000..e76f6cffb04
--- /dev/null
+++ b/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt
@@ -0,0 +1,17 @@
+package de.westnordost.streetcomplete.ui.ktx
+
+import androidx.compose.ui.graphics.GraphicsLayerScope
+
+var GraphicsLayerScope.scale: Float
+    get() = scaleX
+    set(value) {
+        scaleX = value
+        scaleY = value
+    }
+
+var GraphicsLayerScope.translation: Float
+    get() = translationX
+    set(value) {
+        translationX = value
+        translationY = value
+    }
diff --git a/app/src/main/res/drawable/indicator_dot_default.xml b/app/src/main/res/drawable/indicator_dot_default.xml
deleted file mode 100644
index 70d1e0f8e8b..00000000000
--- a/app/src/main/res/drawable/indicator_dot_default.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-    <solid android:color="@color/indicator_dot"/>
-    <size android:width="12dp" android:height="12dp" />
-</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/indicator_dot_selected.xml b/app/src/main/res/drawable/indicator_dot_selected.xml
deleted file mode 100644
index 142c3bf6e9d..00000000000
--- a/app/src/main/res/drawable/indicator_dot_selected.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-    <solid android:color="@color/indicator_dot_selected"/>
-    <size android:width="12dp" android:height="12dp" />
-</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/overlay_osm_map.xml b/app/src/main/res/drawable/overlay_osm_map.xml
deleted file mode 100644
index 05a2df8ca29..00000000000
--- a/app/src/main/res/drawable/overlay_osm_map.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="226dp"
-    android:height="222dp"
-    android:viewportWidth="226"
-    android:viewportHeight="222">
-  <group>
-      <clip-path
-          android:name="clip"
-          android:pathData="M0,0 h222 v226 h-222z"
-          />
-      <path
-          android:pathData="m48.72,10.05 l-8.5,28.23 17.99,6.25 7.75,36.23 -20.99,22.24 8.99,10.49"
-          android:strokeLineJoin="round"
-          android:strokeWidth="8"
-          android:strokeColor="#eebd0d"
-          android:strokeLineCap="round"/>
-      <path
-          android:pathData="M94.19,215.44 l2.5,-13.24 l12.49,-27.73 10.99,-7 27.48,15.74 20.49,-3.75 -0.25,-15.74 -10.24,-6 12.74,-26.23 5.75,-3.75 38.73,-9.99"
-          android:strokeLineJoin="round"
-          android:strokeWidth="8"
-          android:strokeColor="#1a87e6"
-          android:strokeLineCap="round"/>
-      <path
-          android:pathData="m53.97,113.51 l-11.99,11.49 0.5,4.5 20.24,24.49 13.99,-6.75 20.49,18.49 -10.49,28.23 10.24,8.5"
-          android:strokeLineJoin="round"
-          android:strokeWidth="8"
-          android:strokeColor="#f00"
-          android:strokeLineCap="round"/>
-  </group>
-</vector>
diff --git a/app/src/main/res/drawable/overlay_osm_map_animated.xml b/app/src/main/res/drawable/overlay_osm_map_animated.xml
deleted file mode 100644
index d4ebb9fa259..00000000000
--- a/app/src/main/res/drawable/overlay_osm_map_animated.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<animated-vector android:drawable="@drawable/overlay_osm_map"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="clip">
-        <aapt:attr name="android:animation">
-            <objectAnimator
-                android:duration="750"
-                android:propertyName="pathData"
-                android:valueType="pathType"
-                android:interpolator="@android:anim/linear_interpolator"
-                android:valueFrom="M-452,0 l226,222 l452,-444 l-226,-222z"
-                android:valueTo="M-226,222 l226,222 l452,-444 l-226,-222z"/>
-        </aapt:attr>
-    </target>
-</animated-vector>
diff --git a/app/src/main/res/drawable/overlay_osm_map_edit.xml b/app/src/main/res/drawable/overlay_osm_map_edit.xml
deleted file mode 100644
index caa639a008e..00000000000
--- a/app/src/main/res/drawable/overlay_osm_map_edit.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="226dp"
-    android:height="222dp"
-    android:viewportWidth="226"
-    android:viewportHeight="222">
-  <path
-      android:name="selected"
-      android:pathData="m53.97,113.51 l-11.99,11.49 0.5,4.5 20.24,24.49 13.99,-6.75 20.49,18.49 -10.49,28.23 10.24,8.5"
-      android:strokeLineJoin="round"
-      android:strokeWidth="8"
-      android:strokeColor="@color/accent"
-      android:strokeLineCap="round"/>
-</vector>
diff --git a/app/src/main/res/drawable/overlay_osm_map_edit_animated.xml b/app/src/main/res/drawable/overlay_osm_map_edit_animated.xml
deleted file mode 100644
index 3579a0c4dec..00000000000
--- a/app/src/main/res/drawable/overlay_osm_map_edit_animated.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<animated-vector
-    android:drawable="@drawable/overlay_osm_map_edit"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="selected">
-        <aapt:attr name="android:animation">
-            <set>
-                <objectAnimator
-                    android:duration="900"
-                    android:propertyName="strokeWidth"
-                    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
-                    android:valueFrom="8.0"
-                    android:valueTo="16.0"
-                    android:repeatCount="infinite"
-                    android:repeatMode="reverse"/>
-                <objectAnimator
-                    android:duration="900"
-                    android:propertyName="strokeAlpha"
-                    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
-                    android:valueFrom="1.0"
-                    android:valueTo="0.25"
-                    android:repeatCount="infinite"
-                    android:repeatMode="reverse"/>
-            </set>
-        </aapt:attr>
-    </target>
-</animated-vector>
diff --git a/app/src/main/res/drawable/overlay_osm_map_edit_done_animated.xml b/app/src/main/res/drawable/overlay_osm_map_edit_done_animated.xml
deleted file mode 100644
index 8ff68e4f6ff..00000000000
--- a/app/src/main/res/drawable/overlay_osm_map_edit_done_animated.xml
+++ /dev/null
@@ -1,29 +0,0 @@
-<animated-vector
-    android:drawable="@drawable/overlay_osm_map_edit"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="selected">
-        <aapt:attr name="android:animation">
-            <set>
-                <objectAnimator
-                    android:duration="400"
-                    android:propertyName="strokeWidth"
-                    android:interpolator="@android:anim/decelerate_interpolator"
-                    android:valueFrom="24.0"
-                    android:valueTo="8.5"/>
-                <objectAnimator
-                    android:duration="300"
-                    android:propertyName="strokeAlpha"
-                    android:interpolator="@android:anim/decelerate_interpolator"
-                    android:valueFrom="0.25"
-                    android:valueTo="1.0"/>
-                <objectAnimator
-                    android:duration="600"
-                    android:propertyName="strokeColor"
-                    android:interpolator="@android:anim/decelerate_interpolator"
-                    android:valueFrom="#ffffff"
-                    android:valueTo="#10C1B8" />
-            </set>
-        </aapt:attr>
-    </target>
-</animated-vector>
diff --git a/app/src/main/res/drawable/paint_roller.xml b/app/src/main/res/drawable/paint_roller.xml
deleted file mode 100644
index e20eaa9b5a7..00000000000
--- a/app/src/main/res/drawable/paint_roller.xml
+++ /dev/null
@@ -1,38 +0,0 @@
-<vector
-    android:height="234dp"
-    android:width="234dp"
-    android:viewportHeight="26"
-    android:viewportWidth="26"
-    xmlns:android="http://schemas.android.com/apk/res/android">
-    <path
-        android:pathData="m12.5,14v-3l12,-2v-5h-23"
-        android:strokeColor="#788ca4"
-        android:strokeLineCap="round"
-        android:strokeLineJoin="round"
-        android:strokeWidth="1.5"/>
-    <path
-        android:pathData="m12.25,13.625v-3l12,-2v-5h-23"
-        android:strokeColor="#9baabb"
-        android:strokeLineCap="round"
-        android:strokeLineJoin="round"
-        android:strokeWidth=".5"/>
-    <path
-        android:fillColor="#fef0c1"
-        android:pathData="M3.5,1L21.5,1A1,1 0,0 1,22.5 2L22.5,6A1,1 0,0 1,21.5 7L3.5,7A1,1 0,0 1,2.5 6L2.5,2A1,1 0,0 1,3.5 1z" android:strokeWidth=".0625"/>
-    <group>
-        <clip-path android:pathData="M3.5,1L21.5,1A1,1 0,0 1,22.5 2L22.5,4A1,1 0,0 1,21.5 5L3.5,5A1,1 0,0 1,2.5 4L2.5,2A1,1 0,0 1,3.5 1z"/>
-        <group android:name="roller">
-            <path
-                android:fillColor="#e2cf90"
-                android:pathData="m11,-8v2h1v-2zM4,-7v2h1v-2zM15,-7v2h1v-2zM7,-6v2h1v-2zM19,-6v2h1v-2zM10,-4v2h1v-2zM3,-3v2h1v-2zM21,-3v2h1v-2zM16,-2v2h1v-2zM6,-1v2h1v-2zM11,1v2h1v-2zM4,2v2h1v-2zM15,2v2h1v-2zM7,3v2h1v-2zM19,3v2h1v-2z"
-                />
-        </group>
-    </group>
-    <path android:fillColor="#e2cf90" android:pathData="m4.5,5h16.104c0.496,0 0.896,-0.33 0.896,-0.979v-3.021s1,0 1,1v4.104c0,0.496 -0.4,0.896 -0.896,0.896h-18.104v-1s0,-1 1,-1z"/>
-    <path android:fillColor="#ef4431" android:pathData="M11.5,13L13.5,13A1,1 0,0 1,14.5 14L14.5,24A1,1 0,0 1,13.5 25L11.5,25A1,1 0,0 1,10.5 24L10.5,14A1,1 0,0 1,11.5 13z"/>
-    <path android:fillColor="#ef4431" android:pathData="M10.375,13L14.625,13A0.875,0.875 0,0 1,15.5 13.875L15.5,14.125A0.875,0.875 0,0 1,14.625 15L10.375,15A0.875,0.875 0,0 1,9.5 14.125L9.5,13.875A0.875,0.875 0,0 1,10.375 13z"/>
-    <path android:fillColor="#ef4431" android:pathData="m13.5,16v8"
-        android:strokeColor="#ac3024" android:strokeWidth="1"/>
-    <path android:fillColor="#ef4431" android:pathData="m11.5,16v8"
-        android:strokeColor="#ac3024" android:strokeWidth="1"/>
-</vector>
diff --git a/app/src/main/res/drawable/paint_roller_animated.xml b/app/src/main/res/drawable/paint_roller_animated.xml
deleted file mode 100644
index 55c13212ccd..00000000000
--- a/app/src/main/res/drawable/paint_roller_animated.xml
+++ /dev/null
@@ -1,17 +0,0 @@
-<animated-vector
-    android:drawable="@drawable/paint_roller"
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt">
-    <target android:name="roller">
-        <aapt:attr name="android:animation">
-            <objectAnimator
-                android:duration="600"
-                android:propertyName="translateY"
-                android:valueFrom="0"
-                android:valueTo="9"
-                android:interpolator="@android:anim/linear_interpolator"
-                android:repeatCount="infinite"
-                android:repeatMode="restart"/>
-        </aapt:attr>
-    </target>
-</animated-vector>
diff --git a/app/src/main/res/layout/fragment_overlays_tutorial.xml b/app/src/main/res/layout/fragment_overlays_tutorial.xml
deleted file mode 100644
index 78978d52f13..00000000000
--- a/app/src/main/res/layout/fragment_overlays_tutorial.xml
+++ /dev/null
@@ -1,268 +0,0 @@
-<!-- clickable and focussable = true so that touch input is not passed below this fragment -->
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:focusable="true"
-    android:clickable="true"
-    android:background="?android:attr/colorBackground"
-    tools:ignore="ContentDescription">
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/verticalCenter"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        app:layout_constraintGuide_percent="0.40"
-        android:orientation="horizontal"/>
-
-    <FrameLayout
-        android:id="@+id/mapImageContainer"
-        android:layout_width="226dp"
-        android:layout_height="222dp"
-        app:layout_constraintBottom_toTopOf="@id/tutorialTextContainer"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent">
-
-        <ImageView
-            android:id="@+id/mapImageView"
-            android:layout_width="226dp"
-            android:layout_height="222dp"
-            app:srcCompat="@drawable/logo_osm_map" />
-
-        <ImageView
-            android:id="@+id/overlayImageView"
-            android:layout_width="226dp"
-            android:layout_height="222dp"
-            app:srcCompat="@drawable/overlay_osm_map_animated"
-            android:visibility="invisible"
-            tools:visibility="visible" />
-
-        <ImageView
-            android:id="@+id/overlayIcon1"
-            android:layout_width="24dp"
-            android:layout_height="24dp"
-            app:srcCompat="@drawable/ic_preset_fas_shopping_cart"
-            android:visibility="invisible"
-            tools:visibility="visible"
-            android:translationX="80dp"
-            android:translationY="40dp" />
-
-        <ImageView
-            android:id="@+id/overlayIcon2"
-            android:layout_width="24dp"
-            android:layout_height="24dp"
-            app:srcCompat="@drawable/ic_preset_maki_fuel"
-            android:visibility="invisible"
-            tools:visibility="visible"
-            android:translationX="180dp"
-            android:translationY="170dp" />
-
-        <ImageView
-            android:id="@+id/overlaySelectedImageView"
-            android:layout_width="226dp"
-            android:layout_height="222dp"
-            app:srcCompat="@drawable/overlay_osm_map_edit_animated"
-            android:visibility="invisible"
-            tools:visibility="visible"  />
-
-    </FrameLayout>
-
-
-    <ImageView
-        android:id="@+id/paintRollerView"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:srcCompat="@drawable/paint_roller_animated"
-        android:rotation="-45"
-        android:visibility="invisible"
-        tools:visibility="visible"
-        app:layout_constraintLeft_toLeftOf="@id/mapImageContainer"
-        app:layout_constraintTop_toTopOf="@id/mapImageContainer" />
-
-    <ImageView
-        android:id="@+id/shineView1"
-        app:srcCompat="@drawable/shine"
-        android:layout_width="196dp"
-        android:layout_height="196dp"
-        android:scaleType="centerCrop"
-        app:layout_constraintTop_toTopOf="@id/overlaysButton"
-        app:layout_constraintBottom_toBottomOf="@id/overlaysButton"
-        app:layout_constraintLeft_toLeftOf="@id/overlaysButton"
-        app:layout_constraintRight_toRightOf="@id/overlaysButton"
-        tools:ignore="ContentDescription"/>
-
-    <ImageView
-        android:id="@+id/shineView2"
-        app:srcCompat="@drawable/shine"
-        android:layout_width="128dp"
-        android:layout_height="128dp"
-        android:scaleType="centerCrop"
-        android:rotation="180"
-        app:layout_constraintTop_toTopOf="@id/overlaysButton"
-        app:layout_constraintBottom_toBottomOf="@id/overlaysButton"
-        app:layout_constraintLeft_toLeftOf="@id/overlaysButton"
-        app:layout_constraintRight_toRightOf="@id/overlaysButton"
-        tools:ignore="ContentDescription"/>
-
-    <ImageView
-        android:id="@+id/overlaysButton"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
-        android:background="@drawable/background_white_circle"
-        android:clickable="false"
-        android:focusable="false"
-        android:elevation="4dp"
-        app:layout_constraintLeft_toRightOf="@id/mapImageContainer"
-        app:layout_constraintBottom_toBottomOf="@id/mapImageContainer"
-        android:layout_marginBottom="16dp"
-        app:srcCompat="@drawable/ic_overlay_black_24dp"
-        android:scaleType="centerInside" />
-
-    <FrameLayout
-        android:id="@+id/tutorialTextContainer"
-        android:background="?android:attr/colorBackground"
-        android:layout_width="match_parent"
-        android:layout_height="0dp"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/verticalCenter"
-        android:gravity="top|center_horizontal">
-
-        <ScrollView
-            android:id="@+id/tutorialStepIntro"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:orientation="vertical"
-            android:gravity="top|center_horizontal"
-            android:visibility="visible"
-            tools:visibility="visible">
-
-            <RelativeLayout
-                android:layout_width="@dimen/tutorial_textbox_width"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal"
-                android:paddingTop="24dp"
-                android:paddingBottom="112dp">
-
-                <TextView
-                    android:id="@+id/titleTextView"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerHorizontal="true"
-                    android:gravity="center"
-                    android:textAppearance="@style/TextAppearance.HeadlineSmall"
-                    android:text="@string/overlays_tutorial_title"/>
-
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/titleTextView"
-                    android:layout_marginTop="24dp"
-                    android:layout_centerHorizontal="true"
-                    android:gravity="center"
-                    android:textAppearance="@style/TextAppearance.BigBody"
-                    android:text="@string/overlays_tutorial_intro"/>
-
-            </RelativeLayout>
-
-        </ScrollView>
-
-        <ScrollView
-            android:id="@+id/tutorialStepDisplay"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:orientation="vertical"
-            android:gravity="top|center_horizontal"
-            android:visibility="gone"
-            tools:visibility="gone">
-
-            <TextView
-                android:layout_width="@dimen/tutorial_textbox_width"
-                android:layout_height="wrap_content"
-                android:paddingTop="24dp"
-                android:paddingBottom="112dp"
-                android:layout_gravity="center_horizontal"
-                android:textAppearance="@style/TextAppearance.BigBody"
-                android:text="@string/overlays_tutorial_display"/>
-
-        </ScrollView>
-
-        <ScrollView
-            android:id="@+id/tutorialStepEdit"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:orientation="vertical"
-            android:gravity="top|center_horizontal"
-            android:visibility="gone"
-            tools:visibility="gone">
-
-            <TextView
-                android:id="@+id/staySafeTextView"
-                android:layout_width="@dimen/tutorial_textbox_width"
-                android:layout_height="wrap_content"
-                android:paddingTop="24dp"
-                android:paddingBottom="112dp"
-                android:layout_gravity="center_horizontal"
-                android:textAppearance="@style/TextAppearance.BigBody"
-                android:text="@string/overlays_tutorial_edit"/>
-
-        </ScrollView>
-
-    </FrameLayout>
-
-    <RelativeLayout
-        android:id="@+id/bottomPart"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        android:paddingBottom="@dimen/activity_vertical_margin"
-        android:paddingTop="@dimen/activity_vertical_margin"
-        android:background="@drawable/gradient_transparent_to_background">
-
-        <LinearLayout
-            android:id="@+id/dotsContainer"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:showDividers="middle"
-            android:layout_centerInParent="true"
-            android:layout_alignParentTop="true"
-            android:divider="@drawable/space_8dp">
-
-            <ImageView
-                android:id="@+id/dot1"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                app:srcCompat="@drawable/indicator_dot_selected"/>
-
-            <ImageView
-                android:id="@+id/dot2"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                app:srcCompat="@drawable/indicator_dot_default"/>
-
-            <ImageView
-                android:id="@+id/dot3"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                app:srcCompat="@drawable/indicator_dot_default"/>
-
-        </LinearLayout>
-
-        <Button
-            android:id="@+id/nextButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="@string/next"
-            android:layout_marginTop="16dp"
-            android:layout_below="@id/dotsContainer"
-            android:layout_centerInParent="true" />
-
-    </RelativeLayout>
-
-</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values-sw600dp/dimens.xml b/app/src/main/res/values-sw600dp/dimens.xml
deleted file mode 100644
index e397446de06..00000000000
--- a/app/src/main/res/values-sw600dp/dimens.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<resources>
-
-    <dimen name="tutorial_textbox_width">480dp</dimen>
-
-</resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 56563298e05..4a5b17fb535 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -24,9 +24,6 @@
     <color name="background">#fff</color>
     <color name="background_transparent">#0fff</color>
 
-    <color name="indicator_dot">#888</color>
-    <color name="indicator_dot_selected">@color/accent</color>
-
     <color name="hint_text">#666</color>
     <color name="label_text_below_image">#000</color>
     <color name="title_text_next_to_image">#000</color>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 3f6aaebfdca..199ee95950c 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -54,10 +54,6 @@
     <dimen name="quest_statistics_country_icon_height">220dp</dimen>
     <dimen name="quest_statistics_country_icon_offset">120dp</dimen>
 
-    <!-- tutorial screen -->
-
-    <dimen name="tutorial_textbox_width">320dp</dimen>
-
     <!-- forms -->
 
     <!-- text size for extra large input fields, i.e.  inputs that should fill about the whole form

From 6426e2d46f4ae58cc759bef4312b277c22867510 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 20:33:46 +0200
Subject: [PATCH 09/12] remove unused text styles

---
 app/src/main/res/values-sw400dp/textStyles.xml | 6 ------
 app/src/main/res/values-sw600dp/textStyles.xml | 6 ------
 app/src/main/res/values/textStyles.xml         | 6 ------
 3 files changed, 18 deletions(-)

diff --git a/app/src/main/res/values-sw400dp/textStyles.xml b/app/src/main/res/values-sw400dp/textStyles.xml
index 435b91e18fb..a6ef62dd5ea 100644
--- a/app/src/main/res/values-sw400dp/textStyles.xml
+++ b/app/src/main/res/values-sw400dp/textStyles.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="TextAppearance.HeadlineSmall" parent="TextAppearance.AppCompat.Headline">
-        <item name="android:textSize">24sp</item>
-    </style>
-    <style name="TextAppearance.Subhead" parent="TextAppearance.AppCompat.Subhead">
-        <item name="android:textSize">17sp</item>
-    </style>
     <style name="TextAppearance.BigBody" parent="TextAppearance.Body">
         <item name="android:textSize">20sp</item>
         <item name="android:fontFamily">sans-serif</item>
diff --git a/app/src/main/res/values-sw600dp/textStyles.xml b/app/src/main/res/values-sw600dp/textStyles.xml
index 4d8f022fdee..7420ffd2c78 100644
--- a/app/src/main/res/values-sw600dp/textStyles.xml
+++ b/app/src/main/res/values-sw600dp/textStyles.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="TextAppearance.HeadlineSmall" parent="TextAppearance.AppCompat.Headline">
-        <item name="android:textSize">30sp</item>
-    </style>
-    <style name="TextAppearance.Subhead" parent="TextAppearance.AppCompat.Subhead">
-        <item name="android:textSize">20sp</item>
-    </style>
     <style name="TextAppearance.BigBody" parent="TextAppearance.Body">
         <item name="android:textSize">24sp</item>
         <item name="android:fontFamily">sans-serif</item>
diff --git a/app/src/main/res/values/textStyles.xml b/app/src/main/res/values/textStyles.xml
index f4ddbeeb885..814873ba961 100644
--- a/app/src/main/res/values/textStyles.xml
+++ b/app/src/main/res/values/textStyles.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="TextAppearance.HeadlineSmall" parent="TextAppearance.AppCompat.Headline"><!-- TODO remove -->
-        <item name="android:textSize">24sp</item>
-    </style>
-    <style name="TextAppearance.Subhead" parent="TextAppearance.AppCompat.Subhead"><!-- TODO remove -->
-        <item name="android:textSize">15sp</item>
-    </style>
     <style name="TextAppearance.BigBody" parent="TextAppearance.Body">
         <item name="android:textSize">16sp</item>
         <item name="android:fontFamily">sans-serif</item>

From 210e6f9da53cfa93900350e19f707f5f49b10ad1 Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 20:37:33 +0200
Subject: [PATCH 10/12] remove extension functions that don't really make so
 much sense

---
 .../screens/tutorial/IntroTutorialScreen.kt     |  9 ++++++---
 .../screens/tutorial/OverlaysTutorialScreen.kt  | 10 ++++++----
 .../streetcomplete/ui/ktx/GraphicsLayerScope.kt | 17 -----------------
 3 files changed, 12 insertions(+), 24 deletions(-)
 delete mode 100644 app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
index e2f869cbdec..32c8ef3e564 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/IntroTutorialScreen.kt
@@ -32,7 +32,6 @@ import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.screens.main.controls.LocationState
 import de.westnordost.streetcomplete.screens.main.controls.LocationStateButton
 import de.westnordost.streetcomplete.ui.common.Pin
-import de.westnordost.streetcomplete.ui.ktx.scale
 import de.westnordost.streetcomplete.ui.theme.headlineLarge
 import de.westnordost.streetcomplete.ui.theme.titleLarge
 import kotlinx.coroutines.launch
@@ -103,8 +102,10 @@ private fun BoxScope.IntroTutorialIllustration(
             Modifier
                 .size(width = 226.dp, height = 222.dp)
                 .graphicsLayer {
+                    val scale = 1f + mapZoom.value * 0.5f
+                    scaleX = scale
+                    scaleY = scale
                     rotationX = mapZoom.value * 50f
-                    scale = 1f + mapZoom.value * 0.5f
                 }
         ) {
             Image(
@@ -165,9 +166,11 @@ private fun BoxScope.IntroTutorialIllustration(
                 .size(225.dp)
                 .absolutePadding(left = 15.dp, top = 15.dp)
                 .graphicsLayer {
+                    val scale = 1f + mapZoom.value * 5f
+                    scaleX = scale
+                    scaleY = scale
                     transformOrigin = TransformOrigin(0.67f, 0.33f)
                     alpha = 1f - mapZoom.value
-                    scale = 1f + mapZoom.value * 5f
                 }
         )
     }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
index 6f14d445386..a5992bd5bab 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -38,8 +38,6 @@ import androidx.compose.ui.unit.dp
 import de.westnordost.streetcomplete.R
 import de.westnordost.streetcomplete.screens.user.achievements.AnimatedTadaShine
 import de.westnordost.streetcomplete.screens.main.controls.MapButton
-import de.westnordost.streetcomplete.ui.ktx.scale
-import de.westnordost.streetcomplete.ui.ktx.translation
 import de.westnordost.streetcomplete.ui.theme.headlineLarge
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
@@ -122,7 +120,9 @@ private fun BoxScope.OverlaysTutorialIllustration(
             Modifier
                 .size(width = 226.dp, height = 222.dp)
                 .graphicsLayer {
-                    scale = 1f + mapZoom.value
+                    val scale = 1f + mapZoom.value
+                    scaleX = scale
+                    scaleY = scale
                     rotationZ = mapZoom.value * -15f
                     transformOrigin = TransformOrigin(0.25f, 0.75f)
                     translationX = 45f * mapZoom.value * density
@@ -192,7 +192,9 @@ private fun BoxScope.OverlaysTutorialIllustration(
             painter = paintRollerPainter(paintRolling),
             contentDescription = null,
             modifier = Modifier.graphicsLayer {
-                translation = (-128 + paintRollerPosition.value * 256) * density
+                val offset = (-128 + paintRollerPosition.value * 256) * density
+                translationX = offset
+                translationY = offset
                 rotationZ = -45.0f
                 alpha = paintRollerAlpha.value
             }
diff --git a/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt b/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt
deleted file mode 100644
index e76f6cffb04..00000000000
--- a/app/src/main/java/de/westnordost/streetcomplete/ui/ktx/GraphicsLayerScope.kt
+++ /dev/null
@@ -1,17 +0,0 @@
-package de.westnordost.streetcomplete.ui.ktx
-
-import androidx.compose.ui.graphics.GraphicsLayerScope
-
-var GraphicsLayerScope.scale: Float
-    get() = scaleX
-    set(value) {
-        scaleX = value
-        scaleY = value
-    }
-
-var GraphicsLayerScope.translation: Float
-    get() = translationX
-    set(value) {
-        translationX = value
-        translationY = value
-    }

From f47c5d3e7a0913aa2a23eb6a4c677d9254af969b Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 20:56:04 +0200
Subject: [PATCH 11/12] coerce input for painters

---
 .../streetcomplete/screens/tutorial/OverlayPainter.kt       | 6 +++---
 .../streetcomplete/screens/tutorial/PaintRollerPainter.kt   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
index 0505c5a8cf0..c0842955180 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlayPainter.kt
@@ -17,7 +17,7 @@ import kotlin.math.cos
 
 @Composable
 fun overlayPainter(progress: Float): VectorPainter = rememberMapOverlayPainter {
-    val translate = -(1f - progress) * 317f
+    val translate = -(1f - progress.coerceIn(0f, 1f)) * 317f
     Group(
         clipPathData = clipPath,
         translationX = translate,
@@ -71,9 +71,9 @@ fun overlayEditDonePainter(progress: Float): VectorPainter = rememberMapOverlayP
         pathData = way2Path,
         strokeLineJoin = StrokeJoin.Round,
         strokeLineCap = StrokeCap.Round,
-        strokeLineWidth = 8 + (1 - progress) * 16,
+        strokeLineWidth = 8 + (1 - progress.coerceIn(0f, 1f)) * 16,
         stroke = SolidColor(Color(0xff10C1B8)),
-        strokeAlpha = progress
+        strokeAlpha = progress.coerceIn(0f, 1f)
     )
 }
 
diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
index 1b4b0bb4375..46c83240d24 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/PaintRollerPainter.kt
@@ -40,7 +40,7 @@ fun paintRollerPainter(progress: Float): VectorPainter = rememberVectorPainter(
         fill = SolidColor(Color(0xfffef0c1))
     )
     Group(clipPathData = rollerLintClipPath) {
-        Group(translationY = progress * 9f) {
+        Group(translationY = progress.coerceIn(0f, 1f) * 9f) {
             Path(
                 pathData = rollerLintPath,
                 fill = SolidColor(Color(0xffe2cf90))

From 59b66a0dd323a37752653b7f99bec814c55862cc Mon Sep 17 00:00:00 2001
From: Tobias Zwick <newton@westnordost.de>
Date: Mon, 15 Jul 2024 21:02:42 +0200
Subject: [PATCH 12/12] fuel icon appeared a little too late

---
 .../streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
index a5992bd5bab..73e4dc649b6 100644
--- a/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
+++ b/app/src/main/java/de/westnordost/streetcomplete/screens/tutorial/OverlaysTutorialScreen.kt
@@ -150,7 +150,7 @@ private fun BoxScope.OverlaysTutorialIllustration(
                         .absoluteOffset(80.dp, 40.dp)
                 )
             }
-            if (overlayPaint.value > 0.8f) {
+            if (overlayPaint.value > 0.7f) {
                 Icon(
                     painter = painterResource(R.drawable.ic_preset_maki_fuel),
                     contentDescription = null,