fix: add rosette icon to initial animation + solve #19

app/components/BlossomLabs.tsx → app/components/AppLayout/BottomBar/BlossomLabsLogo.tsx

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 import blossomLabsLogo from "~/assets/blossom-logo.svg";
-import blossomLabsIcon from "~/assets/blossom-icon.svg";
 
 export const BlossomLabsLogo = () => (
   <OutterWrapper>
@@ -18,17 +17,6 @@ export const BlossomLabsLogo = () => (
   </OutterWrapper>
 );
 
-export const BlossomLabsIcon = () => (
-  <img
-    style={{
-      width: "48px",
-      height: "48px",
-    }}
-    src={blossomLabsIcon}
-    alt=""
-  />
-);
-
 const OutterWrapper = styled.span`
   display: inline-block;
   vertical-align: middle;

app/components/AppLayout/BottomBar/index.tsx

@@ -2,9 +2,8 @@ import { GU, useTheme, useViewport } from "@blossom-labs/rosette-ui";
 import { a } from "@react-spring/web";
 import styled from "styled-components";
 import { useAppReady } from "~/providers/AppReady";
-import { BlossomLabsLogo } from "~/components/BlossomLabs";
+import { BlossomLabsLogo } from "./BlossomLabsLogo";
 
-const OPACITY = 0.8;
 export const BottomBar = () => {
   const { below } = useViewport();
   const theme = useTheme();
@@ -20,8 +19,9 @@ export const BottomBar = () => {
               style={{ opacity: progress, transform: bottomBarTransform }}
               $compactMode={compactMode}
             >
-              <div style={{ color: theme.surfaceContent, opacity: OPACITY }}>
-                powered by <BlossomLabsLogo />
+              <div style={{ color: theme.surfaceContent }}>
+                <span style={{ opacity: 0.4 }}>powered by</span>{" "}
+                <BlossomLabsLogo />
               </div>
             </AnimatedContainer>
           )
@@ -32,13 +32,12 @@ export const BottomBar = () => {
 
 const Container = styled.div`
   position: relative;
-  height: ${7 * GU}px;
+  height: ${9 * GU}px;
 `;
 
 const AnimatedContainer = styled(a.div)<{ $compactMode: boolean }>`
-  position: absolute;
-  inset: 0;
   display: flex;
+  z-index: 1;
   padding: 0 ${7 * GU}px;
 
   justify-content: ${({ $compactMode }) =>

app/components/AppLayout/index.tsx

@@ -1,13 +1,11 @@
 import { useViewport } from "@blossom-labs/rosette-ui";
-import styled from "styled-components";
 import type { ReactNode } from "react";
-
-import { BottomBar } from "./BottomBar";
-import { TopBar } from "./TopBar";
-
+import styled from "styled-components";
 import background from "~/assets/background.png";
 import tablet from "~/assets/tablet.png";
 import mobile from "~/assets/mobile.png";
+import { BottomBar } from "./BottomBar";
+import { TopBar } from "./TopBar";
 
 type AppLayoutProps = {
   children: ReactNode;
@@ -42,13 +40,16 @@ export const AppLayout = ({
   );
 };
 
-const Container = styled.div<{ compactMode: boolean; tabletMode: boolean }>`
+const Container = styled.div<{
+  compactMode: boolean;
+  tabletMode: boolean;
+}>`
   position: relative;
+  overflow: auto;
   height: 100vh;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  overflow: auto;
   background-size: cover;
   background-image: url(${({ compactMode, tabletMode }) =>
     compactMode ? mobile : tabletMode ? tablet : background});

app/providers/AppReady.tsx

@@ -1,11 +1,11 @@
 import { springs } from "@blossom-labs/rosette-ui";
 import styled from "styled-components";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import type { ReactNode } from "react";
-import type { TransitionFn } from "@react-spring/web";
 import { a, useTransition } from "@react-spring/web";
+import type { TransitionFn } from "@react-spring/web";
 
-import { BlossomLabsIcon } from "~/components/BlossomLabs";
+import rosetteIcon from "~/assets/rosette-icon.png";
 
 export type AppReadyTransition = TransitionFn<
   boolean,
@@ -33,6 +33,7 @@ export function AppReady({ children }: AppReadyProps) {
 
   const appReadyTransition = useTransition(ready, {
     config: springs.lazy,
+    delay: 100,
     from: {
       progress: 0,
       topBarTransform: "translate3d(0, -100%, 0)",
@@ -54,40 +55,34 @@ export function AppReady({ children }: AppReadyProps) {
   });
 
   const splashTransition = useTransition(!ready, {
-    config: springs.swift,
+    config: springs.lazy,
     from: {
-      opacity: 1,
-      logoTransform: " rotate3d(0, 0, 1, 0deg)",
+      opacity: 0,
+      transform: " scale(0)",
     },
     enter: {
       opacity: 1,
-      logoTransform: "rotate3d(0, 0, 1, 360deg)",
+      transform: "scale(1)",
     },
     leave: {
       opacity: 0,
-      // logoTransform: "rotate3d(0, 0, 1, 360deg)",
+      transform: "scale(4)",
     },
+    onRest: () => setReady(true),
   });
 
-  useEffect(() => {
-    const id = setTimeout(() => setReady(true), 400);
-    return () => clearTimeout(id);
-  }, []);
-
   return (
     <AppReadyContext.Provider value={{ appReady: ready, appReadyTransition }}>
       {splashTransition(
-        ({ opacity, logoTransform }, loading) =>
+        (styles, loading) =>
           loading && (
-            <AnimatedSplashContainer
-              style={{ opacity, transform: logoTransform }}
-            >
-              <a.div
-                style={{
-                  height: "48px",
-                }}
-              >
-                <BlossomLabsIcon />
+            <AnimatedSplashContainer style={styles}>
+              <a.div>
+                <img
+                  style={{ width: "60px", height: "60px" }}
+                  src={rosetteIcon}
+                  alt=""
+                />
               </a.div>
             </AnimatedSplashContainer>
           )
@@ -103,7 +98,6 @@ export function useAppReady() {
 
 const AnimatedSplashContainer = styled(a.div)`
   position: fixed;
-  transition-duration: 500ms;
   z-index: 9;
   inset: 0;
   display: grid;