From 2dcb140d108817496c4302a97c36ac1d683237f5 Mon Sep 17 00:00:00 2001 From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:54:03 -0400 Subject: [PATCH] Consolidate duplicate form CSS into shared FormPage.css - Create styles/FormPage.css from ContactFormPage.css - Update contacts and accounts form pages to import shared CSS - Delete 4 duplicate ContactFormPage.css copies --- src/pages/PmSchedule/form/ContactFormPage.css | 180 ------------------ src/pages/accounts/form/AccountFormPage.js | 2 +- src/pages/accounts/form/ContactFormPage.css | 180 ------------------ src/pages/contacts/form/ContactFormPage.js | 4 +- src/pages/followup/form/ContactFormPage.css | 180 ------------------ .../FormPage.css} | 3 +- 6 files changed, 4 insertions(+), 545 deletions(-) delete mode 100644 src/pages/PmSchedule/form/ContactFormPage.css delete mode 100644 src/pages/accounts/form/ContactFormPage.css delete mode 100644 src/pages/followup/form/ContactFormPage.css rename src/{pages/contacts/form/ContactFormPage.css => styles/FormPage.css} (97%) diff --git a/src/pages/PmSchedule/form/ContactFormPage.css b/src/pages/PmSchedule/form/ContactFormPage.css deleted file mode 100644 index 790e2fc1..00000000 --- a/src/pages/PmSchedule/form/ContactFormPage.css +++ /dev/null @@ -1,180 +0,0 @@ -/* Wrapper & card */ -.contactFormWrapper { - display: flex; - justify-content: center; - padding: 25px 20px; - background: #f5f6fa; - min-height: 100vh; - font-family: "Roboto", "Open Sans", Arial, sans-serif; -} - -.formCard { - background: #fff; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - width: 100%; - max-width: 1100px; - padding: 20px 22px 26px; - border: 1px solid #e6e9ee; -} - -/* Header */ -.formHeader { - padding-bottom: 10px; - border-bottom: 1px solid #e9ecef; - margin-bottom: 16px; -} -.formHeader h2 { - margin: 0; - color: #1f3b4d; - font-size: 20px; - font-weight: 600; -} - -/* Section titles */ -.sectionTitle { - margin: 0 0 12px; - color: #2b2f3b; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.6px; - font-weight: 700; -} - -/* Account widget (assignment) */ -.account-widget { - display: flex; - gap: 14px; - align-items: center; - padding: 12px; - border-radius: 4px; - background: #fbfcfd; - border: 1px dashed #d6e6ef; - color: #0a4b6b; -} -.account-icon { - width: 48px; - height: 48px; - background: #e9f4fb; - color: #0077a8; - border-radius: 4px; - display:flex; - align-items:center; - justify-content:center; - font-size:20px; -} -.account-info .account-title { - font-weight:700; -} -.account-info .account-action { - color: #0b63a7; - font-weight:700; - margin-top:4px; -} -.account-sub { - color:#667085; - font-size:12px; - margin-top:4px; -} - -/* Form layout */ -.contactFormBody { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 12px 18px; - align-items: start; - margin-bottom: 6px; -} - -/* Form groups */ -.formGroup { - display: flex; - flex-direction: column; - margin-bottom: 8px; -} -.formGroup.fullWidth { - grid-column: 1 / -1; -} - -/* Labels and controls */ -.formLabel { - font-size: 13px; - font-weight: 600; - color: #253244; - margin-bottom: 6px; -} -.required { color: #d93025; margin-left: 4px; } - -.formControl { - display: block; - width: 100%; - height: 36px; - padding: 6px 10px; - font-size: 13px; - color: #1f2937; - background: #fff; - border: 1px solid #d6dbe4; - border-radius: 4px; - box-sizing: border-box; -} -.formControl:focus { - outline: none; - border-color: #0b78b0; - box-shadow: 0 0 0 4px rgba(11,120,176,0.08); -} - -/* Hints / muted */ -.muted { - color: #6b7280; - font-size: 13px; - margin-bottom: 8px; -} -.formHint { - font-size: 12px; - color: #6b7280; - margin-top: 6px; -} - -/* Form actions */ -.formActions { - display: flex; - justify-content: space-between; - align-items: center; - border-top: 1px solid #e9eef3; - padding-top: 14px; - margin-top: 14px; -} -.formNote { - color: #555; - font-size: 13px; -} -.btnPrimary { - background-color: #198754; - border: 1px solid #198754; - color: #fff; - padding: 10px 18px; - font-size: 14px; - border-radius: 4px; - cursor: pointer; -} -.btnPrimary:disabled { - background-color: #c9c9c9; - border-color: #c9c9c9; - cursor: not-allowed; -} - -/* Responsive adjustments */ -@media (max-width: 992px) { - .contactFormBody { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 640px) { - .contactFormBody { - grid-template-columns: 1fr; - } - .formCard { - padding: 16px; - } -} \ No newline at end of file diff --git a/src/pages/accounts/form/AccountFormPage.js b/src/pages/accounts/form/AccountFormPage.js index 20901519..aa1b9b45 100644 --- a/src/pages/accounts/form/AccountFormPage.js +++ b/src/pages/accounts/form/AccountFormPage.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { useNavigate, useParams } from "react-router"; import { toast } from "react-toastify"; -import "./ContactFormPage.css"; // reuse same CSS +import "../../../styles/FormPage.css"; import { getAccountById, addAccount, editAccount } from "../api"; const AccountFormPage = () => { diff --git a/src/pages/accounts/form/ContactFormPage.css b/src/pages/accounts/form/ContactFormPage.css deleted file mode 100644 index 790e2fc1..00000000 --- a/src/pages/accounts/form/ContactFormPage.css +++ /dev/null @@ -1,180 +0,0 @@ -/* Wrapper & card */ -.contactFormWrapper { - display: flex; - justify-content: center; - padding: 25px 20px; - background: #f5f6fa; - min-height: 100vh; - font-family: "Roboto", "Open Sans", Arial, sans-serif; -} - -.formCard { - background: #fff; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - width: 100%; - max-width: 1100px; - padding: 20px 22px 26px; - border: 1px solid #e6e9ee; -} - -/* Header */ -.formHeader { - padding-bottom: 10px; - border-bottom: 1px solid #e9ecef; - margin-bottom: 16px; -} -.formHeader h2 { - margin: 0; - color: #1f3b4d; - font-size: 20px; - font-weight: 600; -} - -/* Section titles */ -.sectionTitle { - margin: 0 0 12px; - color: #2b2f3b; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.6px; - font-weight: 700; -} - -/* Account widget (assignment) */ -.account-widget { - display: flex; - gap: 14px; - align-items: center; - padding: 12px; - border-radius: 4px; - background: #fbfcfd; - border: 1px dashed #d6e6ef; - color: #0a4b6b; -} -.account-icon { - width: 48px; - height: 48px; - background: #e9f4fb; - color: #0077a8; - border-radius: 4px; - display:flex; - align-items:center; - justify-content:center; - font-size:20px; -} -.account-info .account-title { - font-weight:700; -} -.account-info .account-action { - color: #0b63a7; - font-weight:700; - margin-top:4px; -} -.account-sub { - color:#667085; - font-size:12px; - margin-top:4px; -} - -/* Form layout */ -.contactFormBody { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 12px 18px; - align-items: start; - margin-bottom: 6px; -} - -/* Form groups */ -.formGroup { - display: flex; - flex-direction: column; - margin-bottom: 8px; -} -.formGroup.fullWidth { - grid-column: 1 / -1; -} - -/* Labels and controls */ -.formLabel { - font-size: 13px; - font-weight: 600; - color: #253244; - margin-bottom: 6px; -} -.required { color: #d93025; margin-left: 4px; } - -.formControl { - display: block; - width: 100%; - height: 36px; - padding: 6px 10px; - font-size: 13px; - color: #1f2937; - background: #fff; - border: 1px solid #d6dbe4; - border-radius: 4px; - box-sizing: border-box; -} -.formControl:focus { - outline: none; - border-color: #0b78b0; - box-shadow: 0 0 0 4px rgba(11,120,176,0.08); -} - -/* Hints / muted */ -.muted { - color: #6b7280; - font-size: 13px; - margin-bottom: 8px; -} -.formHint { - font-size: 12px; - color: #6b7280; - margin-top: 6px; -} - -/* Form actions */ -.formActions { - display: flex; - justify-content: space-between; - align-items: center; - border-top: 1px solid #e9eef3; - padding-top: 14px; - margin-top: 14px; -} -.formNote { - color: #555; - font-size: 13px; -} -.btnPrimary { - background-color: #198754; - border: 1px solid #198754; - color: #fff; - padding: 10px 18px; - font-size: 14px; - border-radius: 4px; - cursor: pointer; -} -.btnPrimary:disabled { - background-color: #c9c9c9; - border-color: #c9c9c9; - cursor: not-allowed; -} - -/* Responsive adjustments */ -@media (max-width: 992px) { - .contactFormBody { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 640px) { - .contactFormBody { - grid-template-columns: 1fr; - } - .formCard { - padding: 16px; - } -} \ No newline at end of file diff --git a/src/pages/contacts/form/ContactFormPage.js b/src/pages/contacts/form/ContactFormPage.js index ed326b69..35dffe11 100644 --- a/src/pages/contacts/form/ContactFormPage.js +++ b/src/pages/contacts/form/ContactFormPage.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { useNavigate, useParams } from "react-router-dom"; -import "./ContactFormPage.css"; +import "../../../styles/FormPage.css"; const ContactFormPage = () => { const navigate = useNavigate(); @@ -102,7 +102,7 @@ const ContactFormPage = () => { }; return ( -
+
    diff --git a/src/pages/followup/form/ContactFormPage.css b/src/pages/followup/form/ContactFormPage.css deleted file mode 100644 index 790e2fc1..00000000 --- a/src/pages/followup/form/ContactFormPage.css +++ /dev/null @@ -1,180 +0,0 @@ -/* Wrapper & card */ -.contactFormWrapper { - display: flex; - justify-content: center; - padding: 25px 20px; - background: #f5f6fa; - min-height: 100vh; - font-family: "Roboto", "Open Sans", Arial, sans-serif; -} - -.formCard { - background: #fff; - border-radius: 6px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - width: 100%; - max-width: 1100px; - padding: 20px 22px 26px; - border: 1px solid #e6e9ee; -} - -/* Header */ -.formHeader { - padding-bottom: 10px; - border-bottom: 1px solid #e9ecef; - margin-bottom: 16px; -} -.formHeader h2 { - margin: 0; - color: #1f3b4d; - font-size: 20px; - font-weight: 600; -} - -/* Section titles */ -.sectionTitle { - margin: 0 0 12px; - color: #2b2f3b; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.6px; - font-weight: 700; -} - -/* Account widget (assignment) */ -.account-widget { - display: flex; - gap: 14px; - align-items: center; - padding: 12px; - border-radius: 4px; - background: #fbfcfd; - border: 1px dashed #d6e6ef; - color: #0a4b6b; -} -.account-icon { - width: 48px; - height: 48px; - background: #e9f4fb; - color: #0077a8; - border-radius: 4px; - display:flex; - align-items:center; - justify-content:center; - font-size:20px; -} -.account-info .account-title { - font-weight:700; -} -.account-info .account-action { - color: #0b63a7; - font-weight:700; - margin-top:4px; -} -.account-sub { - color:#667085; - font-size:12px; - margin-top:4px; -} - -/* Form layout */ -.contactFormBody { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 12px 18px; - align-items: start; - margin-bottom: 6px; -} - -/* Form groups */ -.formGroup { - display: flex; - flex-direction: column; - margin-bottom: 8px; -} -.formGroup.fullWidth { - grid-column: 1 / -1; -} - -/* Labels and controls */ -.formLabel { - font-size: 13px; - font-weight: 600; - color: #253244; - margin-bottom: 6px; -} -.required { color: #d93025; margin-left: 4px; } - -.formControl { - display: block; - width: 100%; - height: 36px; - padding: 6px 10px; - font-size: 13px; - color: #1f2937; - background: #fff; - border: 1px solid #d6dbe4; - border-radius: 4px; - box-sizing: border-box; -} -.formControl:focus { - outline: none; - border-color: #0b78b0; - box-shadow: 0 0 0 4px rgba(11,120,176,0.08); -} - -/* Hints / muted */ -.muted { - color: #6b7280; - font-size: 13px; - margin-bottom: 8px; -} -.formHint { - font-size: 12px; - color: #6b7280; - margin-top: 6px; -} - -/* Form actions */ -.formActions { - display: flex; - justify-content: space-between; - align-items: center; - border-top: 1px solid #e9eef3; - padding-top: 14px; - margin-top: 14px; -} -.formNote { - color: #555; - font-size: 13px; -} -.btnPrimary { - background-color: #198754; - border: 1px solid #198754; - color: #fff; - padding: 10px 18px; - font-size: 14px; - border-radius: 4px; - cursor: pointer; -} -.btnPrimary:disabled { - background-color: #c9c9c9; - border-color: #c9c9c9; - cursor: not-allowed; -} - -/* Responsive adjustments */ -@media (max-width: 992px) { - .contactFormBody { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 640px) { - .contactFormBody { - grid-template-columns: 1fr; - } - .formCard { - padding: 16px; - } -} \ No newline at end of file diff --git a/src/pages/contacts/form/ContactFormPage.css b/src/styles/FormPage.css similarity index 97% rename from src/pages/contacts/form/ContactFormPage.css rename to src/styles/FormPage.css index 24d39ed7..0079d9c0 100644 --- a/src/pages/contacts/form/ContactFormPage.css +++ b/src/styles/FormPage.css @@ -1,5 +1,4 @@ -/* Contact Form Page */ -.contactFormPage { +.formPage { background: #f5f5f5; min-height: 100vh; padding: 0;