From d3a7ad75b164a622a4ea2d6da5110e5ba370fc83 Mon Sep 17 00:00:00 2001
From: Ying Xuan <engyingxuan@gmail.com>
Date: Sun, 3 Oct 2021 14:45:49 -0400
Subject: [PATCH 01/14] Make verification code copyable

---
 backend/Platform/templates/emails/base.html           | 11 ++++-------
 .../Platform/templates/emails/email_verification.html |  8 +++-----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/backend/Platform/templates/emails/base.html b/backend/Platform/templates/emails/base.html
index d4887bac..a5db3b97 100644
--- a/backend/Platform/templates/emails/base.html
+++ b/backend/Platform/templates/emails/base.html
@@ -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;
diff --git a/backend/Platform/templates/emails/email_verification.html b/backend/Platform/templates/emails/email_verification.html
index e911bcc9..002c2774 100644
--- a/backend/Platform/templates/emails/email_verification.html
+++ b/backend/Platform/templates/emails/email_verification.html
@@ -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>
 

From ed2f639ea5c017d54aea4cb34e9bacbec24b0e17 Mon Sep 17 00:00:00 2001
From: Ying Xuan <engyingxuan@gmail.com>
Date: Sun, 3 Oct 2021 14:53:56 -0400
Subject: [PATCH 02/14] Spacing

---
 backend/Platform/templates/emails/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/Platform/templates/emails/base.html b/backend/Platform/templates/emails/base.html
