Skip to content

Commit e0a3702

Browse files
bmc08gtbmc08gt
committed
style: update flipcash colors in design system
Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent dd08bf7 commit e0a3702

17 files changed

Lines changed: 354 additions & 208 deletions

File tree

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/onramp/ui/PhantomLabel.kt‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,13 @@ import androidx.compose.ui.graphics.Color
66
import androidx.compose.ui.text.AnnotatedString
77
import com.flipcash.services.internal.model.thirdparty.OnRampProvider
88
import com.getcode.ui.theme.ButtonState
9-
import com.getcode.ui.theme.getButtonColors
109

1110
typealias AnnotatedButtonLabel = Pair<AnnotatedString, Map<String, InlineTextContent>>
1211

1312
@Composable
1413
fun buildPhantomButtonLabel(
1514
prefix: String,
16-
iconColor: Color = getButtonColors(
17-
true,
18-
ButtonState.Filled
19-
).contentColor(true).value
15+
iconColor: Color = ButtonState.Filled.colors().contentColor(true).value,
2016
): AnnotatedButtonLabel {
2117
return buildExternalWalletButtonLabel(prefix, OnRampProvider.Phantom, iconColor)
2218
}

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/ButtonPreviews.kt‎

Lines changed: 130 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,159 @@
11
package com.flipcash.app.core.ui
22

3+
import androidx.compose.foundation.background
34
import androidx.compose.foundation.layout.Arrangement
45
import androidx.compose.foundation.layout.Column
56
import androidx.compose.foundation.layout.Row
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.padding
89
import androidx.compose.runtime.Composable
910
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.draw.paint
1012
import androidx.compose.ui.graphics.Color
13+
import androidx.compose.ui.layout.ContentScale
14+
import androidx.compose.ui.res.painterResource
1115
import androidx.compose.ui.tooling.preview.Preview
1216
import androidx.compose.ui.unit.dp
1317
import com.flipcash.app.core.onramp.ui.buildExternalWalletButtonLabel
1418
import com.flipcash.app.theme.FlipcashPreview
1519
import com.flipcash.services.internal.model.thirdparty.OnRampProvider
20+
import com.getcode.theme.CodeTheme
1621
import com.getcode.ui.theme.ButtonState
1722
import com.getcode.ui.theme.CodeButton
1823

