fix light theme

bavix · Jul 27, 2024 · 2bc7055 · 2bc7055
1 parent 578c249
commit 2bc7055
Showing 3 changed files with 73 additions and 40 deletions.
diff --git a/src/app.jsx b/src/app.jsx
@@ -69,19 +69,41 @@ export default class AppComponent extends React.Component {
      * @returns {JSX.Element} The rendered AppComponent.
      */
     render() {
+        // Initialize the state variable for the theme toggle
+        /**
+         * State variable for the theme toggle.
+         * It is initialized with the value from localStorage or false.
+         * @type {boolean}
+         */
+        const [isToggled, setToggle] = React.useState(
+            JSON.parse(localStorage.getItem('theme')) || false
+        );
+
+        // Use effect hook to update the theme in the local storage when the theme toggle state changes
+        /**
+         * Use effect hook to update the theme in the local storage when the theme toggle state changes.
+         */
+        React.useEffect(() => {
+            localStorage.setItem('theme', JSON.stringify(isToggled));
+        }, [isToggled]);
+
         // Get the items from the component's state
+        /**
+         * Get the items from the component's state.
+         * @type {Array<Item>}
+         */
         const { items } = this.state;
 
         return (
             // Wrapper div for the AppComponent
-            /*
+            /**
              * The root div for the AppComponent.
              * This div has a flex layout with a minimum height of 100vh (viewport height).
              */
             <div className="uuid-ui--wrapper">
                 {/* Navigation component */}
                 {/* The navigation component at the top of the AppComponent */}
-                <NavComponent />
+                <NavComponent isToggled={isToggled} setToggle={setToggle} />
                 {/* Container div with a margin-top class */}
                 <div className="container margin-top">
                     {/* Columns div with a centered layout */}
@@ -92,9 +114,9 @@ export default class AppComponent extends React.Component {
                             {/* Input component with items and setItems props */}
                             {/* The input component that allows the user to enter UUIDs */}
                             <InputComponent 
-                                /* The items to be displayed in the input component */
+                                // The items to be displayed in the input component
                                 items={items} 
-                                /* Function to update the items in the component's state */
+                                // Function to update the items in the component's state
                                 setItems={(items) => this.setState({items})} 
                             />
                         </div>
@@ -104,10 +126,12 @@ export default class AppComponent extends React.Component {
                             {/* History component with items prop */}
                             {/* The history component that displays the past input items */}
                             <HistoryComponent 
-                                /* The items to be displayed in the history component */
+                                // The items to be displayed in the history component
                                 items={items} 
-                                /* Function to clear the items in the component's state */
+                                // Function to clear the items in the component's state
                                 clearItems={() => this.setState({items: []})} 
+                                // The theme toggle state
+                                isToggled={isToggled}
                             />
                         </div>
                     </div>

diff --git a/src/history.jsx b/src/history.jsx
@@ -43,45 +43,56 @@ export default class HistoryComponent extends React.Component {
      */
     render() {
         // Destructure the props
-        const { items, clearItems } = this.props;
+        const { items, clearItems, isToggled } = this.props;
 
         return (
             // Navigation panel
-            <nav className="panel is-dark">
+            <nav className={isToggled ? "panel is-dark" : "panel is-light"}>
                 {/* Panel heading */}
                 <p className="panel-heading">History</p>
+
                 {/* Clear history button */}
                 <div className={items.length === 0 ? "panel-block is-hidden" : "panel-block"}>
-                    {/* Button to clear the history */}
-                    <button onClick={clearItems} className="button is-danger is-outlined is-fullwidth is-small">
+                    <button onClick={clearItems}
+                        className="button is-danger is-outlined is-fullwidth is-small">
                         Clear the history
                     </button>
                 </div>
+
                 {/* List of items */}
-                { [...items].slice(0, 30).map(i =>
+                { [...items].slice(0, 30).map(i => {
                     // Panel block for each item
-                    <div key={i.toString()} className="panel-block">
-                        {/* Field containing two tags */}
-                        <div className="field">
-                            {/* Output tag */}
-                            <div className="tags">
-                                {/* Copy output to clipboard and display a success message */}
-                                <a href="javascript:" onClick={this.copy} className="tag is-link is-light" data-tooltip={i.info}>
-                                    {/* Output text */}
-                                    { i.output }
-                                </a>
-                            </div>
-                            {/* Input tag */}
-                            <div className="tags">
-                                {/* Copy input to clipboard and display a success message */}
-                                <a href="javascript:" onClick={this.copy} className="tag is-primary is-light" data-tooltip={i.info}>
-                                    {/* Input text */}
-                                    { i.input }
-                                </a>
+                    return (
+                        <div key={i.toString()} className="panel-block">
+                            {/* Field containing two tags */}
+                            <div className="field">
+                                {/* Output tag */}
+                                <div className="tags">
+                                    {/* Copy output to clipboard and display a success message */}
+                                    <a href="javascript:"
+                                        onClick={this.copy}
+                                        className="tag is-link is-light"
+                                        data-tooltip={i.info}>
+                                        {/* Output text */}
+                                        { i.output }
+                                    </a>
+                                </div>
+
+                                {/* Input tag */}
+                                <div className="tags">
+                                    {/* Copy input to clipboard and display a success message */}
+                                    <a href="javascript:"
+                                        onClick={this.copy}
+                                        className="tag is-primary is-light"
+                                        data-tooltip={i.info}>
+                                        {/* Input text */}
+                                        { i.input }
+                                    </a>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                ) }
+                    );
+                }) }
             </nav>
         );
     }

diff --git a/src/nav.jsx b/src/nav.jsx
@@ -55,15 +55,13 @@ export default class NavComponent extends React.Component {
         // Generate a new UUID and store it in the state
         const [uuid, setUuid] = React.useState('');
 
-        // Initialize the state variable for the theme toggle
-        const [isToggled, setToggle] = React.useState(
-            JSON.parse(localStorage.getItem('theme')) || false
-        );
-
-        // Use effect hook to update the theme in the local storage when the theme toggle state changes
-        React.useEffect(() => {
-            localStorage.setItem('theme', JSON.stringify(isToggled));
-        }, [isToggled]);
+        /**
+         * Destructures the isToggled and setToggle props from the NavComponent's props.
+         *
+         * @param {boolean} isToggled - Indicates whether the theme is toggled (dark or light).
+         * @param {function} setToggle - A function to update the theme toggle state.
+         */
+        const { isToggled, setToggle } = this.props;
 
         return (
             <HelmetProvider>