chore: Add button component

components/Auth/ForgotPassword.tsx

@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form'
 import React, { ReactElement, useState } from 'react'
 import style from './auth.module.css'
 import { sendPasswordResetEmail } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function SignUp (): ReactElement {
   const { register, handleSubmit, reset } = useForm<any>()
@@ -51,7 +52,7 @@ export default function SignUp (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} type='submit' className='button_main'>Send email</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Send email</Button>
         </div>
         <div>
           <a href="/signin" className={style.smlink}>Back</a>

components/Auth/ResetPassword.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import style from './auth.module.css'
 import { SignUpPasswordPOSTParameters } from 'utils/validators'
 import { submitNewPassword } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function ResetPassword (): ReactElement {
   const { register, handleSubmit, watch } = useForm<any>()
@@ -78,7 +79,7 @@ export default function ResetPassword (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} className='button_main' type='submit'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Submit</Button>
         </div>
       </form>
     </>

components/Auth/SignIn.tsx

@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form'
 import React, { ReactElement, useState } from 'react'
 import style from './auth.module.css'
 import { signIn } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function SignIn (): ReactElement {
   const { register, handleSubmit, reset } = useForm<any>()
@@ -60,7 +61,7 @@ export default function SignIn (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} className="button_main" type='submit'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Submit</Button>
         </div>
       </form>
       <div className={style.signup_ctn}>

components/Auth/SignUp.tsx

@@ -3,13 +3,16 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import style from './auth.module.css'
 import { signUp } from 'supertokens-web-js/recipe/emailpassword'
 import { SignUpPasswordPOSTParameters } from 'utils/validators'
+import Button from 'components/Button'
 
 export default function SignUp (): ReactElement {
   const { register, handleSubmit, watch, reset } = useForm<any>()
   const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
   const [disabled, setDisabled] = useState(true)
   const onSubmit = async (values: any): Promise<void> => {
     setDisabled(true)
+    setLoading(true)
 
     const email = values.email
     const password = values.password
@@ -45,6 +48,7 @@ export default function SignUp (): ReactElement {
       }
     }
     setDisabled(false)
+    setLoading(false)
   }
 
   const noEmptyValues = (value: SignUpPasswordPOSTParameters): boolean => {
@@ -92,7 +96,7 @@ export default function SignUp (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} type='submit' className='button_main'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={loading} className='lg'>Submit</Button>
         </div>
       </form>
       <div className={style.signup_ctn}>

components/Button/button.module.css

@@ -0,0 +1,114 @@
+.button {
+  background: var(--accent-color);
+  color: var(--primary-text-color);
+  border-radius: 6px;
+  padding: 8px 40px;
+  transition: all ease-in-out 200ms;
+  font-size: 16px;
+  border: 1px solid var(--border-color);
+  font-weight: 500;
+  font-family: 'Poppins', sans-serif;
+  position: relative;
+  margin: 0;
+}
+
+.button:hover {
+  background: var(--hover-accent-color);
+}
+
+.button:disabled {
+  background-color: #c0c0c0;
+  color: #5f5e5e;
+  border-color: #c0c0c0;
+}
+
+.button:disabled:hover {
+  background-color: #c0c0c0;
+}
+
+.outlined {
+  background-color: var(--secondary-bg-color);
+}
+
+body[data-theme='dark'] .default {
+  color: var(--primary-bg-color);
+  border-color: var(--primary-bg-color);
+}
+
+.delete {
+  background-color: var(--primary-bg-color);
+  color: rgb(219, 37, 37);
+  font-weight: 700;
+  border-color: rgb(219, 37, 37);
+}
+
+.delete:hover {
+  background-color: rgb(219, 37, 37);
+  color: var(--primary-text-color);
+}
+
+.loading {
+  color: transparent !important;
+}
+
+.small {
+  padding: 4px 26px;
+  background-color: var(--secondary-bg-color);
+}
+
+.xs {
+  padding: 4px 10px;
+  background-color: var(--secondary-bg-color);
+}
+
+.ml {
+  margin-left: 10px;
+}
+
+.small_delete {
+  margin-top: 10px;
+  background-color: var(--primary-bg-color);
+  color: rgb(219, 37, 37);
+  font-weight: 700;
+  border-color: rgb(219, 37, 37);
+}
+
+.small_delete:hover {
+  background-color: rgb(219, 37, 37);
+  color: var(--primary-text-color);
+}
+
+.lg {
+  padding: 15px 40px;
+}
+
+/**************************** Loading Spinner  *************************/
+
+.loading_spinner_ctn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  z-index: 5;
+}
+
+.loading_spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--primary-text-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

components/Button/index.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, MouseEventHandler } from 'react'
+import style from './button.module.css'
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <div className={style.loading_spinner_ctn}>
+      <div className={style.loading_spinner} />
+    </div>
+  )
+}
+
+interface ButtonProps {
+  children: ReactNode
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  variant?: 'default' | 'outlined' | 'delete' | 'small' | 'xs'
+  className?: string
+  loading?: boolean
+}
+
+export default function TopBar ({
+  children,
+  disabled,
+  type = 'button',
+  onClick,
+  variant = 'default',
+  className = '',
+  loading
+}: ButtonProps): JSX.Element {
+  return (
+    <button
+      disabled={disabled}
+      type={type}
+      className={`${style.button} ${style[variant]} ${style[className]} ${
+        loading === true ? style.loading : ''
+      }`}
+      onClick={onClick}
+    >
+      {children}
+      {loading === true && <LoadingSpinner />}
+    </button>
+  )
+}

components/Organization/CreateOrganization.tsx

@@ -1,24 +1,28 @@
 import { useForm } from 'react-hook-form'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
   setError: Function
   setOrg: Function
   setOrgMembers: Function
+  setLoading: Function
+  loading: boolean
 }
 
 interface CreateOrganizationForm {
   name: string
   userId: string
 }
 
-const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps): JSX.Element => {
+const CreateOrganization = ({ user, setError, setOrg, setOrgMembers, loading, setLoading }: IProps): JSX.Element => {
   const { register, handleSubmit } = useForm<CreateOrganizationForm>({
   })
 
   const onSubmit = async (params: any): Promise<void> => {
+    setLoading(true)
     const res = await fetch('/api/organization', {
       method: 'POST',
       headers: {
@@ -33,9 +37,11 @@ const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps):
       const data = await res.json()
       setOrg(data.organization)
       setOrgMembers([user.userProfile])
+      setLoading(false)
     } else {
       const json = await res.json()
       setError(json.message)
+      setLoading(false)
     }
   }
 
@@ -53,9 +59,7 @@ const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps):
       required
       className={style.text_input}
     />
-      <button className={style.add_btn} onClick={() => (false)}>
-        Create
-      </button>
+      <Button className='ml' type='submit' loading={loading}>Create</Button>
     </div>
   </form>
 }

components/Organization/DeleteOrganization.tsx

@@ -1,6 +1,7 @@
 import { Organization } from '@prisma/client'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -30,14 +31,14 @@ const DeleteOrganization = ({ user, setError, setOrg, org, setOrgEdit }: IProps)
 
   return (<>
   <div className={style.confirm_delete_ctn}>
-      <p>Are you sure you want to delete your organization?<br />This action cannot be undone.</p>
+      <p>Are you sure you want to delete your organization? This action cannot be undone.</p>
       <div className={style.confirm_delete_btn_ctn}>
-      <button className={style.delete_btn} onClick={() => { void onDelete() }}>
-          Yes, Delete Organization
-        </button>
-        <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
+        <Button variant='xs' onClick={() => setOrgEdit('')}>
           Cancel
-        </button>
+        </Button>
+        <Button variant='xs' onClick={() => { void onDelete() }} className='small_delete'>
+          Yes, Delete Organization
+        </Button>
         </div>
       </div>
     </>

components/Organization/LeaveOrganization.tsx

@@ -1,6 +1,7 @@
 import { Organization } from '@prisma/client'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -32,12 +33,12 @@ const LeaveOrganization = ({ setError, setOrg, org, setOrgEdit }: IProps): JSX.E
     <div className={style.confirm_delete_ctn} style={{ marginTop: '40px' }}>
       <p>Are you sure you want to leave your organization?<br />This action cannot be undone.</p>
       <div className={style.confirm_delete_btn_ctn}>
-      <button className={style.delete_btn} onClick={() => { void onLeave() }}>
-          Yes, Leave Organization
-        </button>
-        <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
+        <Button variant='xs' onClick={() => setOrgEdit('')}>
           Cancel
-        </button>
+        </Button>
+        <Button variant='xs' className='small_delete' onClick={() => { void onLeave() }}>
+          Yes, Leave Organization
+        </Button>
         </div>
       </div>
   </>

components/Organization/UpdateOrganization.tsx

@@ -1,6 +1,7 @@
 import { useForm } from 'react-hook-form'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -54,9 +55,9 @@ const UpdateOrganization = ({ user, setError, setOrg, setOrgEdit }: IProps): JSX
         required
         className={style.text_input}
       />
-        <button className={style.add_btn} onClick={() => (false)}>
+        <Button className='ml' type='submit'>
           Update
-        </button>
+        </Button>
       </div>
       <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
           Cancel