Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hover styling #150

Merged
merged 5 commits into from
Nov 11, 2024
Merged

hover styling #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
941d4a4
hover styling
sophiazlin Nov 3, 2024
2492758
more hover styling
sophiazlin Nov 3, 2024
98db380
styling 3
sophiazlin Nov 3, 2024
598ce38
styling 4
sophiazlin Nov 7, 2024
81785d4
styling 5
sophiazlin Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/components/AccountEditModal/AccountEditModal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,17 +91,15 @@
border: 1px solid var(--Dark-Blue-Grey, #9ca5c2);
}
.nonEditable {
background-color: #e7eeff;
padding-left: 15px;
border: 0cm;
/* background-color: #e7eeff; */
/* border: 0cm; */
color: #8f9bba;
cursor: not-allowed;
}

.editable {
background-color: white;
padding-left: 15px;
border: 1px solid #979797;
/* background-color: white; */
/* border: 1px solid #979797; */
color: #2b3674;
}
.inputField label {
Expand Down
13 changes: 13 additions & 0 deletions src/components/AccountEditModal/Password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export default function Password({ setShowSuccessModal }: Props) {
const [newPasswordError, setNewPasswordError] = useState("");
const [confirmNewPasswordError, setConfirmNewPasswordError] = useState("");

const [resetChangeTriggers, setResetChangeTriggers] = useState(false);

const resetErrors = () => {
setOldPasswordError("");
setNewPasswordError("");
Expand All @@ -33,6 +35,7 @@ export default function Password({ setShowSuccessModal }: Props) {
setNewPassword("");
setConfirmNewPassword("");
resetErrors();
setResetChangeTriggers(!resetChangeTriggers);
};

const handleSaveChanges = async (
Expand All @@ -41,6 +44,7 @@ export default function Password({ setShowSuccessModal }: Props) {
e.preventDefault();
resetErrors();
let error = false;
setResetChangeTriggers(!resetChangeTriggers);
if (oldPassword === "") {
setOldPasswordError("Old password cannot be blank");
error = true;
Expand Down Expand Up @@ -97,6 +101,9 @@ export default function Password({ setShowSuccessModal }: Props) {
type="password"
showError={oldPasswordError !== ""}
error={oldPasswordError}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={resetChangeTriggers}
/>
</div>
<div className={styles.inputField}>
Expand All @@ -108,6 +115,9 @@ export default function Password({ setShowSuccessModal }: Props) {
type="password"
showError={newPasswordError !== ""}
error={newPasswordError}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={resetChangeTriggers}
/>
</div>

Expand All @@ -120,6 +130,9 @@ export default function Password({ setShowSuccessModal }: Props) {
type="password"
showError={confirmNewPasswordError !== ""}
error={confirmNewPasswordError}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={resetChangeTriggers}
/>
</div>
<div className={styles.buttons}>
Expand Down
26 changes: 21 additions & 5 deletions src/components/AccountEditModal/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { internalRequest } from "@src/utils/requests";
import { HttpMethod, IUser } from "@/common_utils/types";
import styles from "./AccountEditModal.module.css";
import Chip from "../Chip/Chip";
import InputField from "../InputField/InputField";

interface Props {
setShowSuccessModal: (args: boolean) => void;
Expand Down Expand Up @@ -314,29 +315,35 @@ export default function Profile({ setShowSuccessModal }: Props) {
<div className={styles.inputFieldRow}>
<div className={styles.inputField}>
<label>First Name</label>
<input
<InputField
placeholder="First Name"
value={updatedFirstName}
onChange={(e) => setUpdatedFirstName(e.target.value)}
className={!edit ? styles.nonEditable : styles.editable}
readOnly={!edit}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={edit}
/>
</div>
<div className={styles.inputField}>
<label>Last Name</label>
<input
<InputField
placeholder="Last Name"
value={updatedLastName}
onChange={(e) => setUpdatedLastName(e.target.value)}
className={!edit ? styles.nonEditable : styles.editable}
readOnly={!edit}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={edit}
/>
</div>
</div>

<div className={styles.inputField}>
<label>Date of Birth</label>
<input
<InputField
placeholder="mm/dd/yyyy"
value={updatedBirthDateInput}
onChange={(e) => {
Expand All @@ -345,30 +352,39 @@ export default function Profile({ setShowSuccessModal }: Props) {
}}
className={!edit ? styles.nonEditable : styles.editable}
readOnly={!edit}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={edit}
/>
</div>

<div className={styles.inputField}>
<label>Phone</label>
<input
<InputField
placeholder="(123) 456-7890"
value={formatPhoneNumber(updatedPhoneNumber) || ""}
onChange={(e) => {
handlePhoneChange(e);
}}
className={!edit ? styles.nonEditable : styles.editable}
readOnly={!edit}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={edit}
/>
</div>

<div className={styles.inputField}>
<label>Email:</label>
<input
<InputField
placeholder="blankemail@gmail"
value={updatedEmail}
onChange={(e) => setUpdatedEmail(e.target.value)}
className={!edit ? styles.nonEditable : styles.editable}
readOnly={!edit}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={edit}
/>
</div>
{edit && (
Expand Down
5 changes: 5 additions & 0 deletions src/components/AddChapterModal/AddChapterModal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,11 @@
color: white;
cursor: pointer;
}

.submitButton:hover {
opacity: 50%;
}

.disabled {
background-color: #e3eafc;
color: #2b3674;
Expand Down
13 changes: 12 additions & 1 deletion src/components/AddChapterModal/AddChapterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ const AddChapterModal = ({
useState<IVolunteerTableEntry[]>();
const [loading, setLoading] = useState(false);

const [resetChangeTriggers, setResetChangeTriggers] = useState(false);

const COUNTRIES = Country.getAllCountries()
.sort((a, b) => {
if (a.name === "United States") {
Expand Down Expand Up @@ -110,6 +112,7 @@ const AddChapterModal = ({
setLocCity("");
setChapterPresidentObject(null);
resetErrors();
setResetChangeTriggers(!resetChangeTriggers);
};

useEffect(() => {
Expand Down Expand Up @@ -150,6 +153,7 @@ const AddChapterModal = ({
) => {
e.preventDefault();
resetErrors();
setResetChangeTriggers(!resetChangeTriggers);
let error = false;

if (chapterName === "") {
Expand Down Expand Up @@ -215,6 +219,9 @@ const AddChapterModal = ({
onChange={(e) => setChapterName(e.target.value)}
showError={chapterNameError !== ""}
error={chapterNameError}
defaultBackgroundColor="#e3eafc"
hoverColor="#ffffff"
resetChangeTrigger={resetChangeTriggers}
/>
</div>

Expand All @@ -235,6 +242,7 @@ const AddChapterModal = ({
}}
showError={countryError !== ""}
error={countryError}
resetChangeTriggers={resetChangeTriggers}
/>
</div>
{locCountry === "" ? null : (
Expand All @@ -252,6 +260,7 @@ const AddChapterModal = ({
}}
showError={stateError !== ""}
error={stateError}
resetChangeTriggers={resetChangeTriggers}
/>
<AuthDropdown
required={true}
Expand All @@ -264,6 +273,7 @@ const AddChapterModal = ({
}}
showError={cityError !== ""}
error={cityError}
resetChangeTriggers={resetChangeTriggers}
/>
</div>
)}
Expand Down Expand Up @@ -291,6 +301,7 @@ const AddChapterModal = ({
}}
showError={chapterPresidentError !== ""}
error={chapterPresidentError}
resetChangeTriggers={resetChangeTriggers}
/>
</div>
<div className={styles.buttons}>
Expand All @@ -299,7 +310,7 @@ const AddChapterModal = ({
onClick={reset}
className={`${styles.submitButton} ${styles.disabled}`}
>
Discard
Cancel
</button>
<button
type="submit"
Expand Down
5 changes: 5 additions & 0 deletions src/components/AddVolunteerModal/AddVolunteerModal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,11 @@
color: white;
cursor: pointer;
}

.submitButton:hover {
opacity: 50%;
}

.disabled {
background-color: #e3eafc;
color: #2b3674;
Expand Down
2 changes: 1 addition & 1 deletion src/components/AddVolunteerModal/AddVolunteerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const AddVolunteerModal = ({
onClick={reset}
className={`${styles.submitButton} ${styles.disabled}`}
>
Discard
Cancel
</button>
<button
type="submit"
Expand Down
4 changes: 4 additions & 0 deletions src/components/ChapterGrid/ChapterGrid.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
font-weight: 600;
}

.table-header-database-button:hover {
opacity: 50%;
}

.addChapterModalContent {
width: 60%;
height: 70%;
Expand Down
4 changes: 4 additions & 0 deletions src/components/ChapterGrid/Row/Row.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,7 @@
font-size: 14px;
font-weight: 600;
}

.DatabaseButton:hover {
opacity: 50%;
}
3 changes: 3 additions & 0 deletions src/components/ChapterInfo/Cell/Cell.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
font-size: 14px;
font-weight: 500;
}
.cellTitle > p:hover {
color: var(--hover-color);
}

.cellContent {
display: flex;
Expand Down
6 changes: 5 additions & 1 deletion src/components/ChapterInfo/Cell/Cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface CellProps {
link?: () => void;
cellStyle?: React.CSSProperties;
iconStyle?: React.CSSProperties;
hoverColor?: string;
}

export function Cell({ cell }: { cell: CellProps }) {
Expand All @@ -29,7 +30,10 @@ export function Cell({ cell }: { cell: CellProps }) {
{cell.icon}
</div>
<div className={styles.cellInfo}>
<div className={styles.cellTitle}>
<div
className={styles.cellTitle}
style={{ "--hover-color": cell.hoverColor } as React.CSSProperties}
>
<p>{cell.title}</p>
</div>
<div className={styles.cellContent}>
Expand Down
29 changes: 21 additions & 8 deletions src/components/ChapterInfo/ChapterInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
Wrench,
HandTransferIcon,
} from "@src/app/icons";
import { IChapter } from "@/common_utils/types";
import { IChapter, IUser, Role } from "@/common_utils/types";
import { RootState } from "@src/redux/rootReducer";
import { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import Modal from "@src/components/Modal/Modal";
import EditChapterModal from "@src/components/EditChapterModal/EditChapterModal";
import DeleteChapterModal from "@src/components/DeleteChapterModal/DeleteChapterModal";
Expand All @@ -32,6 +34,8 @@ interface ChapterInfoProps {
}

export default function ChapterInfo(params: ChapterInfoProps) {
const user = useSelector<RootState>((state) => state.auth) as IUser;

const [showEditModal, setShowEditModal] = useState(false);
const [showEditSuccessModal, setShowEditSuccessModal] = useState(false);
const [editSuccessLink, setEditSuccessLink] = useState<string>("");
Expand Down Expand Up @@ -93,23 +97,32 @@ export default function ChapterInfo(params: ChapterInfoProps) {
title: "Edit Chapter Profile",
link: () => setShowEditModal(true),
icon: <Wrench />,
hoverColor: "#2B3674",
},
{
title: "Chapter Transfer",
title: "Leadership Transfer",
link: () => setShowTransferModal(true),
icon: <HandTransferIcon />,
hoverColor: "#2B3674",
},
{
title: "Add Volunteer",
link: () => setShowAddVolunteerModal(true),
icon: <PersonPlusIcon className=""></PersonPlusIcon>,
hoverColor: "#2B3674",
},
{
title: "Delete Chapter",
link: () => setShowDeleteModal(true),
icon: <RedTrashCan></RedTrashCan>,
iconStyle: { backgroundColor: "#FCDCE2" },
},
...(user.role === Role.NONPROFIT_DIRECTOR ||
user.role === Role.NONPROFIT_ADMIN
? [
{
title: "Delete Chapter",
link: () => setShowDeleteModal(true),
icon: <RedTrashCan></RedTrashCan>,
iconStyle: { backgroundColor: "#FCDCE2" },
hoverColor: "#EA4335",
},
]
: []),
] as CellProps[];
}, [params.chapter]);

Expand Down
Loading
Loading