Skip to content

Commit

Permalink
Fix account page (#108)
Browse files Browse the repository at this point in the history 
* Make verification code copyable

* Spacing

* Make code input copyable

* Disable deleting all email contacts

* Make contact adding cancelable

* Tag color fix

* Minor style changes

* Space out inputs

* TODO

* Fix increment arrows on desktop

* Set limits on graduation year

* Remove todo hehe

* Replace X with actual x icon

* Fix ying's requests <3

Co-authored-by: Ying Xuan <engyingxuan@gmail.com>
  • Loading branch information
@printer83mph @eyingxuan
printer83mph and eyingxuan authored Oct 29, 2021
1 parent 3dd0c43 commit 1207285
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 39 deletions.
11 changes: 4 additions & 7 deletions backend/Platform/templates/emails/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,15 @@
margin-left: -3px;
}

.verification-block {
.verification-number {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 55px;
margin: 3px;
border-radius: 2px;
background-color: #E7E7E7;
display:flex;
justify-content: center;
align-items: center;
}

.verification-number {
font-weight: 600;
font-size: 20px;
color: #767676;
Expand Down
8 changes: 3 additions & 5 deletions backend/Platform/templates/emails/email_verification.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@

<div id="verification-div">
{% for num in verification_code %}
<div class="verification-block">
<span class="verification-number">
{{ num }}
</span>
</div>
<span class="verification-number">
{{ num }}
</span>
{% endfor %}
</div>

Expand Down
52 changes: 34 additions & 18 deletions frontend/components/Accounts/Forms/ContactInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const FieldInput = ({
setShowAdd,
setVerifyContact,
setShowModal,
onCancel,
}) => {
const { addToast } = useToasts();
const [text, setText] = useState("");
Expand Down Expand Up @@ -90,7 +91,14 @@ const FieldInput = ({
setShowAdd(true);
};

return <EditInput value={text} onChange={onChange} onConfirm={onConfirm} />;
return (
<EditInput
value={text}
onChange={onChange}
onConfirm={onConfirm}
onCancel={onCancel}
/>
);
};

const MoreIndicator = ({
Expand Down Expand Up @@ -163,7 +171,7 @@ export const ExistingInput = ({
{isVerified && <Indicator src="/greentick.png" />}
<span>{text}</span>
{isPrimary && (
<Tag>
<Tag variant="primary">
<span>PRIMARY</span>
</Tag>
)}
Expand All @@ -172,13 +180,15 @@ export const ExistingInput = ({
<span>UNVERIFIED</span>
</Tag>
)}
<MoreIndicator
isPrimary={isPrimary}
isVerified={isVerified}
onDelete={() => setModalIsOpen(true)}
onMakePrimary={onMakePrimary}
onReverify={onReverify}
/>
{!isVerified || onDelete ? (
<MoreIndicator
isPrimary={isPrimary}
isVerified={isVerified}
onDelete={() => setModalIsOpen(true)}
onMakePrimary={onMakePrimary}
onReverify={onReverify}
/>
) : undefined}
<DeleteModal
type={contactType}
contact={text}
Expand All @@ -199,12 +209,13 @@ export const AddInput = ({ text, onClick, margin }) => (
</AddButton>
);

export const EditInput = ({ onConfirm, value, onChange }) => (
export const EditInput = ({ onConfirm, value, onChange, onCancel }) => (
<Flex childMargin="0.2rem" width="100%">
<FormInput height="2rem" value={value} onChange={onChange} />
<Button type="button" onClick={onConfirm}>
Confirm
</Button>
<Indicator src="/x-circle.svg" width="1.3rem" onClick={onCancel} />
</Flex>
);

Expand Down Expand Up @@ -238,14 +249,18 @@ ${contactType === ContactType.Email ? "email" : "phone messages"} again.`);
}
setShowModal(true);
}}
onDelete={async () => {
try {
await deleteContact(contactType, id);
} catch (e) {
addToast("Delete contact failed");
}
mutate();
}}
onDelete={
contactType === "email" && infolist.length === 1
? undefined
: async () => {
try {
await deleteContact(contactType, id);
} catch (e) {
addToast("Delete contact failed");
}
mutate();
}
}
onMakePrimary={() => mutate(id, { primary: true })}
key={id}
isPrimary={primary}
Expand All @@ -268,6 +283,7 @@ ${contactType === ContactType.Email ? "email" : "phone messages"} again.`);
setShowAdd={setShowAdd}
setShowModal={setShowModal}
setVerifyContact={setVerifyContact}
onCancel={() => setShowAdd(true)}
/>
)}
<VerificationModal
Expand Down
1 change: 1 addition & 0 deletions frontend/components/Accounts/Modals/Verification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const VerificationForm = (props: VerificationFormProps) => {
return (
<ReactCodeInput
name="verification"
type="tel"
fields={6}
onChange={handleInputChange}
ref={codeInput}
Expand Down
17 changes: 15 additions & 2 deletions frontend/components/Accounts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,17 @@ import ContactInput from "./Forms/ContactInput";
import { FormikSelectInput } from "./Forms/SelectInput";
import { ContactType, User } from "../../types";

const currentYear = new Date().getFullYear();

const FormSchema = Yup.object({
first_name: Yup.string().required("Required"),
student: Yup.object({
graduation_year: Yup.number().positive().integer().nullable(),
graduation_year: Yup.number()
.positive()
.integer()
.nullable()
.min(currentYear)
.max(currentYear + 10),
}),
});

Expand Down Expand Up @@ -115,6 +122,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
col={2}
row={1}
alignItems="start"
margin
>
<Flex
flexDirection="column"
Expand All @@ -130,6 +138,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
/>
</Flex>
</FormGroupItem>

<FormGroupItem
col={1}
row={2}
Expand Down Expand Up @@ -175,6 +184,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
fieldName="student.school"
/>
</FormGroupItem>

<FormGroupItem col={1} row={2}>
<Text weight="400">Major(s)</Text>
</FormGroupItem>
Expand All @@ -184,6 +194,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
fieldName="student.major"
/>
</FormGroupItem>

<FormGroupItem col={1} row={3}>
<Text weight="400">Grad Year</Text>
</FormGroupItem>
Expand All @@ -196,7 +207,9 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
</FormGroupGrid>
</>
)}
<Button margin="1.5rem 0 0 0">Save</Button>
<Button marginTop="1.7rem" fontSize="1.2rem">
Save
</Button>
</Form>
</Formik>
</div>
Expand Down
33 changes: 26 additions & 7 deletions frontend/components/Accounts/ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export const Text = styled.span<TextProps>`
export const FormGroupHeader = styled.h3`
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
`;

export const FormGroupGrid = styled.div`
Expand All @@ -104,13 +105,15 @@ interface FormGroupItemProps {
col: number;
row: number;
alignItems?: string;
margin?: boolean;
}

export const FormGroupItem = styled.div<FormGroupItemProps>`
grid-column: ${(props) => props.col};
grid-row: ${(props) => props.row};
display: flex;
align-items: ${(props) => (props.alignItems ? props.alignItems : "center")};
margin-bottom: ${(props) => (props.margin ? ".8rem" : "0")};
`;

export const FormInput = styled.input<{ height?: string; error?: boolean }>`
Expand All @@ -124,16 +127,26 @@ export const FormInput = styled.input<{ height?: string; error?: boolean }>`
padding-left: 0.3rem;
`;

export const Indicator = styled.img<{ paddingTop?: string }>`
width: 1rem;
export const Indicator = styled.img<{ paddingTop?: string; width?: string }>`
width: ${(props) => props.width ?? "1rem"};
padding-top: ${(props) => props.paddingTop};
cursor: pointer;
&:hover {
opacity: 0.5;
}
`;

export const Tag = styled.div`
const TagVariants = {
default: { col: "#767676", bg: "#e7e7e7" },
primary: { col: "#455f7a", bg: "#adcced" },
};

export const Tag = styled.div<{ variant?: keyof typeof TagVariants }>`
height: 1rem;
margin-top: 0.35rem;
background-color: #e7e7e7;
background-color: ${({ variant = "default" }) => TagVariants[variant].bg};
color: ${({ variant = "default" }) => TagVariants[variant].col};
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -143,7 +156,6 @@ export const Tag = styled.div`
margin: 0.2rem;
font-size: 0.5rem;
font-weight: 600;
color: #767676;
}
`;

Expand All @@ -158,15 +170,22 @@ export const AddButton = styled.button<{ marginTop?: string }>`
margin-top: ${(props) => props.marginTop};
`;

export const Button = styled.button<{ margin?: string }>`
background-color: #209cee;
export const Button = styled.button<{
margin?: string;
backgroundColor?: string;
marginTop?: string;
fontSize?: string;
}>`
background-color: ${(props) => props.backgroundColor || "#209cee"};
color: #ffffff;
border: none;
border-radius: 0.2rem;
cursor: pointer;
font-size: ${(props) => props.fontSize};
font-weight: 600;
padding: 0.5rem 0.7rem 0.5rem 0.7rem;
margin: ${(props) => props.margin};
margin-top: ${(props) => props.marginTop};
`;

export const selectStyles = {
Expand Down
1 change: 1 addition & 0 deletions frontend/public/x-circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1207285

Please sign in to comment.