feat: swipe icon color transition

200ok-ch · Oct 26, 2019 · c0d7910 · c0d7910
1 parent 41d4a8f
commit c0d7910
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/src/components/OrgFile/__snapshots__/OrgFile.integration.test.js.snap b/src/components/OrgFile/__snapshots__/OrgFile.integration.test.js.snap
@@ -65,7 +65,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -74,7 +74,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -111,7 +111,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -120,7 +120,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -157,7 +157,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -166,7 +166,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -215,7 +215,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-check swipe-action-container__icon swipe-action-container__icon--left"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div
@@ -224,7 +224,7 @@ exports[`Render all views Renders everything starting from an Org file renders a
           >
             <i
               class="fas fa-times swipe-action-container__icon swipe-action-container__icon--right"
-              style="display: none;"
+              style="display: none; color: rgb(0, 0, 0);"
             />
           </div>
           <div

diff --git a/src/components/OrgFile/components/Header/index.js b/src/components/OrgFile/components/Header/index.js
@@ -297,9 +297,12 @@ class Header extends PureComponent {
           const isRightActionActivated =
             -1 * swipedDistance >= this.SWIPE_ACTION_ACTIVATION_DISTANCE;
 
-          const disabledColor = rgbaObject(211, 211, 211, 1);
-          const leftActivatedColor = rgbaObject(0, 128, 0, 1);
-          const rightActivatedColor = rgbaObject(255, 0, 0, 1);
+          const disabledBackgroundColor = rgbaObject(211, 211, 211, 1);
+          const leftActivatedBackgroundColor = rgbaObject(0, 128, 0, 1);
+          const rightActivatedBackgroundColor = rgbaObject(255, 0, 0, 1);
+
+          const disabledIconColor = rgbaObject(0, 0, 0, 1);
+          const activatedIconColor = rgbaObject(255, 255, 255, 1);
 
           const leftSwipeActionContainerStyle = {
             width: interpolatedStyle.marginLeft,
@@ -310,13 +313,6 @@ class Header extends PureComponent {
             backgroundColorFactor: spring(isRightActionActivated ? 1 : 0, { stiffness: 300 }),
           };
 
-          const leftIconStyle = {
-            display: swipedDistance > 30 ? '' : 'none',
-          };
-          const rightIconStyle = {
-            display: -1 * swipedDistance > 30 ? '' : 'none',
-          };
-
           const { heightFactor, ...headerStyle } = interpolatedStyle;
 
           if (isPlayingRemoveAnimation) {
@@ -344,8 +340,19 @@ class Header extends PureComponent {
                     width: leftInterpolatedStyle.width,
                     backgroundColor: rgbaString(
                       interpolateColors(
-                        disabledColor,
-                        leftActivatedColor,
+                        disabledBackgroundColor,
+                        leftActivatedBackgroundColor,
+                        leftInterpolatedStyle.backgroundColorFactor
+                      )
+                    ),
+                  };
+
+                  const leftIconStyle = {
+                    display: swipedDistance > 30 ? '' : 'none',
+                    color: rgbaString(
+                      interpolateColors(
+                        disabledIconColor,
+                        activatedIconColor,
                         leftInterpolatedStyle.backgroundColorFactor
                       )
                     ),
@@ -367,8 +374,19 @@ class Header extends PureComponent {
                     width: rightInterpolatedStyle.width,
                     backgroundColor: rgbaString(
                       interpolateColors(
-                        disabledColor,
-                        rightActivatedColor,
+                        disabledBackgroundColor,
+                        rightActivatedBackgroundColor,
+                        rightInterpolatedStyle.backgroundColorFactor
+                      )
+                    ),
+                  };
+
+                  const rightIconStyle = {
+                    display: -1 * swipedDistance > 30 ? '' : 'none',
+                    color: rgbaString(
+                      interpolateColors(
+                        disabledIconColor,
+                        activatedIconColor,
                         rightInterpolatedStyle.backgroundColorFactor
                       )
                     ),