merged conficts,fixed coloring for sidebar
This commit is contained in:
Rohithk
parent
468f70e422
commit
91a391f687
4 changed files with 66 additions and 73 deletions
|
|
@ -26,7 +26,7 @@ export default function Navigation() {
|
|||
}
|
||||
|
||||
return (
|
||||
<nav className=' sticky top-0 z-50 flex items-center justify-between bg-app-semi-dark-blue p-5 md:mx-6 md:mb-[33px] md:mt-6 md:rounded-[10px] lg:fixed lg:left-0 lg:my-12 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
|
||||
<nav className=' sticky top-0 z-50 flex items-center justify-between bg-app-grey p-5 dark:bg-app-semi-dark-blue md:mx-6 md:mb-[33px] md:mt-6 md:rounded-[10px] lg:fixed lg:left-0 lg:my-12 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
|
||||
<div
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={` overlay backdrop ${isOpen ? 'active' : ''}`}></div>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,39 @@
|
|||
import {useEffect, useState} from "react";
|
||||
import {useTheme} from "next-themes";
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
export function ThemeToggler() {
|
||||
const {theme, setTheme} = useTheme()
|
||||
const circleBtn = "rotate-[360deg] "
|
||||
const [test,setest] = useState(true)
|
||||
useEffect(() => {
|
||||
document.querySelector(".dark-mode-btn").addEventListener("click",()=>{
|
||||
document.querySelector(".dark-mode-btn").classList.toggle("rotate-[360deg]")
|
||||
})
|
||||
}, []);
|
||||
return (
|
||||
const { theme, setTheme } = useTheme()
|
||||
const circleBtn = 'rotate-[360deg] '
|
||||
const [test, setest] = useState(true)
|
||||
useEffect(() => {
|
||||
document.querySelector('.dark-mode-btn').addEventListener('click', () => {
|
||||
document
|
||||
.querySelector('.dark-mode-btn')
|
||||
.classList.toggle('rotate-[360deg]')
|
||||
})
|
||||
}, [])
|
||||
return (
|
||||
<div
|
||||
className={`absolute right-10 top-36 rounded-3xl p-2 lg:right-5 lg:top-5 ${
|
||||
theme === 'dark' ? 'bg-app-pure-white' : 'bg-app-semi-dark-blue'
|
||||
} h-12 w-12 text-white`}>
|
||||
<div className={'h-full w-full rounded-3xl'}>
|
||||
<div
|
||||
className={`absolute rounded-3xl p-2 top-36 right-10 lg:top-5 lg:right-5 ${theme==="dark" ? "bg-gray-500":"bg-app-semi-dark-blue"} text-white w-12 h-12`}>
|
||||
<div className={"w-full h-full rounded-3xl bg-[#10141e]"}>
|
||||
<div onClick={() => {
|
||||
setTheme(theme === 'light' ? 'dark' : 'light')
|
||||
setest(false)
|
||||
}}
|
||||
className={`${test === false ? circleBtn : "circleBtn"} flex justify-center items-center dark-mode-btn transition duration-500 cursor-pointer ease-in-out rounded-full h-full w-full `}>
|
||||
<span className="material-symbols-outlined">
|
||||
{theme === "dark" ? "light_mode":"dark_mode"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
onClick={() => {
|
||||
setTheme(theme === 'light' ? 'dark' : 'light')
|
||||
setest(false)
|
||||
}}
|
||||
className={`${
|
||||
test === false ? circleBtn : 'circleBtn'
|
||||
} dark-mode-btn flex h-full w-full cursor-pointer items-center justify-center rounded-full transition duration-500 ease-in-out `}>
|
||||
<span
|
||||
className={` ${
|
||||
theme === 'dark' ? 'text-black' : ''
|
||||
} material-symbols-outlined`}>
|
||||
{theme === 'dark' ? 'light_mode' : 'dark_mode'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
.active-link {
|
||||
@apply fill-app-pure-white transition duration-150 ease-linear fill-app-red;
|
||||
@apply fill-app-pure-white fill-app-red transition duration-150 ease-linear;
|
||||
}
|
||||
|
||||
.disabled-link {
|
||||
|
|
@ -217,11 +217,11 @@ a {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox>input:checked {
|
||||
.checkbox > input:checked {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox>input:checked+span::before {
|
||||
.checkbox > input:checked + span::before {
|
||||
content: '\2713';
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
|
|
@ -233,8 +233,8 @@ a {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.checkbox>input:active {
|
||||
border: 2px solid #34495E;
|
||||
.checkbox > input:active {
|
||||
border: 2px solid #34495e;
|
||||
}
|
||||
|
||||
.checkbox > input:checked {
|
||||
|
|
@ -414,7 +414,7 @@ a {
|
|||
}
|
||||
|
||||
._2kL0S {
|
||||
background: #41B883 !important;
|
||||
background: #41b883 !important;
|
||||
}
|
||||
|
||||
/* ._2Jtxm { background-color: #e7eaf3; } */
|
||||
|
|
@ -444,26 +444,23 @@ td {
|
|||
|
||||
.react-select-container .react-select__control {
|
||||
background: rgb(74 85 104 / 1);
|
||||
background-color: #34495E;
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.react-select__menu {
|
||||
background-color: #34495E;
|
||||
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.react-select__menu-list {
|
||||
background-color: #34495E;
|
||||
|
||||
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.react-select__menu-list :hover {
|
||||
color: #34495E !important;
|
||||
color: #34495e !important;
|
||||
}
|
||||
|
||||
.react-select__option {
|
||||
color: #34495E;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.css-1p3m7a8-multiValue {
|
||||
|
|
@ -471,16 +468,13 @@ td {
|
|||
}
|
||||
|
||||
.css-qbdosj-Input {
|
||||
color: #34495E !important;
|
||||
color: #34495e !important;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
background: rgb(11 9 9 / 75%) !important;
|
||||
}
|
||||
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.react-select__menu {
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
|
@ -516,7 +510,7 @@ td {
|
|||
overflow: hidden;
|
||||
width: 250px;
|
||||
|
||||
@media(max-width: 767px) {
|
||||
@media (max-width: 767px) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -537,7 +531,7 @@ td {
|
|||
margin-right: 12px;
|
||||
max-width: 100px;
|
||||
justify-content: space-around;
|
||||
@media(min-width: 767px) {
|
||||
@media (min-width: 767px) {
|
||||
margin-left: 17%;
|
||||
}
|
||||
@media (min-width: 767px) {
|
||||
|
|
@ -553,31 +547,31 @@ td {
|
|||
}
|
||||
|
||||
.zoomcss {
|
||||
zoom: 0.;
|
||||
zoom: 0;
|
||||
|
||||
@media(max-width: 767px) {
|
||||
@media (max-width: 767px) {
|
||||
zoom: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-res {
|
||||
@media(max-width: 380px) {
|
||||
width: 70%
|
||||
@media (max-width: 380px) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 2rem;
|
||||
|
||||
@media(max-width: 380px) {
|
||||
@media (max-width: 380px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gap {
|
||||
@media(max-width: 767px) {
|
||||
zoom: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
zoom: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
zoom: 0.5;
|
||||
}
|
||||
|
|
@ -648,8 +642,6 @@ td {
|
|||
}
|
||||
|
||||
.mt-6 {
|
||||
@media(min-width: 767px) {
|
||||
=======
|
||||
@media (min-width: 767px) {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -669,11 +661,10 @@ td {
|
|||
-webkit-text-fill-color: transparent;
|
||||
-webkit-animation: hue 10s infinite linear;
|
||||
|
||||
@media(max-width: 767px) {
|
||||
@media (max-width: 767px) {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 348px) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
|
@ -717,10 +708,9 @@ td {
|
|||
.hover_effect-1:hover {
|
||||
transform: scale(1.0025);
|
||||
box-shadow: 0 0 15px #ffee10;
|
||||
transition: ease-out .3s;
|
||||
transition: ease-out 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
|
|
@ -758,7 +748,6 @@ td {
|
|||
border-right: #5a6a90 solid 1px;
|
||||
z-index: 89;
|
||||
}
|
||||
}
|
||||
/*
|
||||
.sidebar.active {
|
||||
transform: translateX(0%);
|
||||
|
|
@ -787,11 +776,6 @@ td {
|
|||
/* Internet Explorer and Edge */
|
||||
}
|
||||
|
||||
/* Hide the scrollbar for WebKit based browsers like Chrome and Safari */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
=======
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@ module.exports = {
|
|||
circles: "url('/assets/images/background-cicles.png')",
|
||||
},
|
||||
colors: {
|
||||
"light-white":"#e3e4e8",
|
||||
"background": "#0D0F0B",
|
||||
"background-header": "#131313",
|
||||
"primary": "#2f6af5",
|
||||
"seconday":"#fc4545",
|
||||
"off-white": "#E5E7EB",
|
||||
'light-white': '#e3e4e8',
|
||||
background: '#0D0F0B',
|
||||
'background-header': '#131313',
|
||||
primary: '#2f6af5',
|
||||
seconday: '#fc4545',
|
||||
'off-white': '#E5E7EB',
|
||||
'app-pure-white': 'hsl(0, 0%, 100%)', // #FFFFFF
|
||||
'app-red': 'hsl(0, 97%, 63%)', // #FC4747
|
||||
'app-dark-blue': 'hsl(223, 30%, 9%)', // #10141E
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue