Skip to content
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

Jump to bottom

Feature/dark mode #4

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Feature/dark mode #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c80f8e3
Toggle button.
danielchungara1 Sep 13, 2021
97f3b81
Dark card styling.
danielchungara1 Sep 13, 2021
70eaf2a
Page buttons & root height fixes.
danielchungara1 Sep 13, 2021
4c79f3d
Dark Mode Reducer.
danielchungara1 Sep 13, 2021
3022bb7
Link container style.
danielchungara1 Sep 13, 2021
622d6ae
Checkout, Order, Payment & Shipping dark mode.
danielchungara1 Sep 14, 2021
c071a84
Dinamyc dark mode for tables.
danielchungara1 Sep 14, 2021
3d89e8e
Fix background color.
danielchungara1 Sep 14, 2021
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
132 changes: 90 additions & 42 deletions bookstore-frontend-react-app/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,128 @@
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('./themes.css');

#root {
background-color: var(--bg); /* background color variable */
color: var(--color-text);
height: 100vh;
}

#root main {
background-color: var(--bg)!important;
}

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;
}

.card-body,
.list-group-item
{
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;
}

.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);
}

.pagination .page-link {
border-radius: 5px;
}
9 changes: 9 additions & 0 deletions bookstore-frontend-react-app/src/actions/darkModeActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 });
};
2 changes: 1 addition & 1 deletion bookstore-frontend-react-app/src/components/CartItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const CartItem = ({ item, addToCart }) => {
<Col md={2}>
<Image src={`${BACKEND_API_GATEWAY_URL}/api/catalog/image/${product?.imageId}`} alt={item.productName} fluid rounded></Image>
</Col>
<Col md={3} className='pt-4'>
<Col md={3} className='pt-4 link-container'>
<Link to={`/product/${item.productId}`}>{item.productName}</Link>
</Col>
<Col md={2} className='pt-4'>
Expand Down
16 changes: 12 additions & 4 deletions bookstore-frontend-react-app/src/components/CheckoutSteps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => {
<Nav.Item>
{step1 ? (
<LinkContainer to='/login'>
<Nav.Link>Sign In &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
<div className="link-container">
<Nav.Link>Sign In &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
</div>
</LinkContainer>
) : (
<Nav.Link disabled>Sign In</Nav.Link>
Expand All @@ -18,7 +20,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => {
<Nav.Item>
{step2 ? (
<LinkContainer to='/shipping'>
<Nav.Link>Shipping &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
<div className="link-container">
<Nav.Link>Shipping &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
</div>
</LinkContainer>
) : (
<Nav.Link disabled>Shipping</Nav.Link>
Expand All @@ -28,7 +32,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => {
<Nav.Item>
{step3 ? (
<LinkContainer to='/payment'>
<Nav.Link>Payment &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
<div className="link-container">
<Nav.Link>Payment &nbsp; &nbsp; &nbsp; &nbsp; ></Nav.Link>
</div>
</LinkContainer>
) : (
<Nav.Link disabled>Payment</Nav.Link>
Expand All @@ -38,7 +44,9 @@ const CheckoutSteps = ({ step1, step2, step3, step4 }) => {
<Nav.Item>
{step4 ? (
<LinkContainer to='/placeorder'>
<Nav.Link>Place Order</Nav.Link>
<div className="link-container">
<Nav.Link>Place Order</Nav.Link>
</div>
</LinkContainer>
) : (
<Nav.Link disabled>Place Order</Nav.Link>
Expand Down
54 changes: 54 additions & 0 deletions bookstore-frontend-react-app/src/components/DarkModeToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
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 DarkModeToggle = () => {

const { isDark } = useSelector((state) => state.darkMode);
const checked = isDark;

const dispatch = useDispatch();

const changeThemeToDark = () => {
document.getElementById('root').setAttribute('data-theme', 'dark');
};

const changeThemeToLight = () => {
document.getElementById('root').setAttribute('data-theme', 'light');
};

const handleChangeToggle = (e) => {
if (e.target.checked) {
dispatch(ENABLE_DARK_MODE());
} else {
dispatch(DISABLE_DARK_MODE());
}
};

useEffect(() => {
if (checked) {
changeThemeToDark();
localStorage.setItem('isDark', JSON.stringify(true));
} else {
changeThemeToLight();
localStorage.setItem('isDark', JSON.stringify(false));
}
}
, [checked]
);

return (
<Form className="row-container-fully-centered">
<Form.Check
type="switch"
id="custom-switch"
label={checked ? '🌙' : '🌞'}
onChange={event => handleChangeToggle(event)}
defaultChecked={checked}
/>
</Form>
);
};

export default DarkModeToggle;
2 changes: 2 additions & 0 deletions bookstore-frontend-react-app/src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 DarkModeToggle from './DarkModeToggle';
const Header = (props) => {
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
Expand Down Expand Up @@ -64,6 +65,7 @@ const Header = (props) => {
</LinkContainer>
</NavDropdown>
)}
<DarkModeToggle/>
</Nav>
</Navbar.Collapse>
</Container>
Expand Down
2 changes: 1 addition & 1 deletion bookstore-frontend-react-app/src/components/OrderItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const OrderItem = ({ item }) => {
<Col md={2}>
<Image src={`${BACKEND_API_GATEWAY_URL}/api/catalog/image/${product?.imageId}`} alt={item.productName} fluid rounded></Image>
</Col>
<Col md={3} className='pt-4'>
<Col md={3} className='pt-4 link-container'>
<Link to={`/product/${item.productId}`}>{product.productName}</Link>
</Col>
<Col md={2} className='pt-4'>
Expand Down
2 changes: 1 addition & 1 deletion bookstore-frontend-react-app/src/components/Product.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Product = (props) => {
const product = props.product;
return (
<>
<Card className='my-3 rounded' style={{ height: '400px' }}>
<Card className='my-3 rounded link-container' style={{ height: '400px' }}>
<Link to={`/product/${product.productId}`}>
<Card.Img
src={`${BACKEND_API_GATEWAY_URL}/api/catalog/image/${product?.imageId}`}
Expand Down
2 changes: 2 additions & 0 deletions bookstore-frontend-react-app/src/constants/darkModeConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const DARK_MODE_ENABLE = 'DARK_MODE_ENABLE';
export const DARK_MODE_DISABLE = 'DARK_MODE_DISABLE';
15 changes: 15 additions & 0 deletions bookstore-frontend-react-app/src/reducers/darkModeReducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
};
4 changes: 2 additions & 2 deletions bookstore-frontend-react-app/src/screens/CartScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ const CartScreen = (props) => {
))}
</ListGroup.Item>
)}
<Row className='m-5 justify-content-md-center'>
<Row className='m-5 justify-content-md-center link-container'>
<LinkContainer to={'/'}>
<a>Add more books</a>
<a className="link-description">Add more books</a>
</LinkContainer>
</Row>
</Col>
Expand Down
4 changes: 2 additions & 2 deletions bookstore-frontend-react-app/src/screens/OrderScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const OrderScreen = ({ match, history }) => {
<p>
<strong>Name: </strong> {userInfo.userName}
</p>
<p>
<p className="link-container">
<strong>Email: </strong> <a href={`mailto:${userInfo.email}`}>{userInfo.email}</a>
</p>
<p>
Expand All @@ -96,7 +96,7 @@ const OrderScreen = ({ match, history }) => {
<Message variant='danger'>Not Paid</Message>
)}

<p>
<p className="link-container">
<strong>Payment Receipt : </strong>
<a href={order.paymentReceiptUrl} target='_blank'>
{order.paymentReceiptUrl}
Expand Down
3 changes: 2 additions & 1 deletion bookstore-frontend-react-app/src/screens/PaymentScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading