From c80f8e33240cf5da29ce152425f968ed6bf66466 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Mon, 13 Sep 2021 11:34:01 -0300 Subject: [PATCH 01/20] Toggle button. --- bookstore-frontend-react-app/src/App.css | 12 +++++ .../src/components/Header.js | 2 + .../src/components/ToggleTheme.js | 46 +++++++++++++++++++ bookstore-frontend-react-app/src/themes.css | 15 ++++++ 4 files changed, 75 insertions(+) create mode 100644 bookstore-frontend-react-app/src/components/ToggleTheme.js create mode 100644 bookstore-frontend-react-app/src/themes.css diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 2eb99bad..9d4f4417 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -1,4 +1,9 @@ @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap'); +@import url('./themes.css'); + +#root { + background-color: var(--bg); /* background color variable */ +} body { margin: 0; @@ -78,3 +83,10 @@ p { background-color: #fff; border: 1px solid #eee; } + +.row-container-fully-centered { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/bookstore-frontend-react-app/src/components/Header.js b/bookstore-frontend-react-app/src/components/Header.js index 3ec8e7f7..423de6df 100644 --- a/bookstore-frontend-react-app/src/components/Header.js +++ b/bookstore-frontend-react-app/src/components/Header.js @@ -4,6 +4,7 @@ import { LinkContainer } from 'react-router-bootstrap'; import { useDispatch, useSelector } from 'react-redux'; import { isAdmin } from '../service/CommonUtils'; import { logout } from '../actions/userActions'; +import ToggleTheme from './ToggleTheme'; const Header = (props) => { const userLogin = useSelector((state) => state.userLogin); const { userInfo } = userLogin; @@ -64,6 +65,7 @@ const Header = (props) => { )} + diff --git a/bookstore-frontend-react-app/src/components/ToggleTheme.js b/bookstore-frontend-react-app/src/components/ToggleTheme.js new file mode 100644 index 00000000..bf8d3819 --- /dev/null +++ b/bookstore-frontend-react-app/src/components/ToggleTheme.js @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from 'react'; +import Form from 'react-bootstrap/Form'; + +const ToggleTheme = () => { + + const initialStateChecked = JSON.parse(localStorage.getItem('isDark')); + const [checked, setChecked] = useState(initialStateChecked); + + const changeThemeToDark = () => { + document.getElementById('root').setAttribute('data-theme', 'dark'); + }; + + const changeThemeToLight = () => { + document.getElementById('root').setAttribute('data-theme', 'light'); + }; + + const handleChangeToggle = (e) => { + setChecked(e.target.checked); + }; + + useEffect(() => { + if (checked) { + changeThemeToDark(); + localStorage.setItem("isDark", JSON.stringify(true)) + } else { + changeThemeToLight(); + localStorage.setItem("isDark", JSON.stringify(false)) + } + } + , [checked] + ); + + return ( +
+ handleChangeToggle(event)} + defaultChecked={checked} + /> + + ); +}; + +export default ToggleTheme; diff --git a/bookstore-frontend-react-app/src/themes.css b/bookstore-frontend-react-app/src/themes.css new file mode 100644 index 00000000..45388afc --- /dev/null +++ b/bookstore-frontend-react-app/src/themes.css @@ -0,0 +1,15 @@ +/* default styling variables - making background color as white */ +#root{ + --bg: #ffffff; + --bg-panel: #ebebeb; + --color-heading: rgb(27, 168, 14); + --color-text: #333333; +} + +/* dark theme styling - Here, we set data-them as "dark"*/ +#root[data-theme='dark'] { + --bg: #333333; + --bg-panel: #434343; + --color-heading: #0077ff; + --color-text: #B5B5B5; +} \ No newline at end of file From 97f3b81577d794677731d9270c401f8ce268e476 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Mon, 13 Sep 2021 12:00:55 -0300 Subject: [PATCH 02/20] Dark card styling. --- bookstore-frontend-react-app/src/App.css | 110 +++++++++++--------- bookstore-frontend-react-app/src/themes.css | 8 +- 2 files changed, 69 insertions(+), 49 deletions(-) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 9d4f4417..24161ada 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -2,91 +2,107 @@ @import url('./themes.css'); #root { - background-color: var(--bg); /* background color variable */ + background-color: var(--bg); /* background color variable */ + color: var(--color-text); } body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } button { - border-radius: 5px !important; + border-radius: 5px !important; } a { - border-radius: 5px !important; + border-radius: 5px !important; } p { - font-family: sans-serif !important; + font-family: sans-serif !important; } .bookstore-brand { - font-family: 'Kaushan Script', cursive; - font-size: 2em !important; - font-weight: 800; - clip-path: polygon(0 30%, 100% 11%, 100% 75%, 0 92%); + font-family: 'Kaushan Script', cursive; + font-size: 2em !important; + font-weight: 800; + clip-path: polygon(0 30%, 100% 11%, 100% 75%, 0 92%); - background: rgb(2, 0, 36); - background: linear-gradient(84deg, rgba(2, 0, 36, 1) 21%, rgba(0, 0, 179, 1) 63%, rgba(191, 0, 76, 1) 92%); - padding: 5px; + background: rgb(2, 0, 36); + background: linear-gradient(84deg, rgba(2, 0, 36, 1) 21%, rgba(0, 0, 179, 1) 63%, rgba(191, 0, 76, 1) 92%); + padding: 5px; } .bookstore-brand:hover { - color: aquamarine !important; + color: aquamarine !important; } .fp-container { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: #111c1fad; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: #111c1fad; } .fp-container .fp-loader { - top: 45%; - left: 48%; - z-index: 10000; - position: absolute; + top: 45%; + left: 48%; + z-index: 10000; + position: absolute; } .pagination { - display: flex; - padding-left: 0; - list-style: none; - border-radius: 0.25rem; + display: flex; + padding-left: 0; + list-style: none; + border-radius: 0.25rem; } .page-item.active { - z-index: 3; - color: #fff; - /* background-color: #d9230f; */ - /* border-color: #d9230f; */ + z-index: 3; + color: #fff; + /* background-color: #d9230f; */ + /* border-color: #d9230f; */ } .page-item:first-child .page-link { - margin-left: 0; - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + margin-left: 0; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; } .page-link { - position: relative; - display: block; - padding: 0.5rem 0.75rem; - margin-left: -1px; - line-height: 1.25; - color: #d9230f; - background-color: #fff; - border: 1px solid #eee; + position: relative; + display: block; + padding: 0.5rem 0.75rem; + margin-left: -1px; + line-height: 1.25; + color: #d9230f; + background-color: #fff; + border: 1px solid #eee; } .row-container-fully-centered { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.card-body { + background-color: var(--bg-panel);; +} + +.card-body a { + color: var(--color-link); +} + +.card-body a :hover { + color: var(--color-hover); + text-decoration: underline; + text-decoration-color: var(--color-hover); + -webkit-text-decoration-color: var(--color-hover); } \ No newline at end of file diff --git a/bookstore-frontend-react-app/src/themes.css b/bookstore-frontend-react-app/src/themes.css index 45388afc..024bb3b7 100644 --- a/bookstore-frontend-react-app/src/themes.css +++ b/bookstore-frontend-react-app/src/themes.css @@ -1,9 +1,11 @@ /* default styling variables - making background color as white */ #root{ --bg: #ffffff; - --bg-panel: #ebebeb; + --bg-panel: #ffffff; --color-heading: rgb(27, 168, 14); --color-text: #333333; + --color-link: #d9230f; + --color-hover: #91170a; } /* dark theme styling - Here, we set data-them as "dark"*/ @@ -11,5 +13,7 @@ --bg: #333333; --bg-panel: #434343; --color-heading: #0077ff; - --color-text: #B5B5B5; + --color-text: #eae9e9; + --color-link: #aeaeae; + --color-hover: #ffffff; } \ No newline at end of file From 70eaf2a57e9b8f08f3ea60d793dc84269d84839a Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Mon, 13 Sep 2021 15:14:40 -0300 Subject: [PATCH 03/20] Page buttons & root height fixes. --- bookstore-frontend-react-app/src/App.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 24161ada..3e385b8a 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -4,6 +4,7 @@ #root { background-color: var(--bg); /* background color variable */ color: var(--color-text); + height: 100vh; } body { @@ -105,4 +106,8 @@ p { text-decoration: underline; text-decoration-color: var(--color-hover); -webkit-text-decoration-color: var(--color-hover); +} + +.pagination .page-link { + border-radius: 5px; } \ No newline at end of file From 4c79f3d82e34aff295097ab4417344816fe72049 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Mon, 13 Sep 2021 16:43:49 -0300 Subject: [PATCH 04/20] Dark Mode Reducer. --- bookstore-frontend-react-app/src/App.css | 9 ++++--- .../src/actions/darkModeActions.js | 9 +++++++ .../{ToggleTheme.js => DarkModeToggle.js} | 24 ++++++++++++------- .../src/components/Header.js | 4 ++-- .../src/constants/darkModeConstants.js | 2 ++ .../src/reducers/darkModeReducer.js | 15 ++++++++++++ .../src/screens/ProductScreen.js | 4 +++- bookstore-frontend-react-app/src/store.js | 8 ++++++- 8 files changed, 60 insertions(+), 15 deletions(-) create mode 100644 bookstore-frontend-react-app/src/actions/darkModeActions.js rename bookstore-frontend-react-app/src/components/{ToggleTheme.js => DarkModeToggle.js} (55%) create mode 100644 bookstore-frontend-react-app/src/constants/darkModeConstants.js create mode 100644 bookstore-frontend-react-app/src/reducers/darkModeReducer.js diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 3e385b8a..7fa3d091 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -4,7 +4,6 @@ #root { background-color: var(--bg); /* background color variable */ color: var(--color-text); - height: 100vh; } body { @@ -93,14 +92,18 @@ p { align-items: center; } -.card-body { - background-color: var(--bg-panel);; +.card-body{ + background-color: var(--bg-panel); } .card-body a { color: var(--color-link); } +.list-group-item { + background-color: var(--bg-panel)!important; +} + .card-body a :hover { color: var(--color-hover); text-decoration: underline; diff --git a/bookstore-frontend-react-app/src/actions/darkModeActions.js b/bookstore-frontend-react-app/src/actions/darkModeActions.js new file mode 100644 index 00000000..c839d3d2 --- /dev/null +++ b/bookstore-frontend-react-app/src/actions/darkModeActions.js @@ -0,0 +1,9 @@ +import { DARK_MODE_ENABLE, DARK_MODE_DISABLE } from '../constants/darkModeConstants'; + +export const ENABLE_DARK_MODE = () => (dispatch) => { + dispatch({ type: DARK_MODE_ENABLE }); +}; + +export const DISABLE_DARK_MODE = () => (dispatch) => { + dispatch({ type: DARK_MODE_DISABLE }); +}; \ No newline at end of file diff --git a/bookstore-frontend-react-app/src/components/ToggleTheme.js b/bookstore-frontend-react-app/src/components/DarkModeToggle.js similarity index 55% rename from bookstore-frontend-react-app/src/components/ToggleTheme.js rename to bookstore-frontend-react-app/src/components/DarkModeToggle.js index bf8d3819..ac0efd5e 100644 --- a/bookstore-frontend-react-app/src/components/ToggleTheme.js +++ b/bookstore-frontend-react-app/src/components/DarkModeToggle.js @@ -1,10 +1,14 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import Form from 'react-bootstrap/Form'; +import { useDispatch, useSelector } from 'react-redux'; +import { ENABLE_DARK_MODE, DISABLE_DARK_MODE } from '../actions/darkModeActions'; -const ToggleTheme = () => { +const DarkModeToggle = () => { - const initialStateChecked = JSON.parse(localStorage.getItem('isDark')); - const [checked, setChecked] = useState(initialStateChecked); + const { isDark } = useSelector((state) => state.darkMode); + const checked = isDark; + + const dispatch = useDispatch(); const changeThemeToDark = () => { document.getElementById('root').setAttribute('data-theme', 'dark'); @@ -15,16 +19,20 @@ const ToggleTheme = () => { }; const handleChangeToggle = (e) => { - setChecked(e.target.checked); + if (e.target.checked) { + dispatch(ENABLE_DARK_MODE()); + } else { + dispatch(DISABLE_DARK_MODE()); + } }; useEffect(() => { if (checked) { changeThemeToDark(); - localStorage.setItem("isDark", JSON.stringify(true)) + localStorage.setItem('isDark', JSON.stringify(true)); } else { changeThemeToLight(); - localStorage.setItem("isDark", JSON.stringify(false)) + localStorage.setItem('isDark', JSON.stringify(false)); } } , [checked] @@ -43,4 +51,4 @@ const ToggleTheme = () => { ); }; -export default ToggleTheme; +export default DarkModeToggle; diff --git a/bookstore-frontend-react-app/src/components/Header.js b/bookstore-frontend-react-app/src/components/Header.js index 423de6df..c0c05f89 100644 --- a/bookstore-frontend-react-app/src/components/Header.js +++ b/bookstore-frontend-react-app/src/components/Header.js @@ -4,7 +4,7 @@ import { LinkContainer } from 'react-router-bootstrap'; import { useDispatch, useSelector } from 'react-redux'; import { isAdmin } from '../service/CommonUtils'; import { logout } from '../actions/userActions'; -import ToggleTheme from './ToggleTheme'; +import DarkModeToggle from './DarkModeToggle'; const Header = (props) => { const userLogin = useSelector((state) => state.userLogin); const { userInfo } = userLogin; @@ -65,7 +65,7 @@ const Header = (props) => { )} - + diff --git a/bookstore-frontend-react-app/src/constants/darkModeConstants.js b/bookstore-frontend-react-app/src/constants/darkModeConstants.js new file mode 100644 index 00000000..5e0becc3 --- /dev/null +++ b/bookstore-frontend-react-app/src/constants/darkModeConstants.js @@ -0,0 +1,2 @@ +export const DARK_MODE_ENABLE = 'DARK_MODE_ENABLE'; +export const DARK_MODE_DISABLE = 'DARK_MODE_DISABLE'; diff --git a/bookstore-frontend-react-app/src/reducers/darkModeReducer.js b/bookstore-frontend-react-app/src/reducers/darkModeReducer.js new file mode 100644 index 00000000..b05c9afd --- /dev/null +++ b/bookstore-frontend-react-app/src/reducers/darkModeReducer.js @@ -0,0 +1,15 @@ +import { + DARK_MODE_ENABLE, + DARK_MODE_DISABLE +} from '../constants/darkModeConstants'; + +export const darkModeReducer = (state = { isDark: false }, action) => { + switch (action.type) { + case DARK_MODE_ENABLE: + return { isDark: true }; + case DARK_MODE_DISABLE: + return { isDark: false }; + default: + return state; + } +}; diff --git a/bookstore-frontend-react-app/src/screens/ProductScreen.js b/bookstore-frontend-react-app/src/screens/ProductScreen.js index 0023efbc..e340da83 100644 --- a/bookstore-frontend-react-app/src/screens/ProductScreen.js +++ b/bookstore-frontend-react-app/src/screens/ProductScreen.js @@ -30,6 +30,8 @@ const ProductScreen = (props) => { const productReviewCreate = useSelector((state) => state.productReviewCreate); const { success: successProductReview, loading: loadingProductReview, error: errorProductReview } = productReviewCreate; + const isDarkMode = useSelector((state) => state.darkMode?.isDark); + useEffect(async () => { // setProductimageBase64(null); // dispatch(listProductDetailsAction(props.match.params.id)); @@ -61,7 +63,7 @@ const ProductScreen = (props) => { return ( <> - + Go Back diff --git a/bookstore-frontend-react-app/src/store.js b/bookstore-frontend-react-app/src/store.js index 1adc5090..a6ccf0b5 100644 --- a/bookstore-frontend-react-app/src/store.js +++ b/bookstore-frontend-react-app/src/store.js @@ -31,6 +31,7 @@ import { import { cartAddReducer, cartDetailReducer, cartRemoveReducer } from './reducers/cartReducers'; import { addressDeleteReducer, addressListMyReducer, addressSaveReducer } from './reducers/addressReducer'; import { paymentMethodListMyReducer, paymentMethodSaveReducer } from './reducers/paymentReducers'; +import { darkModeReducer } from './reducers/darkModeReducer'; const appReducer = combineReducers({ productList: productListReducer, @@ -61,13 +62,15 @@ const appReducer = combineReducers({ addressListMy: addressListMyReducer, addressDelete: addressDeleteReducer, paymentMethodSave: paymentMethodSaveReducer, - paymentMethodListMy: paymentMethodListMyReducer + paymentMethodListMy: paymentMethodListMyReducer, + darkMode: darkModeReducer }); const userInfoFromStorage = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null; const billingAddressId = localStorage.getItem('billingAddressId') ? localStorage.getItem('billingAddressId') : null; const shippingAddressId = localStorage.getItem('shippingAddressId') ? localStorage.getItem('shippingAddressId') : null; const paymentMethodId = localStorage.getItem('paymentMethodId') ? localStorage.getItem('paymentMethodId') : null; +const isDark = localStorage.getItem('isDark') ? JSON.parse(localStorage.getItem('isDark')) : false; const initialState = { userLogin: { userInfo: userInfoFromStorage }, @@ -75,6 +78,9 @@ const initialState = { billingAddressId, shippingAddressId, paymentMethodId + }, + darkMode: { + isDark: isDark } }; From 3022bb7fbcf71d0b622b43f11ff393806c5f4ba2 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Mon, 13 Sep 2021 18:14:16 -0300 Subject: [PATCH 05/20] Link container style. --- bookstore-frontend-react-app/src/App.css | 18 ++++++++---------- .../src/components/CartItem.js | 2 +- .../src/components/Product.js | 2 +- .../src/screens/CartScreen.js | 4 ++-- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 7fa3d091..183652c2 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -4,6 +4,7 @@ #root { background-color: var(--bg); /* background color variable */ color: var(--color-text); + height: 100vh; } body { @@ -92,21 +93,18 @@ p { align-items: center; } -.card-body{ - background-color: var(--bg-panel); -} - -.card-body a { - color: var(--color-link); +.card-body, +.list-group-item +{ + background-color: var(--bg-panel)!important; } -.list-group-item { - background-color: var(--bg-panel)!important; +.link-container a{ + color: var(--color-link)!important; } -.card-body a :hover { +.link-container a :hover{ color: var(--color-hover); - text-decoration: underline; text-decoration-color: var(--color-hover); -webkit-text-decoration-color: var(--color-hover); } diff --git a/bookstore-frontend-react-app/src/components/CartItem.js b/bookstore-frontend-react-app/src/components/CartItem.js index 8a35e6f2..3542d4e1 100644 --- a/bookstore-frontend-react-app/src/components/CartItem.js +++ b/bookstore-frontend-react-app/src/components/CartItem.js @@ -40,7 +40,7 @@ const CartItem = ({ item, addToCart }) => { {item.productName} - + {item.productName} diff --git a/bookstore-frontend-react-app/src/components/Product.js b/bookstore-frontend-react-app/src/components/Product.js index 82c3b561..4370afcd 100644 --- a/bookstore-frontend-react-app/src/components/Product.js +++ b/bookstore-frontend-react-app/src/components/Product.js @@ -8,7 +8,7 @@ const Product = (props) => { const product = props.product; return ( <> - + { ))} )} - + - Add more books + Add more books From 622d6ae499eb374f8e0abd0b65030d17b11afbf7 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Tue, 14 Sep 2021 10:48:27 -0300 Subject: [PATCH 06/20] Checkout, Order, Payment & Shipping dark mode. --- bookstore-frontend-react-app/src/App.css | 5 +++-- .../src/components/CheckoutSteps.js | 16 ++++++++++++---- .../src/components/OrderItem.js | 2 +- .../src/screens/OrderScreen.js | 4 ++-- .../src/screens/PaymentScreen.js | 3 ++- .../src/screens/ShippingScreen.js | 3 ++- bookstore-frontend-react-app/src/themes.css | 2 +- 7 files changed, 23 insertions(+), 12 deletions(-) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 183652c2..bb54db6f 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -103,8 +103,9 @@ p { color: var(--color-link)!important; } -.link-container a :hover{ - color: var(--color-hover); +.link-container a:hover, +.nav-link:hover{ + color: var(--color-hover)!important; text-decoration-color: var(--color-hover); -webkit-text-decoration-color: var(--color-hover); } diff --git a/bookstore-frontend-react-app/src/components/CheckoutSteps.js b/bookstore-frontend-react-app/src/components/CheckoutSteps.js index 67c00446..a80ac78b 100644 --- a/bookstore-frontend-react-app/src/components/CheckoutSteps.js +++ b/bookstore-frontend-react-app/src/components/CheckoutSteps.js @@ -8,7 +8,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => { {step1 ? ( - Sign In         > +
+ Sign In         > +
) : ( Sign In @@ -18,7 +20,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => { {step2 ? ( - Shipping         > +
+ Shipping         > +
) : ( Shipping @@ -28,7 +32,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => { {step3 ? ( - Payment         > +
+ Payment         > +
) : ( Payment @@ -38,7 +44,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => { {step4 ? ( - Place Order +
+ Place Order +
) : ( Place Order diff --git a/bookstore-frontend-react-app/src/components/OrderItem.js b/bookstore-frontend-react-app/src/components/OrderItem.js index 547c3adb..c66bb65b 100644 --- a/bookstore-frontend-react-app/src/components/OrderItem.js +++ b/bookstore-frontend-react-app/src/components/OrderItem.js @@ -34,7 +34,7 @@ const OrderItem = ({ item }) => { {item.productName} - + {product.productName} diff --git a/bookstore-frontend-react-app/src/screens/OrderScreen.js b/bookstore-frontend-react-app/src/screens/OrderScreen.js index 4fd072f2..e21a3700 100644 --- a/bookstore-frontend-react-app/src/screens/OrderScreen.js +++ b/bookstore-frontend-react-app/src/screens/OrderScreen.js @@ -69,7 +69,7 @@ const OrderScreen = ({ match, history }) => {

Name: {userInfo.userName}

-

+

Email: {userInfo.email}

@@ -96,7 +96,7 @@ const OrderScreen = ({ match, history }) => { Not Paid )} -

+

Payment Receipt : {order.paymentReceiptUrl} diff --git a/bookstore-frontend-react-app/src/screens/PaymentScreen.js b/bookstore-frontend-react-app/src/screens/PaymentScreen.js index e6a21f3d..3a642b80 100644 --- a/bookstore-frontend-react-app/src/screens/PaymentScreen.js +++ b/bookstore-frontend-react-app/src/screens/PaymentScreen.js @@ -89,7 +89,8 @@ const PaymentScreen = ({ history }) => { className='p-2' style={{ whiteSpace: 'pre-wrap', - backgroundColor: '#eeeeee' + backgroundColor: '#eeeeee', + color: '#0e0e0e' }} onClick={(e) => { console.log(a.paymentMethodId); diff --git a/bookstore-frontend-react-app/src/screens/ShippingScreen.js b/bookstore-frontend-react-app/src/screens/ShippingScreen.js index de21c53e..5ca14601 100644 --- a/bookstore-frontend-react-app/src/screens/ShippingScreen.js +++ b/bookstore-frontend-react-app/src/screens/ShippingScreen.js @@ -124,7 +124,8 @@ const ShippingScreen = ({ history }) => { className='p-2' style={{ whiteSpace: 'pre-wrap', - backgroundColor: '#eeeeee' + backgroundColor: '#eeeeee', + color: '#0e0e0e' }} onClick={() => { if (shippingCheckbox) { diff --git a/bookstore-frontend-react-app/src/themes.css b/bookstore-frontend-react-app/src/themes.css index 024bb3b7..9e995993 100644 --- a/bookstore-frontend-react-app/src/themes.css +++ b/bookstore-frontend-react-app/src/themes.css @@ -14,6 +14,6 @@ --bg-panel: #434343; --color-heading: #0077ff; --color-text: #eae9e9; - --color-link: #aeaeae; + --color-link: #ececec; --color-hover: #ffffff; } \ No newline at end of file From c071a848d184e961f78622395cdde871e52d8851 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Tue, 14 Sep 2021 10:57:15 -0300 Subject: [PATCH 07/20] Dinamyc dark mode for tables. --- bookstore-frontend-react-app/src/App.css | 9 +++++++++ bookstore-frontend-react-app/src/themes.css | 2 ++ 2 files changed, 11 insertions(+) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index bb54db6f..17ab075b 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -99,6 +99,15 @@ p { background-color: var(--bg-panel)!important; } +.table { + color: var(--color-text)!important; +} + +.table-hover tbody tr:hover { + color: var(--color-text)!important; + background-color: var(--color-hover-row)!important; +} + .link-container a{ color: var(--color-link)!important; } diff --git a/bookstore-frontend-react-app/src/themes.css b/bookstore-frontend-react-app/src/themes.css index 9e995993..64d8b04b 100644 --- a/bookstore-frontend-react-app/src/themes.css +++ b/bookstore-frontend-react-app/src/themes.css @@ -6,6 +6,7 @@ --color-text: #333333; --color-link: #d9230f; --color-hover: #91170a; + --color-hover-row: rgba(0,0,0,.075); } /* dark theme styling - Here, we set data-them as "dark"*/ @@ -16,4 +17,5 @@ --color-text: #eae9e9; --color-link: #ececec; --color-hover: #ffffff; + --color-hover-row: rgba(0,0,0,.35); } \ No newline at end of file From 3d89e8ef1e75a99c6de7a20469ded878ae397b38 Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Tue, 14 Sep 2021 13:20:15 -0300 Subject: [PATCH 08/20] Fix background color. --- bookstore-frontend-react-app/src/App.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/bookstore-frontend-react-app/src/App.css b/bookstore-frontend-react-app/src/App.css index 17ab075b..7096a6ea 100644 --- a/bookstore-frontend-react-app/src/App.css +++ b/bookstore-frontend-react-app/src/App.css @@ -7,6 +7,10 @@ height: 100vh; } +#root main { + background-color: var(--bg)!important; +} + body { margin: 0; padding: 0; From 1ffca3ea6926c87b5def81c892c6644b860b6ead Mon Sep 17 00:00:00 2001 From: DanielChungara Date: Tue, 14 Sep 2021 17:14:46 -0300 Subject: [PATCH 09/20] Adding search component. --- .../src/components/Header.js | 2 ++ .../src/components/SearchBar.js | 26 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 bookstore-frontend-react-app/src/components/SearchBar.js diff --git a/bookstore-frontend-react-app/src/components/Header.js b/bookstore-frontend-react-app/src/components/Header.js index c0c05f89..0b862b2b 100644 --- a/bookstore-frontend-react-app/src/components/Header.js +++ b/bookstore-frontend-react-app/src/components/Header.js @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { isAdmin } from '../service/CommonUtils'; import { logout } from '../actions/userActions'; import DarkModeToggle from './DarkModeToggle'; +import SearchBar from './SearchBar'; const Header = (props) => { const userLogin = useSelector((state) => state.userLogin); const { userInfo } = userLogin; @@ -30,6 +31,7 @@ const Header = (props) => { BookStore +