Change Logo Font

Aasim-Omar · Jun 14, 2022 · 5071b9f · 5071b9f
1 parent 5461343
commit 5071b9f
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -14,17 +14,16 @@ const Home = () => {
           {darkTheme ? <BsMoonStars /> : <BsFillBrightnessHighFill />}
         </p>
       <div className="flex flex-col justify-center items-center mb-36 w-full">
-        <h1 className="text-8xl mb-10">Gogol</h1>
+        <h1 className="text-8xl mb-10 font-display text-zinc-700 dark:text-zinc-200">Gogol</h1>
         <div className="flex border-2 w-80 md:w-2/5 overflow-hidden rounded-full border-zinc-400">
           <input
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-            }}
-            className="block border-none text-lg bg-gray-200 p-4 w-10/12 outline-none dark:bg-zinc-800"
+            onChange={(e) => { setSearchTerm(e.target.value); }}
+            className="block border-none text-lg bg-gray-200 p-4 w-full outline-none dark:bg-zinc-800"
+            placeholder="Search for anything"
             type="search"
           />
           <Link
-            className="block p-4 w-2/12 flex justify-center items-center bg-blue-300 dark:bg-zinc-500"
+            className="block p-4 w-16 flex justify-center items-center bg-blue-300 dark:bg-zinc-500"
             to="search"
           >
             🔎

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -10,9 +10,11 @@ const Navbar = () => {
   return (
     <div className="">
       <div className="py-2 px-4 flex justify-between items-center border-b-2 border-zinc-200 dark:border-zinc-600">
-        <h1 className="text-3xl font-bold text-gray-700 dark:text-gray-200">
-          <Link to="/">Gogol</Link>
-        </h1>
+        <Link to="/">
+          <h1 className="text-3xl font-display text-zinc-700 dark:text-zinc-300">
+            Gogol
+          </h1>
+        </Link>
         <p
           className="text-blue-400 text-3xl cursor-pointer bg-gray-200 dark:bg-zinc-700 p-2 rounded-full"
           onClick={() => setDarkTheme(!darkTheme)}

diff --git a/src/components/Results.jsx b/src/components/Results.jsx
@@ -90,7 +90,7 @@ const Results = () => {
         </div>
       );
     default:
-      return "ERROR!";
+      return <div className="text-center text-lg">ERROR! This page not found</div>;
   }
 };
 

diff --git a/src/context/ResultsContextProvider.jsx b/src/context/ResultsContextProvider.jsx
@@ -6,7 +6,7 @@ export const ResultsContextProvider = ({ children }) => {
   let [results, setResults] = useState([])
   let [searchTerm, setSearchTerm] = useState("")
   let [isLoading, setIsLoading] = useState(false)
-  let [darkTheme, setDarkTheme] = useState(false)
+  let [darkTheme, setDarkTheme] = useState(true)
 
   const baseUrl = 'https://google-search3.p.rapidapi.com/api/v1'
   const getResults = async (query) => {

diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
 
 @tailwind base;
 @tailwind components;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,7 +4,9 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    fontFamily: {
+      display: ['Righteous', 'cursive']
+    }
   },
   plugins: [],
 }