Merge pull request 'ui' (#26) from ui into main
Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/26
This commit is contained in:
commit
e27e2e2f9f
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
|
|
@ -0,0 +1,255 @@
|
|||
export function NotificationIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 12.8335C10 13.3639 9.78927 13.8726 9.4142 14.2477C9.03913 14.6228 8.5304 14.8335 8 14.8335C7.4696 14.8335 6.96087 14.6228 6.58579 14.2477C6.21072 13.8726 6 13.3639 6 12.8335"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.72064 12.1667C3.39434 12.0974 3.10586 11.9084 2.91209 11.6369C2.71832 11.3653 2.63337 11.0311 2.67399 10.7L3.34066 5.29332C3.51087 4.18175 4.07672 3.16901 4.93414 2.44143C5.79156 1.71384 6.88287 1.32036 8.00734 1.33332C9.1318 1.32036 10.2231 1.71384 11.0805 2.44143C11.9379 3.16901 12.5038 4.18175 12.674 5.29332L13.3407 10.7C13.3815 11.0301 13.2975 11.3636 13.1051 11.635C12.9127 11.9063 12.6257 12.096 12.3007 12.1667C9.47907 12.8297 6.54222 12.8297 3.72064 12.1667Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomeIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.91304 13.5V12.8333C6.91304 12.281 7.36076 11.8333 7.91304 11.8333H8.95652C9.50881 11.8333 9.95652 12.281 9.95652 12.8333V13.5C9.95652 14.0523 10.4042 14.5 10.9565 14.5H12C12.5523 14.5 13 14.0523 13 13.5V7.38889L8.21739 2.5L3 7.38889V13.5C3 14.0523 3.44772 14.5 4 14.5H5.91304C6.46533 14.5 6.91304 14.0523 6.91304 13.5Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectsIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.1538 1.5H5.69231C5.20268 1.5 4.7331 1.68437 4.38688 2.01256C4.04066 2.34075 3.84615 2.78587 3.84615 3.25C3.35652 3.25 2.88695 3.43437 2.54073 3.76256C2.1945 4.09075 2 4.53587 2 5V13.75C2 14.2141 2.1945 14.6592 2.54073 14.9874C2.88695 15.3156 3.35652 15.5 3.84615 15.5H10.3077C10.7973 15.5 11.2669 15.3156 11.6131 14.9874C11.9593 14.6592 12.1538 14.2141 12.1538 13.75C12.6435 13.75 13.1131 13.5656 13.4593 13.2374C13.8055 12.9092 14 12.4641 14 12V3.25C14 2.78587 13.8055 2.34075 13.4593 2.01256C13.1131 1.68437 12.6435 1.5 12.1538 1.5ZM12.1538 12.875V5C12.1538 4.53587 11.9593 4.09075 11.6131 3.76256C11.2669 3.43437 10.7973 3.25 10.3077 3.25H4.76923C4.76923 3.01794 4.86648 2.79538 5.03959 2.63128C5.2127 2.46719 5.44749 2.375 5.69231 2.375H12.1538C12.3987 2.375 12.6334 2.46719 12.8066 2.63128C12.9797 2.79538 13.0769 3.01794 13.0769 3.25V12C13.0769 12.2321 12.9797 12.4546 12.8066 12.6187C12.6334 12.7828 12.3987 12.875 12.1538 12.875ZM2.92308 5C2.92308 4.76794 3.02033 4.54538 3.19344 4.38128C3.36655 4.21719 3.60134 4.125 3.84615 4.125H10.3077C10.5525 4.125 10.7873 4.21719 10.9604 4.38128C11.1335 4.54538 11.2308 4.76794 11.2308 5V13.75C11.2308 13.9821 11.1335 14.2046 10.9604 14.3687C10.7873 14.5328 10.5525 14.625 10.3077 14.625H3.84615C3.60134 14.625 3.36655 14.5328 3.19344 14.3687C3.02033 14.2046 2.92308 13.9821 2.92308 13.75V5Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TutorialsIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="8.157"
|
||||
cy="8.35866"
|
||||
r="6.17928"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M7.31894 7.8336L7.30273 7.72125C10.0583 7.32407 11.5796 5.74901 12.1058 5.09033L12.1945 5.1612C11.6598 5.83032 10.1146 7.43067 7.31894 7.8336Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M7.3313 8.19434C7.56713 8.19434 7.7583 8.00316 7.7583 7.76734C7.7583 7.53151 7.56713 7.34033 7.3313 7.34033C7.09547 7.34033 6.9043 7.53151 6.9043 7.76734C6.9043 8.00316 7.09547 8.19434 7.3313 8.19434Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.134 5.56787C12.3699 5.56787 12.561 5.3767 12.561 5.14087C12.561 4.90504 12.3699 4.71387 12.134 4.71387C11.8982 4.71387 11.707 4.90504 11.707 5.14087C11.707 5.3767 11.8982 5.56787 12.134 5.56787Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M5.67763 13.0492C5.15009 12.385 4.31304 10.9992 4.63359 9.18018L4.74534 9.20001C4.43251 10.9751 5.25078 12.3292 5.76636 12.9785L5.67763 13.0492Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.68921 9.63867C4.92504 9.63867 5.11621 9.4475 5.11621 9.21167C5.11621 8.97584 4.92504 8.78467 4.68921 8.78467C4.45338 8.78467 4.26221 8.97584 4.26221 9.21167C4.26221 9.4475 4.45338 9.63867 4.68921 9.63867Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M5.70923 13.4238C5.94506 13.4238 6.13623 13.2327 6.13623 12.9968C6.13623 12.761 5.94506 12.5698 5.70923 12.5698C5.4734 12.5698 5.28223 12.761 5.28223 12.9968C5.28223 13.2327 5.4734 13.4238 5.70923 13.4238Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.4429 9.6101L12.3293 9.60692C12.369 8.18736 11.8263 6.82867 10.801 5.7813C9.73352 4.69047 8.2434 4.07147 6.70876 4.0804L6.70801 3.96684C8.27081 3.96078 9.79333 4.58917 10.8822 5.70181C11.9291 6.77143 12.4833 8.1595 12.4429 9.6101Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.3792 10.0142C12.615 10.0142 12.8062 9.82299 12.8062 9.58716C12.8062 9.35133 12.615 9.16016 12.3792 9.16016C12.1433 9.16016 11.9521 9.35133 11.9521 9.58716C11.9521 9.82299 12.1433 10.0142 12.3792 10.0142Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M6.72974 4.4585C6.96556 4.4585 7.15674 4.26732 7.15674 4.0315C7.15674 3.79567 6.96556 3.60449 6.72974 3.60449C6.49391 3.60449 6.30273 3.79567 6.30273 4.0315C6.30273 4.26732 6.49391 4.4585 6.72974 4.4585Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M8.93738 12.7561C5.51197 12.5871 3.18964 10.3443 2.15833 8.30167C1.40017 6.79989 1.28161 5.33657 1.84898 4.48256C2.21511 3.93139 2.7529 3.64179 3.57572 3.69903L3.45825 3.81649C2.67632 3.76183 2.28567 4.03042 1.94346 4.5454C1.39865 5.36549 1.51979 6.78505 2.25963 8.25049C3.27641 10.2647 5.56617 12.476 8.94298 12.6426L8.93738 12.7561Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.12372 13.5272C2.54078 13.2677 1.46328 11.9915 1.38697 10.4835C1.31368 9.03292 2.2066 7.3084 4.36675 6.72559L4.39628 6.83521C2.2973 7.40152 1.42936 9.07259 1.50053 10.4778C1.54767 11.4101 2.02721 12.4642 3.18398 12.9967C3.46147 13.1244 3.45807 13.0965 3.77132 13.2139L4.12372 13.5272Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.36157 7.21436C4.5974 7.21436 4.78858 7.02318 4.78858 6.78735C4.78858 6.55153 4.5974 6.36035 4.36157 6.36035C4.12575 6.36035 3.93457 6.55153 3.93457 6.78735C3.93457 7.02318 4.12575 7.21436 4.36157 7.21436Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M11.5155 15.1026C11.4663 15.1026 11.4165 15.1003 11.3659 15.0956C10.4065 15.0064 9.53752 14.1202 9.04102 12.7247L9.14807 12.6865C9.62928 14.0393 10.4622 14.8976 11.3764 14.9825C11.8685 15.0293 12.3041 14.8309 12.5152 14.4681C12.7337 14.0928 12.7265 13.7453 12.3977 13.2744L12.5152 13.1569C12.8703 13.6657 12.8548 14.1099 12.6133 14.5252C12.4016 14.8889 11.9895 15.1026 11.5155 15.1026Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M8.9187 13.1187C9.15453 13.1187 9.34571 12.9275 9.34571 12.6917C9.34571 12.4558 9.15453 12.2646 8.9187 12.2646C8.68287 12.2646 8.4917 12.4558 8.4917 12.6917C8.4917 12.9275 8.68287 13.1187 8.9187 13.1187Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M10.0987 3.65056L9.99072 3.61513C10.2487 2.83274 10.7045 2.32867 11.2414 2.23252C11.572 2.17286 11.8969 2.28566 12.0886 2.52597C12.2781 2.76339 12.4042 2.98817 12.2684 3.30782L12.1509 3.19035C12.2699 2.91023 12.1625 2.80064 12.0001 2.59683C11.8344 2.38923 11.5514 2.29248 11.2616 2.34441C10.7669 2.43284 10.3432 2.90906 10.0987 3.65056Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M10.0535 4.04004C10.2893 4.04004 10.4805 3.84887 10.4805 3.61304C10.4805 3.37721 10.2893 3.18604 10.0535 3.18604C9.81764 3.18604 9.62646 3.37721 9.62646 3.61304C9.62646 3.84887 9.81764 4.04004 10.0535 4.04004Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DocumentationIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 5.10589C7.2666 4.17245 6.13604 3.23901 3.33413 3.17051C3.15009 3.16602 3 3.3155 3 3.4996C3 4.86525 3 10.0354 3 11.5645C3 11.7486 3.1501 11.8932 3.33409 11.8992C6.13603 11.9908 7.2666 13.233 8 14.1665M8 5.10589C8.7334 4.17245 9.86393 3.23901 12.6659 3.17051C12.8499 3.16602 13 3.31214 13 3.49624C13 5.02281 13 10.0374 13 11.564C13 11.7481 12.8499 11.8932 12.6659 11.8992C9.864 11.9908 8.7334 13.233 8 14.1665M8 5.10589V14.1665"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.8232 4.5H14.333C14.5171 4.5 14.6663 4.64924 14.6663 4.83333V13.526C14.6663 13.7957 14.3485 13.9749 14.102 13.8654C13.5719 13.6299 12.6873 13.3421 11.5291 13.3421C9.56827 13.3421 7.99967 14.5 7.99967 14.5C7.99967 14.5 6.43105 13.3421 4.47026 13.3421C3.31197 13.3421 2.42738 13.6299 1.89732 13.8654C1.65079 13.9749 1.33301 13.7957 1.33301 13.526V4.83333C1.33301 4.64924 1.48225 4.5 1.66634 4.5H3.17615"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HelpIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="13"
|
||||
viewBox="0 0 12 13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_764_1941)">
|
||||
<path
|
||||
d="M6 12.5C2.6862 12.5 0 9.8138 0 6.5C0 3.1862 2.6862 0.5 6 0.5C9.3138 0.5 12 3.1862 12 6.5C12 9.8138 9.3138 12.5 6 12.5ZM3.552 4.8404V4.9016C3.552 4.98117 3.58361 5.05747 3.63987 5.11373C3.69613 5.16999 3.77244 5.2016 3.852 5.2016H4.4502C4.48952 5.2016 4.52845 5.19386 4.56478 5.17881C4.6011 5.16376 4.63411 5.14171 4.66191 5.11391C4.68971 5.08611 4.71176 5.0531 4.72681 5.01678C4.74186 4.98045 4.7496 4.94152 4.7496 4.9022C4.7496 4.1282 5.3484 3.7148 6.1536 3.7148C6.9384 3.7148 7.4544 4.1282 7.4544 4.7168C7.4544 5.2736 7.1652 5.5322 6.4428 5.8628L6.2364 5.9552C5.6274 6.224 5.4 6.626 5.4 7.3286V7.4C5.4 7.47957 5.43161 7.55587 5.48787 7.61213C5.54413 7.66839 5.62044 7.7 5.7 7.7H6.2982C6.33752 7.7 6.37645 7.69226 6.41278 7.67721C6.4491 7.66216 6.48211 7.64011 6.50991 7.61231C6.53771 7.58451 6.55976 7.5515 6.57481 7.51518C6.58986 7.47885 6.5976 7.43992 6.5976 7.4006C6.5976 7.091 6.6804 6.9668 6.9276 6.8534L7.1346 6.7604C8.0016 6.368 8.652 5.852 8.652 4.7264V4.6646C8.652 3.4778 7.62 2.6 6.1536 2.6C4.6668 2.6 3.552 3.4568 3.552 4.8404ZM5.1 9.4946C5.1 10.0148 5.4954 10.4 5.9946 10.4C6.5046 10.4 6.9 10.0148 6.9 9.4946C6.9 8.9744 6.5046 8.6 5.9946 8.6C5.4954 8.6 5.1 8.9744 5.1 9.4946Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_764_1941">
|
||||
<rect
|
||||
width="12"
|
||||
height="12"
|
||||
fill="white"
|
||||
transform="translate(0 0.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LogoutIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 3.5C4.00605 2.41248 4.05428 1.82353 4.43847 1.43934C4.87781 1 5.58489 1 6.99914 1H7.49914C8.91334 1 9.62044 1 10.0598 1.43934C10.4991 1.87868 10.4991 2.58578 10.4991 4V8C10.4991 9.4142 10.4991 10.1213 10.0598 10.5606C9.62044 11 8.91334 11 7.49914 11H6.99914C5.58489 11 4.87781 11 4.43847 10.5606C4.05428 10.1764 4.00605 9.5875 4 8.5"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M4 9.75C2.82149 9.75 2.23223 9.75 1.86611 9.3839C1.5 9.01775 1.5 8.4285 1.5 7.25V4.75C1.5 3.57149 1.5 2.98224 1.86611 2.61612C2.23223 2.25 2.82149 2.25 4 2.25"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 6H3M3 6L4 7M3 6L4 5"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -526,21 +526,21 @@ export const KebabIcon = () => {
|
|||
cy="1.35112"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="#E1E1E1"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="6.04868"
|
||||
cy="1.35131"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="#E1E1E1"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="10.5476"
|
||||
cy="1.35131"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="#E1E1E1"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -559,7 +559,7 @@ export const DublicateIcon = () => {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
|
||||
fill="#6F42C1"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -576,31 +576,31 @@ export const DeleteIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M8.33301 10V13.3334"
|
||||
stroke="#5D5F63"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11 10V13.3334"
|
||||
stroke="#5D5F63"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.33301 6.66406H15"
|
||||
stroke="#5D5F63"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.66699 8.66406V13.9976C5.66699 15.1022 6.56245 15.9976 7.66705 15.9976H11.6672C12.7718 15.9976 13.6672 15.1022 13.6672 13.9976V8.66406"
|
||||
stroke="#5D5F63"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.66699 5.33337C7.66699 4.59697 8.26396 4 9.00037 4H10.3337C11.0702 4 11.6671 4.59697 11.6671 5.33337V6.66675H7.66699V5.33337Z"
|
||||
stroke="#5D5F63"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -179,8 +179,8 @@ export function MoveArrowRight() {
|
|||
<path
|
||||
d="M9.58363 6.16637L15.4173 12L9.58363 17.8336"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -198,8 +198,8 @@ export function MoveArrowLeft() {
|
|||
<path
|
||||
d="M14.4164 6.16637L8.58274 12L14.4164 17.8336"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import React from "react";
|
||||
import { KebabIcon } from "../../icons/ExportCommonIcons";
|
||||
import img from "../../../assets/image/image.png"
|
||||
|
||||
const DashboardCard:React.FC = () => {
|
||||
return (
|
||||
<div className="dashboard-card-container">
|
||||
<div className="preview-container">
|
||||
<img src={img} alt="" />
|
||||
</div>
|
||||
<div className="project-details-container">
|
||||
<div className="project-details">
|
||||
<div className="project-name">Untitled</div>
|
||||
<div className="project-data">24-12-2025</div>
|
||||
</div>
|
||||
<div className="users-list-container">
|
||||
<div className="user-profile">V</div>
|
||||
<KebabIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardCard;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import DashboardCard from "./DashboardCard";
|
||||
import DashboardNavBar from "./DashboardNavBar";
|
||||
import MarketPlaceBanner from "./MarketPlaceBanner";
|
||||
|
||||
const DashboardHome: React.FC = () => {
|
||||
return (
|
||||
<div className="dashboard-home-container">
|
||||
<DashboardNavBar page={"home"} />
|
||||
<MarketPlaceBanner />
|
||||
<div className="container">
|
||||
<div className="header">Recents</div>
|
||||
<div className="cards-container">
|
||||
<DashboardCard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardHome;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import { CartIcon } from "../../icons/ExportModuleIcons";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
interface DashboardNavBarProps {
|
||||
page: React.ReactNode;
|
||||
}
|
||||
|
||||
const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
|
||||
return (
|
||||
<div className="dashboard-navbar-container">
|
||||
<div className="title">{page}</div>
|
||||
<div className="market-place-button">
|
||||
<CartIcon isActive /> Market Place
|
||||
</div>
|
||||
<Search onChange={() => {}} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardNavBar;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
import banner from "../../../assets/image/banner.png";
|
||||
|
||||
const MarketPlaceBanner = () => {
|
||||
return (
|
||||
<div className="market-place-banner-container">
|
||||
{/* market place banner */}
|
||||
<img src={banner} alt="" />
|
||||
<div className="hero-text">
|
||||
NEW
|
||||
<br /> FALL
|
||||
<br /> COLLECTION
|
||||
</div>
|
||||
<div className="context">Unlock Creativity with Premium 3D Assets!</div>
|
||||
<div className="arrow-context">
|
||||
<svg
|
||||
width="169"
|
||||
height="120"
|
||||
viewBox="0 0 169 120"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
|
||||
stroke="white"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
|
||||
stroke="white"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="explore-button">Explore Now</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketPlaceBanner;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from "react";
|
||||
import {
|
||||
DocumentationIcon,
|
||||
HelpIcon,
|
||||
HomeIcon,
|
||||
LogoutIcon,
|
||||
NotificationIcon,
|
||||
ProjectsIcon,
|
||||
TutorialsIcon,
|
||||
} from "../../icons/DashboardIcon";
|
||||
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
|
||||
|
||||
const SidePannel: React.FC = () => {
|
||||
const userName = localStorage.getItem("userName") || "Anonymous";
|
||||
return (
|
||||
<div className="side-pannel-container">
|
||||
<div className="side-pannel-header">
|
||||
<div className="user-container">
|
||||
<div className="user-profile">{userName[0]}</div>
|
||||
<div className="user-name">{userName}</div>
|
||||
</div>
|
||||
<div className="notifications-container">
|
||||
<NotificationIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="new-project-button">+ New project</div>
|
||||
<div className="side-bar-content-container">
|
||||
<div className="side-bar-options-container">
|
||||
<div className="option-list active">
|
||||
<HomeIcon />
|
||||
Home
|
||||
</div>
|
||||
<div className="option-list" title="coming soon">
|
||||
<ProjectsIcon />
|
||||
Projects
|
||||
</div>
|
||||
<div className="option-list" title="coming soon">
|
||||
<TrashIcon />
|
||||
Trash
|
||||
</div>
|
||||
<div className="option-list" title="coming soon">
|
||||
<TutorialsIcon />
|
||||
Tutorials
|
||||
</div>
|
||||
<div className="option-list" title="coming soon">
|
||||
<DocumentationIcon />
|
||||
Documentation
|
||||
</div>
|
||||
</div>
|
||||
<div className="side-bar-options-container" title="coming soon">
|
||||
<div className="option-list">
|
||||
<SettingsIcon />
|
||||
Settings
|
||||
</div>
|
||||
<div className="option-list" style={{cursor: "pointer"}}>
|
||||
<LogoutIcon />
|
||||
Log out
|
||||
</div>
|
||||
<div className="option-list">
|
||||
<HelpIcon />
|
||||
Help & Feedback
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SidePannel;
|
||||
|
|
@ -1,13 +1,105 @@
|
|||
import React, { useState } from "react";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
import vehicle from "../../../assets/image/vehicles.png";
|
||||
import workStation from "../../../assets/image/workStation.png";
|
||||
import machines from "../../../assets/image/machines.png";
|
||||
import feneration from "../../../assets/image/feneration.png";
|
||||
import worker from "../../../assets/image/worker.png";
|
||||
const Assets: React.FC = () => {
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchValue(value);
|
||||
console.log(value); // Log the search value if needed
|
||||
setSelectedCategory(null); // Reset selected category when search changes
|
||||
};
|
||||
|
||||
const categoryList = [
|
||||
{
|
||||
assetName: "Doors",
|
||||
assetImage: "",
|
||||
category: "Feneration",
|
||||
categoryImage: feneration,
|
||||
},
|
||||
{
|
||||
assetName: "Windows",
|
||||
assetImage: "",
|
||||
category: "Feneration",
|
||||
categoryImage: feneration,
|
||||
},
|
||||
{
|
||||
assetName: "Pillars",
|
||||
assetImage: "",
|
||||
category: "Feneration",
|
||||
categoryImage: feneration,
|
||||
},
|
||||
{
|
||||
assetName: "Forklift",
|
||||
assetImage: "",
|
||||
category: "Vehicles",
|
||||
categoryImage: vehicle,
|
||||
},
|
||||
{
|
||||
assetName: "AGV",
|
||||
assetImage: "",
|
||||
category: "Vehicles",
|
||||
categoryImage: vehicle,
|
||||
},
|
||||
{
|
||||
assetName: "Pallet",
|
||||
assetImage: "",
|
||||
category: "Workstation",
|
||||
categoryImage: workStation,
|
||||
},
|
||||
{
|
||||
assetName: "Controller",
|
||||
assetImage: "",
|
||||
category: "Workstation",
|
||||
categoryImage: workStation,
|
||||
},
|
||||
{
|
||||
assetName: "Conveyor",
|
||||
assetImage: "",
|
||||
category: "Workstation",
|
||||
categoryImage: workStation,
|
||||
},
|
||||
{
|
||||
assetName: "VMC",
|
||||
assetImage: "",
|
||||
category: "Machines",
|
||||
categoryImage: machines,
|
||||
},
|
||||
{
|
||||
assetName: "CMC",
|
||||
assetImage: "",
|
||||
category: "Machines",
|
||||
categoryImage: machines,
|
||||
},
|
||||
{
|
||||
assetName: "Male Worker",
|
||||
assetImage: "",
|
||||
category: "Workers",
|
||||
categoryImage: worker,
|
||||
},
|
||||
{
|
||||
assetName: "Female Worker",
|
||||
assetImage: "",
|
||||
category: "Workers",
|
||||
categoryImage: worker,
|
||||
},
|
||||
];
|
||||
|
||||
// Get unique categories
|
||||
const uniqueCategories = Array.from(
|
||||
new Set(categoryList.map((asset) => asset.category))
|
||||
);
|
||||
|
||||
// Filter assets based on the selected category
|
||||
const filteredAssets =
|
||||
selectedCategory !== null
|
||||
? categoryList.filter((asset) => asset.category === selectedCategory)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="assets-container">
|
||||
<Search onChange={handleSearchChange} />
|
||||
|
|
@ -15,11 +107,58 @@ const Assets: React.FC = () => {
|
|||
<div className="searched-content">
|
||||
<p>Results for "{searchValue}"</p>
|
||||
</div>
|
||||
) : selectedCategory ? (
|
||||
<div className="assets-wrapper">
|
||||
{/* Back Button */}
|
||||
<div
|
||||
className="back-button"
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
>
|
||||
← Back
|
||||
</div>
|
||||
<h2>{selectedCategory}</h2>
|
||||
<div className="assets-container">
|
||||
{filteredAssets.map((asset, index) => (
|
||||
<div key={index} className="assets">
|
||||
<img
|
||||
src={asset.assetImage}
|
||||
alt={asset.assetName}
|
||||
className="asset-image"
|
||||
/>
|
||||
<div className="asset-name">{asset.assetName}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
<div className="assets-wrapper">
|
||||
<h2>Categories</h2>
|
||||
<div className="categories-container">
|
||||
{uniqueCategories.map((category, index) => {
|
||||
const categoryInfo = categoryList.find(
|
||||
(asset) => asset.category === category
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="category"
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
>
|
||||
<img
|
||||
src={categoryInfo?.categoryImage || ""}
|
||||
alt={category}
|
||||
className="category-image"
|
||||
/>
|
||||
<div className="category-name">{category}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Assets;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { AppDockIcon } from "../../icons/HeaderIcons";
|
||||
import orgImg from "../../../assets/orgTemp.png";
|
||||
import { useActiveUsers } from "../../../store/store";
|
||||
import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
|
||||
import { ActiveUser } from "../../../types/users";
|
||||
import CollaborationPopup from "../../templates/CollaborationPopup";
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { activeUsers } = useActiveUsers();
|
||||
|
|
@ -12,44 +13,58 @@ const Header: React.FC = () => {
|
|||
const guestUsers: ActiveUser[] = activeUsers.filter(
|
||||
(user: ActiveUser) => user.userName !== userName
|
||||
);
|
||||
|
||||
const [userManagement, setUserManagement] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="header-container">
|
||||
<div className="options-container">
|
||||
<div className="share-button">Share</div>
|
||||
<div className="app-docker-button">
|
||||
<AppDockIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div className="users-container">
|
||||
<div className="guest-users-container">
|
||||
{guestUsers.length > 3 && (
|
||||
<div className="other-guest">+{guestUsers.length - 3}</div>
|
||||
)}
|
||||
{guestUsers.slice(0, 3).map((user, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="user-profile"
|
||||
style={{ background: getAvatarColor(index) }}
|
||||
>
|
||||
{user.userName[0]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="user-profile-container">
|
||||
<>
|
||||
{userManagement && (
|
||||
<CollaborationPopup setUserManagement={setUserManagement} />
|
||||
)}
|
||||
<div className="header-container">
|
||||
<div className="options-container">
|
||||
<div
|
||||
className="user-profile"
|
||||
style={{ background: "var(--accent-color)" }}
|
||||
className="share-button"
|
||||
onClick={() => {
|
||||
setUserManagement(true);
|
||||
}}
|
||||
>
|
||||
{userName[0]}
|
||||
Share
|
||||
</div>
|
||||
<div className="user-organization">
|
||||
<img src={orgImg} alt="" />
|
||||
<div className="app-docker-button">
|
||||
<AppDockIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div className="users-container">
|
||||
<div className="guest-users-container">
|
||||
{guestUsers.length > 3 && (
|
||||
<div className="other-guest">+{guestUsers.length - 3}</div>
|
||||
)}
|
||||
{guestUsers.slice(0, 3).map((user, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="user-profile"
|
||||
style={{ background: getAvatarColor(index) }}
|
||||
>
|
||||
{user.userName[0]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="user-profile-container">
|
||||
<div
|
||||
className="user-profile"
|
||||
style={{ background: "var(--accent-color)" }}
|
||||
>
|
||||
{userName[0]}
|
||||
</div>
|
||||
<div className="user-organization">
|
||||
<img src={orgImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,14 @@ const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const CollaborationPopup: React.FC = () => {
|
||||
interface CollaborateProps {
|
||||
setUserManagement: (value: boolean) => void;
|
||||
}
|
||||
|
||||
const CollaborationPopup: React.FC<CollaborateProps> = ({
|
||||
setUserManagement,
|
||||
}) => {
|
||||
const userName = localStorage.getItem("userName") || "Anonymous";
|
||||
const users = [
|
||||
{
|
||||
name: "Alice Johnson",
|
||||
|
|
@ -81,16 +88,31 @@ const CollaborationPopup: React.FC = () => {
|
|||
access: "Viewer",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<RenderOverlay>
|
||||
<div className="collaboration-popup-wrapper">
|
||||
<div className="collaboration-popup-container">
|
||||
<div
|
||||
className="collaboration-popup-wrapper"
|
||||
onClick={() => {
|
||||
setUserManagement(false);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="collaboration-popup-container"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div className="header">
|
||||
<div className="content">Share this file</div>
|
||||
<div className="content">
|
||||
<div className="copy-link-button">copy link</div>
|
||||
<div className="close-button">
|
||||
<div
|
||||
className="close-button"
|
||||
onClick={() => {
|
||||
setUserManagement(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,7 +133,10 @@ const CollaborationPopup: React.FC = () => {
|
|||
</div>
|
||||
<div className="users-list-container">
|
||||
<div className="you-container">
|
||||
<div className="your-name">User 1</div>
|
||||
<div className="your-name">
|
||||
<div className="user-profile">{userName[0]}</div>
|
||||
{userName}
|
||||
</div>
|
||||
<div className="indicater">you</div>
|
||||
</div>
|
||||
{users.map((user, index) => (
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store";
|
|||
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
|
||||
import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
|
||||
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
type FormattedZoneData = Record<
|
||||
|
|
@ -25,7 +24,7 @@ type FormattedZoneData = Record<
|
|||
lockedPanels: Side[];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
zoneViewPortPosition: number[]
|
||||
zoneViewPortPosition: number[];
|
||||
widgets: Widget[];
|
||||
}
|
||||
>;
|
||||
|
|
@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
|
||||
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zones } = useZones()
|
||||
const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
|
||||
const { zones } = useZones();
|
||||
const [floatingWidgets, setFloatingWidgets] = useState<
|
||||
Record<string, { zoneName: string; zoneId: string; objects: any[] }>
|
||||
>({});
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
useEffect(() => {
|
||||
async function GetZoneData() {
|
||||
|
|
@ -57,28 +58,30 @@ const RealTimeVisulization: React.FC = () => {
|
|||
if (!Array.isArray(response)) {
|
||||
return;
|
||||
}
|
||||
const formattedData = response.reduce<FormattedZoneData>((acc, zone) => {
|
||||
acc[zone.zoneName] = {
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
zoneId: zone.zoneId,
|
||||
zoneViewPortTarget: zone.viewPortCenter,
|
||||
zoneViewPortPosition: zone.viewPortposition,
|
||||
widgets: [],
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
const formattedData = response.reduce<FormattedZoneData>(
|
||||
(acc, zone) => {
|
||||
acc[zone.zoneName] = {
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
zoneId: zone.zoneId,
|
||||
zoneViewPortTarget: zone.viewPortCenter,
|
||||
zoneViewPortPosition: zone.viewPortposition,
|
||||
widgets: [],
|
||||
};
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
setZonesData(formattedData);
|
||||
} catch (error) {
|
||||
console.log('error: ', error);
|
||||
console.log("error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
GetZoneData();
|
||||
}, [activeModule]); // Removed `zones` from dependencies
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setZonesData((prev) => {
|
||||
if (!selectedZone) return prev;
|
||||
|
|
@ -98,9 +101,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
});
|
||||
}, [selectedZone]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [floatingWidgets])
|
||||
useEffect(() => {}, [floatingWidgets]);
|
||||
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => {
|
|||
position: [relativeY, relativeX], // Y first because of top/left style
|
||||
};
|
||||
// Only set zone if it’s not already in the store (prevents overwriting objects)
|
||||
const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
const existingZone =
|
||||
useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
if (!existingZone) {
|
||||
useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
}
|
||||
// Add the dropped object to the zone
|
||||
useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.addObject(selectedZone.zoneName, newObject);
|
||||
setFloatingWidgets((prevWidgets) => ({
|
||||
...prevWidgets,
|
||||
[selectedZone.zoneName]: {
|
||||
...prevWidgets[selectedZone.zoneName],
|
||||
zoneName: selectedZone.zoneName,
|
||||
zoneId: selectedZone.zoneId,
|
||||
objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
|
||||
objects: [
|
||||
...(prevWidgets[selectedZone.zoneName]?.objects || []),
|
||||
newObject,
|
||||
],
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
|
|
@ -149,7 +157,6 @@ const RealTimeVisulization: React.FC = () => {
|
|||
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
|
||||
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
||||
}}
|
||||
|
||||
>
|
||||
<div
|
||||
className="scene-container"
|
||||
|
|
|
|||
|
|
@ -58,12 +58,15 @@ const MultiEmailInvite: React.FC = () => {
|
|||
onFocus={() => setInputFocus(true)}
|
||||
onBlur={() => setInputFocus(false)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Enter email and press Enter or comma"
|
||||
placeholder="Enter email and press Enter or comma to seperate"
|
||||
/>
|
||||
</div>
|
||||
<div onClick={handleAddEmail} className="invite-button">
|
||||
Invite
|
||||
</div>
|
||||
<div className="users-list-container">
|
||||
{/* list available users */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -253,7 +253,8 @@ const MultiLevelDropdown = ({
|
|||
className={`dropdown-button ${open ? "open" : ""}`}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{displayLabel} <span className="icon">▾</span>
|
||||
<div className="label">{displayLabel}</div>
|
||||
<span className="icon">▾</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="dropdown-menu">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,604 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
const MenuBar = () => {
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
|
||||
|
||||
// State to track selection for all menu items
|
||||
const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
|
||||
// Function to toggle selection for a specific item
|
||||
const toggleSelection = (itemName: string) => {
|
||||
setSelectedItems((prev) => ({
|
||||
...prev,
|
||||
[itemName]: !prev[itemName], // Toggle the selection state
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="menu-bar">
|
||||
{/* Top-level menu buttons */}
|
||||
<div className="menu-buttons">
|
||||
{/* File Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("File")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
File
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* File Dropdown */}
|
||||
{activeMenu === "File" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* New File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("New File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New File"] && "✓ "}
|
||||
New File
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + N</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open Local File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Open Local File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Open Local File"] && "✓ "}
|
||||
Open Local File
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + O</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Version */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Save Version")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Save Version"] && "✓ "}
|
||||
Save Version
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Make a Copy */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Make a Copy")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Make a Copy"] && "✓ "}
|
||||
Make a Copy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Share")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Share"] && "✓ "}
|
||||
Share
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rename */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Rename")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Rename"] && "✓ "}
|
||||
Rename
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Import */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Import")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Import"] && "✓ "}
|
||||
Import
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Close File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Close File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Close File"] && "✓ "}
|
||||
Close File
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Edit Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Edit")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Edit
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Edit Dropdown */}
|
||||
{activeMenu === "Edit" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Undo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Undo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo"] && "✓ "}
|
||||
Undo
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Z</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Redo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Redo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo"] && "✓ "}
|
||||
Redo
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + Z</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Undo History */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Undo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo History"] && "✓ "}
|
||||
Undo History
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Redo History */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Redo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo History"] && "✓ "}
|
||||
Redo History
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Find */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Find")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Find"] && "✓ "}
|
||||
Find
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + F</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Delete")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Delete"] && "✓ "}
|
||||
Delete
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select by... */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Select by...")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Select by..."] && "✓ "}
|
||||
Select by...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keymap */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Keymap")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Keymap"] && "✓ "}
|
||||
Keymap
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* View Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("View")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
View
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* View Dropdown */}
|
||||
{activeMenu === "View" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Grid */}
|
||||
<div
|
||||
className={"menu-item-container"}
|
||||
onClick={() => toggleSelection("Grid")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Grid"] && "✓ "}
|
||||
Grid
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gizmo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
|
||||
onMouseLeave={() => setActiveSubMenu(null)}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Gizmo"] && "✓ "}
|
||||
Gizmo
|
||||
</span>
|
||||
<span className="icon">▾</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
{/* Gizmo Submenu */}
|
||||
{activeSubMenu === "View-Gizmo" && (
|
||||
<div className="submenu">
|
||||
{/* Visibility */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Visibility")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Visibility"] && "✓ "}
|
||||
Visibility
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Cube view */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Cube view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Cube view"] && "✓ "}
|
||||
Cube view
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Sphere view */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Sphere view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Sphere view"] && "✓ "}
|
||||
Sphere view
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Custom settings */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Custom settings")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Custom settings"] && "✓ "}
|
||||
Custom settings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Zoom */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Zoom")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Zoom"] && "✓ "}
|
||||
Zoom
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Screen */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Full Screen")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Full Screen"] && "✓ "}
|
||||
Full Screen
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">F11</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version History Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Version history")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Version history
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Export As Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Export as...")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Export as...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Apps Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Apps")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Apps
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Apps Dropdown */}
|
||||
{activeMenu === "Apps" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* New App */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("New App")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New App"] && "✓ "}
|
||||
New App
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Work-flow Monitor */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Work-flow Monitor")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Work-flow Monitor"] && "✓ "}
|
||||
Work-flow Monitor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperature Visualizer */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Temperature Visualizer")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Temperature Visualizer"] && "✓ "}
|
||||
Temperature Visualizer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View all */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("View all")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["View all"] && "✓ "}
|
||||
View all
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Help Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Help")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Help
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Help Dropdown */}
|
||||
{activeMenu === "Help" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Shortcuts */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Shortcuts")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Shortcuts"] && "✓ "}
|
||||
Shortcuts
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + ?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Manual */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Manual")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Manual"] && "✓ "}
|
||||
Manual
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Tutorials */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Video Tutorials")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Video Tutorials"] && "✓ "}
|
||||
Video Tutorials
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Report a bug */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Report a bug")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Report a bug"] && "✓ "}
|
||||
Report a bug
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuBar;
|
||||
|
||||
|
||||
|
|
@ -142,6 +142,7 @@ const CamModelsGroup = () => {
|
|||
const filteredData = data.cameraDatas.filter(
|
||||
(camera: any) => camera.userData.email !== email
|
||||
);
|
||||
let a:any = [];
|
||||
if (filteredData.length > 0) {
|
||||
loader.load(camModel, (gltf) => {
|
||||
const newCams = filteredData.map((cam: any) => {
|
||||
|
|
@ -158,9 +159,10 @@ const CamModelsGroup = () => {
|
|||
cam.rotation.z
|
||||
);
|
||||
newModel.userData = cam.userData;
|
||||
setActiveUsers([...activeUsers, cam.userData]);
|
||||
a.push(cam.userData);
|
||||
return newModel;
|
||||
});
|
||||
setActiveUsers(a);
|
||||
setCams((prev) => [...prev, ...newCams]);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ interface AssetPreviewProps {
|
|||
function Ui() {
|
||||
return (
|
||||
<Text color="#6f42c1" anchorX="center" anchorY="middle" scale={0.3}>
|
||||
Loading your model...
|
||||
Loading preview...
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
import React from 'react';
|
||||
import SidePannel from '../components/layout/Dashboard/SidePannel';
|
||||
import DashboardHome from '../components/layout/Dashboard/DashboardHome';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<div>Dashboard</div>
|
||||
<div className="dashboard-main">
|
||||
<SidePannel />
|
||||
<DashboardHome />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ $acent-gradient: linear-gradient(
|
|||
#925df3 100%
|
||||
); // Light mode accent gradient
|
||||
|
||||
$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
|
||||
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
|
||||
|
||||
// ========================================================================
|
||||
// Typography
|
||||
// ========================================================================
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
--accent-color: #{$accent-color}; // Primary accent color for light theme
|
||||
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
|
||||
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
|
||||
--faint-gradient-color: #{$faint-gradient};
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color}; // Main background color
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
|
||||
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
|
||||
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
|
||||
--faint-gradient-color: #{$faint-gradient-dark};
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color-dark}; // Main background color
|
||||
|
|
@ -84,7 +86,6 @@
|
|||
}
|
||||
|
||||
body {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
/* Font Sizes */
|
||||
|
|
@ -104,25 +105,34 @@ body {
|
|||
|
||||
/* Apply custom scrollbar styles globally */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* Width of the scrollbar */
|
||||
height: 8px; /* Height for horizontal scrollbars */
|
||||
width: 8px;
|
||||
/* Width of the scrollbar */
|
||||
height: 8px;
|
||||
/* Height for horizontal scrollbars */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent; /* Background of the scrollbar track */
|
||||
border-radius: 4px; /* Rounded corners */
|
||||
background: transparent;
|
||||
/* Background of the scrollbar track */
|
||||
border-radius: 4px;
|
||||
/* Rounded corners */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-color); /* Scrollbar handle color */
|
||||
border-radius: 4px; /* Rounded corners */
|
||||
border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */
|
||||
background: var(--accent-color);
|
||||
/* Scrollbar handle color */
|
||||
border-radius: 4px;
|
||||
/* Rounded corners */
|
||||
border: 2px solid #f4f4f4;
|
||||
/* Padding around the scrollbar handle */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color); /* Handle color on hover */
|
||||
background: var(--accent-color);
|
||||
/* Handle color on hover */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent; /* Remove corner styling for scrollable containers */
|
||||
background: transparent;
|
||||
/* Remove corner styling for scrollable containers */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,12 +28,14 @@
|
|||
.toggle-header-container {
|
||||
@include flex-center;
|
||||
padding: 6px 12px;
|
||||
|
||||
.toggle-header-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
|
|
@ -46,6 +48,7 @@
|
|||
padding: 8px 10px;
|
||||
background: var(--background-color);
|
||||
z-index: 1;
|
||||
|
||||
.search-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
|
|
@ -83,11 +86,13 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
|
@ -96,9 +101,11 @@
|
|||
.kebab-menu-container {
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
|
||||
.kebab-icon {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
|
|
@ -109,6 +116,7 @@
|
|||
z-index: 1;
|
||||
padding: 8px 4px;
|
||||
width: 170px;
|
||||
|
||||
.menu-item {
|
||||
margin: 2px 0;
|
||||
padding: 2px 4px;
|
||||
|
|
@ -116,25 +124,31 @@
|
|||
border-radius: #{$border-radius-small};
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -144,6 +158,7 @@
|
|||
.project-dropdowm-container {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
.project-name {
|
||||
line-height: 32px;
|
||||
height: 100%;
|
||||
|
|
@ -158,6 +173,7 @@
|
|||
border-radius: 6px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.dropdown-header {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -180,14 +196,17 @@
|
|||
left: 0;
|
||||
top: 110%;
|
||||
padding: 4px;
|
||||
|
||||
.dropdown-search {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--highlight-accent-color);
|
||||
|
|
@ -203,6 +222,7 @@
|
|||
.input.default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.dropdown {
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
|
|
@ -210,6 +230,7 @@
|
|||
background: var(--highlight-accent-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
padding: 1px 4px;
|
||||
|
||||
.active-option {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-small);
|
||||
|
|
@ -223,6 +244,7 @@ input {
|
|||
border-radius: #{$border-radius-small};
|
||||
border: 1px solid var(--border-color);
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid var(--accent-color);
|
||||
|
|
@ -232,14 +254,17 @@ input {
|
|||
.eye-dropper-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 60%;
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
|
||||
.eye-picker-button {
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
|
|
@ -248,6 +273,7 @@ input {
|
|||
background: var(--background-color-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
|
@ -264,6 +290,13 @@ input {
|
|||
border: 1px solid var(--border-color) !important;
|
||||
padding: 5px 10px;
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
|
|
@ -295,9 +328,11 @@ input {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.nested-dropdown {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -306,7 +341,7 @@ input {
|
|||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-regular);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
|
|
@ -324,11 +359,12 @@ input {
|
|||
justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-regular);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: #{$border-radius-small};
|
||||
.arrow-container{
|
||||
|
||||
.arrow-container {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
|
|
@ -342,7 +378,7 @@ input {
|
|||
}
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -429,6 +465,7 @@ input {
|
|||
outline: 3px solid var(--accent-color);
|
||||
outline-offset: -3px;
|
||||
transform: translateY(-5px);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1) translateY(-5px);
|
||||
}
|
||||
|
|
@ -530,6 +567,7 @@ input {
|
|||
.labeled-button-container {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
|
||||
button {
|
||||
padding: 2px 32px;
|
||||
border: none;
|
||||
|
|
@ -538,6 +576,7 @@ input {
|
|||
background: var(--accent-color);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
@ -548,12 +587,15 @@ input {
|
|||
margin-bottom: 6px;
|
||||
padding: 6px 12px;
|
||||
@include flex-space-between;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.default {
|
||||
width: 60%;
|
||||
}
|
||||
|
|
@ -562,6 +604,7 @@ input {
|
|||
.multi-email-invite-input-container {
|
||||
@include flex-space-between;
|
||||
gap: 20px;
|
||||
|
||||
.multi-email-invite-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -571,24 +614,29 @@ input {
|
|||
flex-wrap: wrap;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.entered-emails {
|
||||
@include flex-center;
|
||||
gap: 2px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 0 4px;
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
span {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
|
|
@ -596,13 +644,15 @@ input {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-button {
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.multi-email-invite-input.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
.menu-bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 8px;
|
||||
.menu-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 8px 4px;
|
||||
min-width: 178px;
|
||||
|
||||
.menu-button-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
|
||||
.menu-button {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.dropdown-icon {
|
||||
margin-left: 5px;
|
||||
font-size: var(--font-size-small);
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
background-color: var(--background-color);
|
||||
min-width: 220px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
z-index: 100;
|
||||
padding: 5px 0;
|
||||
|
||||
.menu-item-container {
|
||||
position: relative;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.menu-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
|
||||
.shortcut {
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
background-color: var(--background-color);
|
||||
min-width: 200px;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
z-index: 101;
|
||||
|
||||
.submenu-item {
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-gray);
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.split {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e0dfff;
|
||||
}
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 30px;
|
||||
font-size: var(--font-size-xxxlarge);
|
||||
color: var(--accent-color);
|
||||
|
||||
}
|
||||
|
|
@ -170,15 +170,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.bar-chart{
|
||||
padding:14px 0;
|
||||
|
||||
.bar-chart {
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stateWorking-wrapper {
|
||||
min-width: 445px;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
backdrop-filter: blur(40px);
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: 20px;
|
||||
|
|
@ -195,7 +196,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-size: 27px;
|
||||
font-size: var(--font-size-xxlarge);
|
||||
|
||||
&:first-child {
|
||||
color: #FCFDFD;
|
||||
|
|
@ -362,13 +363,13 @@
|
|||
border-radius: 4px;
|
||||
|
||||
.label {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--font-size-regular);
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--font-size-xlarge);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -398,19 +399,19 @@
|
|||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 2.5rem;
|
||||
font-size: var(--font-size-xxxlarge);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--font-size-regular);
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
|
@ -461,7 +462,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #718096;
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
padding: 18px 10px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
.state {
|
||||
font-size: 24px;
|
||||
font-size: var(--font-size-xxlarge);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
|
||||
.working {
|
||||
font-size: 20px;
|
||||
font-size: var(--font-size-xxlarge);
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-large);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
var(--highlight-accent-color) 60%,
|
||||
transparent
|
||||
);
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-large);
|
||||
align-items: center;
|
||||
}
|
||||
.stock-item {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
color: var(--accent-color);
|
||||
}
|
||||
.stock-description {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,7 @@
|
|||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
#bfe0f8 0%,
|
||||
#e9ebff 46%,
|
||||
#e2acff 100%
|
||||
);
|
||||
background: var(--faint-gradient-color);
|
||||
height: 50vh;
|
||||
width: 50vw;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,18 @@
|
|||
}
|
||||
.project-name,
|
||||
.your-name {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
color: var(--accent-color);
|
||||
.user-profile{
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
}
|
||||
.number-of-peoples-have-access {
|
||||
padding: 4px 12px;
|
||||
|
|
@ -115,6 +126,7 @@
|
|||
@include flex-center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
transform: translateY(15px);
|
||||
.user-image-container{
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
border-radius: #{$border-radius-extra-large};
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
z-index: #{$z-index-tools};
|
||||
|
||||
.header-container {
|
||||
@include flex-space-between;
|
||||
padding: 10px;
|
||||
|
|
@ -75,6 +76,7 @@
|
|||
|
||||
.widget2D {
|
||||
overflow: auto;
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -122,18 +124,19 @@
|
|||
|
||||
.value {
|
||||
color: var(--accent-color);
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
}
|
||||
|
||||
.stock-description {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget3D {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -232,6 +235,7 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
|
||||
.other-guest {
|
||||
@include flex-center;
|
||||
height: 26px;
|
||||
|
|
@ -327,7 +331,7 @@
|
|||
align-items: center;
|
||||
|
||||
.multi-level-dropdown {
|
||||
min-width: 170px;
|
||||
width: 170px;
|
||||
|
||||
.dropdown-button {
|
||||
display: flex;
|
||||
|
|
@ -359,6 +363,7 @@
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.inputs-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -393,12 +398,12 @@
|
|||
box-shadow: none;
|
||||
color: #5273eb;
|
||||
padding: 6px;
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-xlarge);
|
||||
}
|
||||
|
||||
.bulletPoint {
|
||||
color: #5273eb;
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
|
|
@ -422,7 +427,7 @@
|
|||
gap: 6px;
|
||||
color: #444;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-weight-regular);
|
||||
|
||||
.infoIcon {
|
||||
padding: 0px 7px;
|
||||
|
|
@ -442,7 +447,7 @@
|
|||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-weight-regular);
|
||||
color: #4a4a4a;
|
||||
|
||||
.selectedWidget {
|
||||
|
|
@ -508,6 +513,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.machine-mechanics-container {
|
||||
.machine-mechanics-header {
|
||||
padding: 8px 12px;
|
||||
|
|
@ -515,15 +521,18 @@
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.process-list-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.add-new-process {
|
||||
@include flex-center;
|
||||
height: 24px;
|
||||
|
|
@ -531,12 +540,15 @@
|
|||
cursor: pointer;
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
strokeWidth: 1.5px;
|
||||
strokewidth: 1.5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
|
||||
path {
|
||||
stroke: var(--highlight-accent-color);
|
||||
}
|
||||
|
|
@ -544,11 +556,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.machine-mechanics-content-container,
|
||||
.simulations-container {
|
||||
max-height: calc(60vh - (47px - 35px));
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
|
|
@ -588,17 +602,20 @@
|
|||
margin: 2px 0;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 80%;
|
||||
gap: 6px;
|
||||
|
||||
input {
|
||||
width: fit-content;
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--highlight-accent-color);
|
||||
|
||||
|
|
@ -618,8 +635,10 @@
|
|||
cursor: pointer;
|
||||
border-radius: #{$border-radius-small};
|
||||
transform: translateX(4px);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
|
|
@ -640,21 +659,26 @@
|
|||
|
||||
.selected-properties-container {
|
||||
padding: 12px;
|
||||
|
||||
.properties-header {
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-regular);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
margin-bottom: 6px;
|
||||
padding: 0;
|
||||
@include flex-space-between;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.default {
|
||||
width: 60%;
|
||||
}
|
||||
|
|
@ -668,23 +692,29 @@
|
|||
margin-top: 8px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.header {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.process-container {
|
||||
padding: 0 12px;
|
||||
margin: 6px 0;
|
||||
|
||||
.value {
|
||||
@include flex-space-between;
|
||||
|
||||
.arrow-container {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.active {
|
||||
rotate: 90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.children-drop {
|
||||
.value {
|
||||
padding: 6px;
|
||||
|
|
@ -707,20 +737,25 @@
|
|||
background: var(--background-color-gray);
|
||||
padding: 12px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.compare-simulations-header {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px 0;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
input {
|
||||
width: fit-content;
|
||||
background: var(--accent-color);
|
||||
|
|
@ -731,6 +766,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.global-properties-container,
|
||||
.analysis-main-container,
|
||||
.asset-properties-container,
|
||||
|
|
@ -741,26 +777,32 @@
|
|||
border-top: 1px solid var(--highlight-accent-color);
|
||||
border-bottom: 1px solid var(--highlight-accent-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
.input-value {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
@include flex-center;
|
||||
|
||||
.remove-button {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.optimize-button,
|
||||
.generate-report-button,
|
||||
.button-save {
|
||||
|
|
@ -775,89 +817,109 @@
|
|||
font-size: var(--font-size-small);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.split {
|
||||
height: 1px;
|
||||
background: var(--highlight-accent-color);
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.custom-input-container {
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
border: none;
|
||||
|
||||
.eyedrop-button {
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs-container {
|
||||
@include flex-space-between;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.input-container {
|
||||
padding: 0 12px;
|
||||
margin-top: 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-input-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-content-container {
|
||||
min-height: 50vh;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.dropdown-header-container,
|
||||
.dropdown-content-container {
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.input-range-container {
|
||||
.input-container {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
@include flex-space-between;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.submit {
|
||||
background: var(--accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.create-custom-analysis-container {
|
||||
margin: 6px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 12px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.custom-analysis-header {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px 0;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
input {
|
||||
width: fit-content;
|
||||
background: var(--accent-color);
|
||||
|
|
@ -869,3 +931,119 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
padding: 0 6px;
|
||||
|
||||
.assets-wrapper {
|
||||
position: relative;
|
||||
margin: 8px 10px;
|
||||
|
||||
h2 {
|
||||
color: var(--text-color);
|
||||
font-family: $large;
|
||||
font-weight: $bold-weight;
|
||||
}
|
||||
|
||||
.categories-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
padding: 10px 0;
|
||||
|
||||
.category {
|
||||
width: 117px;
|
||||
height: 95px;
|
||||
border-radius: 3.59px;
|
||||
background-color: var(--background-color-gray);
|
||||
padding: 8px;
|
||||
padding-top: 12px;
|
||||
font-weight: $bold-weight;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.category-name {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-size: var(--font-size-large);
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// -webkit-text-stroke: 1px black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--circle-color, #000);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -10px;
|
||||
transform: translate(0, -50%);
|
||||
background: linear-gradient(
|
||||
144.19deg,
|
||||
#f1e7cd 16.62%,
|
||||
#fffaef 85.81%
|
||||
);
|
||||
}
|
||||
|
||||
.category-image {
|
||||
position: absolute;
|
||||
// top: 50%;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
transform: translate(0, 0%) scale(0.8);
|
||||
z-index: 2;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
padding: 10px 0;
|
||||
|
||||
.assets {
|
||||
width: 117px;
|
||||
height: 95px;
|
||||
border-radius: 3.59px;
|
||||
background-color: var(--background-color-gray);
|
||||
padding: 8px;
|
||||
padding-top: 12px;
|
||||
font-weight: $medium-weight;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.asset-name {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
.asset-image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@include flex-center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
@use 'components/visualization/floating/common';
|
||||
@use 'components/marketPlace/marketPlace';
|
||||
@use 'components/simulation/simulation';
|
||||
@use 'components/menu/menu';
|
||||
|
||||
// layout
|
||||
@use 'layout/loading';
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
@use 'layout/toast';
|
||||
|
||||
// pages
|
||||
@use 'pages/dashboard.scss';
|
||||
@use 'pages/home';
|
||||
@use 'pages/realTimeViz';
|
||||
@use 'pages/userAuth';
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
@use "../abstracts/variables.scss" as *;
|
||||
@use "../abstracts/mixins.scss" as *;
|
||||
|
||||
.dashboard-main {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
.side-pannel-container {
|
||||
padding: 32px;
|
||||
min-width: 240px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
.side-pannel-header {
|
||||
@include flex-space-between;
|
||||
.user-container {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
.user-profile {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-weight: var(--font-weight-medium);
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
.user-name {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.notifications-container {
|
||||
@include flex-center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.new-project-button {
|
||||
padding: 12px 16px;
|
||||
cursor: not-allowed;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--background-color-secondary);
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
.side-bar-content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
.side-bar-options-container {
|
||||
.option-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
margin: 4px 0;
|
||||
border-radius: #{$border-radius-medium};
|
||||
&:hover {
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: var(--accent-color);
|
||||
font-weight: var(--font-weight-medium);
|
||||
background-color: var(--highlight-accent-color);
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-home-container {
|
||||
width: 100%;
|
||||
.dashboard-navbar-container {
|
||||
margin-top: 28px;
|
||||
padding: 8px 34px 8px 12px;
|
||||
@include flex-center;
|
||||
.title {
|
||||
text-transform: capitalize;
|
||||
font-size: var(--font-size-large);
|
||||
width: 100%;
|
||||
}
|
||||
.market-place-button {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: var(--accent-gradient-color);
|
||||
white-space: nowrap;
|
||||
border-radius: #{$border-radius-large};
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.search-wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
margin: 22px 0;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
.header {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
.cards-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-card-container {
|
||||
height: 242px;
|
||||
width: calc((100% / 5) - 23px);
|
||||
min-width: 260px;
|
||||
position: relative;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: #{$border-radius-large};
|
||||
overflow: hidden;
|
||||
.preview-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: top;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.project-details-container {
|
||||
@include flex-space-between;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 10px;
|
||||
.project-details {
|
||||
.project-name {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.project-data {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.users-list-container {
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
.user-profile {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: #{$border-radius-circle};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.market-place-banner-container {
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.hero-text {
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
bottom: 25px;
|
||||
font-size: 48px;
|
||||
font-family: #{$font-roboto};
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.context {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 58px;
|
||||
text-transform: uppercase;
|
||||
font-size: 22px;
|
||||
width: 300px;
|
||||
color: #ffffff;
|
||||
font-family: #{$font-roboto};
|
||||
}
|
||||
.arrow-context {
|
||||
position: absolute;
|
||||
bottom: 27px;
|
||||
right: 300px;
|
||||
}
|
||||
.explore-button {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
right: 52px;
|
||||
padding: 10px 20px;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
border: 1px solid #ffffff;
|
||||
color: #ffffff;
|
||||
font-family: #{$font-roboto};
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
border-radius: #{$border-radius-medium};
|
||||
transition: all 0.2s;
|
||||
z-index: #{$z-index-default};
|
||||
|
||||
.floating {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.scene-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -76,16 +78,19 @@
|
|||
gap: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-zone {
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.zone {
|
||||
width: auto;
|
||||
background-color: var(--background-color);
|
||||
|
|
@ -186,7 +191,7 @@
|
|||
height: 25% !important;
|
||||
min-height: 150px;
|
||||
max-height: 100%;
|
||||
border: 1px dotted #a9a9a9;
|
||||
border: 1px dashed #a9a9a9;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
|
||||
padding: 6px 0;
|
||||
|
|
@ -206,8 +211,8 @@
|
|||
|
||||
.kebab-options {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -100px;
|
||||
top: 18px;
|
||||
right: 5px;
|
||||
transform: translate(0px, 0);
|
||||
background-color: var(--background-color);
|
||||
z-index: 10;
|
||||
|
|
@ -257,6 +262,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chart-container.notLinked {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
|
@ -364,19 +373,24 @@
|
|||
border: none;
|
||||
color: var(--background-color);
|
||||
border-radius: 4px;
|
||||
|
||||
.add-icon {
|
||||
@include flex-center;
|
||||
transition: rotate 0.2s;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #ffe3e0;
|
||||
|
||||
.add-icon {
|
||||
rotate: 45deg;
|
||||
|
||||
path {
|
||||
stroke: #f65648;
|
||||
stroke-width: 2;
|
||||
|
|
@ -442,7 +456,7 @@
|
|||
transform: translate(-0%, 0);
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
margin-bottom: 8px;
|
||||
color: #2b3344;
|
||||
}
|
||||
|
|
@ -527,4 +541,4 @@
|
|||
.zone.active {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
color: var(--text-color);
|
||||
height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
background-color: #fcfdfd;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.logo-icon {
|
||||
|
|
@ -168,12 +167,7 @@
|
|||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
#bfe0f8 0%,
|
||||
#e9ebff 46%,
|
||||
#e2acff 100%
|
||||
);
|
||||
background: var(--faint-gradient-color);
|
||||
height: 50vh;
|
||||
width: 50vw;
|
||||
top: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue