Skip to content

Commit 7d561d3

Browse files
rez1dent3rez1dent3
authored
Merge pull request #168 from bavix/fix-light-theme
fix light theme
2 parents 578c249 + 668863f commit 7d561d3

File tree

7 files changed

+77
-44
lines changed

7 files changed

+77
-44
lines changed

‎public/assets/bundle-D-BcxgNM.js‎ renamed to ‎public/assets/bundle-BErZgAko.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/bundle-BErZgAko.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/bundle-D-BcxgNM.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,6 @@
6868

6969
gtag('config', 'G-0E805HG8JN');
7070
</script>
71-
<script src="assets/bundle-D-BcxgNM.js"></script>
71+
<script src="assets/bundle-BErZgAko.js"></script>
7272
</body>
7373
</html>

‎src/app.jsx‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,19 +69,41 @@ export default class AppComponent extends React.Component {
6969
* @returns {JSX.Element} The rendered AppComponent.
7070
*/
7171
render() {
72+
// Initialize the state variable for the theme toggle
73+
/**
74+
* State variable for the theme toggle.
75+
* It is initialized with the value from localStorage or false.
76+
* @type {boolean}
77+
*/
78+
const [isToggled, setToggle] = React.useState(
79+
JSON.parse(localStorage.getItem('theme')) || false
80+
);
81+
82+
// Use effect hook to update the theme in the local storage when the theme toggle state changes
83+
/**
84+
* Use effect hook to update the theme in the local storage when the theme toggle state changes.
85+
*/
86+
React.useEffect(() => {
87+
localStorage.setItem('theme', JSON.stringify(isToggled));
88+
}, [isToggled]);
89+
7290
// Get the items from the component's state
91+
/**
92+
* Get the items from the component's state.
93+
* @type {Array<Item>}
94+
*/
7395
const { items } = this.state;
7496

7597
return (
7698
// Wrapper div for the AppComponent
77-
/*
99+
/**
78100
* The root div for the AppComponent.
79101
* This div has a flex layout with a minimum height of 100vh (viewport height).
80102
*/
81103
<div className="uuid-ui--wrapper">
82104
{/* Navigation component */}
83105
{/* The navigation component at the top of the AppComponent */}
84-
<NavComponent />
106+
<NavComponent isToggled={isToggled} setToggle={setToggle} />
85107
{/* Container div with a margin-top class */}
86108
<div className="container margin-top">
87109
{/* Columns div with a centered layout */}
@@ -92,9 +114,9 @@ export default class AppComponent extends React.Component {
92114
{/* Input component with items and setItems props */}
93115
{/* The input component that allows the user to enter UUIDs */}
94116
<InputComponent
95-
/* The items to be displayed in the input component */
117+
// The items to be displayed in the input component
96118
items={items}
97-
/* Function to update the items in the component's state */
119+
// Function to update the items in the component's state
98120
setItems={(items) => this.setState({items})}
99121
/>
100122
</div>
@@ -104,10 +126,12 @@ export default class AppComponent extends React.Component {
104126
{/* History component with items prop */}
105127
{/* The history component that displays the past input items */}
106128
<HistoryComponent
107-
/* The items to be displayed in the history component */
129+
// The items to be displayed in the history component
108130
items={items}
109-
/* Function to clear the items in the component's state */
131+
// Function to clear the items in the component's state
110132
clearItems={() => this.setState({items: []})}
133+
// The theme toggle state
134+
isToggled={isToggled}
111135
/>
112136
</div>
113137
</div>

‎src/history.jsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -43,45 +43,56 @@ export default class HistoryComponent extends React.Component {
4343
*/
4444
render() {
4545
// Destructure the props
46-
const { items, clearItems } = this.props;
46+
const { items, clearItems, isToggled } = this.props;
4747

4848
return (
4949
// Navigation panel
50-
<nav className="panel is-dark">
50+
<nav className={isToggled ? "panel is-dark" : "panel is-light"}>
5151
{/* Panel heading */}
5252
<p className="panel-heading">History</p>
53+
5354
{/* Clear history button */}
5455
<div className={items.length === 0 ? "panel-block is-hidden" : "panel-block"}>
55-
{/* Button to clear the history */}
56-
<button onClick={clearItems} className="button is-danger is-outlined is-fullwidth is-small">
56+
<button onClick={clearItems}
57+
className="button is-danger is-outlined is-fullwidth is-small">
5758
Clear the history
5859
</button>
5960
</div>
61+
6062
{/* List of items */}
61-
{ [...items].slice(0, 30).map(i =>
63+
{ [...items].slice(0, 30).map(i => {
6264
// Panel block for each item
63-
<div key={i.toString()} className="panel-block">
64-
{/* Field containing two tags */}
65-
<div className="field">
66-
{/* Output tag */}
67-
<div className="tags">
68-
{/* Copy output to clipboard and display a success message */}
69-
<a href="javascript:" onClick={this.copy} className="tag is-link is-light" data-tooltip={i.info}>
70-
{/* Output text */}
71-
{ i.output }
72-
</a>
73-
</div>
74-
{/* Input tag */}
75-
<div className="tags">
76-
{/* Copy input to clipboard and display a success message */}
77-
<a href="javascript:" onClick={this.copy} className="tag is-primary is-light" data-tooltip={i.info}>
78-
{/* Input text */}
79-
{ i.input }
80-
</a>
65+
return (
66+
<div key={i.toString()} className="panel-block">
67+
{/* Field containing two tags */}
68+
<div className="field">
69+
{/* Output tag */}
70+
<div className="tags">
71+
{/* Copy output to clipboard and display a success message */}
72+
<a href="javascript:"
73+
onClick={this.copy}
74+
className="tag is-link is-light"
75+
data-tooltip={i.info}>
76+
{/* Output text */}
77+
{ i.output }
78+
</a>
79+
</div>
80+
81+
{/* Input tag */}
82+
<div className="tags">
83+
{/* Copy input to clipboard and display a success message */}
84+
<a href="javascript:"
85+
onClick={this.copy}
86+
className="tag is-primary is-light"
87+
data-tooltip={i.info}>
88+
{/* Input text */}
89+
{ i.input }
90+
</a>
91+
</div>
8192
</div>
8293
</div>
83-
</div>
84-
) }
94+
);
95+
}) }
8596
</nav>
8697
);
8798
}

‎src/nav.jsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,13 @@ export default class NavComponent extends React.Component {
5555
// Generate a new UUID and store it in the state
5656
const [uuid, setUuid] = React.useState('');
5757

58-
// Initialize the state variable for the theme toggle
59-
const [isToggled, setToggle] = React.useState(
60-
JSON.parse(localStorage.getItem('theme')) || false
61-
);
62-
63-
// Use effect hook to update the theme in the local storage when the theme toggle state changes
64-
React.useEffect(() => {
65-
localStorage.setItem('theme', JSON.stringify(isToggled));
66-
}, [isToggled]);
58+
/**
59+
* Destructures the isToggled and setToggle props from the NavComponent's props.
60+
*
61+
* @param {boolean} isToggled - Indicates whether the theme is toggled (dark or light).
62+
* @param {function} setToggle - A function to update the theme toggle state.
63+
*/
64+
const { isToggled, setToggle } = this.props;
6765

6866
return (
6967
<HelmetProvider>

0 commit comments

Comments
 (0)