Editor updates

firecmsco · May 8, 2024 · 00da85e · 00da85e
1 parent cafe728
commit 00da85e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Neat gradients
 
-Create awesome 3d gradients with this library based on three.js.
+Create awesome 3D gradients with this library based on three.js.
 
 Check the demo and gradients editor to find your perfect config here:
 [https://neat.firecms.co/](https://neat.firecms.co/)
@@ -10,7 +10,7 @@ projects,
 commercial or not. You can also modify it and redistribute it, but you must keep
 the license and the credits.
 
-If you want to remove the Camberi link, you can reach us at hello@firecms.co
+If you want to remove the NEAT link, you can reach us at hello@firecms.co
 
 ### Installation:
 

diff --git a/editor/src/App.tsx b/editor/src/App.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material';
 import NeatEditor from "./components/NeatEditor";
-import { yellow, blue } from '@mui/material/colors';
+import { yellow, blue, grey } from '@mui/material/colors';
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { Analytics } from "@firebase/analytics";
@@ -42,7 +42,7 @@ function App() {
                 main: yellow[700],
             },
             secondary: {
-                main: yellow[500],
+                main: grey[900],
             },
         },
     });

diff --git a/editor/src/components/NeatEditor.tsx b/editor/src/components/NeatEditor.tsx
@@ -4,11 +4,6 @@ import { NeatColor, NeatConfig, NeatGradient } from "@firecms/neat";
 
 import "@fontsource/sofia-sans";
 
-// import '@fontsource/sofia/300.css';
-// import '@fontsource/sofia/400.css';
-// import '@fontsource/sofia/500.css';
-// import '@fontsource/sofia/700.css';
-// import '@fontsource/sofia/900.css';
 import { Box, Button, FormControlLabel, Slider, Tooltip, Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@@ -267,6 +262,7 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
 
                         <Typography variant={"caption"}>PRESET</Typography>
                         <FilledSelect value={selectedPreset}
+                                      variant={"filled"}
                                       label={"Preset"}
                                       renderValue={(preset: string) => {
                                           return preset.toUpperCase();
@@ -806,7 +802,7 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                                 onClick={handleDrawerOpen}>EDIT THIS GRADIENT</Button>
 
                         <Box sx={{
-                            width: "380px",
+                            width: "540px",
                             p: 2,
                             maxWidth: "95vw",
                             textAlign: "center",
@@ -815,7 +811,7 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                             <Box component={"p"}
                                  sx={{
                                      mt: 4,
-                                     fontSize: "20px"
+                                     fontSize: "16px"
                                  }}>
                                 Neat is a free tool that generates beautiful
                                 gradient
@@ -827,18 +823,27 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                             <Box component={"p"}
                                  sx={{
                                      mt: 4,
-                                     fontSize: "20px"
+                                     fontSize: "16px"
                                  }}>
                                 Install the package using npm or yarn, following the instructions in the <a
                                 target={"_blank"}
                                 href="https://github.com/FireCMSco/neat">GitHub page</a> and please leave a star ⭐.
                             </Box>
 
-                            <Button variant="outlined"
-                                    component={"a"}
-                                    target={"_blank"}
-                                    href="https://github.com/FireCMSco/neat"
-                                    sx={{ mt: 3 }}>GET STARTED</Button>
+                            <Button
+                                variant={"contained"}
+                                component={"a"}
+                                target={"_blank"}
+                                color={"secondary"}
+                                size={"large"}
+                                href="https://github.com/FireCMSco/neat"
+                                onClick={() => {
+                                    logEvent(analytics, 'get_started');
+                                }}
+                                sx={{
+                                    mt: 3,
+                                    fontWeight: "bold",
+                                }}>GET STARTED</Button>
 
                             <Box component={"p"}>
                                 Built with ❤️ by <a rel={"noopener"}
@@ -847,31 +852,8 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                         </Box>
                     </Box>
                 </Box>
-                {/*<Box sx={{*/}
-                {/*    display: "flex",*/}
-                {/*    flexDirection: "column",*/}
-                {/*    alignItems: "center",*/}
-                {/*    background: "#eee",*/}
-                {/*    justifyContent: "center",*/}
-                {/*    fontFamily: '"Roboto", roboto-condensed,sans-serif',*/}
-                {/*    p: 6*/}
-                {/*}}>*/}
-
-                {/*    <Box component={"p"}>*/}
-                {/*        Neat is a free tool that generates beautiful gradient*/}
-                {/*        animations for your website.*/}
-                {/*        It's easy to use and offers a wide range of*/}
-                {/*        customization options.*/}
-                {/*    </Box>*/}
-
-                {/*    <Box component={"p"}>*/}
-                {/*        Built with ❤️by <a rel={"noopener"} href={"https://firecms.co"}>Camberi</a>*/}
-                {/*    </Box>*/}
-
-                {/*</Box>*/}
             </Box>
         </Box>
-    )
-        ;
+    );
 
 }
diff --git a/lib/package.json b/lib/package.json
@@ -2,7 +2,7 @@
   "name": "@firecms/neat",
   "description": "Beautiful 3D gradients for your website",
   "access": "public",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",

diff --git a/lib/src/NeatGradient.ts b/lib/src/NeatGradient.ts
@@ -8,6 +8,8 @@ const COLORS_COUNT = 5;
 
 const clock = new THREE.Clock();
 
+const LINK_ID = generateRandomString();
+
 type SceneState = {
     renderer: THREE.WebGLRenderer,
     camera: THREE.Camera,
@@ -778,12 +780,11 @@ vec3 hsv2rgb(vec3 c)
 
 
 const setLinkStyles = (link: HTMLAnchorElement) => {
-    link.id = "neat-link";
+    link.id = LINK_ID;
     link.href = "https://neat.firecms.co";
     link.target = "_blank";
     link.style.position = "absolute";
     link.style.display = "block";
-    link.style.opacity = "1";
     link.style.bottom = "0";
     link.style.right = "0";
     link.style.padding = "10px";
@@ -793,15 +794,15 @@ const setLinkStyles = (link: HTMLAnchorElement) => {
     link.style.fontSize = "16px";
     link.style.fontWeight = "bold";
     link.style.textDecoration = "none";
-    link.style.zIndex = "100";
+    link.style.zIndex = "10000";
     link.innerHTML = "NEAT";
 }
 
 const addNeatLink = (ref: HTMLCanvasElement) => {
     const existingLinks = ref.parentElement?.getElementsByTagName("a");
     if (existingLinks) {
         for (let i = 0; i < existingLinks.length; i++) {
-            if (existingLinks[i].id === "neat-link") {
+            if (existingLinks[i].id === LINK_ID) {
                 setLinkStyles(existingLinks[i]);
                 return;
             }
@@ -818,3 +819,13 @@ function getElapsedSecondsInLastHour() {
     const seconds = now.getSeconds();
     return (minutes * 60) + seconds;
 }
+
+function generateRandomString(length: number = 6): string {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * characters.length);
+        result += characters.charAt(randomIndex);
+    }
+    return result;
+}