Skip to content

dark mode added to the component #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

dark mode added to the component #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
"react-uuid": "^1.0.2"
},
"dependencies": {
"clsx": "^1.2.1"
"clsx": "^1.2.1",
"react-todo-component": "^2.0.3"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove react-todo-component dependency

}
}
30 changes: 30 additions & 0 deletions src/components/Todo/Todo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
body{
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

#light-theme{
--font-color: black;
--body-bg-color: white;
--hover-color: gray;
}

#dark-theme{
--font-color: lightgray;
--body-bg-color: #0F3460;
--hover-color: #ff4081;
}



.todo-container{
background-color: var(--body-bg-color);
color: var(--font-color)
}

.theme-switch{
display: flex;
align-items: center;
justify-content: center;
}


17 changes: 14 additions & 3 deletions src/components/Todo/Todo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useState } from "react";
import { Reorder } from "framer-motion";
import { Container } from "@material-ui/core";
import { Container, Switch } from "@material-ui/core";

import "./Todo.css";
import { Item, TodoCompletedList } from "./common";
import { Form } from "./common/Todo/Form";
import { TodoItem } from "./common/types";


export interface TodoAppProps {
defaultItems?: TodoItem[];
onChange: (items: TodoItem[]) => void;
Expand Down Expand Up @@ -49,8 +49,14 @@ function TodoApp(props: TodoAppProps) {
setItems([...updatedItems, ...completedItems]);
};

const [theme, setTheme] = useState("light-theme");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As people will use react-todo as an external dependency. Can you expose a prop to control the theme? instead of using local state. Just make light-theme default value for the prop.

Copy link
Author

@Anurag-NURA Anurag-NURA Oct 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not so sure how to create a prop that can be later used as optional feature. As I am very new in react, I only know Javascript, I don't have idea about Typescript. But I will let you know if I am able to make a prop for the feature.

const toggleTheme = ()=>{
setTheme(prevTheme=>(prevTheme === "light-theme"? "dark-theme" : "light-theme"));
}

return (
<Container>
<div id={theme} >
<Container className="todo-container">
<Form addItem={addItem} />
<Reorder.Group
axis="y"
Expand All @@ -74,7 +80,12 @@ function TodoApp(props: TodoAppProps) {
setItemsCallback={setItemsCallback}
completedItems={completedItems}
/>
<div className="theme-switch">
<Switch color="secondary" onChange={toggleTheme}/>
{theme === "light-theme"? <p>Light Mode</p>: <p>Dark Mode</p>}
</div>
</Container>
</div>
);
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Todo/common/Accordion/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
height: 1em;
font-size: 1.5rem;
fill: currentColor;
color: rgba(0, 0, 0, .54);
color: var(--font-color);
user-select: none;

position: absolute;
Expand All @@ -28,7 +28,7 @@
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.00938em;
border-top: 1px solid black;
border-top: 1px solid var(--font-color);
padding: 0 16px;
padding-left: 4.2%;
margin-top: 20px;
Expand Down
7 changes: 7 additions & 0 deletions src/components/Todo/common/Todo/Form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const useStyles = makeStyles({
root: {
display: "flex",
width: "100%",
backgroundColor: "var(--body-bg-color)",
color: "var(--font-color)"
},
plusIcon: {
margin: "5px 10px 0px 8px",
Expand Down Expand Up @@ -61,6 +63,11 @@ export const Form = (props: AddProps) => {
});
setItemName("");
}}
InputProps={{
style: {
color: "var(--font-color)"
}
}}
placeholder="Add item."
value={itemName}
className="w-10/12"
Expand Down
10 changes: 8 additions & 2 deletions src/components/Todo/common/Todo/Item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const useStyles = makeStyles({
width: "100%",
alignItems: "center",
zIndex: 0,
backgroundColor: "var(--body-bg-color)"
},
underline: {
"&&&:before": {
Expand All @@ -36,8 +37,9 @@ const useStyles = makeStyles({
cursor: "pointer",
padding:"2px",
'&:hover': {
backgroundColor: "#b9b5b5",
backgroundColor: "var(--hover-color)",
borderRadius: '50%',
color: "var(--body-bg-color)"
}

},
Expand Down Expand Up @@ -97,11 +99,14 @@ export const Item: FC<Props> = ({
items[itemIndex].isComplete = true;
setItemsCallback([...items]);
}}
style={{
color: "var(--font-color)"
}}
/>
<FormControl fullWidth>
<TextField
className={classes.textFeild}
InputProps={{ classes: { underline: classes.underline } }}
InputProps={{ classes: { underline: classes.underline }, style:{color: "var(--font-color)"} }}
inputRef={inputRef}
value={itemText} // innerHTML of the editable div
onPaste={(e) => {
Expand Down Expand Up @@ -135,6 +140,7 @@ export const Item: FC<Props> = ({
itemIndex < 1 &&
addItem({ name: "", uuid: uuid(), isComplete: false })
}

/>
</FormControl>
<CloseIcon
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10614,6 +10614,11 @@ react-textarea-autosize@^8.3.0:
use-composed-ref "^1.0.0"
use-latest "^1.0.0"

react-todo-component@^2.0.3:
version "2.0.3"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed react-todo-component.

resolved "https://registry.yarnpkg.com/react-todo-component/-/react-todo-component-2.0.3.tgz#762878d0ffb86b87bad84b0f6925b1a57c8598b0"
integrity sha512-Z/ES1MYRXg3oaS33wEF0I0gvsyv35v2HemeJaZq5KfBBqvZWqjeFNuijKZLsWX/jzuLRCtGNemNVs4lBkLqjHg==

react-transition-group@^4.4.0:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
Expand Down