Fix style inconsistencies (#471)

* fix up qualifier page styles

* make navbar look like figma spacing

Author: MattPereira

frontend/src/components/Inputs/Chip.tsx

@@ -58,7 +58,7 @@ function Chip({
       onClick={handleClick}
       className={combineClasses(
         `${variant}-chip`,
-        "px-2",
+        "px-4",
         "paragraph-3",
         active && "active",
         addClass

frontend/src/pages/Authentication/LoginForm.tsx

@@ -24,7 +24,7 @@ export default function LoginForm() {
 
   return (
     <div>
-      <h3 className="mb-10 text-4xl font-bold">Log in</h3>
+      <h3 className="mb-8 text-4xl font-bold">Log in</h3>
       <form onSubmit={handleSubmit(onSubmit)} noValidate>
         <TextField
           label="Email"

frontend/src/pages/QualifierPage/QualifierComponents.tsx

@@ -13,7 +13,7 @@ function QualifierTitle({ children, title }: QualifierTitleProps) {
   return (
     <Fragment>
       <h1 className="title-2 mt-6">{title}</h1>
-      <p className="paragraph-1 row justify-center mt-3">{children}</p>
+      <p className="paragraph-1 row justify-center my-3">{children}</p>
     </Fragment>
   );
 }

frontend/src/pages/QualifierPage/QualifierPageRoles.tsx

@@ -65,23 +65,35 @@ function CopRoles({ copDatum }: CopRolesProps) {
 
   return (
     <div className="row fill flex-center-x my-1">
-      <div className="col-7">
-        <div className="row align-center my-2">
-          <copDatum.icon
-            fill="black"
-            strokeWidth="0.2"
-            height="21"
-            aria-hidden="true"
-          />
-          <span className="title-4 ml-1">{copDatum.title}</span>
+      <div className="col-8">
+        <div className="row align-center my-3 justify-between">
+          <div className="flex items-center">
+            <copDatum.icon
+              fill="black"
+              strokeWidth="0.2"
+              height="21"
+              aria-hidden="true"
+            />
+            <span className="title-4 ml-1">{copDatum.title}</span>
+          </div>
+          <span
+            className="links"
+            tabIndex={0}
+            role="button"
+            aria-pressed={isAllSelected}
+            onClick={handleSelectAll}
+            onKeyDown={(e) => onKey(handleSelectAll, "Enter")(e)}
+          >
+            {isAllSelected ? "Deselect all" : "Select all"}
+          </span>
         </div>
         <div>
           {copDatum.roles.map((role, index) => {
             return (
               <Chip
                 key={index}
                 variant="multi"
-                addClass="mr-2 mb-2"
+                addClass="mr-4 mb-4"
                 checked={isRoleChecked[index]}
                 value={role}
                 onClick={(active, value) => {
@@ -95,18 +107,6 @@ function CopRoles({ copDatum }: CopRolesProps) {
           })}
         </div>
       </div>
-      <div className="col-1 text-right">
-        <span
-          className="links"
-          tabIndex={0}
-          role="button"
-          aria-pressed={isAllSelected}
-          onClick={handleSelectAll}
-          onKeyDown={(e) => onKey(handleSelectAll, "Enter")(e)}
-        >
-          {isAllSelected ? "Deselect all" : "Select all"}
-        </span>
-      </div>
     </div>
   );
 }

frontend/src/tw-components/HeaderNav.tsx

@@ -35,7 +35,7 @@ function HeaderNav() {
   };
 
   return (
-    <header className="h-16 py-1 px-3 w-full flex items-center justify-between shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
+    <header className="h-16 py-1 px-3 w-full flex items-center justify-between lg:justify-around shadow-[-1px_1px_2px_rgb(51,51,51,0.2)]">
       <div>
         <Logo />
       </div>
@@ -48,7 +48,7 @@ function HeaderNav() {
           {menuItems.map((item, index) => {
             return (
               <a
-                className="hover:underline font-bold mr-4"
+                className="hover:underline font-bold md:mx-6 lg:mx-8"
                 href={item.link}
                 rel="noopener noreferrer"
                 key={index}
@@ -59,7 +59,7 @@ function HeaderNav() {
           })}
         </nav>
 
-        <Link to="/login">
+        <Link to="/login" className="mg:ml-6 lg:ml-8">
           <Button color="primary" size="sm">
             Log In
           </Button>