Dropdown design fix (#352)

varianter · Dec 4, 2023 · c5f053a · c5f053a
1 parent 3b1bdf1
commit c5f053a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/frontend/src/components/DropDown.tsx b/frontend/src/components/DropDown.tsx
@@ -50,7 +50,7 @@ export default function DropDown({
               setIsDropDownOpen(false);
               setChosenOption(option);
             }}
-            className="hover:bg-primary px-3 py-2 rounded-md hover:bg-opacity-10 flex flex-row justify-between items-center"
+            className="hover:bg-primary px-3 py-2 rounded hover:bg-opacity-10 flex flex-row justify-between items-center"
           >
             <p className="h-6 flex items-center normal-semibold text-primary">
               {option}

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -14,6 +14,7 @@ export default async function NavBar() {
       </div>
       <div className="flex flex-row gap-4 items-center">
         <NavBarOrganisationDropdown organisations={orgs} />
+        <div className="w-[1px] h-8 bg-white/20" />
         <NavBarUserIcon />
       </div>
     </div>

diff --git a/frontend/src/components/NavBar/NavBarDropdown.tsx b/frontend/src/components/NavBar/NavBarDropdown.tsx
@@ -27,16 +27,18 @@ export default function NavBarDropdown(props: { initial: string }) {
           </p>
         </button>
         <div
-          className={`absolute right-0 top-[48px] z-50 rounded text-primary bg-white flex flex-col w-[138px] shadow-xl p-1 ${
+          className={`absolute right-0 top-[48px] z-50 rounded-lg text-primary bg-white flex flex-col w-[138px] shadow-xl p-1 ${
             !isOpen && "hidden"
           }`}
         >
           <button
-            className="px-3 py-2 rounded flex flex-row gap-3 hover:bg-primary/10"
+            className="hover:bg-primary/10 px-3 py-2 rounded flex flex-row gap-3 items-center "
             onClick={() => signOut()}
           >
-            <LogOut className="w-4 h-4" />
-            <p className="normal">Logg ut</p>
+            <LogOut className="w-6 h-6" />
+            <p className="h-6 flex items-center normal-semibold text-primary">
+              Logg ut
+            </p>
           </button>
         </div>
       </div>

diff --git a/frontend/src/components/NavBar/NavBarOrganisationDropdown.tsx b/frontend/src/components/NavBar/NavBarOrganisationDropdown.tsx
@@ -4,6 +4,7 @@ import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { Organisation } from "@/types";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { Check, ChevronDown, ChevronUp } from "react-feather";
 
 export default function NavBarOrganisationDropdown({
   organisations,
@@ -29,28 +30,40 @@ export default function NavBarOrganisationDropdown({
         {currentOrganisation && (
           <>
             <button
-              className="border-r border-white/20 py-2"
+              className={`p-2 rounded flex gap-2 text-white ${
+                organisations.length > 1 && "hover:bg-white/10"
+              }`}
               onClick={() => setIsOpen(!isOpen)}
+              disabled={organisations.length == 1}
             >
-              <p className="normal-medium text-white pr-4">
-                {currentOrganisation?.name}
-              </p>
+              <p className="normal-medium">{currentOrganisation?.name}</p>
+              {organisations.length > 1 &&
+                (isOpen ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                ))}
             </button>
             <div
-              className={`absolute right-0 top-[48px] z-50 rounded text-primary bg-white flex flex-col w-[138px] shadow-xl p-1 ${
+              className={`absolute right-0 top-[48px] z-50 rounded-lg text-primary bg-white flex flex-col w-[138px] shadow-xl p-1 ${
                 !isOpen && "hidden"
               }`}
             >
               {organisations.map((organisation, index) => (
                 <Link
                   key={index}
-                  className="px-3 py-2 rounded flex flex-row gap-3 hover:bg-primary/10"
+                  className="hover:bg-primary/10 px-3 py-2 rounded flex flex-row justify-between items-center "
                   href={`/${organisation.urlKey}/bemanning`}
                   onClick={() =>
                     localStorage.setItem("chosenUrlKey", organisation.urlKey)
                   }
                 >
-                  <p className="normal">{organisation.name}</p>
+                  <p className="h-6 flex items-center normal-semibold text-primary">
+                    {organisation.name}
+                  </p>
+                  {organisation == currentOrganisation && (
+                    <Check className="h-6 w-6 text-primary" />
+                  )}
                 </Link>
               ))}
             </div>