Skip to content

Commit

Permalink
Add explanation for buttons in settings (#653)
Browse files Browse the repository at this point in the history 
* Add explanation for buttons in settings

* rc: make svg square, add color prop, shorter copy

---------

Co-authored-by: Nalin <[email protected]>
  • Loading branch information
@wojtus7 @nalinbhardwaj
wojtus7 and nalinbhardwaj authored Jan 27, 2024
1 parent 5162e19 commit d32ec7c
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 5 deletions.
60 changes: 55 additions & 5 deletions apps/daimo-mobile/src/view/screen/SettingsScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "@daimo/common";
import { DaimoChain, daimoChainFromId } from "@daimo/contract";
import * as Notifications from "expo-notifications";
import React, { useCallback, useState } from "react";
import React, { ReactNode, useCallback, useState } from "react";
import {
Linking,
ScrollView,
Expand All @@ -24,12 +24,13 @@ import { AccountCopyLinkButton } from "../shared/AccountCopyLinkButton";
import { Badge } from "../shared/Badge";
import { ButtonMed, TextButton } from "../shared/Button";
import { ContactBubble } from "../shared/ContactBubble";
import { ClockIcon, PlusIcon } from "../shared/Icons";
import { PendingDot } from "../shared/PendingDot";
import { ScreenHeader } from "../shared/ScreenHeader";
import Spacer from "../shared/Spacer";
import { useExitToHome, useNav } from "../shared/nav";
import { color, ss, touchHighlightUnderlay } from "../shared/style";
import { TextBody, TextLight, TextMeta } from "../shared/text";
import { DaimoText, TextBody, TextLight, TextMeta } from "../shared/text";

export function SettingsScreen() {
const [account] = useAccount();
Expand All @@ -49,7 +50,6 @@ export function SettingsScreen() {
<AccountSection account={account} />
<Spacer h={32} />
<DevicesSection account={account} />
<Spacer h={24} />
<TextButton
title={showDetails ? "Hide details" : "Show details"}
onPress={() => setShowDetails(!showDetails)}
Expand Down Expand Up @@ -153,9 +153,40 @@ function DevicesSection({ account }: { account: Account }) {
children={currentKeyRows.concat(pendingDeviceRows)}
/>
<Spacer h={24} />
<ButtonMed type="primary" title="CREATE BACKUP" onPress={createBackup} />
<Spacer h={16} />
<ButtonInfo
title="Create a Passkey Backup"
message="Secured by your password manager"
icon={<ClockIcon color={color.gray3} style={{ top: 7 }} />}
/>
<ButtonMed type="subtle" title="CREATE BACKUP" onPress={createBackup} />
<View style={styles.separator} />
<ButtonInfo
title="Add a Device"
message="Use your account on another device"
icon={<PlusIcon color={color.gray3} style={{ top: 7 }} />}
/>
<ButtonMed type="subtle" title="ADD DEVICE" onPress={addDevice} />
<View style={styles.separator} />
</View>
);
}

function ButtonInfo({
icon,
title,
message,
}: {
icon: ReactNode;
title: string;
message: string;
}) {
return (
<View style={styles.buttonInfoContainer}>
{icon}
<View style={styles.messageContainer}>
<TextBody color={color.midnight}>{title}</TextBody>
<DaimoText style={styles.infoMessageText}>{message}</DaimoText>
</View>
</View>
);
}
Expand Down Expand Up @@ -323,6 +354,11 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
borderColor: color.grayLight,
},
separator: {
borderTopWidth: 1,
borderColor: color.grayLight,
marginVertical: 24,
},
rowWrap: {
marginHorizontal: -24,
},
Expand Down Expand Up @@ -354,4 +390,18 @@ const styles = StyleSheet.create({
borderRadius: 16,
backgroundColor: color.yellow,
},
messageContainer: {
marginLeft: 16,
flex: 1,
},
infoMessageText: {
fontSize: 16,
lineHeight: 20,
color: color.gray3,
fontWeight: "500",
},
buttonInfoContainer: {
flexDirection: "row",
marginBottom: 20,
},
});
37 changes: 37 additions & 0 deletions apps/daimo-mobile/src/view/shared/Icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react";
import { ViewStyle, ColorValue } from "react-native";
import { Path, Svg } from "react-native-svg";

export const ClockIcon = ({
color,
style,
}: {
color?: ColorValue;
style?: ViewStyle;
}) => (
<Svg width="24" height="24" viewBox="0 0 24 24" color={color} style={style}>
<Path
d="M11.9982 2.5C10.1866 2.49976 8.41267 3.01737 6.88544 3.99181C5.35822 4.96626 4.14135 6.35695 3.37823 8H5.75023C5.94914 8 6.13991 8.07902 6.28056 8.21967C6.42121 8.36032 6.50023 8.55109 6.50023 8.75C6.50023 8.94891 6.42121 9.13968 6.28056 9.28033C6.13991 9.42098 5.94914 9.5 5.75023 9.5H2.00023C1.73501 9.5 1.48066 9.39464 1.29312 9.20711C1.10559 9.01957 1.00023 8.76522 1.00023 8.5V4.75C1.00023 4.55109 1.07925 4.36032 1.2199 4.21967C1.36055 4.07902 1.55132 4 1.75023 4C1.94914 4 2.13991 4.07902 2.28056 4.21967C2.42121 4.36032 2.50023 4.55109 2.50023 4.75V6.447C3.46972 4.78859 4.85673 3.41308 6.52314 2.45741C8.18955 1.50174 10.0772 0.999261 11.9982 1C18.0742 1 23.0002 5.925 23.0002 12C23.0002 18.075 18.0742 23 11.9982 23C6.01423 23 1.14623 18.223 1.00023 12.275C0.995322 12.0761 1.06963 11.8834 1.20682 11.7393C1.344 11.5951 1.53282 11.5114 1.73173 11.5065C1.93064 11.5016 2.12336 11.5759 2.26748 11.7131C2.4116 11.8503 2.49532 12.0391 2.50023 12.238C2.56232 14.7157 3.59028 17.0711 5.36476 18.8015C7.13924 20.5319 9.51972 21.5003 11.9982 21.5C17.2462 21.5 21.5002 17.247 21.5002 12C21.5002 6.753 17.2462 2.5 11.9982 2.5Z"
fill="currentColor"
/>
<Path
d="M12.5 7.25C12.5 7.05109 12.421 6.86032 12.2803 6.71967C12.1397 6.57902 11.9489 6.5 11.75 6.5C11.5511 6.5 11.3603 6.57902 11.2197 6.71967C11.079 6.86032 11 7.05109 11 7.25V12.75C11 13.02 11.144 13.268 11.378 13.401L14.878 15.401C15.0503 15.4941 15.2522 15.5161 15.4405 15.4624C15.6288 15.4086 15.7886 15.2833 15.8858 15.1133C15.9829 14.9433 16.0097 14.742 15.9604 14.5524C15.9112 14.3629 15.7897 14.2002 15.622 14.099L12.5 12.315V7.25Z"
fill="currentColor"
/>
</Svg>
);

export const PlusIcon = ({
color,
style,
}: {
color?: ColorValue;
style?: ViewStyle;
}) => (
<Svg width="24" height="24" viewBox="0 0 24 24" color={color} style={style}>
<Path
d="M12.25 5C12.4489 5 12.6397 5.07902 12.7803 5.21967C12.921 5.36032 13 5.55109 13 5.75V11.5H18.75C18.9489 11.5 19.1397 11.579 19.2803 11.7197C19.421 11.8603 19.5 12.0511 19.5 12.25C19.5 12.4489 19.421 12.6397 19.2803 12.7803C19.1397 12.921 18.9489 13 18.75 13H13V18.75C13 18.9489 12.921 19.1397 12.7803 19.2803C12.6397 19.421 12.4489 19.5 12.25 19.5C12.0511 19.5 11.8603 19.421 11.7197 19.2803C11.579 19.1397 11.5 18.9489 11.5 18.75V13H5.75C5.55109 13 5.36032 12.921 5.21967 12.7803C5.07902 12.6397 5 12.4489 5 12.25C5 12.0511 5.07902 11.8603 5.21967 11.7197C5.36032 11.579 5.55109 11.5 5.75 11.5H11.5V5.75C11.5 5.55109 11.579 5.36032 11.7197 5.21967C11.8603 5.07902 12.0511 5 12.25 5Z"
fill="currentColor"
/>
</Svg>
);

0 comments on commit d32ec7c

Please sign in to comment.