first ui components

Ledger/app/build.gradle.kts

@@ -5,12 +5,12 @@ plugins {
 
 android {
     namespace = "at.xaxa.ledger"
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         applicationId = "at.xaxa.ledger"
         minSdk = 29
-        targetSdk = 34
+        targetSdk = 35
         versionCode = 1
         versionName = "1.0"
 

Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt

@@ -0,0 +1,201 @@
+package at.xaxa.ledger.ui
+
+import androidx.compose.foundation.BorderStroke
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+
+
+// region Horizontal Card
+@Composable
+fun HorizontalCard(modifier: Modifier = Modifier, name: String, date: String, amount:String) {
+    Surface(
+        shape = RoundedCornerShape(12.dp),
+        color = Color(0xfff9f9f9),
+        border = BorderStroke(1.dp, Color(0xffc6c6c6)),
+        modifier = modifier
+            .requiredWidth(width = 360.dp)
+            .requiredHeight(height = 80.dp)
+            .clip(shape = RoundedCornerShape(12.dp))
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp)
+        ) {
+            LayoutMediaText(modifier, name, date, amount)
+        }
+    }
+}
+
+@Composable
+fun LayoutMediaText(modifier: Modifier = Modifier, name: String, date: String, amount:String) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.Top),
+            modifier = Modifier
+                .weight(1f)
+        ) {
+            Text(
+                text = name,
+                color = Color(0xff1b1b1b),
+                lineHeight = 1.5.em,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Medium,
+                    letterSpacing = 0.15.sp
+                )
+            )
+            Text(
+                text = date,
+                color = Color(0xff1b1b1b),
+                lineHeight = 1.43.em,
+                style = TextStyle(
+                    fontSize = 14.sp,
+                    letterSpacing = 0.25.sp
+                )
+            )
+        }
+        Box(
+            modifier = Modifier
+                .fillMaxHeight()
+                .wrapContentWidth() // Allow the Box to wrap its content width
+                .padding(start = 16.dp), // Add some padding to separate from the Column
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = amount,
+                fontSize = 30.sp, // Set the desired font size
+                modifier = Modifier.wrapContentSize() // Ensure the text wraps its content
+            )
+        }
+    }
+}
+
+@Preview(widthDp = 360, heightDp = 80)
+@Composable
+private fun HorizontalCardPreview() {
+    HorizontalCard(Modifier, "McDonald's", "12th Feb, 23:32am", "-124234.00€")
+}
+// endregion
+
+// region Button Success
+@Composable
+fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
+    Button(
+        onClick = onClick,
+        shape = RoundedCornerShape(10.dp),
+        colors = ButtonDefaults.buttonColors(containerColor = Color(0xff61a483)),
+        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
+        modifier = modifier
+            .requiredHeight(height = 40.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .requiredHeight(height = 40.dp)
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                Text(
+                    text = text,
+                    color = Color.White,
+                    textAlign = TextAlign.Center,
+                    lineHeight = 1.43.em,
+                    style = MaterialTheme.typography.labelLarge,
+                    modifier = Modifier
+                        .wrapContentHeight(align = Alignment.CenterVertically))
+            }
+        }
+    }
+}
+
+@Preview()
+@Composable
+private fun ButtonSuccessPreview() {
+    ButtonSuccess(Modifier, "Success", onClick = { println("success") })
+}
+// endregion
+
+// region Button Danger
+@Composable
+fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
+    Button(
+        onClick = onClick,
+        shape = RoundedCornerShape(10.dp),
+        colors = ButtonDefaults.buttonColors(containerColor = Color(0xffc14d4d)),
+        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
+        modifier = modifier
+            .requiredHeight(height = 40.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .requiredHeight(height = 40.dp)
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                Text(
+                    text = text,
+                    color = Color.White,
+                    textAlign = TextAlign.Center,
+                    lineHeight = 1.43.em,
+                    style = MaterialTheme.typography.labelLarge,
+                    modifier = Modifier
+                        .wrapContentHeight(align = Alignment.CenterVertically))
+            }
+        }
+    }
+}
+
+@Preview()
+@Composable
+private fun ButtonDangerPreview() {
+    ButtonDanger(Modifier, "Danger", onClick = { println("success") })
+}
+// endregion
+