ui changes

8 files changed, 546 insertions, 185 deletions

diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt
index 59a91f0..76dff27 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt
@@ -9,6 +9,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import com.pwc.calculatorv2.presentation.screens.BottomNavScreen
 import com.pwc.calculatorv2.presentation.ui.theme.CalculatorV2Theme
@@ -18,10 +19,8 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             CalculatorV2Theme {
-                // A surface container using the 'background' color from the theme
                 Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
+                    modifier = Modifier.fillMaxSize()
                 ) {
                     BottomNavScreen()
                 }
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt
index 1f05318..2e69faa 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt
@@ -1,7 +1,15 @@
 package com.pwc.calculatorv2.presentation.screens

 

+import androidx.compose.foundation.Canvas

+import androidx.compose.foundation.layout.Box

+import androidx.compose.foundation.layout.Column

+import androidx.compose.foundation.layout.Spacer

+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.width

+import androidx.compose.foundation.text.BasicTextField

 import androidx.compose.material3.ExperimentalMaterial3Api

 import androidx.compose.material3.MaterialTheme

 import androidx.compose.material3.Scaffold

@@ -18,7 +26,16 @@ import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel
 import com.pwc.calculatorv2.presentation.navigation.AppScreens

 import com.pwc.calculatorv2.presentation.ui.widgets.BottomNav

 import androidx.compose.runtime.getValue

+import androidx.compose.ui.graphics.Color

+import androidx.compose.ui.graphics.Path

+import androidx.compose.ui.graphics.Shadow

+import androidx.compose.ui.graphics.drawscope.Fill

 import androidx.compose.ui.platform.LocalContext

+import androidx.compose.ui.text.TextStyle

+import androidx.compose.ui.text.font.FontWeight

+import androidx.compose.ui.text.style.TextAlign

+import androidx.compose.ui.unit.dp

+import androidx.compose.ui.unit.sp

 

 @OptIn(ExperimentalMaterial3Api::class)

 @Composable

