conflicting css fix - iframe added

src/contentScript/_components/JobCard.tsx

@@ -1,33 +1,107 @@
 import React from 'react'
-import styles from "../styles/SidePanel.module.scss";
 
+const styles = {
+  jobflow_content: {
+    padding: '1rem',
+  },
+  jobflow_tags: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '0.5rem',
+    marginTop: '0.5rem',
+  },
+  jobflow_tag: {
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    padding: '0.25rem 0.75rem',
+    borderRadius: '9999px',
+    fontSize: '0.875rem',
+  },
+  jobflow_location: {
+    marginTop: '1rem',
+  },
+  jobflow_footer: {
+    display: 'flex',
+    padding: '1rem 0',
+    borderTop: '1px solid #e5e7eb',
+  },
+  jobflow_status: {
+    font: 'bold',
+  },
+  jobflow_saveButton: {
+    width: '100%',
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    padding: '0.5rem 0',
+    borderRadius: '0.5rem',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+  },
+  jobflow_card: {
+    borderRadius: '10px',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    margin: '3px',
+    padding: '1rem',
+    transition: 'transform 0.2s',
+    '&:hover': {
+      transform: 'scale(1.02)',
+    },
+  },
+  jobflow_button: {
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    padding: '2px',
+    margin: '4px',
+    borderRadius: '0.5rem',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.3s',
+    '&:hover': {
+      backgroundColor: '#2563eb',
+    },
+  },
+  jobflow_statusDropdown: {
+    marginLeft: '1rem',
+    padding: '2px',
+    borderRadius: '0.5rem',
+    border: '1px solid #e5e7eb',
+  },
+
+  jobflow_logo: {
+    width: '50px',
+    height: '50px',
+    margin: '1rem',
+  },
+  jobflow_card_header: {
+    display: 'flex',
+  },
+}
 const JobCard = ({ scrapedJob, handleTrackJob }: { scrapedJob: any, handleTrackJob: any }) => {
   return (
-    <div className={styles.jobflow_content}>
-    <div className={styles.jobflow_card}>
-      <div className={styles.jobflow_card_header}>
-      <img src={scrapedJob?.company_logo || scrapedJob?.company.company_logo} alt={`${scrapedJob?.company_name} logo`} className={styles.jobflow_logo} />
+    <div style={styles.jobflow_content}>
+    <div style={styles.jobflow_card}>
+      <div style={styles.jobflow_card_header}>
+      <img src={scrapedJob?.company_logo || scrapedJob?.company.company_logo} alt={`${scrapedJob?.company_name} logo`} style={styles.jobflow_logo} />
       <p>
         <strong>{scrapedJob?.title}</strong>
       </p>
       </div>
       <p>{scrapedJob?.company_name || scrapedJob?.company.company_name}</p>
-      <p className={styles.jobflow_location}>Location: {scrapedJob?.job_location}</p>
+      <p style={styles.jobflow_location}>Location: {scrapedJob?.job_location}</p>
       <p>Salary: {scrapedJob?.job_salary}</p>
       <p>Type: {scrapedJob?.job_type}</p>
       <a href={scrapedJob?.job_link} target="_blank" rel="noopener noreferrer">View Job</a>
     </div>
 
-    <div className={styles.jobflow_footer}>
+    <div style={styles.jobflow_footer}>
       {scrapedJob?.userId ? (
-        <div className={styles.jobflow_status}>
+        <div style={styles.jobflow_status}>
           Status: {scrapedJob.status || 'Not Set'}
         </div>
       ) : (
         <>
-          <button className={styles.jobflow_saveButton} onClick={handleTrackJob}>Track</button>
+          <button style={styles.jobflow_saveButton} onClick={handleTrackJob}>Track</button>
           <button>📑</button>
-          <select className={styles.jobflow_statusDropdown}>
+          <select style={styles.jobflow_statusDropdown}>
             <option value="applied">App</option>
             <option value="interviewing">Inte</option>
             <option value="offer">Offer</option>

src/contentScript/_components/JobForm.tsx

@@ -1,33 +1,104 @@
 import React, { useState } from "react";
-import styles from "../styles/JobForm.module.scss"; // Import the new styles
+
+const styles = {
+  formContainer: {
+    // position: 'absolute',
+    top: 0,
+    right: 0,
+    width: '300px',
+    height: '100%',
+    backgroundColor: 'black',
+    boxShadow: '-2px 0 5px rgba(0, 0, 0, 0.1)',
+    transform: 'translateX(100%)',
+    transition: 'transform 0.3s ease-in-out',
+    zIndex: 9999,
+  },
+  jobForm: {
+    padding: '1rem',
+  },
+  input: {
+    width: '100%',
+    marginBottom: '1rem',
+    padding: '0.5rem',
+    border: '1px solid #e5e7eb',
+    borderRadius: '0.5rem',
+  },
+  submitButton: {
+    width: '100%',
+    padding: '0.5rem',
+    border: 'none',
+    borderRadius: '0.5rem',
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    cursor: 'pointer',
+    marginBottom: '0.5rem',
+  },
+  cancelButton: {
+    width: '100%',
+    padding: '0.5rem',
+    border: 'none',
+    borderRadius: '0.5rem',
+    backgroundColor: '#e5e7eb',
+    color: '#1f2937',
+    cursor: 'pointer',
+  },
+};
 
 const JobForm: React.FC<{ setIsFormOpen: (isOpen: boolean) => void }> = ({ setIsFormOpen }) => {
-    console.log('insid job form')
   const [title, setTitle] = useState("");
   const [companyName, setCompanyName] = useState("");
   const [salary, setSalary] = useState("");
   const [location, setLocation] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle job submission logic here
     console.log({ title, companyName, salary, location });
-    setIsFormOpen(false); // Close the form after submission
+    setIsFormOpen(false);
   };
 
   return (
-    <div >
-      <form onSubmit={handleSubmit} className={styles.jobflow_jobForm}>
+    <div style={styles.formContainer}>
+      <form onSubmit={handleSubmit} style={styles.jobForm}>
         <h2>Add Job</h2>
-        <input type="text" placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} required />
-        <input type="text" placeholder="Company Name" value={companyName} onChange={(e) => setCompanyName(e.target.value)} required />
-        <input type="text" placeholder="Salary" value={salary} onChange={(e) => setSalary(e.target.value)} required />
-        <input type="text" placeholder="Location" value={location} onChange={(e) => setLocation(e.target.value)} required />
-        <button type="submit">Submit</button>
-        <button type="button" onClick={() => setIsFormOpen(false)}>Cancel</button>
+        <input
+          type="text"
+          placeholder="Title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          style={styles.input}
+        />
+        <input
+          type="text"
+          placeholder="Company Name"
+          value={companyName}
+          onChange={(e) => setCompanyName(e.target.value)}
+          required
+          style={styles.input}
+        />
+        <input
+          type="text"
+          placeholder="Salary"
+          value={salary}
+          onChange={(e) => setSalary(e.target.value)}
+          required
+          style={styles.input}
+        />
+        <input
+          type="text"
+          placeholder="Location"
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+          required
+          style={styles.input}
+        />
+        <button type="submit" style={styles.submitButton}>Submit</button>
+        <button type="button" onClick={() => setIsFormOpen(false)} style={styles.cancelButton}>
+          Cancel
+        </button>
       </form>
     </div>
   );
 };
 
-export default JobForm; 
+export default JobForm;