change icons (#12)

yhattav · Nov 18, 2024 · e791269 · e791269
1 parent a1a95b1
commit e791269
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "framer-motion": "^11.11.11",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",

diff --git a/src/components/GravitySimulator/GravitySimulator.tsx b/src/components/GravitySimulator/GravitySimulator.tsx
@@ -17,6 +17,9 @@ import { SimulatorSettings } from "../SimulatorSettings/SimulatorSettings";
 import { useSettings } from "../../hooks/useSettings";
 import { throttle } from "lodash";
 import "../../styles/global.scss";
+import { MdFullscreen, MdFullscreenExit } from "react-icons/md";
+import { BiReset } from "react-icons/bi";
+import { motion } from "framer-motion";
 
 interface ParticleMechanics {
   position: Point2D;
@@ -367,65 +370,46 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
         <div
           style={{
             position: "absolute",
-            top: "1rem",
-            right: "1rem",
-            zIndex: 2,
+            top: 20,
+            right: 20,
             display: "flex",
-            gap: "0.5rem",
+            gap: "10px",
+            zIndex: 1001,
+            width: "fit-content",
+            height: "40px",
+            alignItems: "center",
           }}
         >
-          <button
+          <motion.button
             onClick={(e) => {
               e.stopPropagation();
-              setParticles([]); // Clear only particles
+              setParticles([]);
               setIsSimulationStarted(false);
             }}
-            style={{
-              padding: "0.5rem 1rem",
-              cursor: "pointer",
-              background: "rgba(255, 255, 255, 0.2)",
-              border: "none",
-              borderRadius: "4px",
-              color: "white",
-              transition: "background 0.2s ease",
-            }}
-          >
-            Clear Particles
-          </button>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setGravityPoints([]); // Clear only the gravity points/stars
-            }}
-            style={{
-              padding: "0.5rem 1rem",
-              cursor: "pointer",
-              background: "rgba(255, 255, 255, 0.2)",
-              border: "none",
-              borderRadius: "4px",
-              color: "white",
-              transition: "background 0.2s ease",
-            }}
+            className="floating-panel floating-button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            title="Reset Simulation"
           >
-            Clear Stars
-          </button>
-          <button
+            <BiReset size={20} />
+          </motion.button>
+
+          <motion.button
             onClick={(e) => {
               e.stopPropagation();
               toggleFullscreen();
             }}
-            style={{
-              padding: "0.5rem 1rem",
-              cursor: "pointer",
-              background: "rgba(255, 255, 255, 0.2)",
-              border: "none",
-              borderRadius: "4px",
-              color: "white",
-              transition: "background 0.2s ease",
-            }}
+            className="floating-panel floating-button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
           >
-            {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
-          </button>
+            {isFullscreen ? (
+              <MdFullscreenExit size={20} />
+            ) : (
+              <MdFullscreen size={20} />
+            )}
+          </motion.button>
         </div>
 
         <StarPalette

diff --git a/src/components/SimulatorSettings/SimulatorSettings.tsx b/src/components/SimulatorSettings/SimulatorSettings.tsx
@@ -57,6 +57,7 @@ export const SimulatorSettings: React.FC<SimulatorSettingsProps> = ({
         onClick={handleButtonClick}
         className="floating-panel floating-button"
         style={{
+          position: "absolute",
           bottom: 20,
           right: 20,
         }}

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -11,7 +11,6 @@
 .floating-button {
   width: 40px;
   height: 40px;
-  position: absolute;
   border-radius: 10px;
   cursor: pointer;
   display: flex;