Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Commit

Permalink
refactor: change avatar button color on hover (#2701)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dated
dated committed Aug 21, 2020
1 parent 9452d95 commit a9ef31c
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 107 deletions.
18 changes: 10 additions & 8 deletions src/domains/profile/pages/CreateProfile/CreateProfile.tsx
View file
Expand Up @@ -48,14 +48,16 @@ export const CreateProfile = () => {
content: (
<div className="flex flex-row mt-2 mb-8">
<div className="flex items-center justify-center w-24 h-24 mr-6 border-2 border-dashed rounded border-theme-neutral-300">
<button
type="button"
className="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
onClick={handleChangeAvatar}
data-testid="CreateProfile__upload-button"
>
<Icon name="Upload" />
</button>
<div className="w-20 h-20 overflow-hidden rounded-full">
<Button
className="w-20 h-20"
variant="plain"
onClick={handleChangeAvatar}
data-testid="CreateProfile__upload-button"
>
<Icon name="Upload" />
</Button>
</div>
</div>
{avatarImage && (
<div className="relative w-24 h-24 rounded bg-theme-neutral-contrast">
Expand Down
124 changes: 72 additions & 52 deletions src/domains/profile/pages/CreateProfile/__snapshots__/CreateProfile.test.tsx.snap
View file
Expand Up @@ -118,21 +118,26 @@ exports[`CreateProfile should not upload avatar image 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border-2 border-dashed rounded border-theme-neutral-300"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="CreateProfile__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
<button
class="sc-AxjAm ddJBbC w-20 h-20"
color="primary"
data-testid="CreateProfile__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -510,21 +515,26 @@ exports[`CreateProfile should render 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border-2 border-dashed rounded border-theme-neutral-300"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="CreateProfile__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
<button
class="sc-AxjAm ddJBbC w-20 h-20"
color="primary"
data-testid="CreateProfile__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -902,21 +912,26 @@ exports[`CreateProfile should store profile 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border-2 border-dashed rounded border-theme-neutral-300"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="CreateProfile__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
<button
class="sc-AxjAm ddJBbC w-20 h-20"
color="primary"
data-testid="CreateProfile__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
<div
class="relative w-24 h-24 rounded bg-theme-neutral-contrast"
Expand Down Expand Up @@ -1318,21 +1333,26 @@ exports[`CreateProfile should upload and remove avatar image 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border-2 border-dashed rounded border-theme-neutral-300"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="CreateProfile__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
<button
class="sc-AxjAm ddJBbC w-20 h-20"
color="primary"
data-testid="CreateProfile__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxhCb fxrKLH"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down
93 changes: 54 additions & 39 deletions src/domains/setting/pages/Settings/__snapshots__/Settings.test.tsx.snap
View file
Expand Up @@ -1043,21 +1043,26 @@ exports[`Settings should render 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border border-dashed rounded border-theme-neutral-200"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="General-settings__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
<button
class="sc-AxhCb BegvR w-20 h-20"
color="primary"
data-testid="General-settings__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3716,21 +3721,26 @@ exports[`Settings should submit using default props 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border border-dashed rounded border-theme-neutral-200"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="General-settings__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
<button
class="sc-AxhCb BegvR w-20 h-20"
color="primary"
data-testid="General-settings__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -5000,21 +5010,26 @@ exports[`Settings should update profile 1`] = `
<div
class="flex items-center justify-center w-24 h-24 mr-6 border border-dashed rounded border-theme-neutral-200"
>
<button
class="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
data-testid="General-settings__upload-button"
type="button"
<div
class="w-20 h-20 overflow-hidden rounded-full"
>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
<button
class="sc-AxhCb BegvR w-20 h-20"
color="primary"
data-testid="General-settings__upload-button"
type="button"
>
<svg>
upload.svg
</svg>
</div>
</button>
<div
class="sc-AxirZ iQaTP"
height="1em"
width="1em"
>
<svg>
upload.svg
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
Expand Down
18 changes: 10 additions & 8 deletions src/domains/setting/pages/Settings/available-settings/General.tsx
View file
Expand Up @@ -70,14 +70,16 @@ export const General = ({ env, formConfig, onSubmit }: GeneralProps) => {
content: (
<div className="flex flex-row mt-2">
<div className="flex items-center justify-center w-24 h-24 mr-6 border border-dashed rounded border-theme-neutral-200">
<button
type="button"
className="flex items-center justify-center w-20 h-20 rounded-full bg-theme-primary-contrast"
onClick={handleChangeAvatar}
data-testid="General-settings__upload-button"
>
<Icon name="Upload" />
</button>
<div className="w-20 h-20 overflow-hidden rounded-full">
<Button
className="w-20 h-20"
variant="plain"
onClick={handleChangeAvatar}
data-testid="General-settings__upload-button"
>
<Icon name="Upload" />
</Button>
</div>
</div>
{avatarImage && (
<div className="relative w-24 h-24 rounded bg-theme-neutral-contrast">
Expand Down

0 comments on commit a9ef31c

Please sign in to comment.