Merge pull request #4414 from CodeHarborHub/dev-3

Dev 3

Author: ajay-dhangar

src/components/CareerPage/index.tsx

@@ -93,7 +93,7 @@ const CareerPage: React.FC = () => {
   };
 
   return (
-    <div className="p-4 max-w-7xl mx-auto">
+    <div className="p-4 max-w-auto mx-auto">
       <h1 className="text-3xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-blue-600">
         Career Opportunities for You
       </h1>
@@ -127,7 +127,7 @@ const CareerPage: React.FC = () => {
           <option value="Quality Assurance">Quality Assurance</option>
         </select>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
         {filteredCareers.map((career) => (
           <CareerCard key={career.id} {...career} />
         ))}

src/components/RateUsPopup/RateUsPopup.js

@@ -1,9 +1,5 @@
-import React, {type ReactNode} from 'react';
-
-import clsx from 'clsx';
-
-import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
+import React, { type ReactNode } from "react";
+import Link from "@docusaurus/Link";
 export interface Props {
   url: string;
   handle: string;
@@ -22,28 +18,32 @@ export default function Tweet({
   githubUsername,
 }: Props): JSX.Element {
   return (
-    <div className={clsx('card', styles.tweet)}>
-      <div className="card__header">
-        <div className="avatar">
+    <div className="tweet p-4 mt-4 border rounded-lg bg-transparent shadow-sm border-gray-200 dark:border-gray-800 dark:bg-gray-900">
+      <div className="card__header mb-3">
+        <div className="flex items-center">
           <img
             alt={name}
-            className="avatar__photo"
+            className="w-12 h-12 rounded-full"
             src={`https://unavatar.io/twitter/${handle}?fallback=https://github.com/${githubUsername}.png`}
             width="48"
             height="48"
             loading="lazy"
           />
-          <div className={clsx('avatar__intro', styles.tweetMeta)}>
-            <strong className="avatar__name">{name}</strong>
-            <span>@{handle}</span>
+          <div className="ml-3">
+            <strong className="block text-base text-gray-900 dark:text-gray-100">
+              {name}
+            </strong>
+            <span className="text-gray-500 dark:text-gray-300 ">@{handle}</span>
           </div>
         </div>
       </div>
 
-      <div className={clsx('card__body', styles.tweet)}>{content}</div>
+      <div className="card__body mb-3 text-sm text-gray-800 dark:text-gray-100">
+        {content}
+      </div>
 
-      <div className="card__footer">
-        <Link className={clsx(styles.tweetMeta, styles.tweetDate)} to={url}>
+      <div className="card__footer text-right">
+        <Link className="text-sm hover:underline" to={url}>
           {date}
         </Link>
       </div>

src/components/RateUsPopup/RateUsPopup.module.css

@@ -1,9 +1,5 @@
-import React, {type ReactNode} from 'react';
-
-import clsx from 'clsx';
-
+import React, { type ReactNode } from 'react';
 import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
 
 export interface Props {
   url: string;
@@ -22,28 +18,32 @@ export default function TweetQuote({
 }: Props): JSX.Element {
   const avatar = `https://unavatar.io/twitter/${handle}`;
   const profileUrl = `https://twitter.com/${handle}`;
+
   return (
-    <figure className={styles.tweetQuote}>
-      <blockquote>
-        <Link to={url}>{children}</Link>
+    <figure className="mx-4 my-12 tweetQuote">
+      <blockquote className="relative mb-2 text-center font-light text-lg leading-relaxed">
+        <Link to={url} className="text-emphasis-900 hover:text-emphasis-900">
+          {children}
+        </Link>
+        <span className="absolute text-gray-200 text-6xl w-12 h-12 font-cursive leading-none" style={{ top: '-1.1rem', left: '-2.4rem' }}>
+          “
+        </span>
+        <span className="absolute text-gray-200 text-6xl w-12 h-12 font-cursive leading-none" style={{ bottom: '-1.1rem', right: '-1.6rem' }}>
+          ”
+        </span>
       </blockquote>
       <figcaption>
-        <Link to={profileUrl} rel="nofollow">
-          <div className="avatar">
-            <img
-              alt={name}
-              className={clsx('avatar__photo', styles.avatarImg)}
-              src={avatar}
-              // loading="lazy"
-            />
-            <div className={clsx('avatar__intro')}>
-              <strong className="avatar__name">
-                <cite>{name}</cite>
-              </strong>
-              <small className="avatar__subtitle" itemProp="description">
-                {job}
-              </small>
-            </div>
+        <Link to={profileUrl} rel="nofollow" className="flex items-center">
+          <img
+            alt={name}
+            className="rounded-full w-10 h-10 mr-3"
+            src={avatar}
+          />
+          <div>
+            <strong className="block">
+              <cite className="not-italic">{name}</cite>
+            </strong>
+            <small className="text-gray-600">{job}</small>
           </div>
         </Link>
       </figcaption>

src/components/Tweet/index.tsx

@@ -11,4 +11,4 @@ const Popup = ({ status, message }) => {
     </div>
   );
 };
-export default Popup;
+export default Popup;