Update 5 files

.codesandbox/tasks.json

@@ -0,0 +1,36 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "npm install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "start": {
+      "name": "start",
+      "command": "npm run start",
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "npm run build",
+      "runAtStart": false
+    },
+    "test": {
+      "name": "test",
+      "command": "npm run test",
+      "runAtStart": false
+    },
+    "eject": {
+      "name": "eject",
+      "command": "npm run eject",
+      "runAtStart": false
+    }
+  }
+}

README.md

@@ -1,29 +1 @@
-## Password generator challenge
 
-You can see the project on [its page](https://password-generator-fowmind.vercel.app)
-
-[![Project Preview](https://i.imgur.com/Ph1Atqn.png "Project preview")](https://password-generator-fowmind.vercel.app)
-
-#### If you want to run this project locally in your computer, you need to have installed:
-
-- [NodeJS](https://nodejs.org)
-- [Git](https://git-scm.com/) or [Github Desktop](https://desktop.github.com) if don't want to use git commands.
-
-#### To run the project:
-
-- Open the Terminal in one folder (e.g. desktop).
-- Run `git clone https://github.com/FOWMind/password-generator.git` command.
-  A new folder called password-generator will be created in that directory.
-  You can explore the files if you want.
-- Open the new folder called **password-generator** in the terminal.
-- Run `npm install` command and wait to Node Package Manager to install all the required packages for the project.
-- Run `npm start` and you should see the project in your browser!
-
-#### TL;DR:
-
-- Clone the project with `git clone https://github.com/FOWMind/password-generator.git`
-- Install dependencies with `npm install` and run with `npm start`
-
-Now you can explore the code and the project view.
-
-This is a challenge from [Frontend Mentor](https://www.frontendmentor.io/challenges/password-generator-app-Mr8CLycqjh).

src/components/Layout/Button.js

@@ -2,15 +2,16 @@ import styled from "styled-components"
 
 export const Button = styled.button`
   border: 2px solid transparent;
+  border-radius: 10px; /* Adding border radius for rounded edges */
   display: block;
   width: ${({ icon }) => (icon ? "auto" : "100%")};
   height: ${({ icon }) => (icon ? "auto" : "45px")};
   font-family: inherit;
   font-weight: 700;
   font-size: 1rem;
   text-transform: uppercase;
-  color: ${({ icon }) => (icon ? "#a4ffaf" : "#24542b")};
-  background-color: ${({ icon }) => (icon ? "transparent" : "#a4ffaf")};
+  color: ${({ icon }) => (icon ? "#242332b" : "white")};
+  background-color: ${({ icon }) => (icon ? "transparent" : "#2a8b8b")};
   cursor: pointer;
 
   &:hover {

src/components/Layout/Checkbox.js

@@ -59,11 +59,11 @@ const CheckboxLabelItem = styled.div`
   height: 1rem;
   vertical-align: text-top;
   display: inline-block;
-  background-color: ${({ checked }) => (checked ? "#a8fdb0" : "transparent")};
+  background-color: ${({ checked }) => (checked ? "#transparent" : "transparent")};
   border: 2px solid ${({ checked }) => (checked ? "transparent" : "#D4D3D9")};
 
   &:hover {
-    border-color: ${({ checked }) => (!checked ? "#a8fdb0" : "")};
+    border-color: ${({ checked }) => (!checked ? "#242332b" : "")};
   }
 `
 

src/components/Layout/Range.js

@@ -46,8 +46,8 @@ const StyledRange = styled.input`
     linear,
     50% 0%,
     50% 100%,
-    color-stop(0%, #a8fdb0),
-    color-stop(100%, #a8fdb0)
+    color-stop(0%, white),
+    color-stop(100%, white)
   );
   background-size: 50% 100%;
   background-repeat: no-repeat;
@@ -63,7 +63,7 @@ const StyledRange = styled.input`
 
     &:hover,
     &:active {
-      border-color: #a8fdb0;
+      border-color: white;
       background-color: #17161e;
     }
 
@@ -73,6 +73,6 @@ const StyledRange = styled.input`
   }
 
   &::-moz-range-progress {
-    background-color: #a8fdb0;
+    background-color: #242332b;
   }
 `

src/index.css

@@ -1,5 +1,5 @@
 :root {
-  --body-bg: #09080d;
+  --body-bg: #000000;
 }
 
 * {
@@ -15,7 +15,9 @@ html {
 
 body {
   min-height: 100%;
-  font-family: "Inconsolata", monospace, sans-serif;
-  font-weight: 500;
+  font-family: "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: #ffffff;
   background-color: var(--body-bg);
 }