index a5db3b97..7ad2f242 100644
--- a/backend/Platform/templates/emails/base.html
+++ b/backend/Platform/templates/emails/base.html
@@ -42,7 +42,7 @@
         }
 
         .verification-number {
-          display:inline-flex;
+          display: inline-flex;
           justify-content: center;
           align-items: center;
           width: 40px;

From d229f112cf82e146b228272351212eebf4467fab Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 12:48:33 -0400
Subject: [PATCH 03/14] Make code input copyable

---
 frontend/components/Accounts/Modals/Verification.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/Accounts/Modals/Verification.tsx b/frontend/components/Accounts/Modals/Verification.tsx
index 677721fe..1cf3399c 100644
--- a/frontend/components/Accounts/Modals/Verification.tsx
+++ b/frontend/components/Accounts/Modals/Verification.tsx
@@ -45,6 +45,7 @@ const VerificationForm = (props: VerificationFormProps) => {
     return (
         <ReactCodeInput
             name="verification"
+            type="number"
             fields={6}
             onChange={handleInputChange}
             ref={codeInput}

From 792194e480f2323af551e94362116df357223836 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 13:21:20 -0400
Subject: [PATCH 04/14] Disable deleting all email contacts

---
 .../Accounts/Forms/ContactInput.tsx           | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/components/Accounts/Forms/ContactInput.tsx b/frontend/components/Accounts/Forms/ContactInput.tsx
index 80104527..48b8c140 100644
--- a/frontend/components/Accounts/Forms/ContactInput.tsx
+++ b/frontend/components/Accounts/Forms/ContactInput.tsx
@@ -172,13 +172,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}
@@ -238,14 +240,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}

From f0010e06203acafdc874499ce3deca0b121226e3 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 13:43:40 -0400
Subject: [PATCH 05/14] Make contact adding cancelable

---
 .../components/Accounts/Forms/ContactInput.tsx | 18 +++++++++++++++---
 frontend/components/Accounts/ui.ts             | 14 +++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/components/Accounts/Forms/ContactInput.tsx b/frontend/components/Accounts/Forms/ContactInput.tsx
index 48b8c140..719010fc 100644
--- a/frontend/components/Accounts/Forms/ContactInput.tsx
+++ b/frontend/components/Accounts/Forms/ContactInput.tsx
@@ -55,6 +55,7 @@ const FieldInput = ({
     setShowAdd,
     setVerifyContact,
     setShowModal,
+    onCancel,
 }) => {
     const { addToast } = useToasts();
     const [text, setText] = useState("");
@@ -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 = ({
@@ -163,7 +171,7 @@ export const ExistingInput = ({
             {isVerified && <Indicator src="/greentick.png" />}
             <span>{text}</span>
             {isPrimary && (
-                <Tag>
+                <Tag blue>
                     <span>PRIMARY</span>
                 </Tag>
             )}
@@ -201,12 +209,15 @@ 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>
+        <Button type="button" cancel onClick={onCancel}>
+            X
+        </Button>
     </Flex>
 );
 
@@ -274,6 +285,7 @@ ${contactType === ContactType.Email ? "email" : "phone messages"} again.`);
                     setShowAdd={setShowAdd}
                     setShowModal={setShowModal}
                     setVerifyContact={setVerifyContact}
+                    onCancel={() => setShowAdd(true)}
                 />
             )}
             <VerificationModal
diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index 5e245be1..b406525c 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -130,20 +130,21 @@ export const Indicator = styled.img<{ paddingTop?: string }>`
     cursor: pointer;
 `;
 
-export const Tag = styled.div`
+export const Tag = styled.div<{ blue?: boolean }>`
     height: 1rem;
     margin-top: 0.35rem;
-    background-color: #e7e7e7;
+    ${({ blue }) => `background-color: ${blue ? "#adcced" : "#e7e7e7"};`}
+    ${({ blue }) => `color: ${blue ? "#344a61" : "#767676"};`}
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.1rem;
+    box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.25);
 
     & > * {
         margin: 0.2rem;
         font-size: 0.5rem;
         font-weight: 600;
-        color: #767676;
     }
 `;
 
@@ -158,8 +159,11 @@ 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;
+    cancel?: boolean;
+}>`
+    background-color: ${(props) => (props.cancel ? "#93a0ad" : "#209cee")};
     color: #ffffff;
     border: none;
     border-radius: 0.2rem;

From a73ab2db449215b67aa6afeff5062820814bff01 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 13:46:17 -0400
Subject: [PATCH 06/14] Tag color fix

---
 frontend/components/Accounts/ui.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index b406525c..21874eb1 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -139,7 +139,8 @@ export const Tag = styled.div<{ blue?: boolean }>`
     align-items: center;
     justify-content: center;
     border-radius: 0.1rem;
-    box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.25);
+    ${({ blue }) =>
+        blue ? "" : "box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.25);"}
 
     & > * {
         margin: 0.2rem;

From 2fee6befe9f1df4a0dc42e84c48b8f94f3c1d6a8 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 13:58:56 -0400
Subject: [PATCH 07/14] Minor style changes

---
 frontend/components/Accounts/index.tsx | 7 ++++++-
 frontend/components/Accounts/ui.ts     | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Accounts/index.tsx b/frontend/components/Accounts/index.tsx
index d4fbe705..4a1df99a 100644
--- a/frontend/components/Accounts/index.tsx
+++ b/frontend/components/Accounts/index.tsx
@@ -196,7 +196,12 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                     </FormGroupGrid>
                                 </>
                             )}
-                            <Button margin="1.5rem 0 0 0">Save</Button>
+                            <Button
+                                margin="1.5rem 0 0 0"
+                                style={{ fontSize: "1.2rem" }}
+                            >
+                                Save
+                            </Button>
                         </Form>
                     </Formik>
                 </div>
diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index 21874eb1..d2c52b15 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -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`
@@ -134,7 +135,7 @@ export const Tag = styled.div<{ blue?: boolean }>`
     height: 1rem;
     margin-top: 0.35rem;
     ${({ blue }) => `background-color: ${blue ? "#adcced" : "#e7e7e7"};`}
-    ${({ blue }) => `color: ${blue ? "#344a61" : "#767676"};`}
+    ${({ blue }) => `color: ${blue ? "#455f7a" : "#767676"};`}
     display: flex;
     align-items: center;
     justify-content: center;

From 34ae559a9d1eef575d908035467182c7331e5ae0 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 14:02:55 -0400
Subject: [PATCH 08/14] Space out inputs

---
 frontend/components/Accounts/index.tsx | 4 ++++
 frontend/components/Accounts/ui.ts     | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/frontend/components/Accounts/index.tsx b/frontend/components/Accounts/index.tsx
index 4a1df99a..560f4cfa 100644
--- a/frontend/components/Accounts/index.tsx
+++ b/frontend/components/Accounts/index.tsx
@@ -115,6 +115,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                     col={2}
                                     row={1}
                                     alignItems="start"
+                                    margin
                                 >
                                     <Flex
                                         flexDirection="column"
@@ -130,6 +131,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                         />
                                     </Flex>
                                 </FormGroupItem>
+
                                 <FormGroupItem
                                     col={1}
                                     row={2}
@@ -175,6 +177,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                                 fieldName="student.school"
                                             />
                                         </FormGroupItem>
+
                                         <FormGroupItem col={1} row={2}>
                                             <Text weight="400">Major(s)</Text>
                                         </FormGroupItem>
@@ -184,6 +187,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                                 fieldName="student.major"
                                             />
                                         </FormGroupItem>
+
                                         <FormGroupItem col={1} row={3}>
                                             <Text weight="400">Grad Year</Text>
                                         </FormGroupItem>
diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index d2c52b15..29c45b09 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -105,6 +105,7 @@ interface FormGroupItemProps {
     col: number;
     row: number;
     alignItems?: string;
+    margin?: boolean;
 }
 
 export const FormGroupItem = styled.div<FormGroupItemProps>`
@@ -112,6 +113,7 @@ export const FormGroupItem = styled.div<FormGroupItemProps>`
     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 }>`

From d6fcf38439cf2bd6570f6ed9471d5dd58377b102 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 10 Oct 2021 14:03:55 -0400
Subject: [PATCH 09/14] TODO

---
 frontend/components/Accounts/Forms/Input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/Accounts/Forms/Input.tsx b/frontend/components/Accounts/Forms/Input.tsx
index da6a5d06..47c1289f 100644
--- a/frontend/components/Accounts/Forms/Input.tsx
+++ b/frontend/components/Accounts/Forms/Input.tsx
@@ -5,6 +5,7 @@ import { FormInput } from "../ui";
 export const FormikInput = ({ fieldName, ...props }) => {
     const [field, meta] = useField(fieldName);
 
+    // TODO: form validation (year should be constrained to current + 10)
     return (
         <FormInput
             /* eslint-disable */

From 2797de88e0b7ac4b13814b3ad8cbc1b7ba7d02e7 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Thu, 21 Oct 2021 19:10:06 -0400
Subject: [PATCH 10/14] Fix increment arrows on desktop

---
 frontend/components/Accounts/Modals/Verification.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/Accounts/Modals/Verification.tsx b/frontend/components/Accounts/Modals/Verification.tsx
index 1cf3399c..92a1e5b4 100644
--- a/frontend/components/Accounts/Modals/Verification.tsx
+++ b/frontend/components/Accounts/Modals/Verification.tsx
@@ -45,7 +45,7 @@ const VerificationForm = (props: VerificationFormProps) => {
     return (
         <ReactCodeInput
             name="verification"
-            type="number"
+            type="tel"
             fields={6}
             onChange={handleInputChange}
             ref={codeInput}

From 539dc3923f6b745f53ab108297b0b8a248c0c794 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Thu, 21 Oct 2021 19:20:20 -0400
Subject: [PATCH 11/14] Set limits on graduation year

---
 frontend/components/Accounts/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Accounts/index.tsx b/frontend/components/Accounts/index.tsx
index 560f4cfa..bb889aed 100644
--- a/frontend/components/Accounts/index.tsx
+++ b/frontend/components/Accounts/index.tsx
@@ -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),
     }),
 });
 

From 6c1a5cc38fc5875e7c472b750e952f3da04277c4 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Thu, 21 Oct 2021 19:23:45 -0400
Subject: [PATCH 12/14] Remove todo hehe

---
 frontend/components/Accounts/Forms/Input.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/components/Accounts/Forms/Input.tsx b/frontend/components/Accounts/Forms/Input.tsx
index 47c1289f..da6a5d06 100644
--- a/frontend/components/Accounts/Forms/Input.tsx
+++ b/frontend/components/Accounts/Forms/Input.tsx
@@ -5,7 +5,6 @@ import { FormInput } from "../ui";
 export const FormikInput = ({ fieldName, ...props }) => {
     const [field, meta] = useField(fieldName);
 
-    // TODO: form validation (year should be constrained to current + 10)
     return (
         <FormInput
             /* eslint-disable */

From 37e6d482f45e1a256b7681abb236dd1526f4c157 Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Sun, 24 Oct 2021 12:32:44 -0400
Subject: [PATCH 13/14] Replace X with actual x icon

---
 frontend/components/Accounts/Forms/ContactInput.tsx | 4 +---
 frontend/components/Accounts/ui.ts                  | 8 ++++++--
 frontend/public/x-circle.svg                        | 1 +
 3 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 frontend/public/x-circle.svg

diff --git a/frontend/components/Accounts/Forms/ContactInput.tsx b/frontend/components/Accounts/Forms/ContactInput.tsx
index 719010fc..c6245b93 100644
--- a/frontend/components/Accounts/Forms/ContactInput.tsx
+++ b/frontend/components/Accounts/Forms/ContactInput.tsx
@@ -215,9 +215,7 @@ export const EditInput = ({ onConfirm, value, onChange, onCancel }) => (
         <Button type="button" onClick={onConfirm}>
             Confirm
         </Button>
-        <Button type="button" cancel onClick={onCancel}>
-            X
-        </Button>
+        <Indicator src="/x-circle.svg" width="1.3rem" onClick={onCancel} />
     </Flex>
 );
 
diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index 29c45b09..e5a54338 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -127,10 +127,14 @@ 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<{ blue?: boolean }>`
diff --git a/frontend/public/x-circle.svg b/frontend/public/x-circle.svg
new file mode 100644
index 00000000..405cdc11
--- /dev/null
+++ b/frontend/public/x-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
\ No newline at end of file

From 38c3aaa17a3a7ca5556daad58778ca6e3392d97f Mon Sep 17 00:00:00 2001
From: printer83mph <printer.83mph@gmail.com>
Date: Fri, 29 Oct 2021 17:21:09 -0400
Subject: [PATCH 14/14] Fix ying's requests <3

---
 .../Accounts/Forms/ContactInput.tsx           |  2 +-
 frontend/components/Accounts/index.tsx        |  5 +----
 frontend/components/Accounts/ui.ts            | 21 ++++++++++++-------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Accounts/Forms/ContactInput.tsx b/frontend/components/Accounts/Forms/ContactInput.tsx
index c6245b93..d90308e5 100644
--- a/frontend/components/Accounts/Forms/ContactInput.tsx
+++ b/frontend/components/Accounts/Forms/ContactInput.tsx
@@ -171,7 +171,7 @@ export const ExistingInput = ({
             {isVerified && <Indicator src="/greentick.png" />}
             <span>{text}</span>
             {isPrimary && (
-                <Tag blue>
+                <Tag variant="primary">
                     <span>PRIMARY</span>
                 </Tag>
             )}
diff --git a/frontend/components/Accounts/index.tsx b/frontend/components/Accounts/index.tsx
index bb889aed..4ef08293 100644
--- a/frontend/components/Accounts/index.tsx
+++ b/frontend/components/Accounts/index.tsx
@@ -207,10 +207,7 @@ const Accounts = ({ user: initialUser }: { user: User }) => {
                                     </FormGroupGrid>
                                 </>
                             )}
-                            <Button
-                                margin="1.5rem 0 0 0"
-                                style={{ fontSize: "1.2rem" }}
-                            >
+                            <Button marginTop="1.7rem" fontSize="1.2rem">
                                 Save
                             </Button>
                         </Form>
diff --git a/frontend/components/Accounts/ui.ts b/frontend/components/Accounts/ui.ts
index e5a54338..fcaeacec 100644
--- a/frontend/components/Accounts/ui.ts
+++ b/frontend/components/Accounts/ui.ts
@@ -137,17 +137,20 @@ export const Indicator = styled.img<{ paddingTop?: string; width?: string }>`
     }
 `;
 
-export const Tag = styled.div<{ blue?: boolean }>`
+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;
-    ${({ blue }) => `background-color: ${blue ? "#adcced" : "#e7e7e7"};`}
-    ${({ blue }) => `color: ${blue ? "#455f7a" : "#767676"};`}
+    background-color: ${({ variant = "default" }) => TagVariants[variant].bg};
+    color: ${({ variant = "default" }) => TagVariants[variant].col};
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.1rem;
-    ${({ blue }) =>
-        blue ? "" : "box-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.25);"}
 
     & > * {
         margin: 0.2rem;
@@ -169,16 +172,20 @@ export const AddButton = styled.button<{ marginTop?: string }>`
 
 export const Button = styled.button<{
     margin?: string;
-    cancel?: boolean;
+    backgroundColor?: string;
+    marginTop?: string;
+    fontSize?: string;
 }>`
-    background-color: ${(props) => (props.cancel ? "#93a0ad" : "#209cee")};
+    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 = {