refactor: create classes for common styles

enesozturk · Dec 11, 2021 · 0320550 · 0320550 · vercel · Dec 11, 2021
1 parent 788bf24
commit 0320550
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 40 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="app bg-white dark:bg-gray-800 text-gray-900 dark:text-white overflow-auto">
+    <div className="page">
       <main className="flex flex-col items-center relative relative max-w-5xl mx-auto pt-20 sm:pt-24 lg:pt-32 mb-16 px-4">
         <div
           className="h-48 sm:h-96 w-full max-h-96 mb-8 

diff --git a/pages/lesson/[lessonId].tsx b/pages/lesson/[lessonId].tsx
@@ -22,16 +22,12 @@ export default function Start({
   body,
 }: CompletedProps) {
   return (
-    <div className="app bg-white dark:bg-gray-800 text-gray-900 dark:text-white overflow-auto">
+    <div className="page">
       <main className="flex flex-col items-center relative relative w-full max-w-3xl mx-auto mt-16">
         <div className="w-full flex flex-col items-center w-full p-16 rounded-xl mb-64">
           <h1 className="text-8xl font-semibold	text-center mb-8">⌨️</h1>
-          <h1 className="font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center">
-            {title}
-          </h1>
-          <p className="mt-6 text-l md:text-xl text-gray-600 dark:text-gray-400 text-center max-w-3xl mx-auto">
-            {description}
-          </p>
+          <h1 className="start-title">{title}</h1>
+          <p className="start-description">{description}</p>
           <div className="flex flex-col items-center mt-16">
             <div
               className="mb-4 markdown"

diff --git a/pages/lesson/[lessonId]/completed.tsx b/pages/lesson/[lessonId]/completed.tsx
@@ -22,41 +22,28 @@ export default function Completed({
   body,
 }: CompletedProps) {
   return (
-    <div className="app bg-white dark:bg-gray-800 text-gray-900 dark:text-white overflow-auto">
+    <div className="page">
       <main className="flex flex-col items-center relative relative w-full max-w-3xl mx-auto mt-16">
         <div className="w-full flex flex-col items-center w-full p-16 rounded-xl mb-64">
           <h1 className="text-8xl font-semibold	text-center mb-8">🎉</h1>
-          <h1 className="font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center">
-            {title}
-          </h1>
-          <p className="mt-6 text-l md:text-xl text-gray-600 dark:text-gray-400 text-center max-w-3xl mx-auto">
-            {description}
-          </p>
+          <h1 className="completed-title">{title}</h1>
+          <p className="completed-description">{description}</p>
           <div className="flex flex-col items-center mt-16">
             <div
               className="mb-4 markdown"
               dangerouslySetInnerHTML={{ __html: body }}
             />
             {nextLessonId ? (
               <Link href={`/lesson/${parseInt(lessonId) + 1}`}>
-                <a
-                  className={`p-2 box-border flex items-center justify-center rounded-md bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10 cursor-pointer`}
-                >
+                <a className="button button-default">
                   Start Lesson {nextLessonId}
                 </a>
               </Link>
             ) : null}
           </div>
-          <div className="flex mt-8 pt-4 border-t border-gray-700">
+          <div className="flex mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
             <Link href="#">
-              <a className="p-2 box-border flex items-center justify-center rounded-md cursor-pointer bg-green-200 hover: bg-green-400 dark:bg-green-800 dark:hover:bg-green-900 text-green-500 dark:text-green-400 mr-4">
-                Share on Twitter
-              </a>
-            </Link>
-            <Link href="#">
-              <a className="p-2 box-border flex items-center justify-center rounded-md cursor-pointer bg-blue-200 hover: bg-blue-400 dark:bg-blue-800 dark:hover:bg-blue-900 text-blue-500 dark:text-blue-400">
-                Share on Linkedin
-              </a>
+              <a className="button button-blue">Share on Twitter</a>
             </Link>
           </div>
         </div>

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -20,25 +20,22 @@ export default function Footer({
   const { fileContent } = useEditorContext();
 
   return (
-    <footer className="flex justify-between w-full px-8 py-4 box-border bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white">
+    <footer className="footer-container">
       <div className="flex-1 flex justify-start">
         <div className="p-2 box-border flex items-center justify-center rounded-md font-semibold">
           {title}
         </div>
       </div>
       {fileContent ? (
         <div className="flex-1 flex justify-center">
-          <button
-            onClick={checkAnswer}
-            className="p-2 box-border bg-blue-100 hover:bg-blue-200 dark:bg-blue-800 dark:hover:bg-blue-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-blue-500 dark:text-blue-400 flex items-center justify-center rounded-md cursor-pointer mr-4"
-          >
+          <button onClick={checkAnswer} className="button mr-4 button-blue">
             Check Answer
           </button>
           <button
             onClick={() => {
               setShowAnswer(!showAnswer);
             }}
-            className="p-2 box-border bg-amber-100 hover:bg-amber-200 dark:bg-amber-800 dark:hover:bg-amber-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-amber-500 dark:text-amber-400 flex items-center justify-center rounded-md cursor-pointer"
+            className="button button-amber"
           >
             {showAnswer ? "Hide Answer" : "Show Answer"}
           </button>
@@ -56,7 +53,7 @@ export default function Footer({
                 ${
                   !prevChapter
                     ? "text-gray-500 cursor-default"
-                    : "bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10 cursor-pointer"
+                    : "button-default cursor-pointer"
                 }
                 `}
             >
@@ -74,12 +71,8 @@ export default function Footer({
             }`}
           >
             <a
-              className={`p-2 box-border flex items-center justify-center rounded-md cursor-pointer
-              ${
-                isLastChapter
-                  ? "bg-green-100 hover:bg-green-200 dark:bg-green-800 dark:hover:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-green-500 dark:text-green-400"
-                  : "bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10"
-              }
+              className={`button
+              ${isLastChapter ? "button-green" : "button-default"}
               `}
             >
               {isLastChapter ? "Complete Lesson" : "Next Chapter"}

diff --git a/styles/globals.css b/styles/globals.css
@@ -12,6 +12,44 @@
 }
 
 @layer components {
+  .button {
+    @apply p-2 box-border flex items-center justify-center rounded-md cursor-pointer;
+  }
+
+  .button-blue {
+    @apply bg-blue-100 hover:bg-blue-200 dark:bg-blue-800 dark:hover:bg-blue-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-blue-500 dark:text-blue-400;
+  }
+
+  .button-amber {
+    @apply bg-amber-100 hover:bg-amber-200 dark:bg-amber-800 dark:hover:bg-amber-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-amber-500 dark:text-amber-400;
+  }
+
+  .button-green {
+    @apply bg-green-100 hover:bg-green-200 dark:bg-green-800 dark:hover:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-green-500 dark:text-green-400;
+  }
+
+  .button-default {
+    @apply bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10;
+  }
+
+  .footer-container {
+    @apply flex justify-between w-full px-8 py-4 box-border bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white;
+  }
+
+  body {
+    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white overflow-auto;
+  }
+
+  .start-title,
+  .completed-title {
+    @apply font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center;
+  }
+
+  .start-description,
+  .completed-description {
+    @apply mt-6 text-lg md:text-xl text-gray-600 dark:text-gray-400 text-center max-w-3xl mx-auto;
+  }
+
   .app {
     position: fixed;
     top: 0;