added footer

src/components/three/Viewer.js

@@ -1,4 +1,4 @@
-import { softShadows, useProgress } from "@react-three/drei"
+import { softShadows } from "@react-three/drei"
 import { Canvas, invalidate } from "@react-three/fiber"
 import { Suspense, useEffect, useState } from "react"
 import { useSpring } from "react-spring/three"
@@ -33,22 +33,12 @@ const Viewer = () => {
         decrementDecalSize,
         incrementDecalSize,
         setGl,
-        setLoadingFinished,
         set,
         backgroundImage,
     } = useStore()
     const { active, mode } = useRecorderStore()
-    const progress = useProgress()
-
-    // Set load progress
-    useEffect(() => {
-        if (progress.progress === 100) {
-            setTimeout(() => {
-                setLoadingFinished(true)
-            }, 500)
-        }
-    }, [progress])
 
+    useEffect(() => console.log(decalPath), [decalPath])
     // KEYDOWN
     useEffect(() => {
         function handlekeydownEvent(e) {

src/components/three/canvasBackground/CanvasBackground.js

@@ -1,16 +1,8 @@
 import styles from "./canvasBackground.module.css"
-import useStore from "../../../states/modelState"
 const CanvasBackground = ({ children }) => {
-    const { loadingFinished } = useStore()
     return (
         <div className={styles.white_backgdrop}>
             <div className={styles.inner}>{children}</div>
-            {!loadingFinished && (
-                <img
-                    className={styles.placeholder}
-                    src="/images/placeholder.jpg"
-                />
-            )}
         </div>
     )
 }

src/pages/studio/Studio.js

@@ -15,11 +15,11 @@ export default function Studio() {
     return (
         <>
             <Navbar>
-                <Button
+                {/* <Button
                     text="Donate"
                     type="filled"
                     style={{ width: "150px" }}
-                />
+                /> */}
             </Navbar>
             <div className={styles.wrapper}>
                 <div className={styles.main}>
@@ -31,6 +31,15 @@ export default function Studio() {
                     <ControlPanel />
                 </div>
             </div>
+            <footer className={styles.footer}>
+                <img
+                    src="/fotura_logo.jpg"
+                    alt="Fotura Logo"
+                />
+                <div style={{ marginLeft: "10px" }}>
+                    Copyright © 2021 Fotura, Inc. All rights reserved.
+                </div>
+            </footer>
         </>
     )
 }

src/pages/studio/studio.module.css

@@ -12,3 +12,26 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     height: fit-content;
 }
+.footer {
+    margin-top: 50px;
+    width: 100%;
+    height: 100px;
+    border-top: 1px solid #eaeaea;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #8c8c8c;
+    font-size: 0.78em;
+}
+
+.footer a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+}
+
+.footer > img {
+    width: 25px;
+    height: 25px;
+}

src/states/modelState.js

@@ -21,7 +21,6 @@ const useStore = create((set) => ({
     modelColor: "#ffffff",
     props: null,
     modelRotation: 0,
-    loadingFinished: false,
     set: "bg_color",
     text: "TEXT",
     setAnimation: (animation) => set((state) => (state.animation = animation)),
@@ -72,8 +71,6 @@ const useStore = create((set) => ({
     setProps: (name) => set((state) => (state.props = name)),
     setModelRotation: (rotation) =>
         set((state) => (state.modelRotation = rotation)),
-    setLoadingFinished: (bool) =>
-        set((state) => (state.loadingFinished = bool)),
     setSet: (componentName) => set((state) => (state.set = componentName)),
     setText: (text) => set((state) => (state.text = `${text}`)),
 }))