From 4f3f177239fcec395b2753f9e94cbb94f3d68ff6 Mon Sep 17 00:00:00 2001 From: Breno Polanski Date: Wed, 7 Oct 2020 22:15:57 -0300 Subject: [PATCH] refactor: implement new design for the page create profile (#2941) --- src/app/assets/svg/upload.svg | 2 +- .../SelectProfileImage/SelectProfileImage.tsx | 124 +- .../SelectProfileImage.test.tsx.snap | 6 +- .../profile/e2e/create-profile-action.e2e.ts | 10 +- src/domains/profile/i18n.ts | 1 + .../CreateProfile/CreateProfile.test.tsx | 12 +- .../pages/CreateProfile/CreateProfile.tsx | 91 +- .../__snapshots__/CreateProfile.test.tsx.snap | 1145 +++++------------ src/domains/setting/i18n.ts | 2 + .../__snapshots__/Settings.test.tsx.snap | 177 +-- 10 files changed, 543 insertions(+), 1027 deletions(-) mode change 100644 => 100755 src/app/components/SelectProfileImage/SelectProfileImage.tsx mode change 100644 => 100755 src/domains/profile/pages/CreateProfile/CreateProfile.test.tsx diff --git a/src/app/assets/svg/upload.svg b/src/app/assets/svg/upload.svg index 4c6020c39e..dda92ba7d5 100644 --- a/src/app/assets/svg/upload.svg +++ b/src/app/assets/svg/upload.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/components/SelectProfileImage/SelectProfileImage.tsx b/src/app/components/SelectProfileImage/SelectProfileImage.tsx old mode 100644 new mode 100755 index c2548b2797..6a4f25e266 --- a/src/app/components/SelectProfileImage/SelectProfileImage.tsx +++ b/src/app/components/SelectProfileImage/SelectProfileImage.tsx @@ -1,3 +1,4 @@ +import Tippy from "@tippyjs/react"; import { Button } from "app/components/Button"; import { Icon } from "app/components/Icon"; import React, { useMemo } from "react"; @@ -6,23 +7,34 @@ import tw, { styled } from "twin.macro"; import { openFile } from "utils/electron-utils"; type SelectProfileImageProps = { + className?: string; value?: string; name?: string; + showLabel?: boolean; onSelect: (raw: string) => void; }; const ProfileImageStyled = styled.div` & { - ${tw`relative inline-flex items-center justify-center overflow-hidden rounded`}; + ${tw`relative inline-flex items-center justify-center overflow-hidden rounded cursor-pointer`}; } + &:after { content: ""; - box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.4); - ${tw`absolute w-22 h-22 left-1 top-1 rounded-full`}; + box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4); + ${tw`absolute rounded-full w-22 h-22 left-1 top-1`}; + } + + &:hover .upload-button-overlay { + ${tw`block`}; + + div { + background-color: rgba(0, 0, 0, 0.7); + } } `; -export const SelectProfileImage = ({ value, name, onSelect }: SelectProfileImageProps) => { +export const SelectProfileImage = ({ className, value, name, showLabel, onSelect }: SelectProfileImageProps) => { const { t } = useTranslation(); const handleUploadImage = async () => { @@ -39,52 +51,76 @@ export const SelectProfileImage = ({ value, name, onSelect }: SelectProfileImage const isSvg = useMemo(() => value && value.endsWith(""), [value]); return ( -
- - {t("SETTINGS.GENERAL.PERSONAL.PROFILE_IMAGE")} - +
+ {showLabel && ( + + {t("SETTINGS.GENERAL.PERSONAL.PROFILE_IMAGE")} + + )}
-
-
- -
-
- {value && ( + {!value ? ( + +
+
+ +
+
+ + ) : (
- - Profile avatar - {isSvg && ( - - {name?.slice(0, 2).toUpperCase()} - - )} - - + + + Profile avatar + {isSvg && ( + + {name?.slice(0, 2).toUpperCase()} + + )} + +
+
+ +
+
+ + + {!isSvg && ( + + + + )}
)}
); }; + +SelectProfileImage.defaultProps = { + showLabel: true, +}; diff --git a/src/app/components/SelectProfileImage/__snapshots__/SelectProfileImage.test.tsx.snap b/src/app/components/SelectProfileImage/__snapshots__/SelectProfileImage.test.tsx.snap index 1cb2529f76..9a79d3d36f 100644 --- a/src/app/components/SelectProfileImage/__snapshots__/SelectProfileImage.test.tsx.snap +++ b/src/app/components/SelectProfileImage/__snapshots__/SelectProfileImage.test.tsx.snap @@ -3,7 +3,7 @@ exports[`SelectProfileImage should render 1`] = `
diff --git a/src/domains/profile/e2e/create-profile-action.e2e.ts b/src/domains/profile/e2e/create-profile-action.e2e.ts index 776600249b..e5bcc0ac16 100644 --- a/src/domains/profile/e2e/create-profile-action.e2e.ts +++ b/src/domains/profile/e2e/create-profile-action.e2e.ts @@ -12,7 +12,7 @@ const nameInput = Selector("input[name=name]"); test("should return an error when submit without required fields", async (t) => { await t.click(Selector("button").withExactText(translations.PROFILE.CREATE_PROFILE)); - await t.click(Selector("button").withExactText(translations.COMMON.COMPLETE)); + await t.click(Selector("button").withExactText(translations.COMMON.CREATE)); await t.click(Selector("fieldset p").withText("'Name' is required")); await t.click(Selector("fieldset p").withText("'Currency' is required")); await t.click(Selector("h1").withExactText(translations.PROFILE.PAGE_CREATE_PROFILE.TITLE)); @@ -24,12 +24,10 @@ test("should create a profile and navigate to welcome screen", async (t) => { await t.expect(getLocation()).contains("/profiles/create"); await t.typeText(nameInput, "Anne Doe"); - await t.click(Selector("button").withText("CryptoCompare")); - await t.click(Selector("li.select-list-option").withText("CoinGecko")); await t.click(Selector("button").withText("Select Currency")); await t.click(Selector("li.select-list-option").withText("ETH")); await t.click(Selector("input[name=isDarkMode]").parent()); - await t.click(Selector("button").withExactText(translations.COMMON.COMPLETE)); + await t.click(Selector("button").withExactText(translations.COMMON.CREATE)); await t.wait(1000); // TODO: the profile loading is async so we need to give it a moment @@ -46,12 +44,10 @@ test("should create a profile with password and navigate to welcome screen", asy await t.typeText(nameInput, "Joe Bloggs"); await t.typeText(Selector("input[name=password]"), "password"); - await t.click(Selector("button").withText("CryptoCompare")); - await t.click(Selector("li.select-list-option").withText("CoinGecko")); await t.click(Selector("button").withText("Select Currency")); await t.click(Selector("li.select-list-option").withText("ETH")); await t.click(Selector("input[name=isDarkMode]").parent()); - await t.click(Selector("button").withExactText(translations.COMMON.COMPLETE)); + await t.click(Selector("button").withExactText(translations.COMMON.CREATE)); await t.wait(1000); // TODO: the profile loading is async so we need to give it a moment diff --git a/src/domains/profile/i18n.ts b/src/domains/profile/i18n.ts index b177e84015..57d2f055b7 100644 --- a/src/domains/profile/i18n.ts +++ b/src/domains/profile/i18n.ts @@ -45,6 +45,7 @@ export const translations: { [key: string]: any } = { PAGE_CREATE_PROFILE: { TITLE: "Create Profile", DESCRIPTION: "Sign in via MarketSquare or create a new Profile below.", + NEW_PROFILE: "New Profile", VALIDATION: { MAXLENGTH_ERROR: "The Name should have less than {{maxLength}} characters", }, diff --git a/src/domains/profile/pages/CreateProfile/CreateProfile.test.tsx b/src/domains/profile/pages/CreateProfile/CreateProfile.test.tsx old mode 100644 new mode 100755 index 63413b3f33..0b0b5ed9c4 --- a/src/domains/profile/pages/CreateProfile/CreateProfile.test.tsx +++ b/src/domains/profile/pages/CreateProfile/CreateProfile.test.tsx @@ -38,7 +38,7 @@ const baseSettings = { EXCHANGE_CURRENCY: "BTC", LEDGER_UPDATE_METHOD: false, LOCALE: "en-US", - MARKET_PROVIDER: "coincap", + MARKET_PROVIDER: "cryptocompare", NAME: "test profile", SCREENSHOT_PROTECTION: true, THEME: "light", @@ -97,8 +97,6 @@ describe("CreateProfile", () => { fireEvent.input(getAllByTestId("Input")[0], { target: { value: "test profile" } }); fireEvent.click(getAllByTestId("select-list__toggle-button")[0]); fireEvent.click(getByTestId("select-list__toggle-option-0")); - fireEvent.click(getAllByTestId("select-list__toggle-button")[1]); - fireEvent.click(getByTestId("select-list__toggle-option-0")); await act(async () => { fireEvent.click(getByTestId("CreateProfile__submit-button")); @@ -135,7 +133,7 @@ describe("CreateProfile", () => { }); it("should store profile with password", async () => { - const { asFragment, container, getAllByTestId, getByTestId } = renderWithRouter( + const { asFragment, getAllByTestId, getByTestId } = renderWithRouter( , @@ -149,8 +147,6 @@ describe("CreateProfile", () => { fireEvent.input(getAllByTestId("Input")[1], { target: { value: "test password" } }); fireEvent.click(getAllByTestId("select-list__toggle-button")[0]); fireEvent.click(getByTestId("select-list__toggle-option-0")); - fireEvent.click(getAllByTestId("select-list__toggle-button")[1]); - fireEvent.click(getByTestId("select-list__toggle-option-0")); await act(async () => { fireEvent.click(getByTestId("CreateProfile__submit-button")); @@ -186,8 +182,6 @@ describe("CreateProfile", () => { fireEvent.input(getAllByTestId("Input")[0], { target: { value: "test profile" } }); fireEvent.click(getAllByTestId("select-list__toggle-button")[0]); fireEvent.click(getByTestId("select-list__toggle-option-0")); - fireEvent.click(getAllByTestId("select-list__toggle-button")[1]); - fireEvent.click(getByTestId("select-list__toggle-option-0")); await act(async () => { fireEvent.click(getByTestId("CreateProfile__submit-button")); @@ -226,8 +220,6 @@ describe("CreateProfile", () => { fireEvent.input(getAllByTestId("Input")[0], { target: { value: "test profile" } }); fireEvent.click(getAllByTestId("select-list__toggle-button")[0]); fireEvent.click(getByTestId("select-list__toggle-option-0")); - fireEvent.click(getAllByTestId("select-list__toggle-button")[1]); - fireEvent.click(getByTestId("select-list__toggle-option-0")); await act(async () => { fireEvent.click(getByTestId("CreateProfile__submit-button")); diff --git a/src/domains/profile/pages/CreateProfile/CreateProfile.tsx b/src/domains/profile/pages/CreateProfile/CreateProfile.tsx index 82fc382069..8d00feb112 100755 --- a/src/domains/profile/pages/CreateProfile/CreateProfile.tsx +++ b/src/domains/profile/pages/CreateProfile/CreateProfile.tsx @@ -43,18 +43,18 @@ export const CreateProfile = () => { { isFloatingLabel: true, label: t("SETTINGS.GENERAL.OTHER.DARK_THEME.TITLE"), - labelClass: "text-lg font-semibold text-theme-neutral-dark", + labelClass: "text-xl font-semibold", labelDescription: t("SETTINGS.GENERAL.OTHER.DARK_THEME.DESCRIPTION"), labelAddon: , }, ]; - const handleSubmit = async ({ name, password, currency, isDarkMode, marketProvider }: any) => { + const handleSubmit = async ({ name, password, currency, isDarkMode }: any) => { const formattedName = name.substring(0, nameMaxLength); const profile = env.profiles().create(formattedName); - profile.settings().set(ProfileSetting.MarketProvider, marketProvider); + profile.settings().set(ProfileSetting.MarketProvider, "cryptocompare"); profile.settings().set(ProfileSetting.ExchangeCurrency, currency); profile.settings().set(ProfileSetting.Theme, isDarkMode ? "dark" : "light"); @@ -74,11 +74,11 @@ export const CreateProfile = () => { return (
-
+

{t("PROFILE.PAGE_CREATE_PROFILE.TITLE")}

{t("PROFILE.PAGE_CREATE_PROFILE.DESCRIPTION")}
-
+
- - -
-
-

{t("SETTINGS.GENERAL.PERSONAL.TITLE")}

- - + +
+

{t("PROFILE.PAGE_CREATE_PROFILE.NEW_PROFILE")}

- - - + + + + + + + - - +
{ - - - {
-
-

{t("SETTINGS.GENERAL.OTHER.TITLE")}

+
-
+
diff --git a/src/domains/profile/pages/CreateProfile/__snapshots__/CreateProfile.test.tsx.snap b/src/domains/profile/pages/CreateProfile/__snapshots__/CreateProfile.test.tsx.snap index 52a34fe835..36353d0bca 100644 --- a/src/domains/profile/pages/CreateProfile/__snapshots__/CreateProfile.test.tsx.snap +++ b/src/domains/profile/pages/CreateProfile/__snapshots__/CreateProfile.test.tsx.snap @@ -46,7 +46,7 @@ exports[`CreateProfile should not upload avatar image 1`] = ` class="container py-16 mx-auto px-14" >

-
-

- Personal Details -

+

+ New Profile +

- - Profile Image -
-
-
- -
-
+ Name +
+ + +
- Profile avatar" - /> - - TE - -
- +
-
-
-
-
@@ -241,70 +213,6 @@ exports[`CreateProfile should not upload avatar image 1`] = `
-
-
@@ -337,18 +245,18 @@ exports[`CreateProfile should not upload avatar image 1`] = `
    @@ -371,11 +279,8 @@ exports[`CreateProfile should not upload avatar image 1`] = `
-

- Other -

    Dark Theme @@ -436,7 +341,7 @@ exports[`CreateProfile should not upload avatar image 1`] = ` />
@@ -509,7 +414,7 @@ exports[`CreateProfile should render 1`] = ` class="container py-16 mx-auto px-14" >

-
-

- Personal Details -

+

+ New Profile +

- - Profile Image -
+
+
-
- +
-
-
-
-
@@ -669,70 +569,6 @@ exports[`CreateProfile should render 1`] = `

-
-
@@ -765,18 +601,18 @@ exports[`CreateProfile should render 1`] = `
    @@ -799,11 +635,8 @@ exports[`CreateProfile should render 1`] = `

-

- Other -

    Dark Theme @@ -864,7 +697,7 @@ exports[`CreateProfile should render 1`] = ` />
@@ -937,7 +770,7 @@ exports[`CreateProfile should store profile 1`] = ` class="container py-16 mx-auto px-14" >

-
-

- Personal Details -

+

+ New Profile +

- - Profile Image -
-
-
- -
-
+ Name +
+ + +
- Profile avatar -
- +
+ Profile avatar + +
+ +
+
-
-
-
-
@@ -1126,70 +948,6 @@ exports[`CreateProfile should store profile 1`] = `
-
-
@@ -1222,18 +980,18 @@ exports[`CreateProfile should store profile 1`] = `
    @@ -1256,11 +1014,8 @@ exports[`CreateProfile should store profile 1`] = `

-

- Other -

    Dark Theme @@ -1321,7 +1076,7 @@ exports[`CreateProfile should store profile 1`] = ` />
@@ -1394,7 +1149,7 @@ exports[`CreateProfile should store profile with password 1`] = ` class="container py-16 mx-auto px-14" >

-
-

- Personal Details -

+

+ New Profile +

- - Profile Image -
-
-
- -
-
+ Name +
+ + +
- Profile avatar" - /> - - TE - -
- +
-
-
-
-
@@ -1589,70 +1316,6 @@ exports[`CreateProfile should store profile with password 1`] = `
-
-
@@ -1685,18 +1348,18 @@ exports[`CreateProfile should store profile with password 1`] = `
    @@ -1719,11 +1382,8 @@ exports[`CreateProfile should store profile with password 1`] = `
-

- Other -

    Dark Theme @@ -1784,7 +1444,7 @@ exports[`CreateProfile should store profile with password 1`] = ` />
@@ -1857,7 +1517,7 @@ exports[`CreateProfile should upload and remove avatar image 1`] = ` class="container py-16 mx-auto px-14" >

-
-

- Personal Details -

+

+ New Profile +

- - Profile Image -
-
-
- -
-
+ Name +
+ + +
- Profile avatar" - /> - - TE - -
- +
-
-
-
-
@@ -2052,70 +1684,6 @@ exports[`CreateProfile should upload and remove avatar image 1`] = `
-
-
@@ -2148,18 +1716,18 @@ exports[`CreateProfile should upload and remove avatar image 1`] = `
    @@ -2182,11 +1750,8 @@ exports[`CreateProfile should upload and remove avatar image 1`] = `
-

- Other -

    Dark Theme @@ -2247,7 +1812,7 @@ exports[`CreateProfile should upload and remove avatar image 1`] = ` />
diff --git a/src/domains/setting/i18n.ts b/src/domains/setting/i18n.ts index 64ae7dde26..7da0e2151a 100644 --- a/src/domains/setting/i18n.ts +++ b/src/domains/setting/i18n.ts @@ -6,6 +6,8 @@ export const translations: { [key: string]: any } = { PERSONAL: { TITLE: "Personal Details", PROFILE_IMAGE: "Profile Image", + DELETE_AVATAR: "Delete Avatar", + UPLOAD_AVATAR: "Upload Avatar", NAME: "Name", PASSWORD: "Password", PASSPHRASE_LANGUAGE: "Passphrase Language", diff --git a/src/domains/setting/pages/Settings/__snapshots__/Settings.test.tsx.snap b/src/domains/setting/pages/Settings/__snapshots__/Settings.test.tsx.snap index 8b2c5aec44..ad68ae1858 100644 --- a/src/domains/setting/pages/Settings/__snapshots__/Settings.test.tsx.snap +++ b/src/domains/setting/pages/Settings/__snapshots__/Settings.test.tsx.snap @@ -1671,7 +1671,7 @@ exports[`Settings should render 1`] = ` Personal Details

-
-
- -
-
Profile avatar JO -
- +

@@ -6152,7 +6129,7 @@ exports[`Settings should submit using default props 1`] = ` Personal Details
-
-
- -
-
Profile avatar TE -
- +
@@ -7444,7 +7398,7 @@ exports[`Settings should update profile 1`] = ` Personal Details
-
-
- -
-
Profile avatar TE -
- +