From 0abd3ae84a9486e4dfb1d267f6158705a6f7ea38 Mon Sep 17 00:00:00 2001 From: Helen Lei Date: Tue, 14 Nov 2023 17:44:15 -0500 Subject: [PATCH] apply conditional css class for the search bar to be wider when the user is logged in --- .../assets/profile_bear/profile_bear_gray.svg | 15 ++++++++++++++ client/src/modules/Globals/Navbar.tsx | 6 +++--- client/src/modules/Globals/Styles/NavBar.css | 20 +++++++++++++++++++ .../Styles/ProfileDropdownNavBar.module.css | 2 +- client/src/modules/Profile/Styles/App.css | 2 +- .../modules/Results/Styles/ResultsDisplay.css | 5 ++--- .../modules/SearchBar/Styles/SearchBar.css | 2 +- 7 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 client/src/assets/profile_bear/profile_bear_gray.svg diff --git a/client/src/assets/profile_bear/profile_bear_gray.svg b/client/src/assets/profile_bear/profile_bear_gray.svg new file mode 100644 index 000000000..38927ae00 --- /dev/null +++ b/client/src/assets/profile_bear/profile_bear_gray.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/client/src/modules/Globals/Navbar.tsx b/client/src/modules/Globals/Navbar.tsx index 6afa82056..5f4435f98 100644 --- a/client/src/modules/Globals/Navbar.tsx +++ b/client/src/modules/Globals/Navbar.tsx @@ -68,12 +68,12 @@ export default function Navbar({ userInput }: NavbarProps) { CU Reviews Logo -
+
{displayButton()} -
+ ) } diff --git a/client/src/modules/Globals/Styles/NavBar.css b/client/src/modules/Globals/Styles/NavBar.css index 094fae2e6..c1a63b3f6 100644 --- a/client/src/modules/Globals/Styles/NavBar.css +++ b/client/src/modules/Globals/Styles/NavBar.css @@ -12,6 +12,16 @@ margin-left: 21px; margin-right: 150px; } + + .navbar-searchbar-container-wider { + width: 100%; + margin-right: 12%; + } + + .navbar-searchbar-container-not { + width: 100%; + margin-right: 28%; + } } @media screen and (min-width: 992px) { @@ -22,6 +32,16 @@ .navbar-searchbar-container { margin-right: 220px; } + + .navbar-searchbar-container-wider { + width: 100%; + margin-right: 15%; + } + + .navbar-searchbar-container-not { + width: 100%; + margin-right: 15%; + } } .custom-navbar { diff --git a/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css b/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css index b3dfbfd7e..59368faa3 100644 --- a/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css +++ b/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css @@ -76,4 +76,4 @@ width: 40px; height: 40px; } -} +} \ No newline at end of file diff --git a/client/src/modules/Profile/Styles/App.css b/client/src/modules/Profile/Styles/App.css index b23fe2b4b..2422c1638 100644 --- a/client/src/modules/Profile/Styles/App.css +++ b/client/src/modules/Profile/Styles/App.css @@ -20,7 +20,7 @@ right: 30px; top: 40px; - width: 137px; + width: 10%; height: 39px; background: #ffffff; diff --git a/client/src/modules/Results/Styles/ResultsDisplay.css b/client/src/modules/Results/Styles/ResultsDisplay.css index da5d2a695..19528ad87 100644 --- a/client/src/modules/Results/Styles/ResultsDisplay.css +++ b/client/src/modules/Results/Styles/ResultsDisplay.css @@ -228,8 +228,7 @@ color: #9fcbff !important; } -.react-major-select__control--is-focused - .react-major-select__dropdown-indicator { +.react-major-select__control--is-focused .react-major-select__dropdown-indicator { color: #0076ff !important; } @@ -419,4 +418,4 @@ ul { padding-top: 28px; padding-right: 8%; padding-left: 1.5%; -} +} \ No newline at end of file diff --git a/client/src/modules/SearchBar/Styles/SearchBar.css b/client/src/modules/SearchBar/Styles/SearchBar.css index 56e44e01d..747179dc2 100644 --- a/client/src/modules/SearchBar/Styles/SearchBar.css +++ b/client/src/modules/SearchBar/Styles/SearchBar.css @@ -93,4 +93,4 @@ border-style: solid; border-color: #6ba7ec; border-width: 0 1px 1px 1px; -} +} \ No newline at end of file