From 517a5f10bb767497dcaa99d732f68db8222ffa86 Mon Sep 17 00:00:00 2001 From: manish_hr14 <91497527+Manish-hr14@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:58:17 +0000 Subject: [PATCH 1/2] Update 5 files --- .codesandbox/tasks.json | 36 +++++++++++++++++++++++++++++++ src/components/Layout/Button.js | 5 +++-- src/components/Layout/Checkbox.js | 4 ++-- src/components/Layout/Range.js | 8 +++---- src/index.css | 8 ++++--- 5 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 .codesandbox/tasks.json diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json new file mode 100644 index 0000000..bd4374d --- /dev/null +++ b/.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 + } + } +} diff --git a/src/components/Layout/Button.js b/src/components/Layout/Button.js index af111ed..a8a6e35 100644 --- a/src/components/Layout/Button.js +++ b/src/components/Layout/Button.js @@ -2,6 +2,7 @@ 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")}; @@ -9,8 +10,8 @@ export const Button = styled.button` 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 { diff --git a/src/components/Layout/Checkbox.js b/src/components/Layout/Checkbox.js index db1119b..055628d 100644 --- a/src/components/Layout/Checkbox.js +++ b/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" : "")}; } ` diff --git a/src/components/Layout/Range.js b/src/components/Layout/Range.js index eeb6621..117f2cd 100644 --- a/src/components/Layout/Range.js +++ b/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; } ` diff --git a/src/index.css b/src/index.css index 0adb4de..e8af40f 100644 --- a/src/index.css +++ b/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); } From a33194a436995e6b1ee28fc227ebecd095796d6e Mon Sep 17 00:00:00 2001 From: Manish-hr14 <91497527+Manish-hr14@users.noreply.github.com> Date: Tue, 22 Aug 2023 22:31:03 +0530 Subject: [PATCH 2/2] Update README.md --- README.md | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/README.md b/README.md index 07f3d26..8b13789 100644 --- a/README.md +++ b/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).