fix: add search & styles cleanup

buzzracharyeah-rejan · Jul 8, 2023 · 9cb45fd · 9cb45fd
1 parent f1b39da
commit 9cb45fd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,8 +1,8 @@
-import { AppBar, Box, IconButton, Link, Toolbar } from '@mui/material';
-import React from 'react';
+import { AppBar, Box, IconButton, InputBase, Link, Toolbar } from '@mui/material';
+import React, { useState } from 'react';
 import FlexBetween from '../FlexBetween';
 import logo from '/assets/logo.png';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
 
 /* ASSETS */
 import './navbar.styles.css';
@@ -14,6 +14,9 @@ import {
 } from '@mui/icons-material';
 
 const Navbar = () => {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState<boolean>(false);
+
   return (
     <AppBar
       sx={{ position: 'static', background: 'none', boxShadow: 'none', padding: '1.25rem 3.5rem' }}
@@ -45,8 +48,16 @@ const Navbar = () => {
           </FlexBetween>
         </Box>
 
-        <FlexBetween>
-          <IconButton>
+        <FlexBetween sx={{ width: '460px' }}>
+          <InputBase
+            placeholder='Search Product'
+            sx={{
+              background: '#f3f3f3',
+              visibility: search ? 'visible' : 'hidden',
+              p: '0.5rem 0.85rem',
+            }}
+          />
+          <IconButton onClick={() => setSearch(!search)}>
             <SearchOutlined />
           </IconButton>
           <IconButton>
@@ -55,7 +66,7 @@ const Navbar = () => {
           <IconButton>
             <FavoriteBorder />
           </IconButton>
-          <IconButton>
+          <IconButton onClick={() => navigate('/cart')}>
             <ShoppingCartCheckoutOutlined />
           </IconButton>
         </FlexBetween>

diff --git a/src/scenes/Cart/index.tsx b/src/scenes/Cart/index.tsx
@@ -3,9 +3,12 @@ import Header from '../../components/Header';
 import FlexBetween from '../../components/FlexBetween';
 import ItemsTable from './ItemsTable';
 import useStyles from './useStyles';
+import { useNavigate } from 'react-router-dom';
 
 const Cart = () => {
+  const navigate = useNavigate();
   const { classes } = useStyles();
+
   return (
     <>
       <Header title='Cart' location='Home' location1='Cart' />
@@ -35,7 +38,9 @@ const Cart = () => {
                 </Typography>
               </FlexBetween>
 
-              <Button sx={classes.orderBtn}>Check Out</Button>
+              <Button sx={classes.orderBtn} onClick={() => navigate('/checkout')}>
+                Check Out
+              </Button>
             </Box>
           </Grid>
         </Grid>

diff --git a/src/scenes/Checkout/index.tsx b/src/scenes/Checkout/index.tsx
@@ -91,7 +91,7 @@ const Checkout = () => {
         </Grid>
 
         {/* RIGHT */}
-        <Grid item xs={12} md={6} lg={7}>
+        <Grid item xs={12} md={5} lg={6} mx='2.5rem'>
           <Box sx={{ ...classes.justifyContentCol, m: '6.5rem 0 2.5rem 0' }}>
             <FlexBetween sx={{ m: '1rem 0' }}>
               <Box display='flex' flexDirection={'column'} gap={3}>
@@ -108,7 +108,9 @@ const Checkout = () => {
                 <Typography sx={classes.title}>Subtotal</Typography>
                 <Typography sx={classes.body}>Rs 250,000.00</Typography>
                 <Typography sx={classes.body}>Rs 250,000.00</Typography>
-                <Typography sx={classes.highlightPrice}>Rs 250,000.00</Typography>
+                <Typography sx={{ ...classes.highlightPrice, ml: '-2rem' }}>
+                  Rs 250,000.00
+                </Typography>
               </Box>
             </FlexBetween>
           </Box>