done navbar layout
This commit is contained in:
|
Before Width: | Height: | Size: 5.7 MiB After Width: | Height: | Size: 5.7 MiB |
@@ -2,218 +2,12 @@
|
|||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import styles from "./styles.module.css";
|
import styles from "./styles.module.css";
|
||||||
import { useState } from "react";
|
import HeaderDetails from "./components/HeaderDetails";
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const orgList = [
|
|
||||||
{ name: "Project Moonshot Inc." },
|
|
||||||
{ name: "Organization X" },
|
|
||||||
{ name: "Organization Y" },
|
|
||||||
{ name: "Organization Z" },
|
|
||||||
];
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
|
||||||
|
|
||||||
const handleOrgSelect = (index) => {
|
|
||||||
setSelectedOrg(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.mainContainer}>
|
<div className={styles.mainContainer}>
|
||||||
{/* Organization and Dropdown Section*/}
|
<HeaderDetails />
|
||||||
<div className={styles.organizationContainer}>
|
|
||||||
<div className={styles.orgContainer}>
|
|
||||||
{/* Logo */}
|
|
||||||
<div className={styles.orgLogo}></div>
|
|
||||||
<div className={styles.orgName}>
|
|
||||||
<p>Organization</p>
|
|
||||||
<div className={styles.dropdownContainer}>
|
|
||||||
{/* Dropdown Menu*/}
|
|
||||||
{open && (
|
|
||||||
<div className={styles.dropdown}>
|
|
||||||
{/* Organization Header and Search */}
|
|
||||||
<div className={styles.orgSearchContainer}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className={styles.createBtnContainer}>
|
|
||||||
<p>Organization</p>
|
|
||||||
<div className={styles.createBtn}>
|
|
||||||
<p>Create</p>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clipPath="url(#clip0_548_2226)">
|
|
||||||
<path
|
|
||||||
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
|
|
||||||
stroke="#8287FF"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M8 4.8291V11.172"
|
|
||||||
stroke="#8287FF"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M4.82812 8H11.171"
|
|
||||||
stroke="#8287FF"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_548_2226">
|
|
||||||
<rect width="16" height="16" fill="white" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Search */}
|
|
||||||
<div className={styles.srchInputContainer}>
|
|
||||||
<div className={styles.srchInputGroup}>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="18"
|
|
||||||
height="18"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clipPath="url(#clip0_23_1333)">
|
|
||||||
<path
|
|
||||||
d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
|
|
||||||
stroke="#858699"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M16.8359 16.835L12.6172 12.6162"
|
|
||||||
stroke="#858699"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_23_1333">
|
|
||||||
<rect width="18" height="18" fill="white" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
<input
|
|
||||||
className={styles.placeholderTxt}
|
|
||||||
type="text"
|
|
||||||
name="search"
|
|
||||||
id=""
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Select Options */}
|
|
||||||
<div className={styles.optionsContainer}>
|
|
||||||
{orgList.map((org, index) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={styles.orgList}
|
|
||||||
key={index}
|
|
||||||
onClick={() => handleOrgSelect(index)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
|
|
||||||
fill="#8287FF"
|
|
||||||
style={{
|
|
||||||
fill: "#8287FF",
|
|
||||||
fillOpacity: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<p>{org.name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Button */}
|
|
||||||
<div
|
|
||||||
className={styles.dropdownBtn}
|
|
||||||
onClick={() => setOpen(!open)}
|
|
||||||
>
|
|
||||||
<p>Project Moonshot Inc.</p>
|
|
||||||
<div>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
|
|
||||||
stroke="#969AF9"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Profile Section */}
|
|
||||||
<div className={styles.profileContainer}>
|
|
||||||
{/* Profile */}
|
|
||||||
<div className={styles.profileBadge}>
|
|
||||||
{/* Username and Role*/}
|
|
||||||
<div className={styles.nameRole}>
|
|
||||||
<p className={styles.userName}>JM Grills</p>
|
|
||||||
<p className={styles.userRole}>Super Admin</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* User profile*/}
|
|
||||||
<div className={styles.userImgContainer}>
|
|
||||||
<div className={styles.userPic}></div>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
|
|
||||||
fill="#858699"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dropdown */}
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
227
frontend/src/app/components/header/components/HeaderDetails.jsx
Normal file
227
frontend/src/app/components/header/components/HeaderDetails.jsx
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import orgStyles from "./Organization.module.css";
|
||||||
|
import profileStyles from "./Profile.module.css";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const HeaderDetails = () => {
|
||||||
|
const orgList = [
|
||||||
|
{ name: "Project Moonshot Inc." },
|
||||||
|
{ name: "Organization X" },
|
||||||
|
{ name: "Organization Y" },
|
||||||
|
{ name: "Organization Z" },
|
||||||
|
];
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||||
|
|
||||||
|
const handleOrgSelect = (index) => {
|
||||||
|
setSelectedOrg(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Organization and Dropdown Section*/}
|
||||||
|
<div className={orgStyles.organizationContainer}>
|
||||||
|
<div className={orgStyles.orgContainer}>
|
||||||
|
{/* Logo */}
|
||||||
|
<div className={orgStyles.orgLogo}></div>
|
||||||
|
<div className={orgStyles.orgName}>
|
||||||
|
<p>Organization</p>
|
||||||
|
<div className={orgStyles.dropdownContainer}>
|
||||||
|
{/* Dropdown Menu*/}
|
||||||
|
{open && (
|
||||||
|
<div className={orgStyles.dropdown}>
|
||||||
|
{/* Organization Header and Search */}
|
||||||
|
<div className={orgStyles.orgSearchContainer}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className={orgStyles.createBtnContainer}>
|
||||||
|
<p>Organization</p>
|
||||||
|
<div className={orgStyles.createBtn}>
|
||||||
|
<p>Create</p>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<g clipPath="url(#clip0_548_2226)">
|
||||||
|
<path
|
||||||
|
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
|
||||||
|
stroke="#8287FF"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8 4.8291V11.172"
|
||||||
|
stroke="#8287FF"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M4.82812 8H11.171"
|
||||||
|
stroke="#8287FF"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_548_2226">
|
||||||
|
<rect width="16" height="16" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Search */}
|
||||||
|
<div className={orgStyles.srchInputContainer}>
|
||||||
|
<div className={orgStyles.srchInputGroup}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<g clipPath="url(#clip0_23_1333)">
|
||||||
|
<path
|
||||||
|
d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
|
||||||
|
stroke="#858699"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M16.8359 16.835L12.6172 12.6162"
|
||||||
|
stroke="#858699"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_23_1333">
|
||||||
|
<rect width="18" height="18" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
className={orgStyles.placeholderTxt}
|
||||||
|
type="text"
|
||||||
|
name="search"
|
||||||
|
id=""
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Select Options */}
|
||||||
|
<div className={orgStyles.optionsContainer}>
|
||||||
|
{orgList.map((org, index) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={orgStyles.orgList}
|
||||||
|
key={index}
|
||||||
|
onClick={() => handleOrgSelect(index)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${orgStyles.iconTxt} ${index === selectedOrg ? orgStyles.active : ""}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
|
||||||
|
fill="#8287FF"
|
||||||
|
style={{
|
||||||
|
fill: "#8287FF",
|
||||||
|
fillOpacity: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p>{org.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Button */}
|
||||||
|
<div
|
||||||
|
className={orgStyles.dropdownBtn}
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
>
|
||||||
|
<p>Project Moonshot Inc.</p>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
|
||||||
|
stroke="#969AF9"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Section */}
|
||||||
|
<div className={profileStyles.profileContainer}>
|
||||||
|
{/* Profile */}
|
||||||
|
<div className={profileStyles.profileBadge}>
|
||||||
|
{/* Username and Role*/}
|
||||||
|
<div className={profileStyles.nameRole}>
|
||||||
|
<p className={profileStyles.userName}>JM Grills</p>
|
||||||
|
<p className={profileStyles.userRole}>Super Admin</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User profile*/}
|
||||||
|
<div className={profileStyles.userImgContainer}>
|
||||||
|
<div className={profileStyles.userPic}></div>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
|
||||||
|
fill="#858699"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* do later */}
|
||||||
|
{/* Dropdown */}
|
||||||
|
<div className={profileStyles.dropdownContainer}>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeaderDetails;
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
/* Organization Header and Dropdown*/
|
||||||
|
.organizationContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.orgContainer {
|
||||||
|
display: flex;
|
||||||
|
padding: 6px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.orgLogo {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 100px;
|
||||||
|
background:
|
||||||
|
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
||||||
|
#232537;
|
||||||
|
background:
|
||||||
|
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
||||||
|
color(display-p3 0.1392 0.1443 0.2106);
|
||||||
|
}
|
||||||
|
|
||||||
|
.orgName {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.orgName > p {
|
||||||
|
color: #eeeffd;
|
||||||
|
color: color(display-p3 0.9333 0.9373 0.9882);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownContainer {
|
||||||
|
/* width: 201px;
|
||||||
|
height: 28px; */
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dropdownBtn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.dropdownBtn > p {
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.dropdownBtn > div {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 1px solid #b8badc00;
|
||||||
|
}
|
||||||
|
.dropdownBtn > div:hover {
|
||||||
|
border: 1px solid #b8badc;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(149, 154, 255, 0.25) 0%,
|
||||||
|
rgba(88, 91, 151, 0.25) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.dropdown {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 16px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #2d3143;
|
||||||
|
background: color(display-p3 0.1804 0.1922 0.2588);
|
||||||
|
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orgSearchContainer {
|
||||||
|
display: flex;
|
||||||
|
width: 318px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.createBtnContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.createBtnContainer > p {
|
||||||
|
color: #a3a7c6;
|
||||||
|
color: color(display-p3 0.6425 0.6544 0.7649);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.createBtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.createBtn > p {
|
||||||
|
color: #8187ff;
|
||||||
|
color: color(display-p3 0.5098 0.5294 1);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.createBtn:hover > p {
|
||||||
|
color: #9ba0ff;
|
||||||
|
color: color(display-p3 0.6127 0.6282 1);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
text-decoration-style: dotted;
|
||||||
|
text-decoration-skip-ink: auto;
|
||||||
|
text-decoration-thickness: auto;
|
||||||
|
text-underline-offset: auto;
|
||||||
|
text-underline-position: from-font;
|
||||||
|
}
|
||||||
|
.createBtn:hover > svg path {
|
||||||
|
stroke: #9ba0ff;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
stroke: color(display-p3 0.6127 0.6282 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.srchInputContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.srchInputGroup {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #282c3c;
|
||||||
|
background: color(display-p3 0.1593 0.1702 0.2316);
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholderTxt {
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.placeholderTxt::placeholder {
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.08px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.optionsContainer {
|
||||||
|
display: flex;
|
||||||
|
width: 318px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.orgList:hover {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #3c4159;
|
||||||
|
background: color(display-p3 0.2398 0.2548 0.3399);
|
||||||
|
}
|
||||||
|
.orgList {
|
||||||
|
display: flex;
|
||||||
|
padding: 6px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.iconTxt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconTxt > svg {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.active > svg {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconTxt > p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
/* Profile and Dropdown */
|
||||||
|
.profileContainer {
|
||||||
|
display: flex;
|
||||||
|
height: 44px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.profileBadge {
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 0 6px 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.profileBadge:hover {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #21232f;
|
||||||
|
background: color(display-p3 0.1294 0.1373 0.1804);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameRole {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.userName {
|
||||||
|
align-self: stretch;
|
||||||
|
color: #d2d3e1;
|
||||||
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||||
|
text-align: right;
|
||||||
|
leading-trim: both;
|
||||||
|
text-edge: cap;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
/* line-height: 30px; 200% */
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.15px;
|
||||||
|
}
|
||||||
|
.userRole {
|
||||||
|
align-self: stretch;
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
text-align: right;
|
||||||
|
leading-trim: both;
|
||||||
|
text-edge: cap;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 13px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
/* line-height: 30px; 230.769% */
|
||||||
|
line-height: 0.5;
|
||||||
|
letter-spacing: -0.26px;
|
||||||
|
}
|
||||||
|
.userImgContainer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.userPic {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 32px;
|
||||||
|
background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
|
||||||
|
}
|
||||||
@@ -8,296 +8,3 @@
|
|||||||
border-bottom: 1px solid #2c2d3d;
|
border-bottom: 1px solid #2c2d3d;
|
||||||
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
|
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
|
||||||
}
|
}
|
||||||
.organizationContainer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.orgContainer {
|
|
||||||
display: flex;
|
|
||||||
padding: 6px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.orgLogo {
|
|
||||||
width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 100px;
|
|
||||||
background:
|
|
||||||
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
|
||||||
#232537;
|
|
||||||
background:
|
|
||||||
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
|
||||||
color(display-p3 0.1392 0.1443 0.2106);
|
|
||||||
}
|
|
||||||
|
|
||||||
.orgName {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.orgName > p {
|
|
||||||
color: #eeeffd;
|
|
||||||
color: color(display-p3 0.9333 0.9373 0.9882);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdownContainer {
|
|
||||||
/* width: 201px;
|
|
||||||
height: 28px; */
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.dropdownBtn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
.dropdownBtn > p {
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 15px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.dropdownBtn > div {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
border-radius: 100px;
|
|
||||||
border: 1px solid #b8badc00;
|
|
||||||
}
|
|
||||||
.dropdownBtn > div:hover {
|
|
||||||
border: 1px solid #b8badc;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(149, 154, 255, 0.25) 0%,
|
|
||||||
rgba(88, 91, 151, 0.25) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
/* Dropdown */
|
|
||||||
.dropdown {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 16px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #2d3143;
|
|
||||||
background: color(display-p3 0.1804 0.1922 0.2588);
|
|
||||||
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
|
|
||||||
box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
margin-top: 8px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orgSearchContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 318px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.createBtnContainer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.createBtnContainer > p {
|
|
||||||
color: #a3a7c6;
|
|
||||||
color: color(display-p3 0.6425 0.6544 0.7649);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.createBtn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.createBtn > p {
|
|
||||||
color: #8187ff;
|
|
||||||
color: color(display-p3 0.5098 0.5294 1);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.createBtn:hover > p {
|
|
||||||
color: #9ba0ff;
|
|
||||||
color: color(display-p3 0.6127 0.6282 1);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
text-decoration-line: underline;
|
|
||||||
text-decoration-style: dotted;
|
|
||||||
text-decoration-skip-ink: auto;
|
|
||||||
text-decoration-thickness: auto;
|
|
||||||
text-underline-offset: auto;
|
|
||||||
text-underline-position: from-font;
|
|
||||||
}
|
|
||||||
.createBtn:hover > svg path {
|
|
||||||
stroke: #9ba0ff;
|
|
||||||
stroke-width: 1.5px;
|
|
||||||
stroke: color(display-p3 0.6127 0.6282 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.srchInputContainer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.srchInputGroup {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 9px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #282c3c;
|
|
||||||
background: color(display-p3 0.1593 0.1702 0.2316);
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholderTxt {
|
|
||||||
flex: 1;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.placeholderTxt::placeholder {
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: 0.08px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.optionsContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 318px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.orgList:hover {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #3c4159;
|
|
||||||
background: color(display-p3 0.2398 0.2548 0.3399);
|
|
||||||
}
|
|
||||||
.orgList {
|
|
||||||
display: flex;
|
|
||||||
padding: 6px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.iconTxt {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconTxt > svg {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.active > svg {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconTxt > p {
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
/* Profile */
|
|
||||||
.profileContainer {
|
|
||||||
display: flex;
|
|
||||||
height: 44px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
.profileBadge {
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 0 6px 8px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.nameRole {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.userName {
|
|
||||||
align-self: stretch;
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
text-align: right;
|
|
||||||
leading-trim: both;
|
|
||||||
text-edge: cap;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 15px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 30px; /* 200% */
|
|
||||||
letter-spacing: -0.15px;
|
|
||||||
}
|
|
||||||
.userRole {
|
|
||||||
align-self: stretch;
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
text-align: right;
|
|
||||||
leading-trim: both;
|
|
||||||
text-edge: cap;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 13px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 30px; /* 230.769% */
|
|
||||||
letter-spacing: -0.26px;
|
|
||||||
}
|
|
||||||
.userImgContainer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
.userPic {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
border-radius: 32px;
|
|
||||||
background: url(/PROFILE.svg) lightgray 50% / cover no-repeat;
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user