(
+ localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+ );
+
+ useEffect(() => {
+ document.body.setAttribute("data-theme", theme);
+ localStorage.setItem("theme", theme);
+
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = (e: MediaQueryListEvent) => {
+ const newTheme = e.matches ? "dark" : "light";
+ setTheme(newTheme);
+ };
+
+ mediaQuery.addEventListener("change", handleChange);
+
+ return () => {
+ mediaQuery.removeEventListener("change", handleChange);
+ };
+ }, [theme]);
+
+ const handleTheme = () => {
+ setTheme(theme === "light" ? "dark" : "light");
+ };
+
+ return (
+ <>
+ handleTheme()} className="theme">
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 20cb675..4d8af8a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,12 +4,14 @@
--foreground: #04060F;
--background: #ffffff;
--primary: #246BFD;
+ --secondary: #9FA8BC;
+ --danger: #F33F19;
--cinder: #E7E5E4;
}
[ data-theme="dark"] {
- --foreground: #04060F;
- --background: #ffffff;
+ --background: #04060F;
+ --foreground: #ffffff;
}
@media (prefers-color-scheme: dark) {
diff --git a/src/assets/css/admin.css b/src/assets/css/admin.css
index 9bafb4e..2b04377 100644
--- a/src/assets/css/admin.css
+++ b/src/assets/css/admin.css
@@ -25,4 +25,29 @@
.nav-home{
margin-top: -11px;
margin-bottom: -11px;
+}
+
+.icon-border{
+ border: 1px solid var(--cinder);
+ padding: 8px;
+ border-radius: 12px;
+ cursor: pointer;
+}
+
+.dropdown-menu{
+ width: max-content;
+ background-color: var(--background);
+ border-radius: 8px;
+ box-shadow: 0 0 24px #0000001A;
+}
+.dropdown-item{
+
+}
+.dropdown-item a{
+ width: max-content;
+ padding: 10px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
}
\ No newline at end of file
diff --git a/src/assets/css/dropdown.css b/src/assets/css/dropdown.css
new file mode 100644
index 0000000..bb479e9
--- /dev/null
+++ b/src/assets/css/dropdown.css
@@ -0,0 +1,175 @@
+/* @import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css"; */
+
+/* reset */
+button {
+ all: unset;
+}
+
+.DropdownMenuContent,
+.DropdownMenuSubContent {
+ min-width: 220px;
+ background-color: white;
+ border-radius: 6px;
+ padding: 5px;
+ box-shadow:
+ 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+ 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+ animation-duration: 400ms;
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+ will-change: transform, opacity;
+}
+.DropdownMenuContent[data-side="top"],
+.DropdownMenuSubContent[data-side="top"] {
+ animation-name: slideDownAndFade;
+}
+.DropdownMenuContent[data-side="right"],
+.DropdownMenuSubContent[data-side="right"] {
+ animation-name: slideLeftAndFade;
+}
+.DropdownMenuContent[data-side="bottom"],
+.DropdownMenuSubContent[data-side="bottom"] {
+ animation-name: slideUpAndFade;
+}
+.DropdownMenuContent[data-side="left"],
+.DropdownMenuSubContent[data-side="left"] {
+ animation-name: slideRightAndFade;
+}
+
+.DropdownMenuItem,
+.DropdownMenuCheckboxItem,
+.DropdownMenuRadioItem,
+.DropdownMenuSubTrigger {
+ font-size: 13px;
+ line-height: 1;
+ color: var(--violet-11);
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ height: 25px;
+ padding: 0 5px;
+ position: relative;
+ padding-left: 25px;
+ user-select: none;
+ outline: none;
+}
+.DropdownMenuSubTrigger[data-state="open"] {
+ background-color: var(--violet-4);
+ color: var(--violet-11);
+}
+.DropdownMenuItem[data-disabled],
+.DropdownMenuCheckboxItem[data-disabled],
+.DropdownMenuRadioItem[data-disabled],
+.DropdownMenuSubTrigger[data-disabled] {
+ color: var(--mauve-8);
+ pointer-events: none;
+}
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted],
+.DropdownMenuSubTrigger[data-highlighted] {
+ background-color: var(--violet-9);
+ color: var(--violet-1);
+}
+
+.DropdownMenuLabel {
+ padding-left: 25px;
+ font-size: 12px;
+ line-height: 25px;
+ color: var(--mauve-11);
+}
+
+.DropdownMenuSeparator {
+ height: 1px;
+ background-color: var(--violet-6);
+ margin: 5px;
+}
+
+.DropdownMenuItemIndicator {
+ position: absolute;
+ left: 0;
+ width: 25px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.DropdownMenuArrow {
+ fill: white;
+}
+
+.IconButton {
+ font-family: inherit;
+ border-radius: 100%;
+ height: 35px;
+ width: 35px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--violet-11);
+ background-color: white;
+ box-shadow: 0 2px 10px var(--black-a7);
+}
+.IconButton:hover {
+ background-color: var(--violet-3);
+}
+.IconButton:focus {
+ box-shadow: 0 0 0 2px black;
+}
+
+.RightSlot {
+ margin-left: auto;
+ padding-left: 20px;
+ color: var(--mauve-11);
+}
+[data-highlighted] > .RightSlot {
+ color: white;
+}
+[data-disabled] .RightSlot {
+ color: var(--mauve-8);
+}
+
+@keyframes slideUpAndFade {
+ from {
+ opacity: 0;
+ transform: translateY(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideRightAndFade {
+ from {
+ opacity: 0;
+ transform: translateX(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideDownAndFade {
+ from {
+ opacity: 0;
+ transform: translateY(-2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideLeftAndFade {
+ from {
+ opacity: 0;
+ transform: translateX(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
diff --git a/src/assets/css/ruben-ui.css b/src/assets/css/ruben-ui.css
index 04d64fb..6a04580 100644
--- a/src/assets/css/ruben-ui.css
+++ b/src/assets/css/ruben-ui.css
@@ -157,4 +157,17 @@
/* 2XL (XXL) */
@media (min-width: 1536px) {
/* Styles for very large screens */
+}
+
+.r-primary{
+ color: var(--primary);
+}
+.r-secondary{
+ color: var(--secondary);
+}
+.r-info{
+ color: var(--info);
+}
+.r-danger{
+ color: var(--danger);
}
\ No newline at end of file
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index c04d401..af57fd3 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -37,6 +37,8 @@ import filterIcon from "./setting-3.svg"
import shareIcon from "./share.svg"
import starIcon from "./star.svg"
import arrowUp from "./Vector.svg"
+import sunIcon from "./sun.svg"
+import moonIcon from "./moon.svg"
export const icons = {
@@ -78,7 +80,9 @@ export const icons = {
filterIcon,
shareIcon,
starIcon,
- arrowUp
+ arrowUp,
+ sunIcon,
+ moonIcon
}
@@ -139,7 +143,7 @@ export const icons = {
CheckboxchedIcon,
CrossIcon,
AddBlueIcon,
- ArchivesIcon,
+ ArchivesIcon,
NotificationsIcon,
TimerIcon,
Logo,
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
new file mode 100644
index 0000000..42e82ab
--- /dev/null
+++ b/src/assets/icons/moon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg
new file mode 100644
index 0000000..f24fc96
--- /dev/null
+++ b/src/assets/icons/sun.svg
@@ -0,0 +1 @@
+
\ No newline at end of file