🎨 Remove default margins on elements

apps/web/src/components/auth/login-form.tsx

@@ -53,13 +53,13 @@ const VerifyCode: React.FunctionComponent<{
       >
         <fieldset>
           <div className="mb-1 text-2xl font-bold">{t("verifyYourEmail")}</div>
-          <p className="text-slate-500">
+          <div className="mb-4 text-slate-500">
             {t("stepSummary", {
               current: 2,
               total: 2,
             })}
-          </p>
-          <p>
+          </div>
+          <p className="mb-4">
             <Trans
               t={t}
               i18nKey="verificationCodeSent"
@@ -90,7 +90,7 @@ const VerifyCode: React.FunctionComponent<{
             })}
           />
           {formState.errors.code?.message ? (
-            <p className="mt-2 text-sm text-rose-500">
+            <p className="mb-4 mt-2 text-sm text-rose-500">
               {formState.errors.code.message}
             </p>
           ) : null}
@@ -200,14 +200,14 @@ export const RegisterForm: React.FunctionComponent<{
       })}
     >
       <div className="mb-1 text-2xl font-bold">{t("createAnAccount")}</div>
-      <p className="text-slate-500">
+      <p className="mb-4 text-slate-500">
         {t("stepSummary", {
           current: 1,
           total: 2,
         })}
       </p>
       <fieldset className="mb-4">
-        <label htmlFor="name" className="text-slate-500">
+        <label htmlFor="name" className="mb-1 text-slate-500">
           {t("name")}
         </label>
         <TextInput
@@ -226,7 +226,7 @@ export const RegisterForm: React.FunctionComponent<{
         ) : null}
       </fieldset>
       <fieldset className="mb-4">
-        <label htmlFor="email" className="text-slate-500">
+        <label htmlFor="email" className="mb-1 text-slate-500">
           {t("email")}
         </label>
         <TextInput
@@ -362,14 +362,14 @@ export const LoginForm: React.FunctionComponent<{
       })}
     >
       <div className="mb-1 text-2xl font-bold">{t("login")}</div>
-      <p className="text-slate-500">
+      <p className="mb-4 text-slate-500">
         {t("stepSummary", {
           current: 1,
           total: 2,
         })}
       </p>
       <fieldset className="mb-4">
-        <label htmlFor="email" className="text-slate-500">
+        <label htmlFor="email" className="mb-1 text-slate-500">
           {t("email")}
         </label>
         <TextInput

apps/web/src/components/forms/poll-details-form.tsx

@@ -39,7 +39,9 @@ export const PollDetailsForm: React.FunctionComponent<
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="formField">
-        <label htmlFor="title">{t("title")}</label>
+        <label htmlFor="title" className="mb-1">
+          {t("title")}
+        </label>
         <input
           type="text"
           id="title"
@@ -51,7 +53,9 @@ export const PollDetailsForm: React.FunctionComponent<
         />
       </div>
       <div className="formField">
-        <label htmlFor="location">{t("location")}</label>
+        <label htmlFor="location" className="mb-1">
+          {t("location")}
+        </label>
         <input
           type="text"
           id="location"
@@ -61,7 +65,9 @@ export const PollDetailsForm: React.FunctionComponent<
         />
       </div>
       <div>
-        <label htmlFor="description">{t("description")}</label>
+        <label htmlFor="description" className="mb-1">
+          {t("description")}
+        </label>
         <textarea
           id="description"
           className="input w-full"

apps/web/src/components/forms/user-details-form.tsx

@@ -37,7 +37,7 @@ export const UserDetailsForm: React.FunctionComponent<
     <form id={name} className={className} onSubmit={handleSubmit(onSubmit)}>
       <h2>{t("yourDetails")}</h2>
       <div className="formField">
-        <label className="text-slate-500" htmlFor="name">
+        <label className="mb-1 text-slate-500" htmlFor="name">
           {t("name")}
         </label>
         <input
@@ -53,7 +53,7 @@ export const UserDetailsForm: React.FunctionComponent<
       </div>
 
       <div className="formField">
-        <label className="text-slate-500" htmlFor="contact">
+        <label className="mb-1 text-slate-500" htmlFor="contact">
           {t("email")}
         </label>
         <input

apps/web/src/components/home/hero.tsx