@@ -41,6 +58,55 @@ fun BottomNavScreen() {
                 .padding(bottom = it.calculateBottomPadding()),

             color = MaterialTheme.colorScheme.background

         ) {

+            Column (

+                modifier = Modifier.fillMaxSize()

+            ) {

+                Box (

+                    modifier = Modifier

+                        .weight(1f)

+                        .fillMaxWidth(.5f)

+                ){

+                    Canvas(

+                        modifier = Modifier

+                            .fillMaxSize()

+                    ) {

+                        val path = Path().apply {

+                            moveTo(0f, 0f) // Top-left corner

+                            lineTo(size.width, 0f) // Top-right corner

+                            lineTo(0f, size.height) // Bottom-left corner

+                            close() // Closes the path to form a triangle

+                        }

+

+                        drawPath(

+                            path = path,

+                            color = Color(0xFF222222) ,

+                            style = Fill,

+                        )

+                    }

+                    BasicTextField(value = "ACV-1",

+                        onValueChange = {},

+                        readOnly = true, // Makes the field non-writable

+                        modifier = Modifier

+                            .width(300.dp)

+                            .padding(20.dp),

+                        textStyle = TextStyle(

+                            fontSize = 12.sp,

+                            fontWeight = FontWeight.Medium,

+                            color = MaterialTheme.colorScheme.secondary, // Using your theme's color for text

+                            shadow = Shadow(

+                                color = MaterialTheme.colorScheme.secondary.copy(alpha = 0.2f), // White glow with some transparency

+                                blurRadius = 2f // Adjust the blur for the glow effect

+                            )

+

+                        ),

+                    )

+                }

+                Spacer(

+                    modifier = Modifier

+                        .fillMaxWidth()

+                        .weight(2f) // Spacer takes the other half of the available height

+                )

+            }

             NavHost(

                 navController = bottomNavController,

                 startDestination = AppScreens.CalculatorScreen.route

diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt
index 5cef814..a22cc31 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt
@@ -1,31 +1,38 @@
 package com.pwc.calculatorv2.presentation.screens

 

 import android.annotation.SuppressLint

+import androidx.compose.animation.AnimatedVisibility

 import androidx.compose.foundation.layout.Arrangement

 import androidx.compose.foundation.layout.Box

 import androidx.compose.foundation.layout.Column

 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.height

 import androidx.compose.foundation.layout.padding

 import androidx.compose.foundation.layout.width

-import androidx.compose.material3.Button

+import androidx.compose.foundation.text.BasicTextField

 import androidx.compose.material3.ExperimentalMaterial3Api

+import androidx.compose.material3.MaterialTheme

 import androidx.compose.material3.Text

-import androidx.compose.material3.TextField

 import androidx.compose.runtime.Composable

 import androidx.compose.runtime.MutableState

 import androidx.compose.runtime.mutableStateOf

 import androidx.compose.runtime.remember

 import androidx.compose.ui.Alignment

 import androidx.compose.ui.Modifier

+import androidx.compose.ui.geometry.Offset

 import androidx.compose.ui.graphics.Color

+import androidx.compose.ui.graphics.Shadow

 import androidx.compose.ui.text.TextStyle

+import androidx.compose.ui.text.font.FontWeight

 import androidx.compose.ui.text.style.TextAlign

 import androidx.compose.ui.unit.dp

 import androidx.compose.ui.unit.sp

+import com.pwc.calculatorv2.R

 import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel

-import com.pwc.calculatorv2.data.viewmodels.CalculatorViewState

+import com.pwc.calculatorv2.presentation.ui.widgets.NeumorphicButton

 

 @SuppressLint("StateFlowValueCalledInComposition")

 @OptIn(ExperimentalMaterial3Api::class)

@@ -34,189 +41,227 @@ fun CalculatorScreen(
     viewModel: CalculatorViewModel,

 ) {

 

+    val isVisible = remember { mutableStateOf(false) }

     val expression = remember { mutableStateOf("") }

 

     Box(

         modifier = Modifier

             .fillMaxSize(),

-        contentAlignment = Alignment.Center)

+        contentAlignment = Alignment.BottomCenter)

             {

     Column(

-        modifier = Modifier.width(width = 300.dp),

-        verticalArrangement = Arrangement.Center,

+        modifier = Modifier.width(width = 500.dp),

+        verticalArrangement = Arrangement.Bottom,

         horizontalAlignment = Alignment.CenterHorizontally

     ) {

-        TextField(

-            value = expression.value,

-            onValueChange = { expression.value = it },

-            modifier = Modifier.width(300.dp),

-            textStyle = TextStyle(fontSize = 24.sp, textAlign = TextAlign.End)

-        )

-

+        BasicTextField(value = expression.value,

+            onValueChange = {expression.value = it},

+            readOnly = true, // Makes the field non-writable

+            modifier = Modifier

+                .width(300.dp),

+            textStyle = TextStyle(

+                fontSize = 32.sp,

+                fontWeight = FontWeight.Medium,

+                color = MaterialTheme.colorScheme.onBackground, // Using your theme's color for text

+                textAlign = TextAlign.End,

+                shadow = Shadow(

+                    color = Color.White.copy(alpha = 0.6f), // White glow with some transparency

+                    blurRadius = 2f // Adjust the blur for the glow effect

+                )

+            ),

+            )

         Column(

             modifier = Modifier

                 .padding(16.dp)

-                .width(300.dp)

+                .width(500.dp),

+

+            verticalArrangement = Arrangement.Center

         ) {

             Row(

-                modifier = Modifier

-                    .fillMaxWidth()

-                    .padding(horizontal = 0.dp),

-                horizontalArrangement = Arrangement.SpaceEvenly

+                modifier = Modifier.fillMaxWidth(),

+                horizontalArrangement = Arrangement.Center

             ) {

-                Button(

-                    onClick = { viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() } },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "^", color = Color.Black)

+                NeumorphicButton(

+                    text = "CE",

+                    color = MaterialTheme.colorScheme.error,

+                    textColor = MaterialTheme.colorScheme.onError,

+                    backgroundColor = MaterialTheme.colorScheme.primary

+                ){

+                    clearExpression(expression)

                 }

-                Button(

-                    onClick = { appendToExpression(expression, " ( ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "(", color = Color.Black)

+                NeumorphicButton(

+                    text = "(",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " ( ")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, " ) ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = ")", color = Color.Black)

+                NeumorphicButton(

+                    text = ")",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " ) ")

                 }

-                Button(

-                    onClick = { erase(expression) },

-                    modifier = Modifier.width(57.dp)

-                ) {

-                    Text(text = "<", color = Color.Black)

+                NeumorphicButton(

+                    text = "undo",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                    imageDrawable = R.drawable.undo,

+                ){

+                    viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() }

+                }

+                NeumorphicButton(

+                    text = "more",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                    imageDrawable = R.drawable.dots,

+                    isMore = true

+                ){

+                    isVisible.value = !isVisible.value

+                }

+            }

+            AnimatedVisibility(visible = isVisible.value) {

+                Column {

+                    Text(

+                        text = "test",

+                        fontWeight = FontWeight.Normal,

+                        style = MaterialTheme.typography.bodyMedium, // Adjust this as needed

+                    )

                 }

             }

             Row(

-                modifier = Modifier.fillMaxWidth(),

-                horizontalArrangement = Arrangement.SpaceEvenly

+                modifier = Modifier

+                    .fillMaxWidth()

+                    .padding(horizontal = 0.dp),

+                horizontalArrangement = Arrangement.Center

             ) {

-                Button(

-                    onClick = { appendToExpression(expression, "7") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "7", color = Color.Black)

+                NeumorphicButton(

+                    text = "erase",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                    imageDrawable = R.drawable.erase

+                ){

+                    erase(expression)

+                }

+                NeumorphicButton(

+                    text = "*",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " * ")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "8") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "8", color = Color.Black)

+                NeumorphicButton(

+                    text = "+",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " + ")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "9") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "9", color = Color.Black)

+                NeumorphicButton(

+                    text = "-",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " - ")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, " + ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "+", color = Color.Black)

+                NeumorphicButton(

+                    text = "/",

+                    color = MaterialTheme.colorScheme.secondary,

+                    textColor = MaterialTheme.colorScheme.onSecondary,

+                ){

+                    appendToExpression(expression, " / ")

                 }

             }

             Row(

                 modifier = Modifier.fillMaxWidth(),

-                horizontalArrangement = Arrangement.SpaceEvenly

+                horizontalArrangement = Arrangement.Center

             ) {

-                Button(

-                    onClick = { appendToExpression(expression, "4") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "4", color = Color.Black)

+                NeumorphicButton(

+                    text = "1"

+                ){

+                    appendToExpression(expression, "1")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "5") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "5", color = Color.Black)

+                NeumorphicButton(

+                    text = "2"

+                ){

+                    appendToExpression(expression, "2")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "6") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "6", color = Color.Black)

+                NeumorphicButton(

+                    text = "3"

+                ){

+                    appendToExpression(expression, "3")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, " - ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "-", color = Color.Black)

+                NeumorphicButton(

+                    text = "4"

+                ){

+                    appendToExpression(expression, "4")

+                }

+                NeumorphicButton(

+                    text = "5"

+                ){

+                    appendToExpression(expression, "5")

                 }

             }

             Row(

                 modifier = Modifier.fillMaxWidth(),

-                horizontalArrangement = Arrangement.SpaceEvenly

+                horizontalArrangement = Arrangement.Center

             ) {

-                Button(

-                    onClick = { appendToExpression(expression, "1") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "1", color = Color.Black)

+                NeumorphicButton(

+                    text = "6"

+                ){

+                    appendToExpression(expression, "6")

+                }

+                NeumorphicButton(

+                    text = "7"

+                ){

+                    appendToExpression(expression, "7")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "2") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "2", color = Color.Black)

+                NeumorphicButton(

+                    text = "8"

+                ){

+                    appendToExpression(expression, "8")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, "3") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "3", color = Color.Black)

+                NeumorphicButton(

+                    text = "9"

+                ){

+                    appendToExpression(expression, "9")

                 }

-                Button(

-                    onClick = { appendToExpression(expression, " * ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "*", color = Color.Black)

+                NeumorphicButton(

+                    text = "0"

+                ){

+                    appendToExpression(expression, "0")

                 }

             }

-

             Row(

                 modifier = Modifier.fillMaxWidth(),

-                horizontalArrangement = Arrangement.SpaceEvenly

+                horizontalArrangement = Arrangement.Center

             ) {

-                Button(

-                    onClick = { appendDotToExpression(expression) },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = ".", color = Color.Black)

-                }

-                Button(

-                    onClick = { appendToExpression(expression, "0") },

-                    modifier = Modifier.width(75.dp)

-                ) {

-                    Text(text = "0", color = Color.Black)

-                }

-                Button(

-                    onClick = { viewModel.calculateResult(expression) },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "=", color = Color.Black)

-                }

-                Button(

-                    onClick = { appendToExpression(expression, " / ") },

-                    modifier = Modifier.width(70.dp)

-                ) {

-                    Text(text = "/", color = Color.Black)

-                }

             }

-            // Add more rows of buttons for other numbers and operators

 

-            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {

-                Button(

-                    onClick = { clearExpression(expression) },

-                    modifier = Modifier.width(145.dp)

-                ) {

-                    Text(text = "Clear", color = Color.Black)

+            Row(

+                modifier = Modifier.fillMaxWidth(),

+                horizontalArrangement = Arrangement.Center

+            ) {

+                NeumorphicButton(

+                    text = "=",

+                    backgroundWidth = 266.dp,

+                    buttonWidth = 240.dp,

+                    color = MaterialTheme.colorScheme.tertiary,

+                    textColor = MaterialTheme.colorScheme.onTertiary

+                ){

+                    viewModel.calculateResult(expression)

+                }

+                NeumorphicButton(

+                    text = ".",

+                    backgroundWidth = 114.dp,

+                    alignment = Alignment.CenterEnd

+                ){

+                    appendDotToExpression(expression)

                 }

             }

         }

+        Spacer(modifier = Modifier.height(30.dp))

     }

 }

 }

diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt
index 47ec008..c5420b4 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt
@@ -2,10 +2,12 @@ package com.pwc.calculatorv2.presentation.ui.theme
 
 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)
