diff --git a/react-app/public/index.html b/react-app/public/index.html index 8dc1093..1ca97e5 100644 --- a/react-app/public/index.html +++ b/react-app/public/index.html @@ -6,10 +6,14 @@ + + + + Archer
- + \ No newline at end of file diff --git a/react-app/src/components/NavBar.js b/react-app/src/components/NavBar.js index 4a614dc..351a64d 100644 --- a/react-app/src/components/NavBar.js +++ b/react-app/src/components/NavBar.js @@ -1,4 +1,3 @@ - import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; import { useSelector } from 'react-redux'; @@ -8,88 +7,71 @@ import LogoIconComp from './LogoIconComp/LogoIconComp'; import ArcherLogoCrop from '../images/Logo/ArcherLogoCrop.png'; import path200 from '../images/Logo/path200.svg'; import DarkModeToggle from './DarkModeToggle'; -// import { isDark } from './DarkModeToggle/index.js'; const NavBar = () => { - const user = useSelector(state => state.session.user); - const dark_mode_pref = useSelector(state => state.session.user?.dark_mode_pref); + const [isOpen, setIsOpen] = useState(false); + + const user = useSelector((state) => state.session.user); + const dark_mode_pref = useSelector( + (state) => state.session.user?.dark_mode_pref + ); return ( - + {/*
*/} + ); -} +}; -export default NavBar; +export default NavBar; \ No newline at end of file diff --git a/react-app/src/components/WatchLists/CreateWatchListModal.js b/react-app/src/components/WatchLists/CreateWatchListModal.js index fc70dbe..b10d38e 100644 --- a/react-app/src/components/WatchLists/CreateWatchListModal.js +++ b/react-app/src/components/WatchLists/CreateWatchListModal.js @@ -28,6 +28,9 @@ const CreateWatchListModal = () => { if (newWatchlistName.length < 1) { setErrors(['Watchlist name cannot be empty']) return; + } else if (newWatchlistName.length >= 10) { + setErrors(['Watchlist name cannot be longer than 10 characters']) + return; } await dispatch(createNewWatchlist(newWatchlistName)) @@ -55,7 +58,7 @@ const CreateWatchListModal = () => { value={newWatchlistName} onChange={event => setNewWatchlistName(event.target.value)} minLength="1" - maxLength="255" + maxLength="10" placeholder="Create Watchlist" /> diff --git a/react-app/src/components/WatchLists/WatchLists.css b/react-app/src/components/WatchLists/WatchLists.css index 0cce2e7..798e94c 100644 --- a/react-app/src/components/WatchLists/WatchLists.css +++ b/react-app/src/components/WatchLists/WatchLists.css @@ -1,110 +1,103 @@ -.watchlist-container{ +.watchlist-container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; - + margin-left: auto; margin-right: 0; - + width: 100%; min-width: fit-content; height: fit-content; - + padding-top: 20px; padding-bottom: 20px; - - + border-radius: 20px; /* border: 1px solid black; */ - -} - -.watchlist-container-main-header{ + } + + .watchlist-container-main-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; - + width: 100%; - - /* padding-left: 20px; */ + + padding-left: 20px; padding-right: 20px; - + box-sizing: border-box; - + /* border-bottom: 1px solid black; */ -} - -.watchlist-container-main-header button{ + } + + .watchlist-container-main-header button { font-size: 20px; - + box-sizing: border-box; - + /* border-bottom: 1px solid black; */ -} - - -/* .watchlist-container h3:first-of-type{ - margin-left: 20px; -} */ - -/* .watchlist-container input:first-of-type{ - margin-left: 20px; - padding-right: 20px; -} */ - -.watchlist-container button:first-of-type{ + } + + /* .watchlist-container h3:first-of-type{ + margin-left: 20px; + } */ + + /* .watchlist-container input:first-of-type{ + margin-left: 20px; + padding-right: 20px; + } */ + + .watchlist-container button:first-of-type { /* margin-left: 5px; */ background-color: transparent; border: none; outline: none; -} - - -.watchlist-all-watchlists-container{ + } + + .watchlist-all-watchlists-container { display: flex; flex-direction: column; justify-content: center; align-items: center; - + width: 100%; -} - -.watchlist-individual { + } + + .watchlist-individual { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-wrap: wrap; - + width: 100%; - + /* margin-top: 10px; */ - + border-top: 1px solid black; /* border-bottom: 1px solid black; */ - + box-sizing: border-box; - - -} - -.watchlist-individual button { + } + + .watchlist-individual button { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + background-color: transparent; border: none; outline: none; - -} - -.watchlist-individual-header { + } + + .watchlist-individual-header { display: flex; flex-direction: row; justify-content: space-between; @@ -112,191 +105,186 @@ flex-wrap: nowrap; overflow: hidden; max-width: 60%; - -} - -/* .watchlist-individual-header h4 { - padding-left: 20px; - color: red; - -} */ - -.watchlist-individual-name-buttons{ + } + + /* .watchlist-individual-header h4 { + padding-left: 20px; + color: red; + } */ + + .watchlist-individual-name-buttons { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + align-content: center; - - padding-top:20px; + + padding-top: 20px; padding-left: 20px; padding-right: 20px; /* padding-bottom: 20px; */ - + box-sizing: border-box; -} - -.watchlist-individual-header-buttons-container{ + } + + .watchlist-individual-header-buttons-container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + align-content: center; -} - -.watchlist-individual-header-buttons-container button, .watchlist-individual-header-buttons-container i { + } + + .watchlist-individual-header-buttons-container button, + .watchlist-individual-header-buttons-container i { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + align-content: center; - -} - -.watchlist-individual .watchlist-stock-list { + } + + .watchlist-individual .watchlist-stock-list { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-wrap: nowrap; - + width: 100%; -} - -.watchlist-individual-name-buttons{ + } + + .watchlist-individual-name-buttons { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; - + width: 100%; -} - -.watchlist-individual-button { + } + + .watchlist-individual-button { margin: 2px; width: 30px; height: 30px; -} - -.watchlist-individual-button button { + } + + .watchlist-individual-button button { margin: 2px; width: 30px; height: 30px; -} - -.watchlist-stock-individual { + } + + .watchlist-stock-individual { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; - + width: 100%; - + box-sizing: border-box; - + padding-left: 20px; padding-right: 20px; - + /* margin-top: 10px; */ -} - -.watchlist-stock-individual-symbol{ + } + + .watchlist-stock-individual-symbol { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; - + font-size: large; font-weight: 700; - + width: 100%; - + margin-right: 10px; - -} - -.stock-individual-number-of-shares{ + } + + .stock-individual-number-of-shares { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; - + font-size: small; font-weight: 500; - + width: 100%; - + margin-right: 10px; - -} - -.watchlist-stock-individual-chart{ + } + + .watchlist-stock-individual-chart { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: nowrap; - + width: 100%; min-width: 100px; - + margin: 10px; - -} - -.watchlist-stock-individual-price-and-change{ + } + + .watchlist-stock-individual-price-and-change { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; flex-wrap: nowrap; - + width: 100%; - + margin-left: 10px; margin-right: 10px; -} - -.watchlist-stock-individual-price-and-change-positive{ + } + + .watchlist-stock-individual-price-and-change-positive { color: green; -} - -.watchlist-stock-individual-price-and-change-negative{ + } + + .watchlist-stock-individual-price-and-change-negative { color: red; -} - -.watchlist-stock-individual-delete-button { + } + + .watchlist-stock-individual-delete-button { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + width: 100%; - + margin-left: 10px; margin-right: 10px; -} - -.watchlist-stock-individual-delete-button button { + } + + .watchlist-stock-individual-delete-button button { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; - + width: 100%; - + margin-left: 10px; margin-right: 10px; -} \ No newline at end of file + } \ No newline at end of file diff --git a/react-app/src/components/WatchLists/index.js b/react-app/src/components/WatchLists/index.js index 1cc358e..ec26ee4 100644 --- a/react-app/src/components/WatchLists/index.js +++ b/react-app/src/components/WatchLists/index.js @@ -1,7 +1,18 @@ import React, { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; -import { fetchWatchlists, createNewWatchlist, deleteWatchlist, fetchWatchlistById, updateWatchlist, addStockToWatchlistThunk, removeStockFromWatchlistThunk, getWatchlistStockData, getWatchlistStockDataDaily, getStockCurrentPriceFinnHub } from '../../store/watchlists'; +import { + fetchWatchlists, + createNewWatchlist, + deleteWatchlist, + fetchWatchlistById, + updateWatchlist, + addStockToWatchlistThunk, + removeStockFromWatchlistThunk, + getWatchlistStockData, + getWatchlistStockDataDaily, + getStockCurrentPriceFinnHub, +} from '../../store/watchlists'; // import {getSingleStockCurrentPriceYahoo} from '../../store/stocks'; import { getAllStocks } from '../../store/stockList'; import StockList from '../StockList'; @@ -13,305 +24,352 @@ import DeleteWatchListModal from './DeleteWatchListModal'; import './WatchLists.css'; const Watchlists = () => { - const [loading, setLoading] = useState(true); - const [isCalling, setIsCalling] = useState(false); - - const [isAdding, setIsAdding] = useState(false); - const [showStocks, setShowStocks] = useState(0); - - const [isEditing, setIsEditing] = useState(0); - const [edittedWatchlistName, setEdittedWatchlistName] = useState(''); - - const [newWatchlistName, setNewWatchlistName] = useState(''); - const dispatch = useDispatch(); - const watchlists = useSelector(state => state.watchlists.allWatchlists); - const watchListStockData = useSelector(state => state.watchlists.watchlistStockData); - const state = useSelector(state => state); - - const hitAPI = async () => { - if (watchlists.length > 0) { - watchlists.forEach(watchlist => { - watchlist?.stocks?.forEach(async (stock) => { - // console.log(stock.symbol) - if (!watchListStockData[stock.symbol] && !isCalling) { - setIsCalling(true); - - await dispatch(getStockCurrentPriceFinnHub(stock.symbol)) - - // await dispatch(getWatchlistStockData(stock.symbol)) - if (typeof watchListStockData[stock.symbol]?.dailyData === 'undefined') { - await dispatch(getWatchlistStockDataDaily(stock.symbol)) - .then(() => setIsCalling(false)) - } else { - setIsCalling(false) - } - } - }) - }) - } + const [loading, setLoading] = useState(true); + const [isCalling, setIsCalling] = useState(false); + + const [isAdding, setIsAdding] = useState(false); + const [showStocks, setShowStocks] = useState(0); + + const [isEditing, setIsEditing] = useState(0); + const [edittedWatchlistName, setEdittedWatchlistName] = useState(''); + + const [newWatchlistName, setNewWatchlistName] = useState(''); + const dispatch = useDispatch(); + const watchlists = useSelector((state) => state.watchlists.allWatchlists); + const watchListStockData = useSelector( + (state) => state.watchlists.watchlistStockData + ); + const state = useSelector((state) => state); + + const hitAPI = async () => { + if (watchlists.length > 0) { + watchlists.forEach((watchlist) => { + watchlist?.stocks?.forEach(async (stock) => { + // console.log(stock.symbol) + if (!watchListStockData[stock.symbol] && !isCalling) { + setIsCalling(true); + + await dispatch(getStockCurrentPriceFinnHub(stock.symbol)); + + // await dispatch(getWatchlistStockData(stock.symbol)) + if ( + typeof watchListStockData[stock.symbol]?.dailyData === 'undefined' + ) { + await dispatch(getWatchlistStockDataDaily(stock.symbol)).then( + () => setIsCalling(false) + ); + } else { + setIsCalling(false); + } + } + }); + }); } + }; - useEffect(() => { - setLoading(true); + useEffect(() => { + setLoading(true); - dispatch(fetchWatchlists()); - dispatch(getAllStocks()); + dispatch(fetchWatchlists()); + dispatch(getAllStocks()); - // const timer = setTimeout(() => { - // hitAPI(); - // }, 7000); + // const timer = setTimeout(() => { + // hitAPI(); + // }, 7000); - // console.log(state) - setLoading(false); + // console.log(state) + setLoading(false); - // return () => clearTimeout(timer); - }, [dispatch]); + // return () => clearTimeout(timer); + }, [dispatch]); - useEffect(() => { - if (!loading && watchlists.length > 0 && !isCalling) { - hitAPI(); - } - }, [watchlists]); - - - const formatWatchlistStockData = async (watchlistStockSymbol) => { - let stockCurrentPrice = 0; - let stockCurrentPercentageChange = 0; - if (!loading && !watchListStockData[watchlistStockSymbol].dailyData) { - await dispatch(getWatchlistStockDataDaily(watchlistStockSymbol)) - .then((res) => { - stockCurrentPrice = res.close - return res - }) - .then((res) => { - stockCurrentPercentageChange = res.percent_change - return res - }) - // stockCurrentPrice = watchListStockData[watchlistStockSymbol]?.close; - // stockCurrentPercentageChange = watchListStockData[watchlistStockSymbol]?.percent_change; - } - // console.log('watchlistStockSymbol: ', watchlistStockSymbol) - // console.log('watchListStockData: ', watchListStockData) - // console.log('stockCurrentPrice: ', stockCurrentPrice) - // console.log('stockCurrentPercentageChange: ', stockCurrentPercentageChange) - return [stockCurrentPrice, stockCurrentPercentageChange] + useEffect(() => { + if (!loading && watchlists.length > 0 && !isCalling) { + hitAPI(); } - - - - const handleWatchlistCreate = async (e) => { - e.preventDefault(); - - setLoading(true); - setIsAdding(true) - - await dispatch(createNewWatchlist(newWatchlistName)) - .then(async () => await dispatch(fetchWatchlists())) - - setNewWatchlistName(''); - setLoading(false); - setIsAdding(false) - }; - - const handleWatchlistDelete = async (watchlistId) => { - setLoading(true); - dispatch(deleteWatchlist(watchlistId)); - dispatch(fetchWatchlists()); - setLoading(false); - }; - - const handleWatchlistEdit = async (watchlistId, newName) => { - setLoading(true); - dispatch(updateWatchlist(watchlistId, newName)); - setLoading(false); - setIsEditing(0); + }, [watchlists]); + + const formatWatchlistStockData = async (watchlistStockSymbol) => { + let stockCurrentPrice = 0; + let stockCurrentPercentageChange = 0; + if (!loading && !watchListStockData[watchlistStockSymbol].dailyData) { + await dispatch(getWatchlistStockDataDaily(watchlistStockSymbol)) + .then((res) => { + stockCurrentPrice = res.close; + return res; + }) + .then((res) => { + stockCurrentPercentageChange = res.percent_change; + return res; + }); + // stockCurrentPrice = watchListStockData[watchlistStockSymbol]?.close; + // stockCurrentPercentageChange = watchListStockData[watchlistStockSymbol]?.percent_change; } + // console.log('watchlistStockSymbol: ', watchlistStockSymbol) + // console.log('watchListStockData: ', watchListStockData) + // console.log('stockCurrentPrice: ', stockCurrentPrice) + // console.log('stockCurrentPercentageChange: ', stockCurrentPercentageChange) + return [stockCurrentPrice, stockCurrentPercentageChange]; + }; - const handleWatchlistStockDelete = async (watchlistId, stockId) => { - setLoading(true); - // dispatch(deleteWatchlist(watchlistId)); - dispatch(removeStockFromWatchlistThunk(watchlistId, stockId)); - dispatch(fetchWatchlists()); - setLoading(false); - }; - - return ( -
-
-

- Lists -   -

- - } - className='watchlist-create-button' - faIcon={'fa-solid fa-plus'} - // buttonText={'Create Watchlist'} - /> - -
-
- {(watchlists.length > 0) && - watchlists?.map((watchlist, idx) => ( - <> - { - (!loading && !isAdding && watchlist?.id !== undefined && watchlist?.id !== null && watchlist?.id !== 0) - ? -
-
- { - (isEditing !== watchlist.id) ? - <> -

{watchlist.name}

- - : -
- setEdittedWatchlistName(event.target.value)} - minLength="1" - maxLength="255" - placeholder="Edit Watchlist" - /> - -
- } -
-
+ const handleWatchlistCreate = async (e) => { + e.preventDefault(); - } - className='watchlist-individual-header watchlist-individual-button' - faIcon={'fa-regular fa-pen-to-square'} - // buttonText={'Create Watchlist'} - /> -
+ setLoading(true); + setIsAdding(true); -
+ await dispatch(createNewWatchlist(newWatchlistName)).then( + async () => await dispatch(fetchWatchlists()) + ); - } - className='watchlist-individual-header watchlist-individual-button' - faIcon={'fa-solid fa-trash-can'} - // buttonText={'Create Watchlist'} - /> -
- + setNewWatchlistName(''); + setLoading(false); + setIsAdding(false); + }; + + const handleWatchlistDelete = async (watchlistId) => { + setLoading(true); + dispatch(deleteWatchlist(watchlistId)); + dispatch(fetchWatchlists()); + setLoading(false); + }; + + const handleWatchlistEdit = async (watchlistId, newName) => { + setLoading(true); + dispatch(updateWatchlist(watchlistId, newName)); + setLoading(false); + setIsEditing(0); + }; + + const handleWatchlistStockDelete = async (watchlistId, stockId) => { + setLoading(true); + // dispatch(deleteWatchlist(watchlistId)); + dispatch(removeStockFromWatchlistThunk(watchlistId, stockId)); + dispatch(fetchWatchlists()); + setLoading(false); + }; + + return ( +
+
+

Lists

+ + } + className="watchlist-create-button" + faIcon={'fa-solid fa-plus'} + // buttonText={'Create Watchlist'} + /> + +
+
+ {watchlists.length > 0 && + watchlists?.map((watchlist, idx) => ( + <> + {!loading && + !isAdding && + watchlist?.id !== undefined && + watchlist?.id !== null && + watchlist?.id !== 0 ? ( +
+
+ {isEditing !== watchlist.id ? ( + <> +

+ {watchlist.name} +

+ + ) : ( +
+ + setEdittedWatchlistName(event.target.value) + } + minLength="1" + maxLength="255" + placeholder="Edit Watchlist" + /> + +
+ )} +
+
+ + } + className="watchlist-individual-header watchlist-individual-button" + faIcon={'fa-regular fa-pen-to-square'} + // buttonText={'Create Watchlist'} + /> +
+ +
+ + } + className="watchlist-individual-header watchlist-individual-button" + faIcon={'fa-solid fa-trash-can'} + // buttonText={'Create Watchlist'} + /> +
+ +
+
+ {showStocks === watchlist.id && ( +
+ {watchlist?.stocks?.map((stock) => ( +
+
+
+ + {stock.symbol} + +
+
+
+
+ {watchListStockData[stock.symbol]?.dailyData + ?.length > 1 ? ( + + ) : ( +

Loading...

+ )} +
+
+
+ <> + {watchListStockData[stock.symbol] ? ( +
+
+ { +
+ {/* ${parseFloat(watchListStockData[stock.symbol]?.Info?.close).toFixed(2)} */} + {watchListStockData[stock.symbol] + ?.currentPrice?.c > 0 ? ( + <> + $ + {parseFloat( + watchListStockData[stock.symbol] + ?.currentPrice?.c + ).toFixed(2)} + + ) : ( + <> + + + )} +
+ } +
+
+ {!isNaN( + watchListStockData[stock.symbol] + ?.currentPrice?.dp + ) ? ( + <> + <> + {watchListStockData[stock.symbol] + ?.currentPrice?.dp > 0 && ( +
+ + + {parseFloat( + watchListStockData[stock.symbol] + ?.currentPrice?.dp + ).toFixed(2)} + %
-
- {showStocks === watchlist.id && -
- {watchlist?.stocks?.map(stock => ( -
-
-
- - {stock.symbol} - -
-
-
-
- { - (watchListStockData[stock.symbol]?.dailyData?.length > 1) ? - - : -

Loading...

- } -
-
-
- <> - { - watchListStockData[stock.symbol] ? -
-
- { -
- {/* ${parseFloat(watchListStockData[stock.symbol]?.Info?.close).toFixed(2)} */} - { - watchListStockData[stock.symbol]?.currentPrice?.c > 0 ? - <> - ${parseFloat(watchListStockData[stock.symbol]?.currentPrice?.c).toFixed(2)} - - : - <> - - - - } -
- } -
-
- { - !isNaN(watchListStockData[stock.symbol]?.currentPrice?.dp) ? - <> - <> - { - watchListStockData[stock.symbol]?.currentPrice?.dp > 0 && ( -
- +{parseFloat(watchListStockData[stock.symbol]?.currentPrice?.dp).toFixed(2)}% -
- ) - } - - <> - { - watchListStockData[stock.symbol]?.currentPrice?.dp < 0 && -
- {/* {parseFloat(watchListStockData[stock.symbol]?.Info?.percent_change).toFixed(2)}% */} - {parseFloat(watchListStockData[stock.symbol]?.currentPrice?.dp).toFixed(2)}% -
- } - - - : - - } -
-
- : -
- -
- } - -
-
- -
-
- ))} + )} + + <> + {watchListStockData[stock.symbol] + ?.currentPrice?.dp < 0 && ( +
+ {/* {parseFloat(watchListStockData[stock.symbol]?.Info?.percent_change).toFixed(2)}% */} + {parseFloat( + watchListStockData[stock.symbol] + ?.currentPrice?.dp + ).toFixed(2)} + %
- - } -
- : - <> - - } - - - ))} -
-
- ); + )} + + + ) : ( + + )} +
+
+ ) : ( +
+ +
+ )} + +
+
+ +
+
+ ))} +
+ )} +
+ ) : ( + <> + )} + + ))} +
+
+ ); }; export default Watchlists; \ No newline at end of file diff --git a/react-app/src/components/utility/index.js b/react-app/src/components/utility/index.js index bda96bc..de3eb7a 100644 --- a/react-app/src/components/utility/index.js +++ b/react-app/src/components/utility/index.js @@ -69,3 +69,6 @@ export function isEmail(emailAdress) { return false; } +export const handleFormSubmit = (e) => { + e.preventDefault(); +} \ No newline at end of file diff --git a/react-app/src/index.css b/react-app/src/index.css index 086f0c5..4277845 100644 --- a/react-app/src/index.css +++ b/react-app/src/index.css @@ -1,7 +1,12 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + /* TODO Add site wide styles */ + * { - /* font-family: 'Sen', 'Open Sans', sans-serif; */ - font-family: 'Open Sans', sans-serif; + /* font-family: 'Sen', 'Open Sans', sans-serif; */ + font-family: 'Open Sans', sans-serif; } body { @@ -30,11 +35,18 @@ nav { justify-content: space-between; align-items: center; width: auto; - /* height: 100px; */ height: fit-content; padding: 30px 20px; text-decoration: none; + + position: relative; + top: 0; + left: 0; + right: 0; + background-color: white; + + /* margin-bottom: 100px; */ } nav ul { @@ -44,7 +56,7 @@ nav ul { justify-content: space-between; list-style: none; - width: 100%; + width: 50%; margin: 0; padding: 0; } @@ -81,63 +93,182 @@ nav a.active { align-items: center; font-size: 20pt; font-weight: 1000; - } -.navbar-logo-and-name img{ +.navbar-logo-and-name img { width: 40px; margin-right: 1rem; - /* color: inherit; */ - /* background-color: red; - -webkit-mask-image: url('./images/Logo/path200.svg'); - mask-image: url('./images/Logo/path200.svg'); */ } .navbar-logo-and-name.logo-color-dark img { - /* filter: hue-rotate(60deg); */ - filter: invert(0%) + filter: invert(0%); } .navbar-logo-and-name.logo-color-light img { - filter: invert(100%) + filter: invert(100%); } -.navbar-other-parts{ +.navbar-search-container { display: flex; flex-direction: row; + justify-content: center; align-items: center; - justify-content: space-between; - width: 100%; + /* flex-grow: 0.5; */ + width: 40%; + /* flex-grow: 1; */ } -.navbar-middle-section { +.navbar-menu-toggle { + display: none; + cursor: pointer; +} + +.navbar-menu { display: flex; flex-direction: row; align-items: center; - justify-content: center; - - width: 50%; + justify-content: flex-end; + width: 100%; + } -.navbar-right-side { +.navbar-right-side-container { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; - width: 25%; + /* flex-grow: 1; */ + + width: 40%; + min-width: fit-content; } .navbar-right-side button { font-weight: 500; - border-radius: 30px; padding-left: 20px; padding-right: 20px; padding-top: 15px; padding-bottom: 15px; - font-size: 15px; - border: 1px; + border: 1px solid currentColor; +} + +@media (max-width: 800px) { + .navbar-space-filler { + height: 100px; + width: 100%; + } + + nav { + flex-direction: row; + align-items: flex-start; + position: sticky; + top: 0; + left: 0; + right: 0; + height: fit-content; + background-color: white; + z-index: 100; + } + + nav ul { + width: 100%; + flex-direction: column; + align-items: flex-start; + } + + .navbar-menu.closed { + display: none; + } + + .navbar-menu.open { + position: fixed; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + width: 100%; + height: 100%; + top: 100px; + left: 0; + right: 0; + bottom: 0; + + background-color: white; + padding-left: 30px; + padding-right: 30px; + padding-top: 20px; + padding-bottom: 20px; + transform: translateY(-100%); + transition: all 0.3s ease; + z-index: 100; + + box-sizing: border-box; + /* overflow: hidden; */ + } + + + .navbar-menu.open { + transform: translateY(0); + } + + .navbar-search-container { + width: 100%; + justify-content: center; + } + + .navbar-right-side-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + + } + + .navbar-right-side { + display: flex; + justify-content: center; + width: 100%; + + margin-top: 20px; + } + + .navbar-menu-toggle { + display: block; + + } + + .navbar-menu-toggle-line { + width: 25px; + height: 3px; + margin: 5px; + background-color: currentColor; + transition: all 0.3s ease; + } + + /* Add transform to the 3 toggle lines to create a cross when opened */ + + .navbar-menu-toggle.open .navbar-menu-toggle-line { + transition: all 0.3s ease; + } + + .navbar-menu-toggle-line.open:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .navbar-menu-toggle-line.open:nth-child(2) { + display: none; + } + + .navbar-menu-toggle-line.open:nth-child(3) { + transform: rotate(-45deg) + } + + } @@ -155,15 +286,15 @@ nav a.active { } .flex-row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .flex-space-between { justify-content: space-between; } -.login-form-page{ +.login-form-page { display: flex; flex-direction: row; align-items: center; @@ -172,21 +303,22 @@ nav a.active { width: 100%; } -.login-page-splash-image-container{ +.login-page-splash-image-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 50%; - background-image: url("./images/LoginPage/splash_background_image.jpg") !important; + background-image: url('./images/LoginPage/splash_background_image.jpg') !important; background-color: #ccc; - background-size:cover; + background-size: cover; background-position: center; background-repeat: no-repeat; } -.login-form-form-container, .signup-form-container { +.login-form-form-container, +.signup-form-container { display: flex; flex-direction: column; align-items: center; @@ -195,7 +327,8 @@ nav a.active { width: 50%; } -.login-form-form-container input, .signup-form-container input { +.login-form-form-container input, +.signup-form-container input { width: 100%; padding: 10px; margin: 10px 0; @@ -204,7 +337,8 @@ nav a.active { box-sizing: border-box; } -.login-form-form-container button, .signup-form-container button { +.login-form-form-container button, +.signup-form-container button { width: 100%; padding: 10px; margin: 10px 0; @@ -213,7 +347,7 @@ nav a.active { box-sizing: border-box; } -.signup-page-container{ +.signup-page-container { display: flex; flex-direction: row; align-items: center; @@ -225,7 +359,7 @@ nav a.active { .signup-page-splash-image-container { background-image: url('./images/SignUpPage/stocks.png'); background-color: green; - background-size:100%; + background-size: 100%; background-position: bottom; background-repeat: no-repeat; @@ -235,15 +369,14 @@ nav a.active { justify-content: center; height: 100vh; width: 50%; - } - -.login-form-form-container form , .signup-form-container form { +.login-form-form-container form, +.signup-form-container form { width: 50%; } -.signup-form-errors{ +.signup-form-errors { color: red; /* width: 100%; */ } @@ -263,7 +396,6 @@ table { vertical-align: middle; margin-left: auto; margin-right: auto; - } td {