feat: more theme updates

jsonresume · Jul 11, 2024 · 5018220 · 5018220
1 parent ec3c3f9
commit 5018220
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 62 deletions.
diff --git a/apps/registry/app/[username]/ProfileLayout.js b/apps/registry/app/[username]/ProfileLayout.js
@@ -29,7 +29,7 @@ export default function Layout({ children, resume, username, session }) {
   ];
 
   return (
-    <div className="text-lg bg-gray-100 min-h-screen flex flex-col items-center px-4 md:px-10">
+    <div className="text-lg min-h-screen flex flex-col items-center px-4 md:px-10">
       <div className="w-full py-10 flex flex-col md:flex-row justify-center items-start">
         <div className="w-full min-w-[300px] md:max-w-[300px] mr-0 md:mr-10 mb-10 md:mb-0">
           <div className="bg-white p-6 rounded-lg shadow-md">
@@ -47,29 +47,29 @@ export default function Layout({ children, resume, username, session }) {
                 {resume.basics.label}
               </p>
               <div className="flex items-center mb-2 text-sm text-gray-500">
-                <MapPin className="w-4 h-4 mr-1" />
+                <MapPin className="w-4 h-4 mr-1 text-secondary-500" />
                 <span>
                   {resume.basics.location.countryCode ||
                     'Location not available'}
                 </span>
               </div>
               <a
                 href={`mailto:${resume.basics.email}`}
-                className="mb-4 text-sm text-blue-600 hover:underline"
+                className="mb-4 text-sm text-secondary-500 hover:underline"
               >
                 {resume.basics.email}
               </a>
               <div className="flex flex-col items-center mt-4 space-y-2">
                 <a href={`/${username}`} target="_blank">
-                  <button className="bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300">
+                  <button className="bg-secondary-100 text-secondary-800 py-2 px-4 rounded hover:bg-secondary-200 transition-colors duration-200">
                     View Resume
                   </button>
                 </a>
               </div>
               {session && (
                 <button
                   onClick={() => router.push('/editor')}
-                  className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
+                  className="mt-4 bg-secondary-500 text-white py-2 px-4 rounded hover:bg-secondary-700 transition-colors duration-200"
                 >
                   Edit Resume
                 </button>
@@ -78,15 +78,15 @@ export default function Layout({ children, resume, username, session }) {
           </div>
         </div>
         <div className="flex-1 bg-white p-6 rounded-lg shadow-md max-w-[800px] w-full">
-          <div className="flex justify-start gap-4 mb-4  pb-2">
+          <div className="flex justify-start gap-4 mb-4 pb-2">
             {navLinks.map((link) => (
               <Link key={link.href} href={link.href} passHref>
                 <span
                   className={`text-gray-700 hover:text-gray-900 py-2 px-4 rounded-full ${
                     pathname === link.href
-                      ? 'bg-blue-500 text-white'
-                      : 'bg-gray-200 hover:bg-gray-300'
-                  }`}
+                      ? 'bg-secondary-500 text-white'
+                      : 'bg-secondary-100 hover:bg-secondary-200'
+                  } transition-colors duration-200`}
                 >
                   {link.label}
                 </span>

diff --git a/apps/registry/app/[username]/dashboard/Dashboard.js b/apps/registry/app/[username]/dashboard/Dashboard.js
@@ -40,14 +40,14 @@ const ResumeData = {
 };
 
 const SectionTitle = ({ children }) => (
-  <h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 border-blue-500 pb-2">
+  <h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 border-secondary-500 pb-2">
     {children}
   </h2>
 );
 
 const InfoItem = ({ icon: Icon, label, value }) => (
   <div className="flex items-center space-x-2 mb-2">
-    <Icon className="w-5 h-5 text-blue-500" />
+    <Icon className="w-5 h-5 text-secondary-500" />
     <span className="font-medium text-gray-700">{label}:</span>
     <span className="text-gray-900">{value}</span>
   </div>
@@ -63,7 +63,7 @@ const ProgressBar = ({ value, max, label }) => (
     </div>
     <div className="w-full bg-gray-200 rounded-full h-2.5">
       <div
-        className="bg-blue-600 h-2.5 rounded-full"
+        className="bg-secondary-600 h-2.5 rounded-full"
         style={{ width: `${(value / max) * 100}%` }}
       ></div>
     </div>
@@ -73,15 +73,15 @@ const ProgressBar = ({ value, max, label }) => (
 const TimelineItem = ({ title, duration }) => (
   <div className="mb-4">
     <div className="flex items-center mb-1">
-      <div className="bg-blue-500 rounded-full w-3 h-3 mr-2"></div>
+      <div className="bg-secondary-500 rounded-full w-3 h-3 mr-2"></div>
       <h4 className="text-lg font-semibold">{title}</h4>
     </div>
     <p className="text-sm text-gray-600 ml-5">{duration}</p>
   </div>
 );
 
 const SkillBadge = ({ skill }) => (
-  <span className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
+  <span className="bg-secondary-100 text-secondary-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
     {skill}
   </span>
 );

diff --git a/apps/registry/app/[username]/jobs/JobList.js b/apps/registry/app/[username]/jobs/JobList.js
@@ -5,6 +5,7 @@ import {
   Calendar,
   DollarSign,
   BriefcaseIcon,
+  Globe,
   CheckCircle,
   Star,
 } from 'lucide-react';
@@ -27,27 +28,31 @@ const JobDescription = ({ job, makeCoverletter }) => {
             <span>{job.company || 'Not available'}</span>
           </div>
           <div className="flex items-center">
-            <DollarSign className="w-5 h-5 mr-2 text-yellow-500" />
+            <DollarSign className="w-5 h-5 mr-2 text-warning-500" />
             <span>
               {job.salary
                 ? `$${Number(job.salary).toLocaleString()}/year`
                 : 'Not available'}
             </span>
           </div>
           <div className="flex items-center">
-            <MapPin className="w-5 h-5 mr-2 text-blue-500" />
+            <MapPin className="w-5 h-5 mr-2 text-secondary-500" />
             <span>
               {job.location
                 ? `${job.location.city}, ${job.location.countryCode}`
                 : 'Not available'}
             </span>
           </div>
           <div className="flex items-center">
-            <BriefcaseIcon className="w-5 h-5 mr-2 text-purple-500" />
+            <BriefcaseIcon className="w-5 h-5 mr-2 text-accent-500" />
             <span>{job.experience || 'Not available'}</span>
           </div>
           <div className="flex items-center">
-            <Calendar className="w-5 h-5 mr-2 text-green-500" />
+            <Globe className="w-5 h-5 mr-2 text-accent-500" />
+            <span>Remote - {job.remote || 'Not available'}</span>
+          </div>
+          <div className="flex items-center">
+            <Calendar className="w-5 h-5 mr-2 text-success-500" />
             <span>{job.date || 'Not available'}</span>
           </div>
           <div className="text-gray-600 col-span-full">
@@ -73,7 +78,7 @@ const JobDescription = ({ job, makeCoverletter }) => {
               {job.responsibilities?.length ? (
                 job.responsibilities.map((resp, index) => (
                   <li key={index} className="flex items-start mb-2">
-                    <CheckCircle className="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-1" />
+                    <CheckCircle className="w-5 h-5 mr-2 text-success-500 flex-shrink-0 mt-1" />
                     <span>{resp}</span>
                   </li>
                 ))
@@ -91,7 +96,7 @@ const JobDescription = ({ job, makeCoverletter }) => {
               {job.qualifications?.length ? (
                 job.qualifications.map((qual, index) => (
                   <li key={index} className="flex items-start mb-2">
-                    <CheckCircle className="w-5 h-5 mr-2 text-blue-500 flex-shrink-0 mt-1" />
+                    <CheckCircle className="w-5 h-5 mr-2 text-secondary-500 flex-shrink-0 mt-1" />
                     <span>{qual}</span>
                   </li>
                 ))
@@ -112,7 +117,7 @@ const JobDescription = ({ job, makeCoverletter }) => {
                     {skill.name}
                   </h3>
                   <div className="flex items-center mb-2">
-                    <Star className="w-5 h-5 mr-2 text-yellow-500" />
+                    <Star className="w-5 h-5 mr-2 text-warning-500" />
                     <span>{skill.level}</span>
                   </div>
                   <div className="flex flex-wrap gap-2">
@@ -137,7 +142,7 @@ const JobDescription = ({ job, makeCoverletter }) => {
           </div>
           <div className="mt-4 flex gap-4">
             <button
-              className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
+              className="bg-secondary-500 text-white py-2 px-4 rounded hover:bg-secondary-700 transition-colors duration-200"
               onClick={() => makeCoverletter(job.raw)}
             >
               Make Cover Letter
@@ -146,7 +151,7 @@ const JobDescription = ({ job, makeCoverletter }) => {
               href={job.url || '#'}
               target="_blank"
               rel="noopener noreferrer"
-              className="bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300"
+              className="bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300 transition-colors duration-200"
             >
               View Original Job
             </a>

diff --git a/apps/registry/app/components/CreateResume.js b/apps/registry/app/components/CreateResume.js
@@ -1,36 +1,42 @@
 'use client';
 
 import { useState } from 'react';
-import styles from './CreateResume.module.css';
-import Button from './Button/Button';
 
 export default function CreateResume({ createGist }) {
   const [creating, setCreating] = useState(false);
 
   return (
-    <div className={styles.container}>
-      <div style={{ fontSize: '1.4rem', textAlign: 'center' }}>
-        <br />
-        <br />
-        <br />
-        You currently don&apos;t have a gist named resume.json. You will be able
-        to find it at{' '}
-        <a href="https://gist.github.com">https://gist.github.com</a>
-        <br />
-        <br />
-        {!creating && (
-          <Button
+    <div className="flex flex-col items-center  min-h-screen p-6 pt-20">
+      <div className="bg-white p-12 rounded-lg shadow-lg text-center max-w-md">
+        <p className="text-xl mb-8">
+          It looks like you don&apos;t have a gist named{' '}
+          <strong>resume.json</strong> yet. No worries! You can easily create
+          one right here. Once created, you&apos;ll find it at{' '}
+          <a
+            href="https://gist.github.com"
+            className="text-secondary-500 hover:text-secondary-700"
+          >
+            gist.github.com
+          </a>
+          .
+        </p>
+        {!creating ? (
+          <button
             onClick={async () => {
               setCreating(true);
               await createGist();
               // refresh window
               window.location.reload();
             }}
+            className="bg-accent-500 text-white text-lg py-3 px-6 rounded-lg shadow-md hover:bg-accent-700 transition duration-300"
           >
             Create resume.json gist
-          </Button>
+          </button>
+        ) : (
+          <div className="text-xl text-secondary-700 mt-4">
+            Creating your resume.json gist...
+          </div>
         )}
-        {creating && <div>Creating resume.json gist...</div>}
       </div>
     </div>
   );

diff --git a/apps/registry/app/components/Editor.js b/apps/registry/app/components/Editor.js
@@ -165,7 +165,7 @@ const sampleResume = {
   ],
 };
 
-const RESUME_GIST_NAME = 'resume.json';
+const RESUME_GIST_NAME = 'resumeaa.json';
 
 export default async function Page() {
   const session = await auth();

diff --git a/apps/registry/app/components/Menu.js b/apps/registry/app/components/Menu.js
@@ -14,41 +14,49 @@ export default function Menu({ session }) {
   const isProfileActive = pathname.startsWith(`/${username}`);
 
   return (
-    <div className="px-5 bg-yellow-200 shadow-md">
+    <div className="bg-accent-200 shadow-md">
       <Header
         left={
-          <div className="flex gap-6 items-center h-full leading-7">
+          <div className="flex gap-8 items-center h-full p-5">
             <Link
               href="/"
-              className={`text-2xl font-bold ${
-                isActive('/') ? 'text-blue-600' : 'text-gray-800'
-              } hover:text-blue-600 transition-colors duration-200`}
+              className="text-2xl font-bold text-black hover:text-secondary-900 transition-colors duration-200"
             >
               JSON Resume Registry
             </Link>
             <Link
               href="/explore"
-              className={`ml-5 text-lg ${
-                isActive('/explore') ? 'text-blue-600' : 'text-gray-800'
-              } hover:text-blue-600 transition-colors duration-200`}
+              className={`text-xl font-bold ${
+                isActive('/explore')
+                  ? 'text-secondary-900 underline'
+                  : 'text-black'
+              } hover:text-secondary-900 transition-colors duration-200`}
             >
               Explore
             </Link>
+            <a
+              href="https://github.com/jsonresume/jsonresume.org"
+              className="text-xl font-bold text-black hover:text-secondary-900 transition-colors duration-200"
+            >
+              Github
+            </a>
             <a
               href="https://discord.gg/GTZtn8pTXC"
-              className="text-lg text-gray-800 hover:text-blue-600 transition-colors duration-200"
+              className="text-xl font-bold text-black hover:text-secondary-900 transition-colors duration-200"
             >
               Discord
             </a>
           </div>
         }
         right={
-          <div className="flex gap-6 items-center h-[30px]">
+          <div className="flex gap-6 items-center h-full p-5">
             {username && (
               <Link
                 href={`/${username}/dashboard`}
-                className={`text-lg hover:text-blue-600 transition-colors duration-200 ${
-                  isProfileActive ? 'text-blue-600' : 'text-gray-800'
+                className={`text-xl font-bold hover:text-secondary-900 transition-colors duration-200 ${
+                  isProfileActive
+                    ? 'text-secondary-900 underline'
+                    : 'text-black'
                 }`}
               >
                 Profile
@@ -57,8 +65,10 @@ export default function Menu({ session }) {
             {session && username && (
               <Link
                 href="/editor"
-                className={`text-lg hover:text-blue-600 transition-colors duration-200 ${
-                  isActive('/editor') ? 'text-blue-600' : 'text-gray-800'
+                className={`text-xl font-bold hover:text-secondary-900 transition-colors duration-200 ${
+                  isActive('/editor')
+                    ? 'text-secondary-900 underline'
+                    : 'text-black'
                 }`}
               >
                 Editor
@@ -67,16 +77,16 @@ export default function Menu({ session }) {
             {session && (
               <button
                 onClick={signOut}
-                className="text-lg text-gray-800 hover:text-blue-600 transition-colors duration-200"
+                className="text-xl font-bold text-black hover:text-secondary-900 transition-colors duration-200"
               >
                 Logout
               </button>
             )}
             {!session && (
               <Link
                 href="/"
-                className={`text-lg hover:text-blue-600 transition-colors duration-200 ${
-                  isActive('/') ? 'text-blue-600' : 'text-gray-800'
+                className={`text-xl font-bold hover:text-secondary-900 transition-colors duration-200 ${
+                  isActive('/') ? 'text-secondary-900 underline' : 'text-black'
                 }`}
               >
                 Sign in

diff --git a/apps/registry/app/components/SignIn.js b/apps/registry/app/components/SignIn.js
@@ -3,7 +3,7 @@ import { signIn } from '../../auth';
 
 export default function SignIn() {
   return (
-    <div className="text-lg w-[400px] mx-auto p-8 bg-white rounded-lg shadow-md">
+    <div className="text-lg m-8 w-[400px] mx-auto p-8 bg-white rounded-lg shadow-md">
       <div className="mb-6 text-gray-700">
         <p>
           Welcome to the JSON Resume Registry! Seamlessly sync your resume.json
@@ -26,7 +26,7 @@ export default function SignIn() {
       >
         <button
           type="submit"
-          className="w-full py-3 px-4 bg-blue-600 text-white rounded-md flex items-center justify-center hover:bg-blue-700 transition-colors duration-200"
+          className="w-full py-3 px-4 bg-secondary-600 text-white rounded-md flex items-center justify-center hover:bg-secondary-700 transition-colors duration-200"
         >
           <Github size={20} className="mr-2" /> Sign in with GitHub
         </button>

diff --git a/apps/registry/app/explore/page.js b/apps/registry/app/explore/page.js
@@ -68,7 +68,7 @@ const Resumes = () => {
               <Link
                 key={index}
                 href={`/${resume.username}/dashboard`}
-                className="flex items-center p-4 border border-gray-300 rounded bg-yellow-50 hover:bg-yellow-200 transition-colors duration-200"
+                className="flex items-center p-4 border border-gray-300 rounded bg-white hover:bg-gray-100 transition-colors duration-200"
               >
                 <img
                   src={resume.image}

diff --git a/apps/registry/app/layout.js b/apps/registry/app/layout.js
@@ -26,7 +26,12 @@ export default async function Layout({ children }) {
 
   return (
     <html lang="en">
-      <body>
+      <body
+        style={{
+          'background-image': `url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23f2f2f2' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")`,
+          'background-repeat': 'repeat',
+        }}
+      >
         <Menu session={session} />
         {children}
         <link