2nd class updates

Author: Thiago Jorge Almeida dos Santos

README.md

@@ -19,7 +19,7 @@ This project is an adaptation and evolution of the **[AluraTube](https://github.
 
 <br />
 <p align="center">
-    <img alt="Preview" src="./screenshots/preview.png" width="800" />
+    <img alt="Preview" src="./screenshots/preview light.png" width="800" />
 </p>
 <br />
 
@@ -74,7 +74,7 @@ git push origin my-new-feature
     - After your pull request is merged, you can safely delete your branch.
 
 ## Todo List
-
+ 
 - [ ] Obtain a list of videos dinamically from [Google API](https://www.npmjs.com/package/googleapis);
 - [ ] Add fade efect in horizontal scrolls extremities;
 - [ ] Create, edit and remove playlists;

README_pt-br.md

@@ -19,7 +19,7 @@ Este projeto é uma adaptação e evolução do projeto **[AluraTube](https://gi
 
 <br />
 <p align="center">
-    <img alt="Preview" src="./screenshots/preview.png" width="800" />
+    <img alt="Preview" src="./screenshots/preview light.png" width="800" />
 </p>
 <br />
 

config.json

@@ -10,8 +10,10 @@
             "instagram": "thiago.tjas",
             "github": "tjas"
         },
-        "banner": "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429",
-        "banner-ref": "https://unsplash.com/photos/HDd-NQ_AMNQ"
+        "banner": {
+            "image": "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429",
+            "reference": "https://unsplash.com/photos/HDd-NQ_AMNQ"
+        }
     },
     "playlists": {
         "jogos": [
@@ -258,6 +260,6 @@
         }
     },
     "environment": "development",
-    "version": "0.1.0",
-    "build": "20221109"
+    "version": "0.2.0",
+    "build": "20221113"
 }

package-lock.json

@@ -10,6 +10,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.6.0",
-    "styled-components": "5.3.6"
+    "styled-components": "5.3.6",
+    "use-local-storage": "2.3.6"
   }
 }

package.json

@@ -1,3 +1,4 @@
+import React from "react";
 import config from "../config.json";
 import styled from "styled-components";
 
@@ -11,32 +12,49 @@ import { Favorites } from "../src/components/Favorites";
 import { Footer } from "../src/components/Footer";
 
 function HomePage() {
+    
+    const defaultDark = false;
+    const [theme, setTheme] = React.useState(defaultDark ? 'dark' : 'light');
+    const [valorDoFiltro, setValorDoFiltro] = React.useState("");
+
+    // References to use LocalStorage to keep variables between refreshes (i.e., the theme selected),
+    // and to verify if any local variable exists or has previous value:
+    // https://www.freecodecamp.org/news/how-to-use-localstorage-with-react-hooks-to-set-and-get-items/
+    // https://www.freecodecamp.org/news/how-to-use-localstorage-with-react-hooks-to-set-and-get-items/
+
+    const switchTheme = () => {
+        const newTheme = theme === 'light' ? 'dark' : 'light';
+        //console.log("Switched theme to: " + newTheme);
+        setTheme(newTheme);
+    }
+
     return (
-        <>
+        <div data-theme={theme}>
             <CSSReset />
             <div style={{
-                display: "flex",
-                flexDirection: "column",
-                flex: 1,
+                "display": "flex",
+                "flexDirection": "column",
+                "flex": 1,
+                "background-color": "var(--backgroundBase)",
+                "color": "var(--textColorBase)"
             }}>
-
+                {/* Prop Drilling */}
                 <StyledHeader>
-                    <Menu />
-                    <Banner user={config.user} />
-                    <Header user={config.user} />
+                    <Menu valorDoFiltro={valorDoFiltro} setValorDoFiltro={setValorDoFiltro} theme={theme} switchTheme={switchTheme} />
+                    <Banner banner={config.user.banner} theme={theme} />
+                    {/* <div align="right" style={{"text-transform": "capitalize", "color": "white", "font-size": "22px", "translate": "0px -35px", "padding-right": "48px" }}>{theme} Theme</div> */}
+                    <Header user={config.user} theme={theme} />
                 </StyledHeader>
-
                 <StyledContent>
-                    <Timeline playlists={config.playlists} />
-                    <Favorites favorites={config.favorites} />
+                    <Timeline searchValue={valorDoFiltro} playlists={config.playlists} theme={theme} />
+                    <Favorites favorites={config.favorites} theme={theme} />
                 </StyledContent>
-
                 <StyledFooter>
-                    <Footer />
+                    <Footer theme={theme} />
                 </StyledFooter>
 
             </div>
-        </>
+        </div>
     );
 }
 

pages/index.js