@@ -15,7 +15,7 @@ const Hero: React.FunctionComponent = () => {
   return (
     <div className="mx-auto max-w-7xl items-end p-8 lg:flex lg:justify-between">
       <div className="my-8 text-center lg:text-left">
-        <h1 className="text-4xl font-bold text-slate-800 sm:text-5xl">
+        <h1 className="mb-4 text-4xl font-bold text-slate-800 sm:text-5xl">
           <Trans
             t={t}
             i18nKey="heroText"

apps/web/src/components/new-participant-modal.tsx

@@ -100,7 +100,7 @@ export const NewParticipantModal = (props: NewParticipantModalProps) => {
         className="space-y-4"
       >
         <fieldset>
-          <label htmlFor="name" className="text-slate-500">
+          <label htmlFor="name" className="mb-1 text-slate-500">
             {t("name")}
           </label>
           <TextInput
@@ -117,7 +117,7 @@ export const NewParticipantModal = (props: NewParticipantModalProps) => {
           ) : null}
         </fieldset>
         <fieldset>
-          <label htmlFor="email" className="text-slate-500">
+          <label htmlFor="email" className="mb-1 text-slate-500">
             {t("email")} ({t("optional")})
           </label>
           <TextInput
@@ -139,7 +139,7 @@ export const NewParticipantModal = (props: NewParticipantModalProps) => {
           ) : null}
         </fieldset>
         <fieldset>
-          <label className="text-slate-500">{t("response")}</label>
+          <label className="mb-1 text-slate-500">{t("response")}</label>
           <VoteSummary votes={props.votes} />
         </fieldset>
         <div className="flex gap-2">

apps/web/src/components/open-beta-modal.tsx

@@ -8,7 +8,7 @@ const OpenBeta = () => {
       </div>
       <div className="max-w-3xl p-3 sm:p-6">
         <div>
-          <p>
+          <p className="mb-4">
             The open beta allows you to test out new features before they are
             officially released to the general public. By participating you,
             will have the opportunity to provide feedback and help shape the
@@ -16,8 +16,7 @@ const OpenBeta = () => {
           </p>
         </div>
         <div>
-          <h2>Feedback</h2>
-          <p></p>
+          <h2 className="mb-4">Feedback</h2>
           <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <a
               href="https://github.com/lukevella/rallly/issues/new?assignees=&labels=bug&template=---bug-report.md&title="
@@ -44,15 +43,15 @@ const OpenBeta = () => {
               ✉️ Send an email
             </a>
           </ul>
-          <div className="bg-patte mt-4 rounded border bg-slate-50 p-4">
-            <h2 className="text-slate-800">Important</h2>
-            <p>
+          <div className="mt-4 rounded border bg-slate-50 p-4">
+            <h2 className="mb-4 text-slate-800">Important</h2>
+            <p className="mb-4">
               <strong>
                 You should not rely on the beta for any important data or
                 information.
               </strong>
             </p>
-            <p>
+            <p className="mb-4">
               The beta should be used exclusively for testing purposes.
               Features, polls, accounts, or data may be removed at any time
               without prior notice.

apps/web/src/components/participant-dropdown.tsx

@@ -147,7 +147,7 @@ const ChangeNameModal = (props: {
         <div>{t("changeNameDescription")}</div>
       </div>
       <fieldset>
-        <label className="text-slate-500">{t("name")}</label>
+        <label className="mb-1 text-slate-500">{t("name")}</label>
         <TextInput
           className="w-full"
           error={!!errors.name}

apps/web/src/components/profile/user-details.tsx

@@ -68,7 +68,7 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
       </div>
       <div className="divide-y">
         <div className="flex p-4 pr-8">
-          <label htmlFor="name" className="w-1/3 text-slate-500">
+          <label htmlFor="name" className="mb-1 w-1/3 text-slate-500">
             {t("name")}
           </label>
           <div className="w-2/3">
@@ -90,7 +90,7 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
           </div>
         </div>
         <div className="flex p-4 pr-8">
-          <label htmlFor="random-8904" className="w-1/3 text-slate-500">
+          <label htmlFor="random-8904" className="mb-1 w-1/3 text-slate-500">
             {t("email")}
           </label>
           <div className="w-2/3">

apps/web/src/style.css

@@ -10,15 +10,12 @@
   #__next {
     @apply h-full;
   }
-  p {
-    @apply mb-4;
-  }
   h1,
   h2,
   h3,
   h4,
   h5 {
-    @apply mb-4 font-sans font-semibold text-slate-800;
+    @apply font-sans font-semibold text-slate-800;
   }
   h1 {
     @apply text-2xl;
@@ -28,7 +25,7 @@
   }
 
   label {
-    @apply mb-1 block text-sm text-slate-800;
+    @apply block text-sm text-slate-800;
   }
 
   a,
@@ -139,13 +136,13 @@
 
 @layer components {
   .heading {
-    @apply text-primary-600 text-xl;
+    @apply text-primary-600 mb-4 text-xl;
   }
   .subheading {
     @apply mb-16 text-4xl font-bold text-slate-800;
   }
   .heading-sm {
-    @apply text-xl font-bold text-slate-800;
+    @apply mb-4 text-xl font-bold text-slate-800;
   }
   .text {
     @apply text-lg leading-relaxed text-slate-500;