Rebuilt components to not be imported from Figma via relay but own built and some other changes

app/src/main/java/com/f1rq/lifemap/MainActivity.kt

@@ -3,25 +3,16 @@ package com.f1rq.lifemap
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.f1rq.lifemap.navigationbar.NavigationBar
-import com.f1rq.lifemap.topappbar.TopAppBar
 import com.f1rq.lifemap.screens.ListView
 import com.f1rq.lifemap.screens.MapView
 import com.f1rq.lifemap.screens.SettingsScreen
@@ -29,6 +20,7 @@ import com.f1rq.lifemap.screens.NotificationsScreen
 import com.f1rq.lifemap.ui.theme.LifeMapTheme
 import com.f1rq.lifemap.ui.theme.ActiveNavColor
 import com.f1rq.lifemap.ui.theme.InactiveNavColor
+import com.f1rq.lifemap.components.TopBar
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -39,9 +31,9 @@ class MainActivity : ComponentActivity() {
 
                 Scaffold(
                     topBar = {
-                          TopAppBar(
+                          TopBar(
-                              onSettingsIconTapped = { navController.navigate("settings")},
+                              onSettingsButtonClick = { navController.navigate("settings")},
-                              onNotificationsIconTapped = { navController.navigate("notifications")}
+                              onNotificationsButtonClick = { navController.navigate("notifications")}
                           )
                     },
                     bottomBar = {

app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt

@@ -0,0 +1,98 @@
+package com.f1rq.lifemap.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.*
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.tooling.preview.Preview
+import com.f1rq.lifemap.ui.theme.MainBG
+import com.f1rq.lifemap.ui.theme.MainTextColor
+import com.f1rq.lifemap.ui.theme.ButtonColor
+
+@Composable
+fun AddEventCard(
+    modifier: Modifier = Modifier,
+    onCreateEventClick: () -> Unit = {}
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        shape = RoundedCornerShape(16.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MainBG,
+        )
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(
+                    horizontal = 16.dp,
+                    vertical = 12.dp,
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+            ) {
+                Text(
+                    text = "Add event",
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MainTextColor
+                )
+                Text(
+                    text = "With localization, date etc.",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MainTextColor
+                )
+            }
+
+            Box(
+                modifier = Modifier
+                    .shadow(
+                        elevation = 6.dp,
+                        shape = RoundedCornerShape(12.dp),
+                        clip = false
+                    )
+                    .background(
+                        color = MainBG,
+                        shape = RoundedCornerShape(12.dp)
+                    )
+                    .size(56.dp)
+            ) {
+                IconButton(
+                    onClick = onCreateEventClick,
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    Icon(
+                        imageVector = Icons.Default.Edit,
+                        contentDescription = "Edit",
+                        tint = ButtonColor
+                    )
+                }
+            }
+
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AddEventCardPreview() {
+    AddEventCard()
+}

app/src/main/java/com/f1rq/lifemap/components/NavBar.kt

@@ -0,0 +1,32 @@
+package com.f1rq.lifemap.components
+
+
+import android.graphics.Color
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+
+@Composable
+fun NavBar(
+    onWorldViewTapped: () -> Unit = {},
+    onListViewTapped: () -> Unit = {},
+) {
+    Box(modifier = Modifier
+        .requiredWidth(24.0.dp)
+        .requiredHeight(24.0.dp)
+    ) {
+
+    }
+}
+
+
+@Preview
+@Composable
+fun NavBarPreview() {
+    NavBar()
+}

app/src/main/java/com/f1rq/lifemap/components/TopBar.kt

@@ -0,0 +1,109 @@
+package com.f1rq.lifemap.components
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.*
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import com.f1rq.lifemap.ui.theme.MainBG
+import com.f1rq.lifemap.ui.theme.MainTextColor
+import com.f1rq.lifemap.ui.theme.ButtonColor
+import com.f1rq.lifemap.R.drawable.notifications_button
+import com.f1rq.lifemap.R.drawable.settings_button
+
+@Composable
+fun TopBar(
+    modifier: Modifier = Modifier,
+    onNotificationsButtonClick: () -> Unit = {},
+    onSettingsButtonClick: () -> Unit = {}
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth(),
+        shape = RoundedCornerShape(
+            topStart = 0.dp,
+            topEnd = 0.dp,
+            bottomStart = 16.dp,
+            bottomEnd = 16.dp
+        ),
+        elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MainBG,
+        )
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(
+                    start = 20.0.dp,
+                    top = 65.0.dp,
+                    end = 20.0.dp,
+                    bottom = 15.0.dp
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+            ) {
+                Text(
+                    text = "LifeMap",
+                    style = MaterialTheme.typography.titleMedium,
+                    fontSize = MaterialTheme.typography.titleLarge.fontSize,
+                    fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
+                    fontWeight = FontWeight(700.0.toInt()),
+                    color = MainTextColor,
+                )
+                Text(
+                    text = "Personal life events",
+                    style = MaterialTheme.typography.bodySmall,
+                    fontSize = MaterialTheme.typography.labelMedium.fontSize,
+                    color = MainTextColor
+                )
+            }
+            Box(
+                modifier = Modifier
+            ) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy((-6).dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    IconButton(
+                        onClick = onNotificationsButtonClick,
+                    ) {
+                        Icon(
+                            painter = painterResource(id = notifications_button),
+                            contentDescription = "Notifications button",
+                            tint = ButtonColor
+                        )
+                    }
+                    IconButton(
+                        onClick = onSettingsButtonClick,
+                    ) {
+                        Icon(
+                            painter = painterResource(id = settings_button),
+                            contentDescription = "Settings button",
+                            tint = ButtonColor
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TopBarPreview() {
+    TopBar()
+}

app/src/main/java/com/f1rq/lifemap/screens/MapView.kt

@@ -6,15 +6,27 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import com.f1rq.lifemap.addevent.AddEvent
+import androidx.compose.ui.tooling.preview.Preview
+import com.f1rq.lifemap.components.AddEventCard
 
 @Composable
 fun MapView(modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize()
-        contentAlignment = Alignment.Center
     ) {
-        AddEvent()
+        Text(
-        Text("Map view")
+            text = "Map view",
+            modifier = Modifier.align(Alignment.Center)
+        )
+        AddEventCard(
+            onCreateEventClick = {},
+            modifier = Modifier.align(Alignment.BottomCenter)
+        )
     }
+}
+
+@Preview
+@Composable
+fun MapViewPreview() {
+    MapView()
 }

app/src/main/java/com/f1rq/lifemap/ui/theme/Color.kt

@@ -5,10 +5,13 @@ import androidx.compose.ui.graphics.Color
 val Purple80 = Color(0xFFD0BCFF)
 val PurpleGrey80 = Color(0xFFCCC2DC)
 val Pink80 = Color(0xFFEFB8C8)
-
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
 
+
+val MainBG = Color(0xFFECECEC)
 val ActiveNavColor = Color(0xFFDDDDDD)
-val InactiveNavColor = Color.Transparent
+val InactiveNavColor = Color.Transparent
+val MainTextColor = Color(0xFF1D1B20)
+val ButtonColor = Color(0xFF49454F)

app/src/main/res/drawable/add_event_button.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+    <path
+        android:pathData="M2,16H3.425L13.2,6.225L11.775,4.8L2,14.575V16ZM0,18V13.75L13.2,0.575C13.4,0.3917 13.6208,0.25 13.8625,0.15C14.1042,0.05 14.3583,0 14.625,0C14.8917,0 15.15,0.05 15.4,0.15C15.65,0.25 15.8667,0.4 16.05,0.6L17.425,2C17.625,2.1833 17.7708,2.4 17.8625,2.65C17.9542,2.9 18,3.15 18,3.4C18,3.6667 17.9542,3.9208 17.8625,4.1625C17.7708,4.4042 17.625,4.625 17.425,4.825L4.25,18H0ZM12.475,5.525L11.775,4.8L13.2,6.225L12.475,5.525Z"
+        android:fillColor="#49454F"/>
+</vector>

app/src/main/res/drawable/navbar_listview_button.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="19dp"
+    android:height="15dp"
+    android:viewportWidth="19"
+    android:viewportHeight="15">
+    <path
+        android:pathData="M4.5,0.5H18.5V2.5H4.5V0.5ZM4.5,8.5V6.5H18.5V8.5H4.5ZM1.5,0C1.8978,0 2.2794,0.158 2.5607,0.4393C2.842,0.7206 3,1.1022 3,1.5C3,1.8978 2.842,2.2794 2.5607,2.5607C2.2794,2.842 1.8978,3 1.5,3C1.1022,3 0.7206,2.842 0.4393,2.5607C0.158,2.2794 0,1.8978 0,1.5C0,1.1022 0.158,0.7206 0.4393,0.4393C0.7206,0.158 1.1022,0 1.5,0ZM1.5,6C1.8978,6 2.2794,6.158 2.5607,6.4393C2.842,6.7206 3,7.1022 3,7.5C3,7.8978 2.842,8.2794 2.5607,8.5607C2.2794,8.842 1.8978,9 1.5,9C1.1022,9 0.7206,8.842 0.4393,8.5607C0.158,8.2794 0,7.8978 0,7.5C0,7.1022 0.158,6.7206 0.4393,6.4393C0.7206,6.158 1.1022,6 1.5,6ZM4.5,14.5V12.5H18.5V14.5H4.5ZM1.5,12C1.8978,12 2.2794,12.158 2.5607,12.4393C2.842,12.7206 3,13.1022 3,13.5C3,13.8978 2.842,14.2794 2.5607,14.5607C2.2794,14.842 1.8978,15 1.5,15C1.1022,15 0.7206,14.842 0.4393,14.5607C0.158,14.2794 0,13.8978 0,13.5C0,13.1022 0.158,12.7206 0.4393,12.4393C0.7206,12.158 1.1022,12 1.5,12Z"
+        android:fillColor="#49454F"/>
+</vector>

app/src/main/res/drawable/navbar_worldview_button.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+    <path
+        android:pathData="M15.9,15.39C15.64,14.59 14.89,14 14,14H13V11C13,10.7348 12.8946,10.4804 12.7071,10.2929C12.5196,10.1054 12.2652,10 12,10H6V8H8C8.2652,8 8.5196,7.8946 8.7071,7.7071C8.8946,7.5196 9,7.2652 9,7V5H11C11.5304,5 12.0391,4.7893 12.4142,4.4142C12.7893,4.0391 13,3.5304 13,3V2.59C15.93,3.77 18,6.64 18,10C18,12.08 17.2,13.97 15.9,15.39ZM9,17.93C5.05,17.44 2,14.08 2,10C2,9.38 2.08,8.78 2.21,8.21L7,13V14C7,14.5304 7.2107,15.0391 7.5858,15.4142C7.9609,15.7893 8.4696,16 9,16M10,0C8.6868,0 7.3864,0.2587 6.1732,0.7612C4.9599,1.2637 3.8575,2.0003 2.9289,2.9289C1.0536,4.8043 0,7.3478 0,10C0,12.6522 1.0536,15.1957 2.9289,17.0711C3.8575,17.9997 4.9599,18.7362 6.1732,19.2388C7.3864,19.7413 8.6868,20 10,20C12.6522,20 15.1957,18.9464 17.0711,17.0711C18.9464,15.1957 20,12.6522 20,10C20,8.6868 19.7413,7.3864 19.2388,6.1732C18.7362,4.9599 17.9997,3.8575 17.0711,2.9289C16.1425,2.0003 15.0401,1.2637 13.8268,0.7612C12.6136,0.2587 11.3132,0 10,0Z"
+        android:fillColor="#49454F"/>
+</vector>

app/src/main/res/drawable/notifications_button.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="20dp"
+    android:viewportWidth="16"
+    android:viewportHeight="20">
+    <path
+        android:pathData="M0,17V15H2V8C2,6.6167 2.4167,5.3917 3.25,4.325C4.0833,3.2417 5.1667,2.5333 6.5,2.2V1.5C6.5,1.0833 6.6417,0.7333 6.925,0.45C7.225,0.15 7.5833,0 8,0C8.4167,0 8.7667,0.15 9.05,0.45C9.35,0.7333 9.5,1.0833 9.5,1.5V2.2C10.8333,2.5333 11.9167,3.2417 12.75,4.325C13.5833,5.3917 14,6.6167 14,8V15H16V17H0ZM8,20C7.45,20 6.975,19.8083 6.575,19.425C6.1917,19.025 6,18.55 6,18H10C10,18.55 9.8,19.025 9.4,19.425C9.0167,19.8083 8.55,20 8,20ZM4,15H12V8C12,6.9 11.6083,5.9583 10.825,5.175C10.0417,4.3917 9.1,4 8,4C6.9,4 5.9583,4.3917 5.175,5.175C4.3917,5.9583 4,6.9 4,8V15Z"
+        android:fillColor="#49454F"/>
+</vector>

app/src/main/res/drawable/settings_button.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+    <path
+        android:pathData="M9.7293,6C10.7902,6 11.8076,6.4214 12.5578,7.1716C13.3079,7.9217 13.7293,8.9391 13.7293,10C13.7293,11.0609 13.3079,12.0783 12.5578,12.8284C11.8076,13.5786 10.7902,14 9.7293,14C8.6685,14 7.6511,13.5786 6.9009,12.8284C6.1508,12.0783 5.7293,11.0609 5.7293,10C5.7293,8.9391 6.1508,7.9217 6.9009,7.1716C7.6511,6.4214 8.6685,6 9.7293,6ZM9.7293,8C9.1989,8 8.6902,8.2107 8.3151,8.5858C7.9401,8.9609 7.7293,9.4696 7.7293,10C7.7293,10.5304 7.9401,11.0391 8.3151,11.4142C8.6902,11.7893 9.1989,12 9.7293,12C10.2598,12 10.7685,11.7893 11.1435,11.4142C11.5186,11.0391 11.7293,10.5304 11.7293,10C11.7293,9.4696 11.5186,8.9609 11.1435,8.5858C10.7685,8.2107 10.2598,8 9.7293,8ZM7.7293,20C7.4793,20 7.2693,19.82 7.2293,19.58L6.8593,16.93C6.2293,16.68 5.6893,16.34 5.1693,15.94L2.6793,16.95C2.4593,17.03 2.1893,16.95 2.0693,16.73L0.0693,13.27C-0.0607,13.05 -0.0007,12.78 0.1893,12.63L2.2993,10.97L2.2293,10L2.2993,9L0.1893,7.37C-0.0007,7.22 -0.0607,6.95 0.0693,6.73L2.0693,3.27C2.1893,3.05 2.4593,2.96 2.6793,3.05L5.1693,4.05C5.6893,3.66 6.2293,3.32 6.8593,3.07L7.2293,0.42C7.2693,0.18 7.4793,0 7.7293,0H11.7293C11.9793,0 12.1893,0.18 12.2293,0.42L12.5993,3.07C13.2293,3.32 13.7693,3.66 14.2893,4.05L16.7793,3.05C16.9993,2.96 17.2693,3.05 17.3893,3.27L19.3893,6.73C19.5193,6.95 19.4593,7.22 19.2693,7.37L17.1593,9L17.2293,10L17.1593,11L19.2693,12.63C19.4593,12.78 19.5193,13.05 19.3893,13.27L17.3893,16.73C17.2693,16.95 16.9993,17.04 16.7793,16.95L14.2893,15.95C13.7693,16.34 13.2293,16.68 12.5993,16.93L12.2293,19.58C12.1893,19.82 11.9793,20 11.7293,20H7.7293ZM8.9793,2L8.6093,4.61C7.4093,4.86 6.3493,5.5 5.5793,6.39L3.1693,5.35L2.4193,6.65L4.5293,8.2C4.1293,9.37 4.1293,10.64 4.5293,11.8L2.4093,13.36L3.1593,14.66L5.5893,13.62C6.3593,14.5 7.4093,15.14 8.5993,15.38L8.9693,18H10.4893L10.8593,15.39C12.0493,15.14 13.0993,14.5 13.8693,13.62L16.2993,14.66L17.0493,13.36L14.9293,11.81C15.3293,10.64 15.3293,9.37 14.9293,8.2L17.0393,6.65L16.2893,5.35L13.8793,6.39C13.1093,5.5 12.0493,4.86 10.8493,4.62L10.4793,2H8.9793Z"
+        android:fillColor="#49454F"/>
+</vector>