@@ -18,9 +18,9 @@ const StyledBanner = styled.header`
 
 export function Banner(properties) {
   return (
-    <StyledBanner>
+    <StyledBanner data-theme={properties.theme}>
       <div className="crop">
-        <img src={`${properties.user.banner}`} />
+        <img src={`${properties.banner.image}`} />
       </div>
     </StyledBanner>
   );

screenshots/preview dark.png

@@ -1,22 +1,40 @@
 import { createGlobalStyle } from "styled-components";
 
+// Reference to themes: 
+// https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/
+
 export const CSSReset = createGlobalStyle`
 
 	/* CSS Variables */
 	:root {
-		/* Light Mode */
-		--light-backgroundBase: #F9F9F9;
-		--light-backgroundLevel1: #FFFFFF;
-		--light-backgroundLevel2: #F0F0F0;
-		--light-borderBase: #E5E5E5;
-		--light-textColorBase: #222222;
-
-		/* Dark Mode */
-		--dark-backgroundBase: #181818;
-		--dark-backgroundLevel1: #202020;
-		--dark-backgroundLevel2: #313131;
-		--dark-borderBase: #383838;
-		--dark-textColorBase: #FFFFFF;
+		/* Default Theme */
+		--backgroundBase: #F9F9F9;
+		--backgroundLevel1: #FFFFFF;
+		--backgroundLevel2: #F0F0F0;
+		--borderBase: #E5E5E5;
+		--textColorBase: #222222;
+		--textColorLevel1: #555555;
+		--textColorLevel2: #888888;
+	}
+	[data-theme='light'] {
+		/* Light Theme */
+		--backgroundBase: #F9F9F9;
+		--backgroundLevel1: #FFFFFF;
+		--backgroundLevel2: #F0F0F0;
+		--borderBase: #E5E5E5;
+		--textColorBase: #222222;
+		--textColorLevel1: #555555;
+		--textColorLevel2: #888888;
+	}
+	[data-theme='dark'] {
+		/* Dark Theme */
+		--backgroundBase: #181818;
+		--backgroundLevel1: #202020;
+		--backgroundLevel2: #313131;
+		--borderBase: #383838;
+		--textColorBase: #FFFFFF;
+		--textColorLevel1: #CCCCCC;
+		--textColorLevel2: #999999;
 	}
 
 	/* Reset */
@@ -34,7 +52,7 @@ export const CSSReset = createGlobalStyle`
 		justify-content: center;
 		text-transform: capitalize;
 		margin: 16px 16px;
-		border-bottom: 1px solid #eeeeee;
+		border-bottom: 1px solid var(--borderBase);
 		svg {
 			font-size: 80%;
 		}
@@ -65,15 +83,28 @@ export const CSSReset = createGlobalStyle`
 		}
 	}
 	
+	/* Scrollbars */
 	body ::-webkit-scrollbar { 
-		width: 8px;               		/* width of the entire scrollbar */
-		height: 8px;					/* height of the entire scrollbar */
+		width: 8px;               	/* width of the entire scrollbar */
+		height: 8px;				/* height of the entire scrollbar */
 	}
 	body ::-webkit-scrollbar-track {
-		background: #ffffff;        	/* color of the tracking area */
+		background: var(--backgroundBase);			/* color of the tracking area */
 	}
 	body ::-webkit-scrollbar-thumb {
-		background-color: #dddddd;  	/* color of the scroll thumb */
-		border-radius: 8px;         	/* roundness of the scroll thumb */
+		background-color: var(--backgroundLevel2);  /* color of the scroll thumb */
+		border-radius: 8px;         				/* roundness of the scroll thumb */
+	}
+
+	/* Placeholders */
+	::placeholder { 					/* Chrome, Firefox, Opera, Safari 10.1+ */
+		color: var(--textColorLevel2);
+		opacity: 1; 					/* Firefox */
+	}
+	:-ms-input-placeholder { 			/* Internet Explorer 10-11 */
+		color: var(--textColorLevel2);
+	}
+	::-ms-input-placeholder { 			/* Microsoft Edge */
+		color: var(--textColorLevel2);
 	}
 `;

screenshots/preview light.png

@@ -15,7 +15,7 @@ const StyledFavorites = styled.section`
         width: 80px;
         height: 80px;
         border-radius: 50%;
-        border: 1px solid #eeeeee;
+        border: 1px solid var(--borderBase);
 	}
 	section {
         width: calc(100vw - 16px * 4);
@@ -37,7 +37,7 @@ const StyledFavorites = styled.section`
                     padding-top: 8px;
                     display: flex;
                     text-align: center;
-                    color: ${({ theme }) => theme.textColorBase || "#222222"};
+                    color: var(--textColorBase);
                 }
             }
         }
@@ -52,13 +52,13 @@ export function Favorites(properties) {
   // Statement
   // Retorno por expressão
   return (
-    <StyledFavorites>
+    <StyledFavorites data-theme={properties.theme}>
         <h1><BsStar /> Favorites</h1>
         <section>
         {favorites.map((index) => {
             const favorite = properties.favorites[index];
             return (
-                <div nameclass="favorite">
+                <div key={index} nameclass="favorite">
                     <a href={favorite.url} target="_blank">
                         <img src={favorite.thumb} />
                         <span>{favorite.name}</span>

screenshots/preview.png

@@ -9,7 +9,7 @@ const StyledFooter = styled.section`
     justify-content: space-between;
     gap: 16px;
     margin-top: 16px;
-    border-top: 1px solid #eeeeee;
+    border-top: 1px solid var(--borderBase);
     padding: 28px 32px;
     div {
         display: flex;
@@ -21,30 +21,30 @@ const StyledFooter = styled.section`
             display: flex;
             align-items: center;
             font-size: 13px;
-            color: #777777;
+            color: var(--textColorLevel2);
             a {
                 color: inherit;
                 cursor: pointer;
             }
         }
     }
     .localization {
-        border: 1px solid #eeeeee;
+        border: 1px solid var(--borderBase);
         padding: 6px;
         gap: 4px;
     }
     .icon {
-        color: #888888;
+        color: var(--textColorLevel2);
         font-size: 10px;
     }
     @media (max-width: 750px) {
         flex-direction: column;
     }
 `;
 
-export function Footer() {
+export function Footer(properties) {
     return (
-      <StyledFooter>
+      <StyledFooter data-theme={properties.theme}>
         <div>
             <div className="left">
                 <a>About</a>
@@ -54,8 +54,7 @@ export function Footer() {
                 <a>Service Terms</a>
             </div>
             <div className="right">
-                <BsGlobe style={{color: "#888888"}} />
-                {/* Language: */}
+                <BsGlobe style={{"color": "var(--textColorLevel2)"}} />
                 <a> 
                     <div className="localization">
                         EN