Skip to content

Commit 8009fd8

Browse files
yogeshpaliyalyogeshpaliyal
authored
Merge pull request #1183 from yogeshpaliyal/improveUI
feat: improve UI/UX of app settings screens
2 parents 454e419 + 6bd1164 commit 8009fd8

File tree

12 files changed

+1581
-471
lines changed

12 files changed

+1581
-471
lines changed

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/about/AboutScreen.kt

Lines changed: 179 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,64 @@ import androidx.compose.foundation.border
66
import androidx.compose.foundation.clickable
77
import androidx.compose.foundation.layout.Box
88
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.Row
910
import androidx.compose.foundation.layout.Spacer
1011
import androidx.compose.foundation.layout.fillMaxSize
1112
import androidx.compose.foundation.layout.fillMaxWidth
13+
import androidx.compose.foundation.layout.height
1214
import androidx.compose.foundation.layout.padding
1315
import androidx.compose.foundation.layout.size
1416
import androidx.compose.foundation.rememberScrollState
17+
import androidx.compose.foundation.shape.CircleShape
18+
import androidx.compose.foundation.shape.RoundedCornerShape
1519
import androidx.compose.foundation.verticalScroll
20+
import androidx.compose.material.icons.Icons
21+
import androidx.compose.material.icons.rounded.ArrowBackIosNew
22+
import androidx.compose.material.icons.rounded.Email
23+
import androidx.compose.material3.Card
24+
import androidx.compose.material3.CardDefaults
25+
import androidx.compose.material3.ElevatedCard
1626
import androidx.compose.material3.HorizontalDivider
27+
import androidx.compose.material3.Icon
28+
import androidx.compose.material3.IconButton
1729
import androidx.compose.material3.MaterialTheme
1830
import androidx.compose.material3.Scaffold
1931
import androidx.compose.material3.Surface
2032
import androidx.compose.material3.Text
2133
import androidx.compose.runtime.Composable
2234
import androidx.compose.ui.Alignment
2335
import androidx.compose.ui.Modifier
36+
import androidx.compose.ui.draw.clip
37+
import androidx.compose.ui.graphics.vector.rememberVectorPainter
2438
import androidx.compose.ui.platform.LocalContext
2539
import androidx.compose.ui.res.painterResource
2640
import androidx.compose.ui.res.stringResource
41+
import androidx.compose.ui.text.font.FontWeight
2742
import androidx.compose.ui.text.style.TextAlign
28-
import androidx.compose.ui.text.style.TextDecoration
2943
import androidx.compose.ui.tooling.preview.Preview
3044
import androidx.compose.ui.unit.dp
45+
import com.yogeshpaliyal.common.utils.email
3146
import com.yogeshpaliyal.common.utils.openLink
3247
import com.yogeshpaliyal.keypass.BuildConfig
3348
import com.yogeshpaliyal.keypass.R
3449
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
3550
import com.yogeshpaliyal.keypass.ui.commonComponents.PreferenceItem
51+
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
52+
import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
53+
import org.reduxkotlin.compose.rememberTypedDispatcher
3654

