mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 08:03:13 +00:00
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
This commit is contained in:
Adam Moussa
parent
7db23a5597
commit
2dcb140d10
6 changed files with 4 additions and 545 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="contactFormPage">
|
||||
<div className="formPage">
|
||||
<div className="panel panel-default panel-connected">
|
||||
<div className="panel-body">
|
||||
<ol className="breadcrumb breadcrumb-alt">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
/* Contact Form Page */
|
||||
.contactFormPage {
|
||||
.formPage {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
Loading…
Add table
Reference in a new issue