From f7936fa3fc2ad5763699ab55876d338226ae14f9 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Fri, 18 Sep 2020 16:30:50 +0200
Subject: [PATCH] Fix avatar change button

---
 assets/images/photo-icon.svg                  |  8 +----
 .../StaffProperties/StaffProperties.tsx       | 29 ++++++++++++-------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/assets/images/photo-icon.svg b/assets/images/photo-icon.svg
index 57ee59835..d9662bedc 100644
--- a/assets/images/photo-icon.svg
+++ b/assets/images/photo-icon.svg
@@ -1,9 +1,3 @@
 <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.22165 29.7949H0.58465C0.463483 29.7757 0.339087 29.7544 0.241002 29.6832C0.093454 29.576 0.0294675 29.3967 0 29.2102V0.584649C0.03929 0.33635 0.171052 0.104259 0.403986 0.0286256C0.461938 0.00975233 0.524452 0.00954185 0.58465 0H29.2105C29.2702 0.00954185 29.3305 0.0190837 29.3908 0.0286256C29.5592 0.114292 29.7101 0.230548 29.7662 0.403985C29.7851 0.461938 29.7851 0.524451 29.795 0.584649V6.21595L35.4394 6.20683C35.4997 6.21631 35.5601 6.22571 35.6204 6.23518C35.7888 6.32077 35.9397 6.43703 35.9965 6.61061C36.0154 6.6687 36.0154 6.73121 36.0253 6.79148V35.4147C35.986 35.6629 35.8541 35.8951 35.6211 35.9707C35.5629 35.9896 35.5004 35.9898 35.4401 35.9994L6.80637 36C6.68513 35.9808 6.56074 35.9597 6.46265 35.8884C6.3151 35.7812 6.25119 35.6018 6.22165 35.4154V29.7949ZM34.8557 30.2975H7.39102V34.8307L34.8557 34.8301V30.2975ZM28.6633 15.4452L23.063 20.8494L31.1722 28.9086C31.2424 29.0051 31.2852 29.0454 31.3133 29.1281H34.8557V21.229L28.6633 15.4452ZM8.27743 29.0783C8.28087 29.0948 8.28353 29.1114 8.28557 29.1281H29.7339L19.241 18.6996L8.27743 29.0783ZM28.6254 6.21785V1.1693H1.1693V28.6256H6.22165V6.83772C6.2408 6.71669 6.26199 6.59244 6.33307 6.49442C6.44006 6.34694 6.61918 6.28282 6.80539 6.25307L28.6254 6.21785ZM34.8557 19.6289V7.37711C25.7011 7.39192 16.5459 7.40665 7.39102 7.42146V28.3073L18.8489 17.4606C18.996 17.3592 18.9973 17.3585 19.1681 17.3064C19.228 17.3072 19.2878 17.3079 19.3475 17.3086C19.5171 17.3648 19.5185 17.3655 19.663 17.4705L22.233 20.0249L28.2507 14.2183C28.4444 14.0476 28.4507 14.0362 28.7306 14.059C28.9264 14.0927 28.9629 14.1322 29.0562 14.2117L34.8557 19.6289ZM12.9322 9.93019C14.3966 9.94408 15.7827 11.0726 16.0626 12.5321C16.2614 13.5688 15.9096 14.6949 15.1526 15.4341C14.2682 16.2976 12.862 16.5852 11.6988 16.1097C10.6719 15.6898 9.89786 14.7049 9.73691 13.6065C9.53829 12.2509 10.3114 10.8116 11.5556 10.2303C11.9847 10.0299 12.4574 9.92865 12.9322 9.93019ZM12.8982 11.0995C11.9719 11.1083 11.1014 11.8117 10.9137 12.7275C10.653 14 11.8357 15.4123 13.2853 15.1437C14.1119 14.9905 14.8064 14.274 14.929 13.437C15.0953 12.3025 14.1666 11.1191 12.938 11.0996C12.9247 11.0995 12.9115 11.0995 12.8982 11.0995Z" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="0" y1="0" x2="39.5989" y2="41.1706" gradientUnits="userSpaceOnUse">
