fix: adjust icon in AddRecipient (#2732)

ArkEcosystem · Aug 26, 2020 · a8befff · a8befff
1 parent daa439b
commit a8befff
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/.svgo.yml b/.svgo.yml
@@ -2,3 +2,4 @@ plugins:
     - removeViewBox: false
     - convertStyleToAttrs: true
     - cleanupIDs: false
+    - removeUnknownsAndDefaults: false
diff --git a/src/app/assets/svg/questionmark.svg b/src/app/assets/svg/questionmark.svg
diff --git a/src/domains/transaction/components/AddRecipient/AddRecipient.styles.ts b/src/domains/transaction/components/AddRecipient/AddRecipient.styles.ts
@@ -16,6 +16,20 @@ const defaultStyle = `
 	}
 `;
 
+const questionMarkStyle = `
+	& {
+		.questionmark {
+			svg {
+				fill: var(--theme-color-primary-100);
+			}
+			&:hover svg {
+				fill: var(--theme-color-primary-600);
+			}
+		}
+	}
+`;
+
 export const AddRecipientWrapper = styled.div`
 	${defaultStyle}
+	${questionMarkStyle}
 `;
diff --git a/src/domains/transaction/components/AddRecipient/AddRecipient.tsx b/src/domains/transaction/components/AddRecipient/AddRecipient.tsx
@@ -25,7 +25,7 @@ const ToggleButtons = ({ isSingle, onChange }: ToggleButtonProps) => {
 				</div>
 				<div>
 					<Tippy content={t("TRANSACTION.RECIPIENTS_HELPTEXT", { count: 64 })}>
-						<div className="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500">
+						<div className="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark">
 							<Icon name="QuestionMark" width={20} height={20} />
 						</div>
 					</Tippy>

diff --git a/src/domains/transaction/components/AddRecipient/__snapshots__/AddRecipient.test.tsx.snap b/src/domains/transaction/components/AddRecipient/__snapshots__/AddRecipient.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AddRecipient should render 1`] = `
 <div>
   <div
-    class="sc-fzqBZW fdSwjK"
+    class="sc-fzqBZW deUroq"
   >
     <div
       class="text-theme-neutral-dark hover:text-theme-primary"
@@ -18,7 +18,7 @@ exports[`AddRecipient should render 1`] = `
         </div>
         <div>
           <div
-            class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+            class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
           >
             <div
               class="sc-AxiKw dklFyP"
@@ -164,7 +164,7 @@ exports[`AddRecipient should render 1`] = `
 exports[`AddRecipient should render with multiple recipients tab 1`] = `
 <div>
   <div
-    class="sc-fzqBZW fdSwjK"
+    class="sc-fzqBZW deUroq"
   >
     <div
       class="text-theme-neutral-dark hover:text-theme-primary"
@@ -179,7 +179,7 @@ exports[`AddRecipient should render with multiple recipients tab 1`] = `
         </div>
         <div>
           <div
-            class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+            class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
           >
             <div
               class="sc-AxiKw dklFyP"
@@ -325,7 +325,7 @@ exports[`AddRecipient should render with multiple recipients tab 1`] = `
 exports[`AddRecipient should render with single recipient data 1`] = `
 <div>
   <div
-    class="sc-fzqBZW fdSwjK"
+    class="sc-fzqBZW deUroq"
   >
     <div
       class="text-theme-neutral-dark hover:text-theme-primary"
@@ -340,7 +340,7 @@ exports[`AddRecipient should render with single recipient data 1`] = `
         </div>
         <div>
           <div
-            class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+            class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
           >
             <div
               class="sc-AxiKw dklFyP"
@@ -497,7 +497,7 @@ exports[`AddRecipient should render with single recipient data 1`] = `
 exports[`AddRecipient should render without recipients 1`] = `
 <div>
   <div
-    class="sc-fzqBZW fdSwjK"
+    class="sc-fzqBZW deUroq"
   >
     <div
       class="text-theme-neutral-dark hover:text-theme-primary"
@@ -512,7 +512,7 @@ exports[`AddRecipient should render without recipients 1`] = `
         </div>
         <div>
           <div
-            class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+            class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
           >
             <div
               class="sc-AxiKw dklFyP"
@@ -658,7 +658,7 @@ exports[`AddRecipient should render without recipients 1`] = `
 exports[`AddRecipient should set available amount 1`] = `
 <div>
   <div
-    class="sc-fzqBZW fdSwjK"
+    class="sc-fzqBZW deUroq"
   >
     <div
       class="text-theme-neutral-dark hover:text-theme-primary"
@@ -673,7 +673,7 @@ exports[`AddRecipient should set available amount 1`] = `
         </div>
         <div>
           <div
-            class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+            class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
           >
             <div
               class="sc-AxiKw dklFyP"

diff --git a/src/domains/transaction/pages/TransactionSend/__snapshots__/TransactionSend.test.tsx.snap b/src/domains/transaction/pages/TransactionSend/__snapshots__/TransactionSend.test.tsx.snap
@@ -541,7 +541,7 @@ exports[`Transaction Send should render 1st step 1`] = `
           data-testid="recipient-address"
         >
           <div
-            class="sc-fzqARJ dSnDuU"
+            class="sc-fzqARJ hcuvCU"
           >
             <div
               class="text-theme-neutral-dark hover:text-theme-primary"
@@ -556,7 +556,7 @@ exports[`Transaction Send should render 1st step 1`] = `
                 </div>
                 <div>
                   <div
-                    class="rounded-full cursor-pointer bg-theme-primary-100 text-theme-primary-500"
+                    class="rounded-full cursor-pointer text-theme-primary-600 hover:text-theme-primary-100 questionmark"
                   >
                     <div
                       class="sc-AxhUy hSYVGy"