refactor(components): extract FlippingLogo from Branding component

2 files changed, 3 insertions, 33 deletions

diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
index bacf381..6f67c8b 100644
--- a/src/components/molecules/layout/branding.module.scss
+++ b/src/components/molecules/layout/branding.module.scss
@@ -54,15 +54,7 @@
 
   .logo {
     grid-row: span 2;
-    margin-bottom: var(--spacing-sm);
-    border-radius: 50%;
     animation: flip-logo 9s ease-in 0s 1;
-
-    @include mix.media("screen") {
-      @include mix.dimensions("2xs") {
-        margin-bottom: 0;
-      }
-    }
   }
 
   .title {
@@ -106,23 +98,6 @@
   }
 }
 
-.flip {
-  width: var(--logo-size);
-  height: var(--logo-size);
-  border: fun.convert-px(2) solid var(--color-primary-dark);
-  border-radius: 50%;
-  box-shadow:
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-      var(--color-shadow-light),
-    fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-      var(--color-shadow-light);
-
-  > * {
-    padding: fun.convert-px(2);
-    border-radius: 50%;
-  }
-}
-
 @keyframes flip-logo {
   0%,
   90% {
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index c3d3b7c..9f8e6ce 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,6 +1,7 @@
 import { type FC, useRef, type ReactNode } from 'react';
 import { useStyles } from '../../../utils/hooks';
-import { Flip, FlipSide, Heading, Link } from '../../atoms';
+import { Heading, Link } from '../../atoms';
+import { FlippingLogo } from '../images';
 import styles from './branding.module.scss';
 
 export type BrandingProps = {
@@ -42,7 +43,6 @@ export const Branding: FC<BrandingProps> = ({
   photo,
   title,
   withLink = false,
-  ...props
 }) => {
   const baselineRef = useRef<HTMLParagraphElement>(null);
   const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
@@ -61,12 +61,7 @@ export const Branding: FC<BrandingProps> = ({
 
   return (
     <div className={styles.wrapper}>
-      <Flip {...props} className={styles.logo}>
-        <FlipSide className={styles.flip}>{photo}</FlipSide>
-        <FlipSide className={styles.flip} isBack>
-          {logo}
-        </FlipSide>
-      </Flip>
+      <FlippingLogo back={logo} className={styles.logo} front={photo} />
       <Heading
         className={styles.title}
         isFake={!isHome}