💥 Redesign everything according to new design

Author: max-programming

components/Button.tsx

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+type ButtonProps = {
+  className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+function Button({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ButtonProps>) {
+  return (
+    <div className="relative group m-3 w-fit inline-block">
+      <div className="absolute -inset-0 group-hover:bg-gradient-to-r from-2023-bavarian-red-2 via-2023-bavarian-gold-2 to-2023-bavarian-blue-2 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
+      <button
+        className={`relative p-6 bg-2023-void-2 hover:bg-2023-void-2 btn btn-lg text-white ring-1 ring-2023-manga-3 rounded-2xl leading-none hover:text-shadow hover:shadow-2023-bavarian-gold-3 ${className}`}
+        {...props}
+      >
+        {children}
+      </button>
+    </div>
+  );
+}
+
+export default Button;

components/Card.tsx

@@ -1,13 +1,14 @@
 import { emojify } from '@twuni/emojify';
 import { GoStar, GoRepoForked } from 'react-icons/go';
+import { RepoItem } from 'types';
 
 interface Props {
-  repo: any;
+  repo: RepoItem;
 }
 
-const Card = ({ repo }: Props) => {
+function Card({ repo }: Props) {
   return (
-    <div className="shadow-sm card bg-base-300 mx-4">
+    <div className="shadow-sm card bg-2023-void-2 ring-1 ring-2023-manga-3">
       <div className="relative card-body">
         <div className="avatar">
           <div className="w-10 h-10 mb-2 rounded-full">
@@ -33,7 +34,7 @@ const Card = ({ repo }: Props) => {
           title={repo.name}
           target="_blank"
           rel="noreferrer"
-          className={`text-3xl card-title link link-hover text-primary`}
+          className={`text-3xl card-title link link-hover text-2023-bavarian-gold-2`}
         >
           {repo.name}
         </a>
@@ -49,8 +50,8 @@ const Card = ({ repo }: Props) => {
               rel="noreferrer"
               className={`badge ${
                 topic === 'hacktoberfest'
-                  ? 'bg-primary text-gray-900'
-                  : 'bg-accent'
+                  ? 'bg-2023-bavarian-gold-1 text-2023-void-2'
+                  : 'bg-2023-bavarian-blue-2 text-2023-void-2'
               }`}
             >
               {topic}
@@ -59,7 +60,7 @@ const Card = ({ repo }: Props) => {
         </div>
 
         <div className="items-end justify-center h-full card-actions">
-          <div className="shadow stats">
+          <div className="shadow stats bg-transparent ring-1 ring-2023-manga-2">
             <div className="stat">
               <div className="text-center stat-title items-center inline-flex">
                 <GoStar /> <span className="ml-0.5">Stars</span>
@@ -69,7 +70,7 @@ const Card = ({ repo }: Props) => {
               </div>
             </div>
           </div>
-          <div className="shadow stats">
+          <div className="shadow stats bg-transparent ring-1 ring-2023-manga-2">
             <div className="stat">
               <div className="text-center stat-title items-center inline-flex">
                 <GoRepoForked /> <span className="ml-0.5">Forks</span>
@@ -81,6 +82,6 @@ const Card = ({ repo }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default Card;

components/Footer.tsx

@@ -1,11 +1,12 @@
 const creators: Record<string, string> = {
   Usman: 'https://twitter.com/MaxProgramming1/',
-  Sunrit: 'https://twitter.com/JanaSunrise/'
+  Sunrit: 'https://twitter.com/JanaSunrise/',
+  'You all': '/contributors'
 };
 
 const Footer = () => {
   return (
-    <footer className="bg-base-200 text-center text-white py-4 text-lg">
+    <footer className="text-center text-white py-4 text-lg border-t-[0.5px] border-dashed border-t-2023-manga-3">
       <div className="container mx-auto px-4">
         <p>
           Made with <span className="text-red-500">💗</span> by{' '}
@@ -15,7 +16,7 @@ const Footer = () => {
               href={creators[creator]}
               target="_blank"
               rel="noreferrer"
-              className="text-primary-500 hover:text-primary-400"
+              className="text-2023-bavarian-gold-2"
             >
               {creator}
               {index === Object.keys(creators).length - 2

components/Header.tsx

@@ -11,30 +11,32 @@ function Header() {
   const router = useRouter();
 
   return (
-    <div className="justify-between px-2 mb-2 ml-1.5 w-[99.2%] shadow-lg navbar rounded-box">
-      <Link href="/">
-        <img src="/hacktoberfest.svg" alt="Hacktoberfest" />
-      </Link>
-      {router.pathname === '/repos/[language]' && (
-        <div className="justify-center flex-1">
-          <Search />
-        </div>
-      )}
-      <div className="flex-none">
-        <Link
-          href="/contributors"
-          className="btn btn-square btn-ghost umami--click--contributors-button"
-        >
-          <BsPeopleFill size="1.5rem" title="Contributors" />
+    <div className="border-b-[0.5px] border-dashed border-b-2023-manga-3 flex justify-center mb-5">
+      <div className="justify-between px-2 mb-2 ml-1.5 w-3/4 shadow-lg navbar rounded-box">
+        <Link href="/">
+          <img src="/hacktoberfest.svg" alt="Hacktoberfest" />
         </Link>
-        <a
-          href="https://github.com/max-programming/hacktoberfest-projects"
-          target="_blank"
-          rel="noreferrer"
-          className="btn btn-square btn-ghost umami--click--github-button"
-        >
-          <IoLogoGithub size="1.5rem" title="GitHub" />
-        </a>
+        {router.pathname === '/repos/[language]' && (
+          <div className="justify-center flex-1">
+            <Search />
+          </div>
+        )}
+        <div className="flex-none">
+          <Link
+            href="/contributors"
+            className="btn btn-square btn-ghost umami--click--contributors-button"
+          >
+            <BsPeopleFill size="1.5rem" title="Contributors" />
+          </Link>
+          <a
+            href="https://github.com/max-programming/hacktoberfest-projects"
+            target="_blank"
+            rel="noreferrer"
+            className="btn btn-square btn-ghost umami--click--github-button"
+          >
+            <IoLogoGithub size="1.5rem" title="GitHub" />
+          </a>
+        </div>
       </div>
     </div>
   );

components/Hero.tsx

@@ -5,10 +5,11 @@ import languages from 'assets/languages.json';
 import LanguageButton from './LanguageButton';
 import { useRouter } from 'next/router';
 import sortByName from 'utils/sortByName';
+import Button from './Button';
 
 const { main: mainLanguages, others: otherLanguages } = languages;
 
-const Hero = () => {
+function Hero() {
   const router = useRouter();
   const handleSubmit: FormEventHandler = e => {
     e.preventDefault();
@@ -17,12 +18,14 @@ const Hero = () => {
     router.push(`/repos/${search}`);
   };
   return (
-    <div className="min-h-screen hero">
+    <div className="min-h-screen hero bg-gradient-radial from-2023-bavarian-gold-4 to-2023-void-2 bg-blend-overlay pt-10">
       <div className="hero-overlay w-0 bg-opacity-60"></div>
       <div className="text-center hero-content">
         <div className="max-w-md">
-          <h1 className="mb-5 text-5xl font-bold">Select your language</h1>
-          <p className="mb-5">
+          <h1 className="mb-5 text-5xl font-bold uppercase">
+            Select your language
+          </h1>
+          <p className="mb-5 uppercase">
             Select the programming language you would like to find repositories
             for.
           </p>
@@ -32,12 +35,9 @@ const Hero = () => {
           ))}
 
           <div className="dropdown dropdown-top">
-            <div
-              tabIndex={0}
-              className="m-1 btn btn-lg btn-clip hover:bg-primary-2 hover:text-black umami--click--otherlangs-button"
-            >
+            <Button tabIndex={0} className="umami--click--otherlangs-button">
               Other languages
-            </div>
+            </Button>
 
             <ul
               tabIndex={0}
@@ -63,27 +63,27 @@ const Hero = () => {
               <input
                 type="text"
                 placeholder="Search for your language"
-                className="input input-bordered w-full input-info max-w-xs rounded-tr-none rounded-br-none"
+                className="input input-bordered w-full border-2023-bavarian-gold-2 focus:outline-2023-bavarian-gold-2 max-w-xs rounded-tr-none rounded-br-none bg-transparent"
                 name="search"
               />
               <button
                 type="submit"
-                className="btn btn-square hover:bg-primary-2 hover:text-black rounded-tl-none rounded-bl-none"
+                className="btn btn-square rounded-tl-none rounded-bl-none bg-transparent border-2023-manga-3 hover:bg-2023-manga-2 hover:text-2023-void-2 hover:border-2023-manga-2"
               >
                 <SearchIcon />
               </button>
             </div>
           </form>
           {/* <a href="https://github.com/max-programming/hacktoberfest-projects/">
-            <button className="m-2 border-0 hover:bg-primary-2 hover:text-black btn btn-lg">
-              Add another language
-            </button>
-          </a> */}
+              <button className="m-2 border-0 hover:bg-primary-2 hover:text-black btn btn-lg">
+                Add another language
+              </button>
+            </a> */}
         </div>
       </div>
     </div>
   );
-};
+}
 
 const SearchIcon = () => (
   <svg

components/LanguageButton.tsx

@@ -1,20 +1,12 @@
-import { motion } from 'framer-motion';
 import Link from 'next/link';
+import Button from './Button';
 
-const LanguageButton = ({ language }: { language: string }) => {
+function LanguageButton({ language }: { language: string }) {
   return (
     <Link href={`/repos/${language.toLowerCase()}`}>
-      <motion.button
-        initial={{ scale: 0.2 }}
-        animate={{ scale: 1 }}
-        transition={{ duration: 0.3 }}
-        whileHover={{ rotate: '4deg' }}
-        className={`m-2 button border-0 btn btn-lg btn-clip umami--click--${language.toLowerCase()}-button`}
-      >
-        {language}
-      </motion.button>
+      <Button>{language}</Button>
     </Link>
   );
-};
+}
 
 export default LanguageButton;

components/Pagination.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { BsArrowLeft, BsArrowRight } from 'react-icons/bs';
+import Button from './Button';
 
 interface Props {
   page: number;
@@ -9,31 +10,29 @@ interface Props {
 
 const MAX_PER_PAGE = 21;
 
-const Pagination = ({ page, totalCount }: Props) => {
+function Pagination({ page, totalCount }: Props) {
   const router = useRouter();
   return (
     <div className="items-center flex justify-evenly my-6 flex-col gap-4 sm:gap-0 sm:flex-row">
       {page > 1 && (
-        <Link
-          href={{ query: { ...router.query, p: page - 1 } }}
-          className="btn btn-wide"
-        >
-          <BsArrowLeft />
-          <span className="ml-2">Previous Page</span>
+        <Link href={{ query: { ...router.query, p: page - 1 } }}>
+          <Button className="btn-wide">
+            <BsArrowLeft />
+            <span className="ml-2">Previous Page</span>
+          </Button>
         </Link>
       )}
       {totalCount >= MAX_PER_PAGE &&
         page < Math.ceil(totalCount / MAX_PER_PAGE) && (
-          <Link
-            href={{ query: { ...router.query, p: page + 1 } }}
-            className="btn btn-wide"
-          >
-            <span className="mr-2">Next Page</span>
-            <BsArrowRight />
+          <Link href={{ query: { ...router.query, p: page + 1 } }}>
+            <Button className="btn-wide">
+              <span className="mr-2">Next Page</span>
+              <BsArrowRight />
+            </Button>
           </Link>
         )}
     </div>
   );
-};
+}
 
 export default Pagination;

components/Search.tsx

@@ -25,7 +25,7 @@ export default function Search() {
       <div className="relative">
         <input
           placeholder="Search"
-          className="w-full pr-16 input input-primary input-bordered border-primary"
+          className="w-full pr-16 input input-bordered border-2023-bavarian-gold-2 focus:outline-2023-bavarian-gold-2 bg-transparent"
           type="text"
           {...register('searchQuery', { required: true })}
         />

components/Sort.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import { faArrowUpAZ } from '@fortawesome/free-solid-svg-icons';
 import sortByName from 'utils/sortByName';
+import Button from './Button';
 
 const { mainLanguages } = languages;
 
@@ -42,14 +43,14 @@ export default function Sort() {
   return (
     <div className="flex justify-center items-center mb-2 flex-col gap-2">
       <div className="dropdown dropdown-hover">
-        <div tabIndex={0} className="m-1 btn w-60">
+        <Button tabIndex={0} className="m-1 py-2">
           <FontAwesomeIcon
             icon={faCode}
             className=" w-6 h-6 mr-3"
           ></FontAwesomeIcon>
           Language
-        </div>
-        <div className="h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        </Button>
+        <div className="h-64 p-2 overflow-y-scroll shadow dropdown-content z-50 bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {mainLanguages.sort(sortByName).map(language => (
               <li key={language}>
@@ -62,14 +63,14 @@ export default function Sort() {
         </div>
       </div>
       <div className="dropdown dropdown-hover">
-        <div tabIndex={0} className="btn mb-3 w-60">
+        <Button tabIndex={0} className="py-2">
           <FontAwesomeIcon
             icon={faArrowUpAZ}
             className=" w-6 h-6 mr-3"
           ></FontAwesomeIcon>
           {selectedSort()}
-        </div>
-        <div className="h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        </Button>
+        <div className="h-64 p-2 z-50 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             <li>
               <Link href={{ query: { ...router.query } }}>Best match</Link>