From 26ba7b5fb89f84763fb90ab8d0f0eda17be77632 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Thu, 22 Sep 2022 14:31:24 +0530 Subject: [PATCH 01/17] dropdown component created with scss file --- src/components/UI/dropdown/dropdown.module.scss | 3 +++ src/components/UI/dropdown/index.js | 12 ++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 src/components/UI/dropdown/dropdown.module.scss create mode 100644 src/components/UI/dropdown/index.js diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss new file mode 100644 index 00000000..cce56d3e --- /dev/null +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -0,0 +1,3 @@ +.wrapper { + background-color: #dcdcdc; +} diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js new file mode 100644 index 00000000..f0bbaee6 --- /dev/null +++ b/src/components/UI/dropdown/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styles from './dropdown.module.scss'; + +const Dropdown = () => { + return ( +
+

hello I am Dropdown

+
+ ); +}; + +export default Dropdown; From 0ce50d99d240f991147da7fd2dc8f22baf79c99c Mon Sep 17 00:00:00 2001 From: Saurabh Date: Fri, 23 Sep 2022 21:14:21 +0530 Subject: [PATCH 02/17] drop down is working and basic css added --- .../UI/dropdown/dropdown.module.scss | 106 +++++++++++++++++- src/components/UI/dropdown/index.js | 58 +++++++++- src/components/UI/navbar/index.js | 29 ++--- 3 files changed, 167 insertions(+), 26 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index cce56d3e..1cbe1af5 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -1,3 +1,105 @@ -.wrapper { - background-color: #dcdcdc; +.userGreet { + color: #ffffff; + margin: 23px; +} + +.userGreet a { + padding: 0px; +} + +.userProfilePic { + width: 32px; + height: 32px; + border-radius: 50%; + display: inline; + vertical-align: middle; +} +.dropdownHeader { + margin: 10px; +} +// .userProfilePic { +// width: 32px; +// height: 32px; +// border-radius: 50%; +// display: inline; +// vertical-align: middle; +// } + +.userGreetMsg { + display: inline; + vertical-align: middle; + margin-right: 10px; + color: rgb(255, 255, 255); +} + +.dropdownContent a:hover { + color: #49a82e; +} + +.dropdownContent div > p:hover { + color: #49a82e; +} + +.dropdownContent div > p { + text-align: center; + padding-bottom: 10px; +} + +.dropdownContent { + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid #ffffff; + border-radius: 10px; + width: 200px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + background-color: #1d1283; +} + +.dropDownClose { + width: 200px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + background-color: #1d1283; + pointer-events: none; + inset: 0; + animation: fade-out 500ms forwards; + // z-index: 50; + position: absolute; + right: 25px; + top: 25px; + border-radius: 10px; +} + +.dropDownOpen { + animation: fade-in 500ms forwards; + z-index: 50; + position: absolute; + right: 25px; + top: 70px; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@media screen and (max-width: 970px) { + .userGreet { + margin: 0px; + } } diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index f0bbaee6..da6b2ff5 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -1,10 +1,60 @@ -import React from 'react'; +import React, { useEffect, useState, useRef } from 'react'; +import Link from 'next/link'; + import styles from './dropdown.module.scss'; -const Dropdown = () => { +const Dropdown = ({ + isLoggedIn, + USER_PROFILE_URL, + // LOGOUT_URL, + userData, + DEFAULT_AVATAR, +}) => { + const [isOpen, setIsOpen] = useState(false); + const toggleDropdown = () => setIsOpen(!isOpen); + const modalClose = useRef(); + useEffect(() => { + const handler = (event) => { + if (!modalClose.current.contains(event.target)) { + setIsOpen(false); + } + }; + document.addEventListener('mousedown', handler); + return () => { + document.removeEventListener('mousedown', handler); + }; + }); + return ( -
-

hello I am Dropdown

+
+
+
+ {isLoggedIn ? `Hello, ${userData.firstName}!` : `Hello, User!`} +
+ Profile Pic +
+ +
+
+ + My profile + +
+

Log Out

+
+
+
); }; diff --git a/src/components/UI/navbar/index.js b/src/components/UI/navbar/index.js index 28f9ff30..17fc632d 100644 --- a/src/components/UI/navbar/index.js +++ b/src/components/UI/navbar/index.js @@ -9,6 +9,7 @@ import { NAVMENU, } from '@constants/AppConstants'; import Link from 'next/link'; +import Dropdown from '../dropdown'; import styles from './navbar.module.scss'; @@ -187,26 +188,14 @@ const Navbar = () => { )} {isLoggedIn && ( -
- - -
- {isLoggedIn - ? `Hello, ${userData.firstName}!` - : `Hello, User!`} -
- Profile Pic - - -
+ //
+ + //
)} )} From b99d5e021ea55b2b225c692100ea026f7a0eeaac Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sat, 24 Sep 2022 21:57:00 +0530 Subject: [PATCH 03/17] changed the animation method from keyframes to transition --- .../UI/dropdown/dropdown.module.scss | 53 ++++++------------- src/components/UI/dropdown/index.js | 3 +- 2 files changed, 17 insertions(+), 39 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 1cbe1af5..4125f3f7 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -49,53 +49,32 @@ display: flex; flex-direction: column; align-items: center; - border: 1px solid #ffffff; - border-radius: 10px; - width: 200px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - background-color: #1d1283; + color: #000000; } .dropDownClose { - width: 200px; + width: 150px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - background-color: #1d1283; + background-color: white; pointer-events: none; - inset: 0; - animation: fade-out 500ms forwards; - // z-index: 50; + transition: height 0.25s ease; + height: 0; position: absolute; - right: 25px; - top: 25px; - border-radius: 10px; + z-index: 50; + overflow: hidden; + right: 40px; } .dropDownOpen { - animation: fade-in 500ms forwards; - z-index: 50; + width: 180px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + background-color: white; + height: 180px; + transition: height 0.25s ease; position: absolute; - right: 25px; - top: 70px; -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } + z-index: 50; + overflow: hidden; + right: 35px; } @media screen and (max-width: 970px) { diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index da6b2ff5..3066c9be 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -26,14 +26,13 @@ const Dropdown = ({ }); return ( -
+
{isLoggedIn ? `Hello, ${userData.firstName}!` : `Hello, User!`} From b4c53cee763adc0c779fd348067f3d008942e7ab Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sat, 24 Sep 2022 23:48:09 +0530 Subject: [PATCH 04/17] made syntax changes --- src/components/UI/navbar/navbar.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/navbar/navbar.module.scss b/src/components/UI/navbar/navbar.module.scss index 25836f1e..2646bf53 100644 --- a/src/components/UI/navbar/navbar.module.scss +++ b/src/components/UI/navbar/navbar.module.scss @@ -5,7 +5,7 @@ top: 0px; } -.navBar li a { +.navBar li > a { margin: 10px; display: block; border-radius: 0.5rem; From 4ea3e83481702bb312c1cff3a0aee5a953c036e5 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sun, 25 Sep 2022 00:27:03 +0530 Subject: [PATCH 05/17] styles changes done --- .../UI/dropdown/dropdown.module.scss | 65 ++++++++++++++----- src/components/UI/dropdown/index.js | 14 ++-- 2 files changed, 58 insertions(+), 21 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 4125f3f7..24e3449f 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -16,14 +16,8 @@ } .dropdownHeader { margin: 10px; + cursor: pointer; } -// .userProfilePic { -// width: 32px; -// height: 32px; -// border-radius: 50%; -// display: inline; -// vertical-align: middle; -// } .userGreetMsg { display: inline; @@ -32,17 +26,30 @@ color: rgb(255, 255, 255); } -.dropdownContent a:hover { - color: #49a82e; +.myProfileWrapper { + height: 50%; + text-align: center; + border-bottom: 1px solid black; } -.dropdownContent div > p:hover { +.myProfile:hover { color: #49a82e; } -.dropdownContent div > p { +.myProfile { + color: #000000; + text-decoration: none; +} + +.signOutWrapper { + height: 50%; text-align: center; - padding-bottom: 10px; + border-top: 1px solid black; +} + +.signOut:hover { + color: #49a82e; + cursor: pointer; } .dropdownContent { @@ -50,26 +57,52 @@ flex-direction: column; align-items: center; color: #000000; + border: 2px solid black; + height: 100%; + border-radius: 8px; + width: 100%; + justify-items: center; +} + +.dropDownContentWrapper { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.dropDownContentWrapper div { + width: 100%; + display: flex; + align-items: center; + justify-content: center; } +// .dropdownContent div>p { +// text-align: center; +// // padding-bottom: 10px; +// } + .dropDownClose { - width: 150px; + width: 135px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); background-color: white; + border-radius: 8px; pointer-events: none; transition: height 0.25s ease; height: 0; position: absolute; z-index: 50; overflow: hidden; - right: 40px; + right: 35px; } .dropDownOpen { - width: 180px; + width: 135px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); background-color: white; - height: 180px; + border-radius: 8px; + height: 115px; transition: height 0.25s ease; position: absolute; z-index: 50; diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index 3066c9be..b08a8081 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -46,11 +46,15 @@ const Dropdown = ({
- - My profile - -
-

Log Out

+
+
+ + My profile + +
+
+

Sign Out

+
From 411cb668ec568a6d0737807b1b2af2cdaeb7c30f Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sun, 25 Sep 2022 02:22:48 +0530 Subject: [PATCH 06/17] removed unused code and some minor styles chnages done --- src/components/UI/dropdown/dropdown.module.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 24e3449f..1a1c2bab 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -27,7 +27,7 @@ } .myProfileWrapper { - height: 50%; + padding-bottom: 15px; text-align: center; border-bottom: 1px solid black; } @@ -42,7 +42,7 @@ } .signOutWrapper { - height: 50%; + padding-top: 15px; text-align: center; border-top: 1px solid black; } @@ -69,6 +69,7 @@ height: 100%; display: flex; flex-direction: column; + justify-content: center; } .dropDownContentWrapper div { @@ -78,13 +79,10 @@ justify-content: center; } -// .dropdownContent div>p { -// text-align: center; -// // padding-bottom: 10px; -// } + .dropDownClose { - width: 135px; + width: 180px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); background-color: white; border-radius: 8px; @@ -92,13 +90,13 @@ transition: height 0.25s ease; height: 0; position: absolute; - z-index: 50; + z-index: 0; overflow: hidden; right: 35px; } .dropDownOpen { - width: 135px; + width: 180px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); background-color: white; border-radius: 8px; From cf5a22d4c7a54151d3008bd4d4f38fa8407bfe24 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sun, 25 Sep 2022 02:24:31 +0530 Subject: [PATCH 07/17] changed p tag to button for tab accessibility --- src/components/UI/dropdown/dropdown.module.scss | 11 +++++++++-- src/components/UI/dropdown/index.js | 4 +++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 1a1c2bab..839fd18a 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -47,6 +47,15 @@ border-top: 1px solid black; } +.signOutWrapper > button { + all: unset; + cursor: pointer; +} + +.signOutWrapper button:focus-visible { + outline: black 5px auto; +} + .signOut:hover { color: #49a82e; cursor: pointer; @@ -79,8 +88,6 @@ justify-content: center; } - - .dropDownClose { width: 180px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index b08a8081..5a2dc3db 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -53,7 +53,9 @@ const Dropdown = ({
-

