feat(components): add a generic Flip component

The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.

1 files changed, 3 insertions, 4 deletions

diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 53634d8..b7625aa 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -54,13 +54,12 @@ const SettingsWithRef: ForwardRefRenderFunction<
         value="open"
       />
       <FlippingLabel
-        aria-label={label}
         className={styles.label}
         htmlFor="settings-button"
+        icon={<Icon aria-hidden={true} shape="cog" size="lg" />}
         isActive={isActive}
-      >
-        <Icon aria-hidden={true} shape="cog" size="lg" />
-      </FlippingLabel>
+        label={label}
+      />
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
         className={`${styles.modal} ${className}`}