24+
25+
@Composable
26+
private fun Buttons() {
27+
val states = ButtonState.entries
28+
for (state in states) {
29+
Row(
30+
modifier = Modifier.fillMaxWidth(),
31+
horizontalArrangement = Arrangement.spacedBy(16.dp)
32+
) {
33+
CodeButton(
34+
modifier = Modifier.weight(1f),
35+
onClick = {},
36+
text = state.name,
37+
buttonState = state,
38+
)
39+
CodeButton(
40+
modifier = Modifier.weight(1f),
41+
onClick = {},
42+
text = state.name,
43+
buttonState = state,
44+
enabled = false,
45+
)
46+
}
47+
}
48+
Row(
49+
modifier = Modifier.fillMaxWidth(),
50+
horizontalArrangement = Arrangement.spacedBy(16.dp)
51+
) {
52+
CodeButton(
53+
modifier = Modifier.weight(1f),
54+
onClick = {},
55+
text = "Loading",
56+
buttonState = ButtonState.Filled,
57+
enabled = false,
58+
isLoading = true,
59+
)
60+
CodeButton(
61+
modifier = Modifier.weight(1f),
62+
onClick = {},
63+
text = "Success",
64+
enabled = false,
65+
buttonState = ButtonState.Filled,
66+
isSuccess = true,
67+
)
68+
}
69+
70+
with(
71+
buildExternalWalletButtonLabel(
72+
"Confirm in",
73+
provider = OnRampProvider.Phantom,
74+
Color.Black
75+
)
76+
) {
77+
CodeButton(
78+
modifier = Modifier.fillMaxWidth(),
79+
onClick = {},
80+
text = first,
81+
inlineContent = second,
82+
buttonState = ButtonState.Filled,
83+
)
84+
}
85+
86+
with(buildNotifyButtonLabel()) {
87+
CodeButton(
88+
modifier = Modifier.fillMaxWidth(),
89+
onClick = {},
90+
enabled = false,
91+
text = first,
92+
inlineContent = second,
93+
buttonState = ButtonState.Filled,
94+
)
95+
}
96+
}
97+
98+
@Preview
99+
@Composable
100+
private fun CodeButtonPreviewsOnBackground() {
101+
FlipcashPreview {
102+
Column(
103+
modifier = Modifier
104+
.padding(16.dp)
105+
.background(CodeTheme.colors.background),
106+
verticalArrangement = Arrangement.spacedBy(16.dp)
107+
) {
108+
Buttons()
109+
}
110+
}
111+
}
112+
19113
@Preview
20114
@Composable
21-
private fun CodeButtonPreviews() {
22-
FlipcashPreview(showBackground = true) {
115+
private fun CodeButtonPreviewsOnBrandLight() {
116+
FlipcashPreview {
23117
Column(
24118
modifier = Modifier
25-
.padding(16.dp),
119+
.padding(16.dp)
120+
.background(CodeTheme.colors.brandLight),
26121
verticalArrangement = Arrangement.spacedBy(16.dp)
27122
) {
28-
val states = ButtonState.entries
29-
for (state in states) {
30-
Row(
31-
modifier = Modifier.fillMaxWidth(),
32-
horizontalArrangement = Arrangement.spacedBy(16.dp)
33-
) {
34-
CodeButton(
35-
modifier = Modifier.weight(1f),
36-
onClick = {},
37-
text = state.name,
38-
buttonState = state,
39-
)
40-
CodeButton(
41-
modifier = Modifier.weight(1f),
42-
onClick = {},
43-
text = state.name,
44-
buttonState = state,
45-
enabled = false,
46-
)
47-
}
48-
}
49-
Row(
50-
modifier = Modifier.fillMaxWidth(),
51-
horizontalArrangement = Arrangement.spacedBy(16.dp)
52-
) {
53-
CodeButton(
54-
modifier = Modifier.weight(1f),
55-
onClick = {},
56-
text = "Loading",
57-
buttonState = ButtonState.Filled,
58-
enabled = false,
59-
isLoading = true,
60-
)
61-
CodeButton(
62-
modifier = Modifier.weight(1f),
63-
onClick = {},
64-
text = "Success",
65-
enabled = false,
66-
buttonState = ButtonState.Filled,
67-
isSuccess = true,
68-
)
69-
}
123+
Buttons()
124+
}
125+
}
126+
}
70127

71-
with (buildExternalWalletButtonLabel("Confirm in", provider = OnRampProvider.Phantom, Color.Black)) {
72-
CodeButton(
73-
modifier = Modifier.fillMaxWidth(),
74-
onClick = {},
75-
text = first,
76-
inlineContent = second,
77-
buttonState = ButtonState.Filled,
78-
)
79-
}
128+
@Preview
129+
@Composable
130+
private fun CodeButtonPreviewsOnSuccess() {
131+
FlipcashPreview {
132+
Column(
133+
modifier = Modifier
134+
.padding(16.dp)
135+
.background(CodeTheme.colors.bannerSuccess),
136+
verticalArrangement = Arrangement.spacedBy(16.dp)
137+
) {
138+
Buttons()
139+
}
140+
}
141+
}
80142

81-
with (buildNotifyButtonLabel()) {
82-
CodeButton(
83-
modifier = Modifier.fillMaxWidth(),
84-
onClick = {},
85-
enabled = false,
86-
text = first,
87-
inlineContent = second,
88-
buttonState = ButtonState.Filled,
89-
)
90-
}
143+
@Preview
144+
@Composable
145+
private fun CodeButtonPreviewsOnImage() {
146+
FlipcashPreview {
147+
Column(
148+
modifier = Modifier
149+
.padding(16.dp)
150+
.paint(
151+
painter = painterResource(android.R.drawable.ic_menu_always_landscape_portrait),
152+
contentScale = ContentScale.Crop
153+
),
154+
verticalArrangement = Arrangement.spacedBy(16.dp)
155+
) {
156+
Buttons()
91157
}
92158
}
93159
}

‎apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/CurrencyAppreciationLabel.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ fun CurrencyAppreciationLabel(
5858
Text(
5959
text = label,
6060
style = CodeTheme.typography.textSmall,
61-
color = changeColor,
61+
color = CodeTheme.colors.textSecondary,
6262
)
6363
}
6464
}

‎apps/flipcash/features/login/src/main/kotlin/com/flipcash/app/login/internal/AccessKeyScreenContent.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import androidx.compose.animation.core.tween
1010
import androidx.compose.animation.fadeIn
1111
import androidx.compose.animation.fadeOut
1212
import androidx.compose.foundation.Image
13-
import androidx.compose.foundation.background
1413
import androidx.compose.foundation.layout.Arrangement
1514
import androidx.compose.foundation.layout.Box
1615
import androidx.compose.foundation.layout.Column

‎apps/flipcash/features/login/src/main/kotlin/com/flipcash/app/login/internal/LoginScreenContent.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import androidx.compose.ui.text.style.TextAlign
3030
import androidx.compose.ui.text.style.TextDecoration
3131
import androidx.compose.ui.text.withStyle
3232
import com.flipcash.app.core.chrome.ChromeTabsUtils
33-
import com.flipcash.app.featureflags.LocalFeatureFlags
3433
import com.flipcash.features.login.R
3534
import com.getcode.theme.CodeTheme
3635
import com.getcode.ui.core.noRippleClickable

‎apps/flipcash/features/onramp/src/main/kotlin/com/flipcash/app/onramp/internal/screens/OnRampAmountScreenContent.kt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@ import com.getcode.navigation.core.LocalCodeNavigator
3838
import com.getcode.theme.CodeTheme
3939
import com.getcode.ui.theme.ButtonState
4040
import com.getcode.ui.theme.CodeButton
41-
import com.getcode.ui.theme.getButtonColors
4241
import kotlin.collections.emptyMap
43-
import kotlin.collections.mapOf
4442
import kotlin.to
4543

4644
@Composable
@@ -114,7 +112,7 @@ private fun ConfirmationButton(
114112
modifier: Modifier = Modifier,
115113
dispatchEvent: (OnRampViewModel.Event) -> Unit
116114
) {
117-
val buttonColors = getButtonColors(state.canAdd, ButtonState.Filled, Color.Unspecified)
115+
val buttonColors = ButtonState.Filled.colors()
118116
val (buttonText, assets) = when (provider) {
119117
is OnRampProvider.Coinbase -> when (provider.type) {
120118
// https://developers.google.com/pay/api/android/guides/brand-guidelines#using-pay-in-text

‎apps/flipcash/features/tokens/src/main/kotlin/com/flipcash/app/tokens/internal/TokenInfoScreen.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ private fun BottomBar(
185185
.drawWithGradient(
186186
color = CodeTheme.colors.background,
187187
startY = { 0f },
188-
endY = { size.height * 0.1f }
188+
endY = { size.height * 0.38f }
189189
)
190190
)
191191
BottomBarButtons(
@@ -218,7 +218,7 @@ private fun BottomBarButtons(
218218
if (state.isCashReserve && state.cashReservesEnabled) {
219219
CodeButton(
220220
modifier = Modifier.weight(1f),
221-
buttonState = ButtonState.FilledGreen,
221+
buttonState = ButtonState.Filled,
222222
text = stringResource(R.string.action_withdraw),
223223
) {
224224
dispatch(
@@ -230,7 +230,7 @@ private fun BottomBarButtons(
230230
} else if (state.cashReservesEnabled) {
231231
CodeButton(
232232
modifier = Modifier.weight(1f),
233-
buttonState = ButtonState.FilledGreen,
233+
buttonState = ButtonState.Filled,
234234
text = stringResource(R.string.action_buy),
235235
) {
236236
dispatch(TokenInfoViewModel.Event.OpenPurchaseMethods)

‎apps/flipcash/shared/accesskey/src/main/kotlin/com/flipcash/app/accesskey/BaseAccessKeyViewModel.kt‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import com.getcode.libs.qr.QRCodeGenerator
2222
import com.getcode.manager.TopBarManager
2323
import com.getcode.opencode.managers.MnemonicManager
2424
import com.getcode.theme.Alert
25+
import com.getcode.theme.GradientSpec
2526
import com.getcode.theme.White
2627
import com.getcode.ui.utils.toAGColor
2728
import com.getcode.util.resources.ResourceHelper
@@ -158,7 +159,8 @@ abstract class BaseAccessKeyViewModel(
158159
): Bitmap {
159160
val accessKeyText = getAccessKeyText(words)
160161

161-
val accessKeyBg = createGlowBitmap(812, 1353)
162+
val spec = Flipcash2ColorSpec.accessKey
163+
val accessKeyBg = createGlowBitmap(spec, 812, 1353)
162164

163165
val imageLogo =
164166
resources.getDrawable(R.drawable.ic_flipcash_logo)
@@ -197,6 +199,28 @@ abstract class BaseAccessKeyViewModel(
197199
null
198200
)
199201

202+
// Draw border
203+
spec.borderColor?.let { borderColor ->
204+
val borderPaint = Paint().apply {
205+
color = borderColor.toAGColor()
206+
style = Paint.Style.STROKE
207+
strokeWidth = spec.borderWidth
208+
isAntiAlias = true
209+
}
210+
211+
val borderInset = spec.borderWidth / 2
212+
val borderRect = RectF(
213+
((targetWidth - accessBgActualWidth) / 2f) + borderInset,
214+
bgTopOffset.toFloat() + borderInset,
215+
((targetWidth + accessBgActualWidth) / 2f) - borderInset,
216+
bgTopOffset.toFloat() + accessKeyBg.height - borderInset
217+
)
218+
219+
// Adjust corner radius to match your card
220+
val cornerRadius = 40f
221+
drawRoundRect(borderRect, cornerRadius, cornerRadius, borderPaint)
222+
}
223+
200224
drawBitmap(
201225
imageLogo,
202226
((targetWidth - logoWidth) / 2),
@@ -249,6 +273,7 @@ abstract class BaseAccessKeyViewModel(
249273
}
250274

251275
fun createGlowBitmap(
276+
gradientSpec: GradientSpec,
252277
width: Int,
253278
height: Int,
254279
cornerRadius: Float = 40f
@@ -266,14 +291,12 @@ abstract class BaseAccessKeyViewModel(
266291
}
267292
canvas.clipPath(clipPath)
268293

269-
val accessKeyGradient = Flipcash2ColorSpec.accessKey
270-
271294
val diagonalGradient = Paint(Paint.ANTI_ALIAS_FLAG).apply {
272295
shader = LinearGradient(
273296
0f, height.toFloat(),
274297
width.toFloat(), 0f,
275-
accessKeyGradient.colorsArray,
276-
accessKeyGradient.stopsArray,
298+
gradientSpec.colorsArray,
299+
gradientSpec.stopsArray,
277300
Shader.TileMode.CLAMP
278301
)
279302
}

‎apps/flipcash/shared/permissions/src/main/kotlin/com/flipcash/app/permissions/internal/PermissionScreenContent.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ package com.flipcash.app.permissions.internal
22

33
import android.Manifest
44
import androidx.compose.foundation.Image
5-
import androidx.compose.foundation.background
65
import androidx.compose.foundation.layout.Box
76
import androidx.compose.foundation.layout.Column
87
import androidx.compose.foundation.layout.Spacer

0 commit comments

Comments
 (0)