\ No newline at end of file
+val Dark = Color(0xFF1E1E1E)
+val Clear = Color(0xFFEAE9E7)
+
+val ButtonsWhite = Color(0xFFD5D1CC)
+val ButtonsGrey = Color(0xFF81807F)
+val ButtonsRed = Color(0xFFD74626)
+val TextWhite = Color(0xFFECEAE8)
+val TextBlack = Color(0xFF181B1C)
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt
index 5568c46..2655814 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt
@@ -16,15 +16,27 @@ import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
 
 private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80
+    primary = ButtonsWhite,
+    secondary = ButtonsGrey,
+    tertiary = ButtonsRed,
+    background = Dark,
+    onBackground = Clear,
+    onSurface = Clear,
+    onPrimary = TextBlack,
+    onSecondary = TextWhite,
+    onTertiary = TextWhite,
 )
 
 private val LightColorScheme = lightColorScheme(
-    primary = Purple40,
-    secondary = PurpleGrey40,
-    tertiary = Pink40
+    primary = ButtonsWhite,
+    secondary = ButtonsGrey,
+    tertiary = ButtonsRed,
+    background = Dark,
+    onBackground = Clear,
+    onPrimary = TextBlack,
+    onSecondary = TextWhite,
+    onTertiary = TextWhite,
+    onSurface = Clear,
 
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
@@ -41,7 +53,7 @@ private val LightColorScheme = lightColorScheme(
 fun CalculatorV2Theme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
-    dynamicColor: Boolean = true,
+    dynamicColor: Boolean = false,
     content: @Composable () -> Unit
 ) {
     val colorScheme = when {
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt
index 424eda5..a92980f 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt
@@ -2,33 +2,34 @@ package com.pwc.calculatorv2.presentation.ui.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import com.pwc.calculatorv2.R
+
+val robotoFamily = FontFamily(
+    Font(R.font.robotoregular, FontWeight.Normal),
+    Font(R.font.robotomedium, FontWeight.Medium),
+    Font(R.font.robotobold, FontWeight.Bold)
+)
 
-// Set of Material typography styles to start with
 val Typography = Typography(
     bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = robotoFamily,
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp,
         lineHeight = 24.sp,
         letterSpacing = 0.5.sp
-    )
-    /* Other default text styles to override
-    titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 22.sp,
-        lineHeight = 28.sp,
-        letterSpacing = 0.sp
     ),
-    labelSmall = TextStyle(
-        fontFamily = FontFamily.Default,
+    bodyMedium = TextStyle(
+        fontFamily = robotoFamily,
         fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp
+        fontSize = 14.sp
+    ),
+    bodySmall = TextStyle(
+        fontFamily = robotoFamily,
+        fontWeight = FontWeight.Bold,
+        fontSize = 12.sp
     )
-    */
 )
\ No newline at end of file
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt
index 1ba2d4c..1cb79e1 100644
--- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt
@@ -1,32 +1,81 @@
 package com.pwc.calculatorv2.presentation.ui.widgets

 

+import androidx.compose.foundation.border

+import androidx.compose.foundation.clickable

+import androidx.compose.foundation.interaction.MutableInteractionSource

+import androidx.compose.foundation.layout.Arrangement

+import androidx.compose.foundation.layout.Box

+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.height

+import androidx.compose.foundation.layout.width

 import androidx.compose.runtime.Composable

 import androidx.compose.material.BottomNavigation

-import androidx.compose.material.Button

-import androidx.compose.material.Text

-import androidx.compose.material.TopAppBar

+import androidx.compose.material3.Button

+import androidx.compose.material3.ButtonDefaults

+import androidx.compose.material3.MaterialTheme

+import androidx.compose.material3.Text

+import androidx.compose.runtime.remember

+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.ui.unit.sp

 import androidx.navigation.NavController

 import com.pwc.calculatorv2.presentation.navigation.AppScreens

 

 @Composable

 fun BottomNav(navController: NavController) {

     BottomNavigation(

-

+        backgroundColor = MaterialTheme.colorScheme.tertiary,

     ) {

-        Button(onClick = {

-            navController.navigate(AppScreens.CalculatorScreen.route)

-        }) {

-            Text(text = "Calculator")

-        }

-        Button(onClick = {

-            navController.navigate(AppScreens.FunctionListScreen.route)

-        }) {

-            Text(text = "History")

-        }

-        Button(onClick = {

-            navController.navigate(AppScreens.WipeScreen.route)

-        }) {

-            Text(text = "Wipe")

+        Row (

+            modifier = Modifier

+                .fillMaxSize(),

+            verticalAlignment = Alignment.CenterVertically,

+            horizontalArrangement = Arrangement.SpaceEvenly

+        ){

+            Box(

+                modifier = Modifier

+                    .height(40.dp)

+                    .width(100.dp)

+                    .clickable(

+                        indication = null, // Remove the default highlight

+                        interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly

+                        onClick = {

+                            navController.navigate(AppScreens.CalculatorScreen.route)

+                        }

+                    ),

+                contentAlignment = Alignment.Center

+            ) {

+                Text(

+                    text = "Calculator",

+                    fontSize = 16.sp,

+                    color = MaterialTheme.colorScheme.onTertiary

+                )

+            }

+

+            Box(

+                modifier = Modifier

+                    .height(40.dp)

+                    .width(100.dp)

+                    .clickable(

+                        indication = null, // Remove the default highlight

+                        interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly

+                        onClick = {

+                            navController.navigate(AppScreens.FunctionListScreen.route)

+                        }

+                    ),

+                contentAlignment = Alignment.Center

+            ) {

+                Text(

+                    text = "Formulas",

+                    fontSize = 16.sp,

+                    color = MaterialTheme.colorScheme.onTertiary

+                )

+            }

         }

     }

 }

diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt
new file mode 100644
index 0000000..f6abcb0
--- /dev/null
+++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt
@@ -0,0 +1,187 @@
+package com.pwc.calculatorv2.presentation.ui.widgets
+
+import android.graphics.drawable.AnimatedImageDrawable
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateIntAsState
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+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.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.BlurredEdgeTreatment
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.delay
+
+
+@Composable
+fun NeumorphicButton(
+    text: String,
+    color: Color = MaterialTheme.colorScheme.primary,
+    backgroundColor: Color? = null,
+    backgroundWidth: Dp = 76.dp,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
+    buttonWidth: Dp = 50.dp,
+    buttonHeight: Dp = 50.dp,
+    alignment: Alignment = Alignment.Center,
+    fontSize: Int = 24,
+    isMenu: Boolean = false,
+    imageDrawable: Int? = null,
+    isMore: Boolean = false,
+    onClick: () -> Unit,
+) {
+    val isPressed = remember { mutableStateOf(false) }
+
+    val offset by animateIntAsState(targetValue = if (isPressed.value) 2 else 12)
+    val sizeReduction by animateIntAsState(targetValue = if (isPressed.value) 2 else 0)
+    val blur by animateDpAsState(targetValue = if (isPressed.value) 4.dp else 10.dp)
+
+    LaunchedEffect(isPressed.value) {
+        if (isPressed.value) {
+            if(!isMore){
+                delay(100) // Delay for 2 seconds
+                isPressed.value = false // Reset after delay
+            }
+        }
+    }
+
+
+    fun lightenOrDarkenColor(color: Color, factor: Float): Color {
+        return lerp(color, if (factor < 0) Color.Black else Color.White, kotlin.math.abs(factor))
+    }
+
+    val buttonShadeColor = if (color == MaterialTheme.colorScheme.error){
+        color
+    }
+    else{
+        lightenOrDarkenColor(color, -.1f)
+    }
+    val backgroundColorReal = backgroundColor ?: color
+    val clearShadeColor = lightenOrDarkenColor(backgroundColorReal, .3f)
+    val darkShadeColor = lightenOrDarkenColor(backgroundColorReal, -.3f)
+
+    Box(
+        Modifier
+            .width(backgroundWidth)
+            .height(76.dp)
+            .fillMaxSize()
+            .padding(3.dp)
+            .background(backgroundColorReal,
+                shape = RoundedCornerShape(16.dp) // Same rounded shape for the background
+            )
+            .clickable(
+                indication = null, // Remove the default highlight
+                interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly
+                onClick = {
+                    if (isMore){
+                        isPressed.value = !isPressed.value
+                    }else{
+                        isPressed.value = true
+                    }
+                    onClick()
+                })
+            .padding( horizontal = if (isMenu) {0.dp}else{10.dp})
+        ,
+        contentAlignment = alignment,
+    ) {
+        Box(
+            Modifier
+                .width(buttonWidth - sizeReduction.dp)
+                .height(buttonHeight - sizeReduction.dp)
+                .offset { IntOffset(-offset, -offset) }
+                .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded)
+                .background(clearShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape)
+        )
+
+        Box(
+            Modifier
+                .width(buttonWidth - sizeReduction.dp)
+                .height(buttonHeight - sizeReduction.dp)
+                .offset { IntOffset(offset, offset) }
+                .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded)
+                .background(darkShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape)
+        )
+        Box(
+            Modifier
+                .width(buttonWidth - sizeReduction.dp)
+                .height(buttonHeight - sizeReduction.dp)
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = listOf(
+                            color,
+                            buttonShadeColor
+                        )
+                    ),
+                    shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape,
+                )
+                .border(
+                    width = 1.dp,
+                    shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape,
+                    brush = if(buttonWidth == 50.dp) {
+                        Brush.linearGradient(
+                            colors = listOf(
+                                clearShadeColor,
+                                darkShadeColor,
+                            ),
+                        )
+                    }else {
+                        Brush.verticalGradient(
+                            colors = listOf(
+                                clearShadeColor,
+                                darkShadeColor,
+                            ),
+                        )
+                    }
+                ),
+            contentAlignment = Alignment.Center
+        ){
+            if(imageDrawable == null){
+                Text(
+                    text = text,
+                    fontWeight = FontWeight.Normal,
+                    fontSize = (fontSize - sizeReduction).sp, // Ensure font doesn't shrink too much
+                    color = textColor,
+                    style = MaterialTheme.typography.bodyMedium, // Adjust this as needed
+                )
+            }else{
+                Image(
+                    painter = painterResource(id = imageDrawable),
+                    contentDescription = text,
+                    modifier = Modifier
+                        .height((25-sizeReduction).dp),
+                    colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSecondary)
+                )
+            }
+        }
+    }
+}