Updated TopicScreen and Detail Screen with changed UI

composeApp/build.gradle.kts

@@ -69,11 +69,10 @@ kotlin {
         val desktopMain by getting
 
         androidMain.dependencies {
-            implementation(compose.preview)
+            implementation("androidx.compose.ui:ui:1.8.2")
             implementation(libs.androidx.activity.compose)
             implementation(libs.koin.android)
             implementation(libs.koin.androidx.compose)
-            implementation(compose.components.uiToolingPreview)
         }
         commonMain.dependencies {
             implementation(compose.runtime)

composeApp/src/commonMain/composeResources/drawable/ic_bookmark.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://schemas.android.com/apk/res/android ">
+  <path
+      android:pathData="M200,840v-640q0,-33 23.5,-56.5T280,120h400q33,0 56.5,23.5T760,200v640L480,720 200,840ZM280,718 L480,632 680,718v-518L280,200v518ZM280,200h400,-400Z"
+      android:fillColor="#e3e3e3" />
+</vector>

composeApp/src/commonMain/composeResources/drawable/ic_bookmark_filled.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://schemas.android.com/apk/res/android ">
+  <path
+      android:pathData="M17,3H7c-1.1,0 -2,0.9 -2,2v16l7,-3 7,3V5c0,-1.1 -0.9,-2 -2,-2z"
+      android:fillColor="#EFEFEF" />
+</vector>

composeApp/src/commonMain/composeResources/drawable/ic_check.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="M382,720 L154,492l57,-57 171,171 367,-367 57,57 -424,424Z"
+      android:fillColor="#EFEFEF"/>
+</vector>

composeApp/src/commonMain/composeResources/drawable/ic_content_copy.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="M360,720q-33,0 -56.5,-23.5T280,640v-480q0,-33 23.5,-56.5T360,80h360q33,0 56.5,23.5T800,160v480q0,33 -23.5,56.5T720,720L360,720ZM360,640h360v-480L360,160v480ZM200,880q-33,0 -56.5,-23.5T120,800v-560h80v560h440v80L200,880ZM360,640v-480,480Z"
+      android:fillColor="#EFEFEF"/>
+</vector>

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/App.kt

@@ -2,11 +2,14 @@ package com.developersbreach.kotlindictionarymultiplatform
 
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
+import com.developersbreach.kotlindictionarymultiplatform.theme.AppTypography
 import com.developersbreach.kotlindictionarymultiplatform.ui.navigation.AppNavigation
 
 @Composable
 fun App() {
-    MaterialTheme {
+    MaterialTheme(
+        typography = AppTypography(),
+    ) {
         AppNavigation()
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/theme/Colors.kt

@@ -0,0 +1,9 @@
+package com.developersbreach.kotlindictionarymultiplatform.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Brown = Color(0xFF221F1A)
+val Cream = Color(0xFFFFD39A)
+val Grey = Color(0xFFEFEBE8)
+val White = Color(0xFFFEF9F9)
+val Cream40 = Color(0xFFFDE6DA)

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/theme/Font.kt

@@ -0,0 +1,38 @@
+package com.developersbreach.kotlindictionarymultiplatform.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import kotlindictionarymultiplatform.composeapp.generated.resources.Res
+import kotlindictionarymultiplatform.composeapp.generated.resources.noto_sans_bold
+import kotlindictionarymultiplatform.composeapp.generated.resources.noto_sans_medium
+import kotlindictionarymultiplatform.composeapp.generated.resources.noto_sans_regular
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+import org.jetbrains.compose.resources.Font
+
+@OptIn(ExperimentalResourceApi::class)
+@Composable
+fun AppTypography(): Typography {
+    val fontFamily = FontFamily(
+        Font(Res.font.noto_sans_regular, weight = FontWeight.Normal),
+        Font(Res.font.noto_sans_medium, weight = FontWeight.Medium),
+        Font(Res.font.noto_sans_bold, weight = FontWeight.Bold),
+    )
+
+    return Typography(
+        h1 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Bold, fontSize = 30.sp),
+        h2 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Bold, fontSize = 20.sp),
+        h3 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Medium, fontSize = 24.sp),
+        h4 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Medium, fontSize = 18.sp),
+        body1 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 16.sp),
+        body2 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 14.sp),
+        subtitle1 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Medium, fontSize = 16.sp),
+        subtitle2 = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Medium, fontSize = 14.sp),
+        button = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Bold, fontSize = 14.sp),
+        caption = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp),
+        overline = TextStyle(fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 10.sp),
+    )
+}