Sign Out

+
From 31f47378e6e7dfa1386a722bbc10a0c8915f274d Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sun, 25 Sep 2022 20:34:27 +0530 Subject: [PATCH 08/17] dropdown added to small screen size --- src/components/UI/navbar/index.js | 46 +++++++++++++++++-------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/components/UI/navbar/index.js b/src/components/UI/navbar/index.js index 17fc632d..8c1972df 100644 --- a/src/components/UI/navbar/index.js +++ b/src/components/UI/navbar/index.js @@ -113,26 +113,32 @@ const Navbar = () => { )} {isLoggedIn && ( - + + // )}
)} From 34b45c0bd08f91d9cc7555e33543a7703ac01235 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sun, 25 Sep 2022 20:50:07 +0530 Subject: [PATCH 09/17] common styles added to common class --- .../UI/dropdown/dropdown.module.scss | 29 +++++++++---------- src/components/UI/dropdown/index.js | 6 +++- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 839fd18a..7ab4ec4d 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -88,31 +88,27 @@ justify-content: center; } -.dropDownClose { +.dropDown { + background-color: #ffffff; width: 180px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - background-color: white; - border-radius: 8px; - pointer-events: none; - transition: height 0.25s ease; - height: 0; position: absolute; - z-index: 0; overflow: hidden; right: 35px; + border-radius: 8px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .dropDownOpen { - width: 180px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - background-color: white; - border-radius: 8px; height: 115px; transition: height 0.25s ease; - position: absolute; z-index: 50; - overflow: hidden; - right: 35px; +} + +.dropDownClose { + pointer-events: none; + transition: height 0.25s ease; + height: 0; + z-index: 0; } @media screen and (max-width: 970px) { @@ -120,3 +116,6 @@ margin: 0px; } } + +@media screen and (max-width: 500px) { +} diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index 5a2dc3db..f98d7647 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -44,7 +44,11 @@ const Dropdown = ({ />
-
+
From 7e97e7648e8e67a3240158ecb8d96faf31b7b556 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 26 Sep 2022 00:01:14 +0530 Subject: [PATCH 10/17] added media query and removed unused code --- .../UI/dropdown/dropdown.module.scss | 11 ++++++++++ src/components/UI/navbar/index.js | 22 ------------------- 2 files changed, 11 insertions(+), 22 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 7ab4ec4d..efc19800 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -115,7 +115,18 @@ .userGreet { margin: 0px; } + + .dropDown { + width: 130px; + right: 15px; + top: 45px; + } } @media screen and (max-width: 500px) { + .dropDown { + width: 110px; + right: 15px; + top: 45px; + } } diff --git a/src/components/UI/navbar/index.js b/src/components/UI/navbar/index.js index 8c1972df..682908c7 100644 --- a/src/components/UI/navbar/index.js +++ b/src/components/UI/navbar/index.js @@ -119,26 +119,6 @@ const Navbar = () => { userData={userData} DEFAULT_AVATAR={DEFAULT_AVATAR} /> - // )}
)} @@ -194,14 +174,12 @@ const Navbar = () => { )} {isLoggedIn && ( - //
- //
)} )} From 0f8ff3c1ff6e9c409f92975aa045c0c80a75b6ee Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 26 Sep 2022 13:46:57 +0530 Subject: [PATCH 11/17] added signout function --- src/components/UI/dropdown/index.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index f98d7647..de768f74 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -13,6 +13,16 @@ const Dropdown = ({ const [isOpen, setIsOpen] = useState(false); const toggleDropdown = () => setIsOpen(!isOpen); const modalClose = useRef(); + + const signOut = () => { + fetch('https://api.realdevsquad.com/auth/signout', { + method: 'GET', + credentials: 'include', + }).then(() => { + window.location.reload(); + }); + }; + useEffect(() => { const handler = (event) => { if (!modalClose.current.contains(event.target)) { @@ -57,7 +67,11 @@ const Dropdown = ({
-
From c443db5f26eeaf22119b442b665ab27814b6640b Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 26 Sep 2022 13:52:25 +0530 Subject: [PATCH 12/17] Added Sign-out-URL to AppConstants --- src/components/UI/dropdown/index.js | 4 ++-- src/components/UI/navbar/index.js | 3 +++ src/constants/AppConstants.js | 2 ++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index de768f74..24749a33 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -6,7 +6,7 @@ import styles from './dropdown.module.scss'; const Dropdown = ({ isLoggedIn, USER_PROFILE_URL, - // LOGOUT_URL, + SIGN_OUT_URL, userData, DEFAULT_AVATAR, }) => { @@ -15,7 +15,7 @@ const Dropdown = ({ const modalClose = useRef(); const signOut = () => { - fetch('https://api.realdevsquad.com/auth/signout', { + fetch(SIGN_OUT_URL, { method: 'GET', credentials: 'include', }).then(() => { diff --git a/src/components/UI/navbar/index.js b/src/components/UI/navbar/index.js index 682908c7..b667222d 100644 --- a/src/components/UI/navbar/index.js +++ b/src/components/UI/navbar/index.js @@ -7,6 +7,7 @@ import { USER_DATA_URL, USER_PROFILE_URL, NAVMENU, + SIGN_OUT_URL, } from '@constants/AppConstants'; import Link from 'next/link'; import Dropdown from '../dropdown'; @@ -118,6 +119,7 @@ const Navbar = () => { USER_PROFILE_URL={USER_PROFILE_URL} userData={userData} DEFAULT_AVATAR={DEFAULT_AVATAR} + SIGN_OUT_URL={SIGN_OUT_URL} /> )}
@@ -179,6 +181,7 @@ const Navbar = () => { USER_PROFILE_URL={USER_PROFILE_URL} userData={userData} DEFAULT_AVATAR={DEFAULT_AVATAR} + SIGN_OUT_URL={SIGN_OUT_URL} /> )} diff --git a/src/constants/AppConstants.js b/src/constants/AppConstants.js index 5f2b47cf..99b664e8 100644 --- a/src/constants/AppConstants.js +++ b/src/constants/AppConstants.js @@ -12,6 +12,7 @@ const PATHS = { }; const LOGIN_URL = 'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97'; +const SIGN_OUT_URL = 'https://api.realdevsquad.com/auth/signout'; const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile'; const SEARCHBOX_PLACEHOLDER = 'search members here'; const NAVMENU = [ @@ -51,6 +52,7 @@ export { BASE_API_URL, USER_DATA_URL, LOGIN_URL, + SIGN_OUT_URL, PATHS, USER_PROFILE_URL, NAVMENU, From 1c4c1f9c1af432ce10a340d3444d45fbb74e78f1 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 26 Sep 2022 14:23:39 +0530 Subject: [PATCH 13/17] added hover color and used hex value --- src/components/UI/dropdown/dropdown.module.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index efc19800..f698a5a5 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -26,10 +26,14 @@ color: rgb(255, 255, 255); } +.userGreetMsg:hover { + color: #49a82e; +} + .myProfileWrapper { padding-bottom: 15px; text-align: center; - border-bottom: 1px solid black; + border-bottom: 1px solid #000000; } .myProfile:hover { @@ -44,7 +48,7 @@ .signOutWrapper { padding-top: 15px; text-align: center; - border-top: 1px solid black; + border-top: 1px solid #000000; } .signOutWrapper > button { @@ -53,7 +57,7 @@ } .signOutWrapper button:focus-visible { - outline: black 5px auto; + outline: #000000 5px auto; } .signOut:hover { @@ -66,7 +70,7 @@ flex-direction: column; align-items: center; color: #000000; - border: 2px solid black; + border: 2px solid #000000; height: 100%; border-radius: 8px; width: 100%; From d92239453461c16a8f190b6ae5a16e1a3c69ae05 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 26 Sep 2022 18:14:44 +0530 Subject: [PATCH 14/17] added css variables for repeated colors --- .../UI/dropdown/dropdown.module.scss | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index f698a5a5..3a583578 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -1,5 +1,12 @@ +// scss variables +$border-color: #000000; +$black: #000000; +$text-color: #ffffff; +$hover-color: #49a82e; +$background-color: #ffffff; + .userGreet { - color: #ffffff; + color: $text-color; margin: 23px; } @@ -27,28 +34,28 @@ } .userGreetMsg:hover { - color: #49a82e; + color: $hover-color; } .myProfileWrapper { padding-bottom: 15px; text-align: center; - border-bottom: 1px solid #000000; + border-bottom: 1px solid $border-color; } .myProfile:hover { - color: #49a82e; + color: $hover-color; } .myProfile { - color: #000000; + color: $black; text-decoration: none; } .signOutWrapper { padding-top: 15px; text-align: center; - border-top: 1px solid #000000; + border-top: 1px solid $border-color; } .signOutWrapper > button { @@ -57,11 +64,11 @@ } .signOutWrapper button:focus-visible { - outline: #000000 5px auto; + outline: var(--black) 5px auto; } .signOut:hover { - color: #49a82e; + color: $hover-color; cursor: pointer; } @@ -69,8 +76,8 @@ display: flex; flex-direction: column; align-items: center; - color: #000000; - border: 2px solid #000000; + color: $black; + border: 2px solid $border-color; height: 100%; border-radius: 8px; width: 100%; @@ -93,7 +100,7 @@ } .dropDown { - background-color: #ffffff; + background-color: $background-color; width: 180px; position: absolute; overflow: hidden; From 290d8f26e1976da15020986886d465918275ee1f Mon Sep 17 00:00:00 2001 From: Saurabh Date: Sat, 1 Oct 2022 09:17:50 +0530 Subject: [PATCH 15/17] removed space, chnaged css variable name and used hex instead of rgba --- src/components/UI/dropdown/dropdown.module.scss | 12 ++++++------ src/components/UI/dropdown/index.js | 1 - 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/UI/dropdown/dropdown.module.scss b/src/components/UI/dropdown/dropdown.module.scss index 3a583578..17100a1e 100644 --- a/src/components/UI/dropdown/dropdown.module.scss +++ b/src/components/UI/dropdown/dropdown.module.scss @@ -1,6 +1,6 @@ // scss variables $border-color: #000000; -$black: #000000; +$text-color-2: #000000; $text-color: #ffffff; $hover-color: #49a82e; $background-color: #ffffff; @@ -30,7 +30,7 @@ $background-color: #ffffff; display: inline; vertical-align: middle; margin-right: 10px; - color: rgb(255, 255, 255); + color: $text-color; } .userGreetMsg:hover { @@ -48,7 +48,7 @@ $background-color: #ffffff; } .myProfile { - color: $black; + color: $text-color-2; text-decoration: none; } @@ -64,7 +64,7 @@ $background-color: #ffffff; } .signOutWrapper button:focus-visible { - outline: var(--black) 5px auto; + outline: $border-color 5px auto; } .signOut:hover { @@ -76,7 +76,7 @@ $background-color: #ffffff; display: flex; flex-direction: column; align-items: center; - color: $black; + color: $text-color-2; border: 2px solid $border-color; height: 100%; border-radius: 8px; @@ -106,7 +106,7 @@ $background-color: #ffffff; overflow: hidden; right: 35px; border-radius: 8px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 25px #0000001a; } .dropDownOpen { diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index 24749a33..c5f822ca 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -1,6 +1,5 @@ import React, { useEffect, useState, useRef } from 'react'; import Link from 'next/link'; - import styles from './dropdown.module.scss'; const Dropdown = ({ From 97b257160fc8a1acf52bdfa3c372d723a2e84a0c Mon Sep 17 00:00:00 2001 From: Saurabh Date: Mon, 10 Oct 2022 13:38:32 +0530 Subject: [PATCH 16/17] reduce the margin for mobile view --- src/components/UI/navbar/navbar.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/navbar/navbar.module.scss b/src/components/UI/navbar/navbar.module.scss index 2646bf53..69611d8f 100644 --- a/src/components/UI/navbar/navbar.module.scss +++ b/src/components/UI/navbar/navbar.module.scss @@ -182,7 +182,7 @@ .navBarLogin { display: block; - margin: 20px; + margin: 10px; position: absolute; top: 0; right: 0px; From bfca17e982f0e71e7f06b15b9460e9981e7f8854 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Tue, 11 Oct 2022 10:54:43 +0530 Subject: [PATCH 17/17] fixed the useState function --- src/components/UI/dropdown/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UI/dropdown/index.js b/src/components/UI/dropdown/index.js index c5f822ca..938c9423 100644 --- a/src/components/UI/dropdown/index.js +++ b/src/components/UI/dropdown/index.js @@ -10,7 +10,7 @@ const Dropdown = ({ DEFAULT_AVATAR, }) => { const [isOpen, setIsOpen] = useState(false); - const toggleDropdown = () => setIsOpen(!isOpen); + const toggleDropdown = () => setIsOpen((prevState) => !prevState); const modalClose = useRef(); const signOut = () => {