3755
@Composable
3856
fun AboutScreen() {
39-
Scaffold(bottomBar = { DefaultBottomAppBar() }) { contentPadding ->
57+
val dispatchAction = rememberTypedDispatcher<Action>()
58+
59+
Scaffold(
60+
bottomBar = {
61+
// Add back button to bottom bar
62+
DefaultBottomAppBar(
63+
showBackButton = true
64+
)
65+
}
66+
) { contentPadding ->
4067
Surface(
4168
modifier = Modifier
4269
.padding(contentPadding)
@@ -65,89 +92,174 @@ private fun MainContent() {
6592

6693
Column(
6794
modifier = Modifier
68-
.fillMaxSize(1f)
69-
.verticalScroll(rememberScrollState()),
95+
.fillMaxSize()
96+
.verticalScroll(rememberScrollState())
97+
.padding(16.dp),
7098
horizontalAlignment = Alignment.CenterHorizontally
7199
) {
72-
Column(
73-
modifier = Modifier.padding(16.dp),
74-
horizontalAlignment = Alignment.CenterHorizontally
100+
// App Info Card
101+
ElevatedCard(
102+
modifier = Modifier.fillMaxWidth(),
103+
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
104+
shape = RoundedCornerShape(16.dp)
75105
) {
76-
Box(
77-
modifier = Modifier.border(
78-
1.dp,
79-
MaterialTheme.colorScheme.onBackground,
80-
shape = androidx.compose.foundation.shape.AbsoluteRoundedCornerShape(8.dp)
81-
)
106+
Column(
107+
modifier = Modifier.padding(16.dp),
108+
horizontalAlignment = Alignment.CenterHorizontally
82109
) {
83-
Image(
84-
painter = painterResource(id = R.mipmap.ic_launcher_foreground),
85-
contentDescription = "App Icon"
86-
)
87-
}
110+
// App Icon with circular border
111+
Box(
112+
modifier = Modifier
113+
.size(120.dp)
114+
.clip(CircleShape)
115+
.border(2.dp, MaterialTheme.colorScheme.primary, CircleShape)
116+
.padding(8.dp)
117+
) {
118+
Image(
119+
painter = painterResource(id = R.mipmap.ic_launcher_foreground),
120+
contentDescription = "App Icon",
121+
modifier = Modifier.fillMaxSize()
122+
)
123+
}
88124

89-
Spacer(modifier = Modifier.size(16.dp))
125+
Spacer(modifier = Modifier.height(16.dp))
90126

91-
Text(
92-
stringResource(id = R.string.app_name),
93-
style = MaterialTheme.typography.headlineSmall
94-
)
127+
// App Name
128+
Text(
129+
text = stringResource(id = R.string.app_name),
130+
style = MaterialTheme.typography.headlineMedium,
131+
fontWeight = FontWeight.Bold,
132+
color = MaterialTheme.colorScheme.primary
133+
)
95134

96-
Spacer(modifier = Modifier.size(8.dp))
135+
Spacer(modifier = Modifier.height(4.dp))
97136

98-
Text(BuildConfig.VERSION_NAME)
137+
// Version
138+
Text(
139+
text = "Version ${BuildConfig.VERSION_NAME}",
140+
style = MaterialTheme.typography.bodyMedium,
141+
color = MaterialTheme.colorScheme.onSurfaceVariant
142+
)
99143

100-
HorizontalDivider(modifier = Modifier.padding(vertical = 16.dp))
144+
Spacer(modifier = Modifier.height(16.dp))
145+
HorizontalDivider()
146+
Spacer(modifier = Modifier.height(16.dp))
101147

102-
Text(
103-
stringResource(id = R.string.app_desc),
104-
style = MaterialTheme.typography.bodyMedium
105-
)
148+
// App Description
149+
Text(
150+
text = stringResource(id = R.string.app_desc),
151+
style = MaterialTheme.typography.bodyLarge,
152+
textAlign = TextAlign.Center
153+
)
106154

107-
Text(
108-
text = stringResource(R.string.source_code),
109-
modifier = Modifier
110-
.fillMaxWidth()
111-
.clickable {
112-
context.openLink("https://github.com/yogeshpaliyal/KeyPass")
113-
},
114-
fontStyle = androidx.compose.ui.text.font.FontStyle.Italic,
115-
style = MaterialTheme.typography.labelMedium,
116-
textDecoration = TextDecoration.Underline,
117-
textAlign = TextAlign.Center
118-
)
155+
Spacer(modifier = Modifier.height(16.dp))
119156

120-
HorizontalDivider(modifier = Modifier.padding(vertical = 16.dp))
157+
// Source code link
158+
Card(
159+
modifier = Modifier
160+
.fillMaxWidth()
161+
.clickable {
162+
context.openLink("https://github.com/yogeshpaliyal/KeyPass")
163+
},
164+
colors = CardDefaults.cardColors(
165+
containerColor = MaterialTheme.colorScheme.secondaryContainer
166+
)
167+
) {
168+
Row(
169+
modifier = Modifier
170+
.fillMaxWidth()
171+
.padding(12.dp),
172+
verticalAlignment = Alignment.CenterVertically
173+
) {
174+
Icon(
175+
painter = painterResource(id = R.drawable.ic_github),
176+
contentDescription = null,
177+
tint = MaterialTheme.colorScheme.onSecondaryContainer,
178+
modifier = Modifier.size(24.dp)
179+
)
180+
181+
Text(
182+
text = stringResource(R.string.source_code),
183+
style = MaterialTheme.typography.bodyMedium,
184+
fontWeight = FontWeight.Medium,
185+
modifier = Modifier.padding(start = 12.dp),
186+
color = MaterialTheme.colorScheme.onSecondaryContainer
187+
)
188+
}
189+
}
190+
}
121191
}
122192

193+
Spacer(modifier = Modifier.height(24.dp))
194+
195+
// Developer section
123196
Text(
124-
stringResource(id = R.string.app_developer),
125-
style = MaterialTheme.typography.headlineSmall
197+
text = stringResource(id = R.string.app_developer),
198+
style = MaterialTheme.typography.titleLarge,
199+
fontWeight = FontWeight.Bold,
200+
modifier = Modifier
201+
.fillMaxWidth()
202+
.padding(bottom = 8.dp),
203+
textAlign = TextAlign.Start
126204
)
127205

128-
Spacer(modifier = Modifier.size(16.dp))
129-
130-
Column(modifier = Modifier.fillMaxWidth()) {
131-
PreferenceItem(
132-
painter = painterResource(id = R.drawable.ic_twitter),
133-
title = R.string.app_developer_x
134-
) {
135-
context.openLink("https://twitter.com/yogeshpaliyal")
136-
}
137-
}
138-
139-
PreferenceItem(
140-
painter = painterResource(id = R.drawable.ic_github),
141-
title = R.string.app_developer_github
206+
ElevatedCard(
207+
modifier = Modifier.fillMaxWidth(),
208+
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
209+
shape = RoundedCornerShape(16.dp)
142210
) {
143-
context.openLink("https://github.com/yogeshpaliyal")
144-
}
145-
146-
PreferenceItem(
147-
painter = painterResource(id = R.drawable.ic_linkedin),
148-
title = R.string.app_developer_linkedin
149-
) {
150-
context.openLink("https://linkedin.com/in/yogeshpaliyal")
211+
Column(modifier = Modifier.fillMaxWidth()) {
212+
// Social links
213+
PreferenceItem(
214+
painter = painterResource(id = R.drawable.ic_twitter),
215+
title = R.string.app_developer_x,
216+
onClickItem = {
217+
context.openLink("https://twitter.com/yogeshpaliyal")
218+
}
219+
)
220+
221+
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
222+
223+
PreferenceItem(
224+
painter = painterResource(id = R.drawable.ic_github),
225+
title = R.string.app_developer_github,
226+
onClickItem = {
227+
context.openLink("https://github.com/yogeshpaliyal")
228+
}
229+
)
230+
231+
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
232+
233+
PreferenceItem(
234+
painter = painterResource(id = R.drawable.ic_linkedin),
235+
title = R.string.app_developer_linkedin,
236+
onClickItem = {
237+
context.openLink("https://linkedin.com/in/yogeshpaliyal")
238+
}
239+
)
240+
241+
HorizontalDivider(modifier = Modifier.padding(horizontal = 16.dp))
242+
243+
// Email contact
244+
PreferenceItem(
245+
icon = Icons.Rounded.Email,
246+
title = R.string.contact_developer,
247+
summary = R.string.contact_via_email,
248+
onClickItem = {
249+
context.email("Feedback for KeyPass", "[email protected]")
250+
}
251+
)
252+
}
151253
}
254+
255+
// Privacy and terms
256+
Spacer(modifier = Modifier.height(24.dp))
257+
258+
Text(
259+
text = "© ${java.util.Calendar.getInstance().get(java.util.Calendar.YEAR)} Yogesh Paliyal. All rights reserved.",
260+
style = MaterialTheme.typography.bodySmall,
261+
textAlign = TextAlign.Center,
262+
color = MaterialTheme.colorScheme.onSurfaceVariant
263+
)
152264
}
153265
}

0 commit comments

Comments
 (0)