style: redesign programming card with css grid

osscameroon · Dec 5, 2021 · 5caee18 · 5caee18 · vercel · Dec 5, 2021
1 parent afb6550
commit 5caee18
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 30 deletions.
diff --git a/frontend/components/languages/language-card-item.tsx b/frontend/components/languages/language-card-item.tsx
@@ -11,7 +11,7 @@ const LanguageCardItem = ({ data }: LanguageCardItemProps) => {
   const { author, company, icon, link, name, predecessors, yearOfCreation } = data;
 
   return (
-    <div className="xl:w-[30%] sm:w-[46%] md:w-[48%] xs:w-full px-8 py-8 bg-white mt-6 2xl:mb-6 md:mb-0 xs:mb-0 shadow rounded-lg dark:bg-gray-800 cursor-default">
+    <div className="px-8 py-8 bg-white shadow rounded-lg dark:bg-gray-800 cursor-default">
       <div className="font-bold text-base flex items-center justify-between">
         <div className="flex items-center">
           {icon}

diff --git a/frontend/components/languages/language-card.tsx b/frontend/components/languages/language-card.tsx
@@ -66,7 +66,7 @@ const languages: LightLanguage[] = [
 
 const LanguageCard = () => {
   return (
-    <div className="w-full flex flex-wrap justify-between xs:flex-column sm:justify-around">
+    <div className="w-full mt-8 grid xl:grid-cols-3 sm:grid-cols-2 md:grid-cols-2 xs:grid-cols-1 gap-x-6 gap-y-6">
       {languages.map((language) => (
         <LanguageCardItem data={language} key={language.name} />
       ))}

diff --git a/frontend/components/layout/public/header.tsx b/frontend/components/layout/public/header.tsx
@@ -26,26 +26,17 @@ const PublicHeader = () => {
               <div className="hidden md:block">
                 <div className="ml-10 flex items-baseline space-x-4">
                   <Link href="/">
-                    <a
-                      className="text-black hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-base font-light"
-                      data-testid="lnk-home"
-                    >
+                    <a className="navbar-link" data-testid="lnk-home">
                       Home
                     </a>
                   </Link>
                   <Link href="/documentation">
-                    <a
-                      className="text-black hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-base font-light"
-                      data-testid="lnk-documentation"
-                    >
+                    <a className="navbar-link" data-testid="lnk-documentation">
                       Documentation
                     </a>
                   </Link>
                   <Link href="/playground">
-                    <a
-                      className="text-black hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-base font-light"
-                      data-testid="lnk-playground"
-                    >
+                    <a className="navbar-link" data-testid="lnk-playground">
                       GraphQL
                     </a>
                   </Link>
@@ -76,26 +67,16 @@ const PublicHeader = () => {
           {isMenuOpened && (
             <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
               <Link href="/">
-                <a className="text-gray-800 hover:text-gray-300 block px-3 py-2 rounded-md text-base font-medium">
-                  Home
-                </a>
+                <a className="mobile-navbar-link">Home</a>
               </Link>
               <Link href="/documentation">
-                <a className="text-gray-800 hover:text-gray-300 block px-3 py-2 rounded-md text-base font-medium">
-                  Documentation
-                </a>
+                <a className="mobile-navbar-link">Documentation</a>
               </Link>
               <Link href="/playground">
-                <a className="text-gray-800 hover:text-gray-300 block px-3 py-2 rounded-md text-base font-medium">
-                  GraphQL
-                </a>
+                <a className="mobile-navbar-link">GraphQL</a>
               </Link>
               <Link href="https://github.com/osscameroon/prolang-api">
-                <a
-                  className="text-gray-800 hover:text-gray-300 block px-3 py-2 rounded-md text-base font-medium"
-                  target="_blank"
-                  rel="noreferrer"
-                >
+                <a className="mobile-navbar-link" target="_blank" rel="noreferrer">
                   GitHub Repository
                 </a>
               </Link>

diff --git a/frontend/hooks/useAxios.ts b/frontend/hooks/useAxios.ts
@@ -25,9 +25,9 @@ export const useAxios = (apiPath?: string) => {
 };
 
 export const usePublicClient = () => {
-  return useAxios('api');
+  return useAxios();
 };
 
 export const usePrivateClient = () => {
   return useAxios('private');
-};
+};
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -21,4 +21,10 @@ a {
 
 .wp-45 {
   width: 45%;
+}
+.navbar-link {
+  @apply text-black hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-base font-light
+}
+.mobile-navbar-link {
+  @apply text-gray-800 hover:text-gray-300 block px-3 py-2 rounded-md text-base font-medium
 }