-<stop stop-color="#13BEBB"/>
-<stop offset="1" stop-color="#3EE7CD"/>
-</linearGradient>
-</defs>
+<path d="M6.22165 29.7949H0.58465C0.463483 29.7757 0.339087 29.7544 0.241002 29.6832C0.093454 29.576 0.0294675 29.3967 0 29.2102V0.584649C0.03929 0.33635 0.171052 0.104259 0.403986 0.0286256C0.461938 0.00975233 0.524452 0.00954185 0.58465 0H29.2105C29.2702 0.00954185 29.3305 0.0190837 29.3908 0.0286256C29.5592 0.114292 29.7101 0.230548 29.7662 0.403985C29.7851 0.461938 29.7851 0.524451 29.795 0.584649V6.21595L35.4394 6.20683C35.4997 6.21631 35.5601 6.22571 35.6204 6.23518C35.7888 6.32077 35.9397 6.43703 35.9965 6.61061C36.0154 6.6687 36.0154 6.73121 36.0253 6.79148V35.4147C35.986 35.6629 35.8541 35.8951 35.6211 35.9707C35.5629 35.9896 35.5004 35.9898 35.4401 35.9994L6.80637 36C6.68513 35.9808 6.56074 35.9597 6.46265 35.8884C6.3151 35.7812 6.25119 35.6018 6.22165 35.4154V29.7949ZM34.8557 30.2975H7.39102V34.8307L34.8557 34.8301V30.2975ZM28.6633 15.4452L23.063 20.8494L31.1722 28.9086C31.2424 29.0051 31.2852 29.0454 31.3133 29.1281H34.8557V21.229L28.6633 15.4452ZM8.27743 29.0783C8.28087 29.0948 8.28353 29.1114 8.28557 29.1281H29.7339L19.241 18.6996L8.27743 29.0783ZM28.6254 6.21785V1.1693H1.1693V28.6256H6.22165V6.83772C6.2408 6.71669 6.26199 6.59244 6.33307 6.49442C6.44006 6.34694 6.61918 6.28282 6.80539 6.25307L28.6254 6.21785ZM34.8557 19.6289V7.37711C25.7011 7.39192 16.5459 7.40665 7.39102 7.42146V28.3073L18.8489 17.4606C18.996 17.3592 18.9973 17.3585 19.1681 17.3064C19.228 17.3072 19.2878 17.3079 19.3475 17.3086C19.5171 17.3648 19.5185 17.3655 19.663 17.4705L22.233 20.0249L28.2507 14.2183C28.4444 14.0476 28.4507 14.0362 28.7306 14.059C28.9264 14.0927 28.9629 14.1322 29.0562 14.2117L34.8557 19.6289ZM12.9322 9.93019C14.3966 9.94408 15.7827 11.0726 16.0626 12.5321C16.2614 13.5688 15.9096 14.6949 15.1526 15.4341C14.2682 16.2976 12.862 16.5852 11.6988 16.1097C10.6719 15.6898 9.89786 14.7049 9.73691 13.6065C9.53829 12.2509 10.3114 10.8116 11.5556 10.2303C11.9847 10.0299 12.4574 9.92865 12.9322 9.93019ZM12.8982 11.0995C11.9719 11.1083 11.1014 11.8117 10.9137 12.7275C10.653 14 11.8357 15.4123 13.2853 15.1437C14.1119 14.9905 14.8064 14.274 14.929 13.437C15.0953 12.3025 14.1666 11.1191 12.938 11.0996C12.9247 11.0995 12.9115 11.0995 12.8982 11.0995Z" fill="white"/>
 </svg>
diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx
index 1a2b10f63..3cdc2f628 100644
--- a/src/staff/components/StaffProperties/StaffProperties.tsx
+++ b/src/staff/components/StaffProperties/StaffProperties.tsx
@@ -34,6 +34,14 @@ const useStyles = makeStyles(
       position: "relative",
       width: 120
     },
+    avatarActionText: {
+      "&:hover": {
+        textDecoration: "underline"
+      },
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: 12
+    },
     avatarDefault: {
       "& div": {
         color: "#fff",
@@ -47,17 +55,10 @@ const useStyles = makeStyles(
       width: 120
     },
     avatarHover: {
-      "& p": {
-        "&:hover": {
-          textDecoration: "underline"
-        },
-        color: theme.palette.primary.main,
-        cursor: "pointer",
-        fontSize: 12,
-        fontWeight: 500
-      },
       background: "#00000080",
       borderRadius: "100%",
+      fontSize: 12,
+      fontWeight: 500,
       height: 120,
       opacity: 0,
       padding: theme.spacing(2.5, 0),
@@ -155,13 +156,19 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
               {canEditAvatar && (
                 <div className={classes.avatarHover}>
                   <SVG src={photoIcon} />
-                  <Typography onClick={clickImgInput}>
+                  <Typography
+                    onClick={clickImgInput}
+                    className={classes.avatarActionText}
+                  >
                     <FormattedMessage
                       defaultMessage="Change photo"
                       description="button"
                     />
                   </Typography>
-                  <Typography onClick={onImageDelete}>
+                  <Typography
+                    onClick={onImageDelete}
+                    className={classes.avatarActionText}
+                  >
                     <FormattedMessage
                       defaultMessage="Delete photo"
                       description="button"