Skip to content

Commit 64fcd30

Browse files
shubham0204shubham0204
committed
ui: improve color scheme and add new font
- add new San Francisco font to the app - improve colors for icons and nav drawer - improve model download interface
1 parent 94d2d05 commit 64fcd30

30 files changed

+591
-570
lines changed

‎app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatActivity.kt‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import android.widget.Toast
2727
import androidx.activity.ComponentActivity
2828
import androidx.activity.compose.BackHandler
2929
import androidx.activity.compose.setContent
30+
import androidx.compose.animation.AnimatedVisibility
3031
import androidx.compose.animation.fadeIn
3132
import androidx.compose.animation.fadeOut
3233
import androidx.compose.foundation.background
@@ -53,10 +54,11 @@ import androidx.compose.foundation.shape.RoundedCornerShape
5354
import androidx.compose.foundation.text.KeyboardActions
5455
import androidx.compose.foundation.text.KeyboardOptions
5556
import androidx.compose.material.icons.Icons
56-
import androidx.compose.material.icons.automirrored.filled.ArrowForward
57+
import androidx.compose.material.icons.automirrored.filled.Send
5758
import androidx.compose.material.icons.filled.Android
5859
import androidx.compose.material.icons.filled.DragHandle
5960
import androidx.compose.material.icons.filled.MoreVert
61+
import androidx.compose.material.icons.filled.Send
6062
import androidx.compose.material.icons.filled.Stop
6163
import androidx.compose.material3.CircularProgressIndicator
6264
import androidx.compose.material3.DrawerValue
@@ -85,6 +87,7 @@ import androidx.compose.runtime.setValue
8587
import androidx.compose.ui.Alignment
8688
import androidx.compose.ui.Modifier
8789
import androidx.compose.ui.draw.clip
90+
import androidx.compose.ui.draw.shadow
8891
import androidx.compose.ui.graphics.Color
8992
import androidx.compose.ui.graphics.toArgb
9093
import androidx.compose.ui.platform.LocalContext
@@ -106,6 +109,7 @@ import io.shubham0204.smollmandroid.data.Task
106109
import io.shubham0204.smollmandroid.ui.components.AppBarTitleText
107110
import io.shubham0204.smollmandroid.ui.components.MediumLabelText
108111
import io.shubham0204.smollmandroid.ui.components.TextFieldDialog
112+
import io.shubham0204.smollmandroid.ui.components.noRippleClickable
109113
import io.shubham0204.smollmandroid.ui.screens.chat.ChatScreenViewModel.ModelLoadingState
110114
import io.shubham0204.smollmandroid.ui.screens.manage_tasks.ManageTasksActivity
111115
import io.shubham0204.smollmandroid.ui.screens.manage_tasks.TasksList
@@ -234,6 +238,7 @@ fun ChatActivityScreenUI(
234238
modifier = Modifier.fillMaxSize(),
235239
topBar = {
236240
TopAppBar(
241+
modifier = Modifier.shadow(2.dp),
237242
title = {
238243
Column(
239244
modifier = Modifier.fillMaxWidth(),
@@ -259,6 +264,7 @@ fun ChatActivityScreenUI(
259264
Icon(
260265
Icons.Default.DragHandle,
261266
contentDescription = stringResource(R.string.chat_view_chats),
267+
tint = MaterialTheme.colorScheme.secondary,
262268
)
263269
}
264270
},
@@ -271,6 +277,7 @@ fun ChatActivityScreenUI(
271277
Icon(
272278
Icons.Default.MoreVert,
273279
contentDescription = "Options",
280+
tint = MaterialTheme.colorScheme.secondary,
274281
)
275282
}
276283
ChatMoreOptionsPopup(viewModel, onEditChatParamsClick)
@@ -284,7 +291,7 @@ fun ChatActivityScreenUI(
284291
modifier =
285292
Modifier
286293
.padding(innerPadding)
287-
.background(MaterialTheme.colorScheme.background),
294+
.background(MaterialTheme.colorScheme.surface),
288295
) {
289296
if (currChat != null) {
290297
ScreenUI(viewModel, currChat!!)
@@ -307,6 +314,7 @@ private fun ColumnScope.ScreenUI(
307314
) {
308315
val isGeneratingResponse by viewModel.isGeneratingResponse.collectAsStateWithLifecycle()
309316
RAMUsageLabel(viewModel)
317+
Spacer(modifier = Modifier.height(4.dp))
310318
MessagesList(
311319
viewModel,
312320
isGeneratingResponse,
@@ -333,6 +341,7 @@ private fun RAMUsageLabel(viewModel: ChatScreenViewModel) {
333341
}
334342
}
335343
if (showRAMUsageLabel) {
344+
Spacer(modifier = Modifier.height(4.dp))
336345
Text(
337346
labelText,
338347
style = MaterialTheme.typography.labelSmall,
@@ -496,7 +505,7 @@ private fun LazyItemScope.MessageListItem(
496505
modifier =
497506
Modifier
498507
.padding(4.dp)
499-
.background(MaterialTheme.colorScheme.background)
508+
.background(MaterialTheme.colorScheme.surface)
500509
.padding(4.dp)
501510
.fillMaxSize(),
502511
textColor = MaterialTheme.colorScheme.onBackground.toArgb(),
@@ -565,7 +574,7 @@ private fun LazyItemScope.MessageListItem(
565574
Modifier
566575
.padding(8.dp)
567576
.background(
568-
MaterialTheme.colorScheme.primaryContainer,
577+
MaterialTheme.colorScheme.surfaceContainerHighest,
569578
RoundedCornerShape(16.dp),
570579
).padding(8.dp)
571580
.widthIn(max = 250.dp),
@@ -581,13 +590,13 @@ private fun LazyItemScope.MessageListItem(
581590
ChatMessageText(
582591
modifier =
583592
Modifier
584-
.padding(8.dp)
593+
.padding(4.dp)
585594
.background(
586-
MaterialTheme.colorScheme.primary,
595+
MaterialTheme.colorScheme.surfaceContainerHighest,
587596
RoundedCornerShape(16.dp),
588597
).padding(8.dp)
589598
.widthIn(max = 250.dp),
590-
textColor = android.graphics.Color.WHITE,
599+
textColor = MaterialTheme.colorScheme.onSurface.toArgb(),
591600
textSize = 16f,
592601
message = messageStr,
593602
)
@@ -596,13 +605,14 @@ private fun LazyItemScope.MessageListItem(
596605
Row(verticalAlignment = Alignment.CenterVertically) {
597606
Text(
598607
text = stringResource(R.string.chat_message_copy),
599-
modifier = Modifier.clickable { onCopyClicked() },
608+
modifier = Modifier.noRippleClickable { onCopyClicked() },
600609
fontSize = 6.sp,
610+
lineHeight = 6.sp,
601611
)
602612
Spacer(modifier = Modifier.width(8.dp))
603613
Text(
604614
text = stringResource(R.string.chat_message_share),
605-
modifier = Modifier.clickable { onShareClicked() },
615+
modifier = Modifier.noRippleClickable { onShareClicked() },
606616
fontSize = 6.sp,
607617
)
608618
if (allowEditing) {
@@ -657,23 +667,28 @@ private fun MessageInput(
657667
} else {
658668
var questionText by remember { mutableStateOf(viewModel.questionTextDefaultVal ?: "") }
659669
val keyboardController = LocalSoftwareKeyboardController.current
660-
Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(8.dp)) {
661-
when (modelLoadingState) {
662-
ChatScreenViewModel.ModelLoadingState.IN_PROGRESS -> {
663-
Text(
664-
modifier = Modifier.padding(8.dp),
665-
text = stringResource(R.string.chat_loading_model),
666-
)
667-
}
668-
669-
ChatScreenViewModel.ModelLoadingState.FAILURE -> {
670-
Text(
671-
modifier = Modifier.padding(8.dp),
672-
text = stringResource(R.string.chat_model_cannot_be_loaded),
673-
)
674-
}
675-
676-
ChatScreenViewModel.ModelLoadingState.SUCCESS -> {
670+
Row(
671+
verticalAlignment = Alignment.CenterVertically,
672+
horizontalArrangement = Arrangement.Center,
673+
modifier = Modifier.padding(8.dp),
674+
) {
675+
AnimatedVisibility(modelLoadingState == ModelLoadingState.IN_PROGRESS) {
676+
Text(
677+
modifier = Modifier.padding(8.dp),
678+
text = stringResource(R.string.chat_loading_model),
679+
)
680+
}
681+
AnimatedVisibility(modelLoadingState == ModelLoadingState.FAILURE) {
682+
Text(
683+
modifier = Modifier.padding(8.dp),
684+
text = stringResource(R.string.chat_model_cannot_be_loaded),
685+
)
686+
}
687+
AnimatedVisibility(modelLoadingState == ModelLoadingState.SUCCESS) {
688+
Row(
689+
modifier = Modifier.fillMaxWidth(),
690+
verticalAlignment = Alignment.CenterVertically,
691+
) {
677692
TextField(
678693
modifier =
679694
Modifier
@@ -729,15 +744,13 @@ private fun MessageInput(
729744
},
730745
) {
731746
Icon(
732-
imageVector = Icons.AutoMirrored.Filled.ArrowForward,
747+
imageVector = Icons.AutoMirrored.Filled.Send,
733748
contentDescription = "Send text",
734749
tint = MaterialTheme.colorScheme.onPrimaryContainer,
735750
)
736751
}
737752
}
738753
}
739-
740-
else -> {}
741754
}
742755
}
743756
}

‎app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatListDrawer.kt‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ fun DrawerUI(
8787
Column(
8888
modifier =
8989
Modifier
90-
.background(MaterialTheme.colorScheme.surfaceContainer)
90+
.background(MaterialTheme.colorScheme.surface)
9191
.windowInsetsPadding(WindowInsets.safeDrawing)
9292
.padding(8.dp)
9393
.requiredWidth(300.dp)
@@ -153,7 +153,7 @@ private fun ColumnScope.ChatsList(
153153
Icon(
154154
Icons.Default.Quickreply,
155155
contentDescription = "Manage Tasks",
156-
tint = MaterialTheme.colorScheme.surfaceTint,
156+
tint = MaterialTheme.colorScheme.secondary,
157157
)
158158
Text(
159159
stringResource(R.string.chat_drawer_manage_tasks),
@@ -187,7 +187,7 @@ private fun ColumnScope.ChatsList(
187187
Icon(
188188
Icons.Default.Add,
189189
contentDescription = "Add Folder",
190-
tint = MaterialTheme.colorScheme.surfaceTint,
190+
tint = MaterialTheme.colorScheme.secondary,
191191
)
192192
}
193193
}
@@ -289,7 +289,7 @@ private fun FolderListItem(
289289
Icons.AutoMirrored.Filled.KeyboardArrowRight
290290
},
291291
contentDescription = "",
292-
tint = MaterialTheme.colorScheme.surfaceTint,
292+
tint = MaterialTheme.colorScheme.secondary,
293293
)
294294
Spacer(modifier = Modifier.width(4.dp))
295295
Text(
@@ -345,7 +345,7 @@ private fun FolderListItem(
345345
Icon(
346346
Icons.Default.MoreVert,
347347
contentDescription = "Folder Options",
348-
tint = MaterialTheme.colorScheme.surfaceTint,
348+
tint = MaterialTheme.colorScheme.secondary,
349349
)
350350
}
351351
}

‎app/src/main/java/io/shubham0204/smollmandroid/ui/screens/chat/ChatMoreOptionsPopup.kt‎

Lines changed: 86 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,34 +55,79 @@ fun ChatMoreOptionsPopup(
5555
DropdownMenu(
5656
expanded = expanded,
5757
onDismissRequest = { viewModel.hideMoreOptionsPopup() },
58+
containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
5859
) {
5960
DropdownMenuItem(
60-
leadingIcon = { Icon(Icons.Default.Settings, contentDescription = "Edit Chat Name") },
61-
text = { Text(stringResource(R.string.chat_options_edit_settings), style = MaterialTheme.typography.labelMedium) },
61+
leadingIcon = {
62+
Icon(
63+
Icons.Default.Settings,
64+
contentDescription = "Edit Chat Name",
65+
tint = MaterialTheme.colorScheme.secondary,
66+
)
67+
},
68+
text = {
69+
Text(
70+
stringResource(R.string.chat_options_edit_settings),
71+
style = MaterialTheme.typography.labelMedium,
72+
)
73+
},
6274
onClick = {
6375
onEditChatSettingsClick()
6476
viewModel.hideMoreOptionsPopup()
6577
},
6678
)
6779
DropdownMenuItem(
68-
leadingIcon = { Icon(Icons.Default.Folder, contentDescription = "Change Folder") },
69-
text = { Text(stringResource(R.string.chat_options_change_folder), style = MaterialTheme.typography.labelMedium) },
80+
leadingIcon = {
81+
Icon(
82+
Icons.Default.Folder,
83+
contentDescription = "Change Folder",
84+
tint = MaterialTheme.colorScheme.secondary,
85+
)
86+
},
87+
text = {
88+
Text(
89+
stringResource(R.string.chat_options_change_folder),
90+
style = MaterialTheme.typography.labelMedium,
91+
)
92+
},
7093
onClick = {
7194
viewModel.showChangeFolderDialog()
7295
viewModel.hideMoreOptionsPopup()
7396
},
7497
)
7598
DropdownMenuItem(
76-
leadingIcon = { Icon(Icons.Default.Assistant, contentDescription = "Change Model") },
77-
text = { Text(stringResource(R.string.chat_options_change_model), style = MaterialTheme.typography.labelMedium) },
99+
leadingIcon = {
100+
Icon(
101+
Icons.Default.Assistant,
102+
contentDescription = "Change Model",
103+
tint = MaterialTheme.colorScheme.secondary,
104+
)
105+
},
106+
text = {
107+
Text(
108+
stringResource(R.string.chat_options_change_model),
109+
style = MaterialTheme.typography.labelMedium,
110+
)
111+
},
78112
onClick = {
79113
viewModel.showSelectModelListDialog()
80114
viewModel.hideMoreOptionsPopup()
81115
},
82116
)
83117
DropdownMenuItem(
84-
leadingIcon = { Icon(Icons.Default.Delete, contentDescription = "Delete Chat") },
85-
text = { Text(stringResource(R.string.dialog_title_delete_chat), style = MaterialTheme.typography.labelMedium) },
118+
leadingIcon = {
119+
Icon(
120+
Icons.Default.Delete,
121+
contentDescription = "Delete Chat",
122+
tint = MaterialTheme.colorScheme.secondary,
123+
)
124+
},
125+
text = {
126+
Text(
127+
stringResource(R.string.dialog_title_delete_chat),
128+
style = MaterialTheme.typography.labelMedium,
129+
)
130+
},
86131
onClick = {
87132
viewModel.currChatState.value?.let { chat ->
88133
createAlertDialog(
@@ -106,8 +151,19 @@ fun ChatMoreOptionsPopup(
106151
},
107152
)
108153
DropdownMenuItem(
109-
leadingIcon = { Icon(Icons.Default.Clear, contentDescription = "Clear Chat Messages") },
110-
text = { Text(stringResource(R.string.chat_options_clear_messages), style = MaterialTheme.typography.labelMedium) },
154+
leadingIcon = {
155+
Icon(
156+
Icons.Default.Clear,
157+
contentDescription = "Clear Chat Messages",
158+
tint = MaterialTheme.colorScheme.secondary,
159+
)
160+
},
161+
text = {
162+
Text(
163+
stringResource(R.string.chat_options_clear_messages),
164+
style = MaterialTheme.typography.labelMedium,
165+
)
166+
},
111167
onClick = {
112168
viewModel.currChatState.value?.let { chat ->
113169
createAlertDialog(
@@ -134,15 +190,32 @@ fun ChatMoreOptionsPopup(
134190
HorizontalDivider(modifier = Modifier.fillMaxWidth())
135191
Spacer(modifier = Modifier.height(4.dp))
136192
DropdownMenuItem(
137-
leadingIcon = { Icon(Icons.AutoMirrored.Filled.ShortText, contentDescription = "Context Usage") },
138-
text = { Text(stringResource(R.string.chat_options_ctx_length_usage), style = MaterialTheme.typography.labelMedium) },
193+
leadingIcon = {
194+
Icon(
195+
Icons.AutoMirrored.Filled.ShortText,
196+
contentDescription = "Context Usage",
197+
tint = MaterialTheme.colorScheme.secondary,
198+
)
199+
},
200+
text = {
201+
Text(
202+
stringResource(R.string.chat_options_ctx_length_usage),
203+
style = MaterialTheme.typography.labelMedium,
204+
)
205+
},
139206
onClick = {
140207
viewModel.showContextLengthUsageDialog()
141208
viewModel.hideMoreOptionsPopup()
142209
},
143210
)
144211
DropdownMenuItem(
145-
leadingIcon = { Icon(Icons.Default.Memory, contentDescription = "RAM Usage") },
212+
leadingIcon = {
213+
Icon(
214+
Icons.Default.Memory,
215+
contentDescription = "RAM Usage",
216+
tint = MaterialTheme.colorScheme.secondary,
217+
)
218+
},
146219
text = {
147220
Text(
148221
if (showRAMUsageLabel) "Hide RAM usage" else "Show RAM usage",

0 commit comments

Comments
 (0)