From f11a906420975e833f278a08470d8f9783c76f73 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 9 Oct 2023 14:33:29 +0200
Subject: refactor(components): extract FlippingLogo from Branding component

---
 .../molecules/layout/branding.module.scss          | 25 ----------------------
 src/components/molecules/layout/branding.tsx       | 11 +++-------
 2 files changed, 3 insertions(+), 33 deletions(-)

(limited to 'src/components/molecules/layout')

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}
-- 
cgit v1.2.3