From b946d44423aad3ecf6f73e2b5e73382a245bda56 Mon Sep 17 00:00:00 2001
From: David Perez <david@livefront.com>
Date: Fri, 25 Oct 2024 11:11:23 -0500
Subject: [PATCH] PM-14036: Update the slider UI

---
 .../components/slider/BitwardenSlider.kt      | 21 +++++++++++--------
 .../feature/generator/GeneratorScreen.kt      |  3 +++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/slider/BitwardenSlider.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/slider/BitwardenSlider.kt
index fabdf015513..bd3ef006b41 100644
--- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/slider/BitwardenSlider.kt
+++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/slider/BitwardenSlider.kt
@@ -2,17 +2,16 @@ package com.x8bit.bitwarden.ui.platform.components.slider
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Row
-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.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -21,7 +20,9 @@ import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onPreviewKeyEvent
@@ -68,12 +69,9 @@ fun BitwardenSlider(
     val density = LocalDensity.current
     Row(
         verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp)
-            .semantics(mergeDescendants = true) {},
+        modifier = modifier.semantics(mergeDescendants = true) {},
     ) {
-        OutlinedTextField(
+        TextField(
             value = sliderValue.toString(),
             textStyle = BitwardenTheme.typography.bodyLarge,
             readOnly = true,
@@ -90,7 +88,11 @@ fun BitwardenSlider(
             },
             singleLine = true,
             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
-            colors = bitwardenTextFieldColors(),
+            colors = bitwardenTextFieldColors(
+                disabledBorderColor = Color.Transparent,
+                focusedBorderColor = Color.Transparent,
+                unfocusedBorderColor = Color.Transparent,
+            ),
             modifier = Modifier
                 .onPreviewKeyEvent { keyEvent ->
                     when (keyEvent.key) {
@@ -125,6 +127,7 @@ fun BitwardenSlider(
                     interactionSource = remember { MutableInteractionSource() },
                     colors = bitwardenSliderColors(),
                     thumbSize = DpSize(width = 20.dp, height = 20.dp),
+                    modifier = Modifier.shadow(elevation = 2.dp, shape = CircleShape),
                 )
             },
             track = { sliderState ->
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt
index d700d51d5fc..2072b518cf8 100644
--- a/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt
+++ b/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt
@@ -458,6 +458,9 @@ private fun ColumnScope.PasswordTypeContent(
         range = passwordTypeState.computedMinimumLength..passwordTypeState.maxLength,
         sliderTag = "PasswordLengthSlider",
         valueTag = "PasswordLengthLabel",
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(end = 16.dp),
     )
 
     Spacer(modifier = Modifier.height(8.dp))