Dev

.env

@@ -1,3 +1,3 @@
 ESLINT_NO_DEV_ERRORS=true
-NEXT_PUBLIC_GRAPHCMS_ENDPOINT='https://api-eu-central-1.graphcms.com/v2/cku56f92114s901yz0ce9ah3f/master'
-GRAPHCMS_TOKEN='eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImdjbXMtbWFpbi1wcm9kdWN0aW9uIn0.eyJ2ZXJzaW9uIjozLCJpYXQiOjE2MzI5MzEwNTIsImF1ZCI6WyJodHRwczovL2FwaS1ldS1jZW50cmFsLTEuZ3JhcGhjbXMuY29tL3YyL2NrdTU2ZjkyMTE0czkwMXl6MGNlOWFoM2YvbWFzdGVyIiwiaHR0cHM6Ly9tYW5hZ2VtZW50LW5leHQuZ3JhcGhjbXMuY29tIl0sImlzcyI6Imh0dHBzOi8vbWFuYWdlbWVudC5ncmFwaGNtcy5jb20vIiwic3ViIjoiODQyMTFmOWQtODk5My00ODQ2LWExZDItOWI2ZmUwNjVlMGI3IiwianRpIjoiY2t1NW96anh2MXRnYzAxeG5nbDNyM3F0MyJ9.Kg-yIyRma2sHtDUsDGWV-wa7DFQow98Yea7qkVIH5YmTg2C0XpwS8XSvnPuB64z09l1Jd0IKBHes_Sxv8EwMk-XlTjzqgxx3u96xBTlv5t-UA94zlCv2E1GEGWtsCWqxHBxISXB5wHwigqS_pZYCHWjG0WwjIj8aQ2z_SxwiZErxwFCuG9l1f12_Wfs2IDmkQMA8mFsbQvOSy-MqxuMt-5o82oM9i-Usi69j2vm4veBQcKss9TWGkK-ZcVkifl_-JDrJ41qXu9G66WxnZzI2TQF9BcanwuUmsB0N_fhnkcX4BFN5Xq0OmDfSOKNKUQ6zZCy1PbU6vX4sQJ5eiRgFPXmkXtnTcsVgVsrbO2sP8SKj0KLA4diI3X5UsxduzDRCXP833_8z3AfQQmp0zUg4caDtVjHTBzBRMLNeX10PFaFQ6toeFvrFjwcNHO7jUmgdUR6kYhL8cNu1VLNuwOyZN0Lefc6kpiMTM7bYbmGwQq3FaICbyxl2hB_OQopXWlBcDGopGCrO3ZRnqGdagPUxVFcIMcQfB9kKeO78P8LbUjRinoTqBBSIclKxWNjkGU-joHAA4T5-FE3hknwYQWwffhEoFn2HNyEFLDPVFd7cDGZciCjd4app3a4YtJbFx9D18gjORam5XNI988iwo56FsbTAX-VjmYM-9M5LQ0xYsD8'
+NEXT_PUBLIC_GRAPHCMS_ENDPOINT='https://api-us-east-1.hygraph.com/v2/cl7saojx273o101um38dgbmnk/master'
+GRAPHCMS_TOKEN='eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImdjbXMtbWFpbi1wcm9kdWN0aW9uIn0.eyJ2ZXJzaW9uIjozLCJpYXQiOjE2NjM0Njg0MDUsImF1ZCI6WyJodHRwczovL2FwaS11cy1lYXN0LTEuaHlncmFwaC5jb20vdjIvY2w3c2FvangyNzNvMTAxdW0zOGRnYm1uay9tYXN0ZXIiLCJtYW5hZ2VtZW50LW5leHQuZ3JhcGhjbXMuY29tIl0sImlzcyI6Imh0dHBzOi8vbWFuYWdlbWVudC5ncmFwaGNtcy5jb20vIiwic3ViIjoiOWJmM2E5Y2EtOWEwMS00OWE0LTkzZmMtNzA0ZmY2YjUwYjczIiwianRpIjoiY2w4NnE1MGgyMDQxNDAxdGFoZjFmZ2FtZyJ9.ZRNWJpjLOE5L5l8R1TWF2R23zLyRKxV6Q-yUqLHaZLJAo8JiwaiZW4SxelY_jCc3nC8ZGtkC4Cv3mjty7_4TCJVSMsxQCx9tGoFohxtvq7FHWvKE49TWY8cEkYQtY9bvwtNgGG6Q29_eFbgCoM6GIcgu2FuFQnYl5o4rPak0Dd3U8P2F1lVvXsjL7bYTFKTWHe-MpxqEsstcIeGwcQ2NVkw1K2eNSztj_H1wHHYyIkwL97XGygeKNEaXKi1nVtt_X8W-IzCdHeKuD8du5SEq3wBsuJw-oXd6C8K2EPmjgkLQ2DgPNzSTEJlHJBp-5jrGtqhZEd3velOf71zcAWNNy-72ehGs-Up-np2s9TP-iNxsvi6l2ICggkhU1AVcKFHuwdiowDwyfCSWU3CYQpWvGU6bE5XEPJokhwLUx2XStNJcw_g6BCmbPPVJSARq3490OpALjxHL66cZaUkOiGwOoH9QLQskcmeRd6tDij4l3VFQLwrA8T3Sb4wrCTW6mVSqtBb2h50zm1dEVYIS23_DTr0CuLCruWawlKTxn29_-WRHxHj-dO8nL5yQRdxcj5-arJNDMT0KNRFbt_2GSgfncPMkfflZgPp9sOFN7ejViBrjjXn1jTihfVFih8bJD8bhFJb1lH4KRwoXQ1S3lz9iwhLVG14Fk16DXTg9YHXku_w'

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
     'import/prefer-default-export': 0,
     'max-len': [
       2,
-      250,
+      260,
     ],
     'no-multiple-empty-lines': [
       'error',

components/Categories.jsx

@@ -13,11 +13,11 @@ const Categories = () => {
   }, []);
 
   return (
-    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
-      <h3 className="text-xl mb-8 font-semibold border-b pb-4">Categories</h3>
+    <div className="bg-pond shadow-lg rounded-lg p-8 pb-12 mb-8 border-2 border-gold">
+      <h3 className="text-xl mb-8 font-semibold border-b pb-4 text-gold">Categories</h3>
       {categories.map((category, index) => (
         <Link key={index} href={`/category/${category.slug}`}>
-          <span className={`cursor-pointer block ${(index === categories.length - 1) ? 'border-b-0' : 'border-b'} pb-3 mb-3`}>{category.name}</span>
+          <span className={`cursor-pointer block ${(index === categories.length - 1) ? 'border-b-0' : 'border-b'} pb-3 mb-3 text-grey hover:text-gold`}>{category.name}</span>
         </Link>
       ))}
     </div>

components/Comments.jsx

@@ -16,7 +16,7 @@ const Comments = ({ slug }) => {
   return (
     <>
       {comments.length > 0 && (
-        <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
+        <div className="bg-pond shadow-lg rounded-lg p-8 pb-12 mb-8">
           <h3 className="text-xl mb-8 font-semibold border-b pb-4">
             {comments.length}
             {' '}

components/CommentsForm.jsx

@@ -75,7 +75,7 @@ const CommentsForm = ({ slug }) => {
   };
 
   return (
-    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
+    <div className="bg-pond shadow-lg rounded-lg p-8 pb-12 mb-8">
       <h3 className="text-xl mb-8 font-semibold border-b pb-4">Leave a Reply</h3>
       <div className="grid grid-cols-1 gap-4 mb-4">
         <textarea value={formData.comment} onChange={onInputChange} className="p-4 outline-none w-full rounded-lg h-40 focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700" name="comment" placeholder="Comment" />
@@ -87,13 +87,13 @@ const CommentsForm = ({ slug }) => {
       <div className="grid grid-cols-1 gap-4 mb-4">
         <div>
           <input checked={formData.storeData} onChange={onInputChange} type="checkbox" id="storeData" name="storeData" value="true" />
-          <label className="text-gray-500 cursor-pointer" htmlFor="storeData"> Save my name, email in this browser for the next time I comment.</label>
+          <label className="text-gold cursor-pointer" htmlFor="storeData"> Save my name, email in this browser for the next time I comment.</label>
         </div>
       </div>
       {error && <p className="text-xs text-red-500">All fields are mandatory</p>}
       <div className="mt-8">
-        <button type="button" onClick={handlePostSubmission} className="transition duration-500 ease hover:bg-indigo-900 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">Post Comment</button>
-        {showSuccessMessage && <span className="text-xl float-right font-semibold mt-3 text-green-500">Comment submitted for review</span>}
+        <button type="button" onClick={handlePostSubmission} className="transition duration-500 ease hover:bg-pond inline-block bg-gold text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">Post Comment</button>
+        {showSuccessMessage && <span className="text-xl float-right font-semibold mt-3 text-gold">Comment submitted for review</span>}
       </div>
     </div>
   );

components/FeaturedPostCard.jsx

@@ -8,8 +8,8 @@ const FeaturedPostCard = ({ post }) => (
     <div className="absolute rounded-lg bg-center bg-no-repeat bg-cover shadow-md inline-block w-full h-72" style={{ backgroundImage: `url('${post.featuredImage.url}')` }} />
     <div className="absolute rounded-lg bg-center bg-gradient-to-b opacity-50 from-gray-400 via-gray-700 to-black w-full h-72" />
     <div className="flex flex-col rounded-lg p-4 items-center justify-center absolute w-full h-full">
-      <p className="text-white mb-4 text-shadow font-semibold text-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
-      <p className="text-white mb-4 text-shadow font-semibold text-2xl text-center">{post.title}</p>
+      <p className="text-grey mb-4 text-shadow font-semibold text-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
+      <p className="text-grey mb-4 text-shadow font-semibold text-2xl text-center">{post.title}</p>
       <div className="flex items-center absolute bottom-5 w-full justify-center">
         <Image
           unoptimized
@@ -19,7 +19,7 @@ const FeaturedPostCard = ({ post }) => (
           className="align-middle drop-shadow-lg rounded-full"
           src={post.author.photo.url}
         />
-        <p className="inline align-middle text-white text-shadow ml-2 font-medium">{post.author.name}</p>
+        <p className="inline align-middle text-grey text-shadow ml-2 font-medium">{post.author.name}</p>
       </div>
     </div>
     <Link href={`/post/${post.slug}`}><span className="cursor-pointer absolute w-full h-full" /></Link>

components/Header.jsx

@@ -17,12 +17,12 @@ const Header = () => {
       <div className="border-b w-full inline-block border-blue-400 py-8">
         <div className="md:float-left block">
           <Link href="/">
-            <span className="cursor-pointer font-bold text-4xl text-white">Graph CMS</span>
+            <span className="cursor-pointer font-bold text-6xl text-gold">Word of the Day Club</span>
           </Link>
         </div>
         <div className="hidden md:float-left md:contents">
           {categories.map((category, index) => (
-            <Link key={index} href={`/category/${category.slug}`}><span className="md:float-right mt-2 align-middle text-white ml-4 font-semibold cursor-pointer">{category.name}</span></Link>
+            <Link key={index} href={`/category/${category.slug}`}><span className="md:float-right mt-2 align-middle text-gold hover:text-white ml-4 font-semibold cursor-pointer">{category.name}</span></Link>
           ))}
         </div>
       </div>

components/PostCard.jsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { grpahCMSImageLoader } from '../util';
 
 const PostCard = ({ post }) => (
-  <div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
+  <div className="bg-pond shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8 border-2 border-gold">
     {/* <div className="relative shadow-md inline-block w-full h-60 lg:h-80 mb-6">
       <Image
         unoptimized
@@ -21,7 +21,7 @@ const PostCard = ({ post }) => (
       <img src={post.featuredImage.url} alt="" className="object-top absolute h-80 w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
     </div>
 
-    <h1 className="transition duration-700 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
+    <h1 className="transition duration-700 text-center mb-8 cursor-pointer text-grey hover:text-gold text-3xl font-semibold">
       <Link href={`/post/${post.slug}`}>{post.title}</Link>
     </h1>
     <div className="block lg:flex text-center items-center justify-center mb-8 w-full">
@@ -35,21 +35,21 @@ const PostCard = ({ post }) => (
           className="align-middle rounded-full"
           src={post.author.photo.url}
         />
-        <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
+        <p className="inline align-middle text-gold ml-2 font-medium text-lg">{post.author.name}</p>
       </div>
-      <div className="font-medium text-gray-700">
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <div className="font-medium text-gold">
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
         </svg>
         <span className="align-middle">{moment(post.createdAt).format('MMM DD, YYYY')}</span>
       </div>
     </div>
-    <p className="text-center text-lg text-gray-700 font-normal px-4 lg:px-20 mb-8">
+    <p className="text-center text-lg text-grey font-normal px-4 lg:px-20 mb-8">
       {post.excerpt}
     </p>
     <div className="text-center">
       <Link href={`/post/${post.slug}`}>
-        <span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">Continue Reading</span>
+        <span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-gold text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">Continue Reading</span>
       </Link>
     </div>
   </div>

components/PostDetail.jsx

@@ -44,11 +44,11 @@ const PostDetail = ({ post }) => {
 
   return (
     <>
-      <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
+      <div className="bg-pond shadow-lg rounded-lg lg:p-8 pb-12 mb-8 border-2 border-gold">
         <div className="relative overflow-hidden shadow-md mb-6">
           <img src={post.featuredImage.url} alt="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
         </div>
-        <div className="px-4 lg:px-0">
+        <div className="px-4 lg:px-0 text-grey">
           <div className="flex items-center mb-8 w-full">
             <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
               <img
@@ -58,16 +58,16 @@ const PostDetail = ({ post }) => {
                 className="align-middle rounded-full"
                 src={post.author.photo.url}
               />
-              <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
+              <p className="inline align-middle text-gold ml-2 font-medium text-lg">{post.author.name}</p>
             </div>
-            <div className="font-medium text-gray-700">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="font-medium text-gold">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-grey" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
               </svg>
               <span className="align-middle">{moment(post.createdAt).format('MMM DD, YYYY')}</span>
             </div>
           </div>
-          <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
+          <h1 className="mb-8 text-3xl font-semibold text-gold">{post.title}</h1>
           {post.content.raw.children.map((typeObj, index) => {
             const children = typeObj.children.map((item, itemindex) => getContentFragment(itemindex, item.text, item));
 

components/PostWidget.jsx

@@ -22,8 +22,8 @@ const PostWidget = ({ categories, slug }) => {
   }, [slug]);
 
   return (
-    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
-      <h3 className="text-xl mb-8 font-semibold border-b pb-4">{slug ? 'Related Posts' : 'Recent Posts'}</h3>
+    <div className="bg-pond shadow-lg rounded-lg p-8 pb-12 mb-8 border-2 border-gold">
+      <h3 className="text-xl mb-8 font-semibold border-b pb-4 text-gold">{slug ? 'Related Posts' : 'Recent Posts'}</h3>
       {relatedPosts.map((post, index) => (
         <div key={index} className="flex items-center w-full mb-4">
           <div className="w-16 flex-none">
@@ -37,8 +37,8 @@ const PostWidget = ({ categories, slug }) => {
               src={post.featuredImage.url}
             />
           </div>
-          <div className="flex-grow ml-4">
-            <p className="text-gray-500 font-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
+          <div className="flex-grow ml-4 text-grey">
+            <p className="text-white font-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
             <Link href={`/post/${post.slug}`} className="text-md" key={index}>{post.title}</Link>
           </div>
         </div>