Migrate to our new design system (#94)

* WIP: Migration * WIP: Migration * WIP: Migration * WIP: Migration * WIP: Migration * Migrate old typography to new * WIP: Typography * WIP: Improve Typography * Improve Typography & migrate old buttons to IvyButton * Improve ButtonAppearance model * Improve texts' line height * Improve LessonProgressBar UI * Fix IvySwitch * Improve Settings UI
Ivy-Apps · Dec 27, 2024 · d70a969 · d70a969
1 parent b105696
commit d70a969
Show file tree

Hide file tree

Showing 31 changed files with 1,121 additions and 1,215 deletions.
diff --git a/composeApp/src/commonMain/kotlin/component/LearnScaffold.kt b/composeApp/src/commonMain/kotlin/component/LearnScaffold.kt
@@ -10,109 +10,120 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import ui.theme.IvyTheme
 
 data class BackButton(
-    val icon: BackIcon = BackIcon.ArrowBack,
-    val onBackClick: () -> Unit
+  val icon: BackIcon = BackIcon.ArrowBack,
+  val onBackClick: () -> Unit
 )
 
 enum class BackIcon {
-    ArrowBack,
-    Close
+  ArrowBack,
+  Close
 }
 
 @Composable
 fun LearnScaffold(
-    backButton: BackButton?,
-    title: String,
-    modifier: Modifier = Modifier,
-    actions: @Composable (Modifier) -> Unit = {},
-    bottomBar: @Composable () -> Unit = {},
-    floatingActionButton: @Composable () -> Unit = {},
-    topBarCenterContent: (@Composable () -> Unit)? = null,
-    content: @Composable (contentPadding: PaddingValues) -> Unit
+  backButton: BackButton?,
+  title: String,
+  modifier: Modifier = Modifier,
+  actions: @Composable (Modifier) -> Unit = {},
+  bottomBar: @Composable () -> Unit = {},
+  floatingActionButton: @Composable () -> Unit = {},
+  topBarCenterContent: (@Composable () -> Unit)? = null,
+  content: @Composable (contentPadding: PaddingValues) -> Unit
 ) {
-    Scaffold(
-        modifier = modifier,
-        topBar = {
-            LearnTopAppBar(
-                backButton = backButton,
-                title = title,
-                centerContent = topBarCenterContent,
-                actions = actions
-            )
-        },
-        bottomBar = bottomBar,
-        floatingActionButton = floatingActionButton,
-        content = content
-    )
+  Scaffold(
+    modifier = modifier,
+    topBar = {
+      LearnTopAppBar(
+        backButton = backButton,
+        title = title,
+        centerContent = topBarCenterContent,
+        actions = actions
+      )
+    },
+    bottomBar = bottomBar,
+    floatingActionButton = floatingActionButton,
+    content = content
+  )
 }
 
 @Composable
 private fun LearnTopAppBar(
-    backButton: BackButton?,
-    title: String,
-    modifier: Modifier = Modifier,
-    actions: @Composable (Modifier) -> Unit = {},
-    centerContent: (@Composable () -> Unit)? = null,
+  backButton: BackButton?,
+  title: String,
+  modifier: Modifier = Modifier,
+  actions: @Composable (Modifier) -> Unit = {},
+  centerContent: (@Composable () -> Unit)? = null,
 ) {
-    TopAppBar(
-        modifier = modifier,
-        content = {
-            var backButtonWidth by remember { mutableStateOf(0.dp) }
-            var actionsWidth by remember { mutableStateOf(0.dp) }
-            val density = LocalDensity.current
-            if (backButton != null) {
-                BackButton(
-                    modifier = Modifier.onSizeChanged {
-                        backButtonWidth = with(density) { it.width.toDp() }
-                    },
-                    backButton = backButton
-                )
-            }
-            Spacer(Modifier.weight(1f))
-            Spacer(Modifier.width(actionsWidth))
+  TopAppBar(
+    modifier = modifier,
+    content = {
+      var backButtonWidth by remember { mutableStateOf(0.dp) }
+      var actionsWidth by remember { mutableStateOf(0.dp) }
+      val density = LocalDensity.current
+      if (backButton != null) {
+        BackButton(
+          modifier = Modifier.onSizeChanged {
+            backButtonWidth = with(density) { it.width.toDp() }
+          },
+          backButton = backButton
+        )
+      }
+      Spacer(Modifier.weight(1f))
+      Spacer(Modifier.width(actionsWidth))
 
-            if (centerContent != null) {
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                ) {
-                    Text(title)
-                    Spacer(Modifier.height(4.dp))
-                    centerContent()
-                }
-            } else {
-                Text(title)
-            }
+      if (centerContent != null) {
+        Column(
+          horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+          TopAppBarTitle(text = title)
+          Spacer(Modifier.height(4.dp))
+          centerContent()
+        }
+      } else {
+        TopAppBarTitle(text = title)
+      }
 
-            Spacer(Modifier.weight(1f))
-            actions(
-                Modifier.onSizeChanged {
-                    actionsWidth = with(density) { it.width.toDp() }
-                }
-            )
-            Spacer(Modifier.width(backButtonWidth))
+      Spacer(Modifier.weight(1f))
+      actions(
+        Modifier.onSizeChanged {
+          actionsWidth = with(density) { it.width.toDp() }
         }
-    )
+      )
+      Spacer(Modifier.width(backButtonWidth))
+    }
+  )
+}
+
+@Composable
+private fun TopAppBarTitle(text: String) {
+  Text(
+    text = text,
+    style = IvyTheme.typography.b2,
+    fontWeight = FontWeight.Medium
+  )
 }
 
 @Composable
 private fun BackButton(
-    backButton: BackButton,
-    modifier: Modifier = Modifier
+  backButton: BackButton,
+  modifier: Modifier = Modifier
 ) {
-    IconButton(
-        modifier = modifier,
-        onClick = backButton.onBackClick,
-        content = {
-            Icon(
-                imageVector = when (backButton.icon) {
-                    BackIcon.ArrowBack -> Icons.AutoMirrored.Filled.ArrowBack
-                    BackIcon.Close -> Icons.Default.Close
-                },
-                contentDescription = null
-            )
-        }
-    )
+  IconButton(
+    modifier = modifier,
+    onClick = backButton.onBackClick,
+    content = {
+      Icon(
+        imageVector = when (backButton.icon) {
+          BackIcon.ArrowBack -> Icons.AutoMirrored.Filled.ArrowBack
+          BackIcon.Close -> Icons.Default.Close
+        },
+        contentDescription = null
+      )
+    }
+  )
 }
diff --git a/composeApp/src/commonMain/kotlin/component/button/CtaButton.kt b/composeApp/src/commonMain/kotlin/component/button/CtaButton.kt