Skip to content

Commit

Permalink
Fix for dark mode toggle (#384)
Browse files Browse the repository at this point in the history 
* fixed dark mode toggle function

* removed rounded corners on hero comp

* Revert "removed rounded corners on hero comp"

This reverts commit 7cf9bad.

* fixed wrong theme mode

* updated colors for darkmode

---------

Co-authored-by: gajanandh <ghaligoudar@gmail.com.com>
  • Loading branch information
@gajanandh
gajanandh and gajanandh authored Sep 1, 2023
1 parent 6c39af8 commit ddd8591
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 67 deletions.
22 changes: 11 additions & 11 deletions src/components/form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ const Form = () => {
}, [userInput]);

return (
<div className="bg-dark py-5 md:mb-0 lg:py-12 px-[14px] dark:bg-ash">
<div className="py-5 md:mb-0 lg:py-12 px-[14px] dark:bg-dark">
<section className="block justify-center md:pb-16 md:flex md:flex-col lg:flex lg:flex-row items-center">
<div className="md:w-full lg:pr-20 lg:w-1/2 flex flex-col">
<h2 className="lg:text-left text-center text-purple font-bold text-xl md:text-2xl lg:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">
<h2 className="lg:text-left text-center text-deeppurple font-bold text-xl md:text-2xl lg:text-3xl dark:text-purple">
<span className="text-dark dark:text-ash ">
Start by entering a slang,
</span>{" "}
and our dictionary will spit out an abbreviation.{" "}
Expand Down Expand Up @@ -105,7 +105,7 @@ const Form = () => {
<input
type="text"
placeholder="Search slang full meaning..."
className="flex-1 w-[14rem] h-6 ml-2 border-none outline-none placeholder:text-gray bg-ash"
className="flex-1 w-[14rem] h-6 ml-2 border-none outline-none placeholder:text-black bg-ash"
value={userInput}
onChange={(e) =>
setUserInput(e.target.value.toLocaleLowerCase())
Expand Down Expand Up @@ -135,37 +135,37 @@ const Form = () => {
)}

{error && (
<div className="text-purple text-sm mt-2 dark:text-deeppurple">
<div className="text-deeppurple dark:text-purple text-sm mt-2 ">
Oops. Some connection error occured.
</div>
)}

{isUserInputBlank && (
<div className="mt-4">
<p className="text-purple dark:text-deeppurple">
<p className="text-deeppurple dark:text-purple ">
Search bar 🔍 is Empty! Please input a slang.
</p>
</div>
)}

{errorMessage && (
<div className="mt-4 p-3 lg:absolute">
<p className="text-purple dark:text-deeppurple">
<p className="text-deeppurple dark:text-purple">
This entry does not exist in our records as of yet :(
</p>
<p className="text-ash mt-2 dark:text-dark">
<p className="text-dark mt-2 dark:text-ash">
1. You can help us add this by creating a{" "}
<a
href="https://github.com/Njong392/Abbreve"
className=" text-purple dark:text-deeppurple">
className=" text-deeppurple dark:text-purple">
github issue
</a>
</p>
<p className="text-ash dark:text-dark w-3/4">
<p className="text-dark dark:text-ash w-3/4">
2. Or, you could fill out this{" "}
<a
href="https://t.co/mp86BLYBhq"
className="text-purple dark:text-deeppurple">
className="text-deeppurple dark:text-purple">
feedback form
</a>{" "}
and we will address the issue
Expand Down
54 changes: 27 additions & 27 deletions src/components/hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import Form from "./form";

const Hero = () => {
return (
<main className="bg-dark md:px-14 dark:bg-ash max-w-screen px-4 py-8 sm:px-6 lg:px-8 rounded lg:bg-snow lg:shadow-md">
<main className=" bg-ash md:px-14 dark:bg-dark max-w-screen px-4 py-8 sm:px-6 lg:px-8 lg:bg-snow lg:shadow-md">
<header className="text-center lg:mt-12">
<div className="text-4xl md:text-5xl lg:text-7xl mb-5 relative">
<h1 className="text-purple font-extrabold dark:text-deeppurple">
<h1 className="text-deeppurple font-extrabold dark:text-purple">
Writing on the internet
</h1>
<h1 className="text-ash font-extrabold mt-2 dark:text-dark">
<h1 className="text-dark dark:text-ash font-extrabold mt-2 ">
is changing. IYKYK
</h1>
<div className="absolute right-28 bottom-9 xl:visible invisible">
<div className="w-24 h-4 bg-purple relative -rotate-6">
<div className="absolute top-[4px]">
<p className="text-ash text-sm font-semibold dark:text-dark">
<p className="text-dark dark:text-ash text-sm font-semibold ">
If You Know,
</p>
</div>
Expand All @@ -30,7 +30,7 @@ const Hero = () => {
<div className="absolute right-12 bottom-3 xl:visible invisible">
<div className="right-9 w-20 h-4 bg-purple relative -rotate-6">
<div className="absolute top-[3px]">
<p className="text-ash text-sm font-semibold dark:text-dark">
<p className="text-dark dark:text-ash text-sm font-semibold ">
You Know.
</p>
</div>
Expand All @@ -51,25 +51,25 @@ const Hero = () => {

<section className="block justify-center items-center md:flex md:flex-col-reverse lg:flex lg:flex-row">
<div className="lg:w-1/2 lg:px-10 pt-5">
<p className="text-purple font-bold text-2xl lg:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">
<p className="text-deeppurple font-bold text-2xl lg:text-3xl dark:text-purple">
<span className="text-dark dark:text-ash ">
Abbreve (A-bree-vay) is
</span>{" "}
an open source dictionary{" "}
<span className="text-ash dark:text-dark">for slang.</span>{" "}
<span className="text-dark dark:text-ash">for slang.</span>{" "}
</p>
<p className="text-ash font-bold text-2xl lg:text-3xl mt-2 dark:text-dark pb-8">
<p className="text-dark dark:text-ash font-bold text-2xl lg:text-3xl mt-2 pb-8">
Curated by the community, for the community.
</p>
</div>

<div className="border-2 p-4 rounded-lg border-purple relative md:mt-0 dark:border-deeppurple">
<div className="border-2 p-4 rounded-lg border-deeppurple relative md:mt-0 dark:border-purple">
<div className="flex gap-2 items-center">
<img src={nate} alt="" className="h-12 w-12 rounded-full" />
<div>
<a
href="https://twitter.com/Nateemerson/status/1567566265719599105?s=20&t=QAOQu1feHo07evNBHFvAIQ"
className="text-purple dark:text-deeppurple">
className="text-deeppurple dark:text-purple">
<p className="font-bold">Nate (DojoJOJO)</p>
<p className="text-sm">@Nateemerson</p>
</a>
Expand All @@ -78,22 +78,22 @@ const Hero = () => {

<p className="mt-2">
<span className="text-gray">Replying to</span>{" "}
<span className="text-purple dark:text-deeppurple">
<span className="text-deeppurple dark:text-purple">
@DunsinWebDev and @njongemy
</span>
</p>
<p className="mt-2 text-ash dark:text-dark">
<p className="mt-2 text-dark dark:text-ash ">
idk wtf ur on about... ICYMI IMHO RTFM, KISS, SHIT or GTFO.
</p>
<p className="text-sm text-gray">
18:31 . 07 Sep 22 .{" "}
<span className="text-purple dark:text-deeppurple">
<span className="text-deeppurple dark:text-purple">
{" "}
Twitter Web App
</span>
</p>

<div className="absolute w-32 border-2 border-purple rounded-lg p-2 -top-14 -right-4 bg-dark rotate-6 invisible lg:visible dark:border-deeppurple">
<div className="absolute w-32 border-2 border-deeppurple rounded-lg p-2 -top-14 -right-4 bg-dark rotate-6 invisible lg:visible dark:border-purple">
<p className="text-ash text-xl font-bold ">
Reading shouldn't feel like work.
</p>
Expand All @@ -102,53 +102,53 @@ const Hero = () => {
</section>

<section className=" justify-center lg:gap-10 mt-10 items-center flex flex-col lg:flex-row">
<div className="border-2 p-4 rounded-lg border-purple relative md:mt-0 dark:border-deeppurple w-96">
<div className="border-2 p-4 rounded-lg border-deeppurple relative md:mt-0 dark:border-purple w-96">
<div className="flex gap-2 items-center">
<img src={emy} alt="" className="h-12 w-12 rounded-full" />
<div>
<a
href="https://twitter.com/njong_emy/status/1567561277135781888?s=20&t=QAOQu1feHo07evNBHFvAIQ"
className="text-purple dark:text-deeppurple">
className="text-deeppurple dark:text-purple">
<p className="font-bold">Emy 🦄⛅</p>
<p className="text-sm">@njong_emy</p>
</a>
</div>
</div>

<p className="mt-5 text-ash dark:text-dark">
<p className="mt-5 text-dark dark:text-ash ">
Do you find yourself googling the meaning of slang like hmu, lgtm,
lfg etc ?
</p>

<div className="flex justify-between items-center mt-2">
<div className="h-8 w-3/4 bg-purple rounded-sm p-1 dark:bg-deeppurple">
<div className="h-8 w-3/4 bg-deeppurple rounded-sm p-1 dark:bg-purple">
<p className="text-dark">Always 😢</p>
</div>
<p className="text-ash dark:text-dark">84.8%</p>
<p className="text-dark dark:text-ash ">84.8%</p>
</div>

<div className="mt-2 flex justify-between items-center">
<div className="h-8 md:w-1/4 w-1/2 bg-purple rounded-sm p-1 dark:bg-deeppurple">
<div className="h-8 md:w-1/4 w-1/2 bg-deeppurple rounded-sm p-1 dark:bg-purple">
<p className="text-dark">Never 🙂</p>
</div>
<p className="text-ash dark:text-dark">15.2%</p>
<p className="text-dark dark:text-ash ">15.2%</p>
</div>

<p className="text-sm text-gray mt-2">
18:11 . 07 Sep 22 .{" "}
<span className="text-purple dark:text-deeppurple">
<span className="text-deeppurple dark:text-purple">
{" "}
Twitter for Android
</span>
</p>
</div>

<div className="lg:w-1/2 lg:text-left mt-2 md:mt-3 lg:mt-0">
<h2 className="text-purple font-bold text-xl md:text-2xl xmd:text-2xl lg:text-3xl xl:text-3xl dark:text-deeppurple">
<span className="text-ash dark:text-dark">Googling</span> in between
conversations <span className="text-ash dark:text-dark">is</span>{" "}
<h2 className="text-deeppurple font-bold text-xl md:text-2xl xmd:text-2xl lg:text-3xl xl:text-3xl dark:text-purple">
<span className="text-dark dark:text-ash">Googling</span> in between
conversations <span className="text-dark dark:text-ash ">is</span>{" "}
fast becoming{" "}
<span className="text-ash dark:text-dark">the new normal.</span>
<span className="text-dark dark:text-ash ">the new normal.</span>
</h2>
</div>
</section>
Expand Down
40 changes: 11 additions & 29 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";

const Navbar = () => {
const defaultTheme = localStorage.getItem("theme") || "light";
const defaultToggle =
JSON.parse(localStorage.getItem("toggleButton")) || false;

const [theme, setTheme] = useState(defaultTheme);
const [toggleTheme, setToggleTheme] = useState(defaultToggle);

const deafultTheme = localStorage.getItem("isDarkMode") || false;
const [isDarkMode, setIsDarkMode] = useState(deafultTheme);
const element = document.documentElement;

const handletheme = () => {
if (toggleTheme) {
setTheme("dark");
} else {
setTheme("light");
}

setToggleTheme(!toggleTheme);
};
useEffect(() => {
switch (theme) {
case "dark":
switch (isDarkMode) {
case true:
element.classList.add("dark");
localStorage.setItem("theme", "dark");
localStorage.setItem("toggleButton", JSON.stringify(false));
localStorage.setItem("isDarkMode", true);
break;
case "light":
case false:
element.classList.remove("dark");
localStorage.setItem("theme", "light");
localStorage.setItem("toggleButton", JSON.stringify(true));
localStorage.setItem("isDarkMode", false);
break;
default:
localStorage.removeItem("theme");

localStorage.removeItem("isDarkMode");
break;
}
}, [theme]);
}, [isDarkMode]);

return (
<nav className="px-4 py-4 sm:px-6 lg:px-8 bg-dark">
Expand Down Expand Up @@ -72,15 +55,14 @@ const Navbar = () => {

<div className="rounded-lg">
<button
onClick={handletheme}
onClick={() => setIsDarkMode(!isDarkMode)}
className="w-8 h-8 leading-9 text-xl rounded-full m-1 text-deeppurple hover:text-ash hover:scale-110 ">
<FontAwesomeIcon icon={toggleTheme ? faMoon : faSun} />
<FontAwesomeIcon icon={isDarkMode ? faSun : faMoon} />
</button>
</div>
</div>
</div>
</nav>
);
};

export default Navbar;

1 comment on commit ddd8591

@vercel
Copy link

@vercel vercel bot commented on ddd8591 Sep 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

abbreve – ./

www.abbreve.tech
abbreve.vercel.app
abbreve-git-main-njong392.vercel.app
abbreve.tech
abbreve-njong392.vercel.app

Please sign in to comment.