From bd7443017a393e1a9013a746d73cc72df949ede7 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Mon, 2 Aug 2021 17:24:01 +0200
Subject: [PATCH] fixed layout for react-select

---
 components/Shell.tsx                      |  2 +-
 components/booking/TimeOptions.tsx        |  4 +-
 components/team/EditTeamModal.tsx         |  2 +-
 components/team/MemberInvitationModal.tsx |  6 +-
 components/ui/Scheduler.tsx               | 14 +++--
 components/ui/UsernameInput.tsx           |  2 +-
 components/ui/WeekdaySelect.tsx           |  6 +-
 components/ui/modal/SetTimesModal.tsx     |  8 +--
 pages/[user]/book.tsx                     | 16 ++---
 pages/auth/forgot-password/[id].tsx       |  8 +--
 pages/auth/forgot-password/index.tsx      |  6 +-
 pages/auth/login.tsx                      |  2 +-
 pages/auth/logout.tsx                     |  2 +-
 pages/auth/signup.tsx                     |  8 +--
 pages/availability/event/[type].tsx       | 33 +++++-----
 pages/bookings/index.tsx                  |  4 +-
 pages/event-types/[type].tsx              | 64 +++++++++-----------
 pages/settings/embed.tsx                  |  4 +-
 pages/settings/password.tsx               |  6 +-
 styles/globals.css                        | 74 +++++++++++++++++------
 20 files changed, 154 insertions(+), 117 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 0015e373..2c4f7381 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -123,7 +123,7 @@ export default function Shell(props) {
             </a>
           </Link>
           <div className="flex gap-3 items-center self-center">
-            <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
               <span className="sr-only">View notifications</span>
               <Link href="/settings/profile">
                 <a>
diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index dc51f486..52023e79 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -41,7 +41,7 @@ const TimeOptions = (props) => {
                 onChange={setIs24hClock}
                 className={classNames(
                   is24hClock ? "bg-blue-600" : "dark:bg-gray-600 bg-gray-200",
-                  "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
                 )}>
                 <span className="sr-only">Use setting</span>
                 <span
@@ -62,7 +62,7 @@ const TimeOptions = (props) => {
           id="timeZone"
           value={selectedTimeZone}
           onChange={(tz) => setSelectedTimeZone(tz.value)}
-          className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
+          className="mb-2 shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
         />
       </div>
     )
diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx
index f32e21a1..7501f129 100644
--- a/components/team/EditTeamModal.tsx
+++ b/components/team/EditTeamModal.tsx
@@ -82,7 +82,7 @@ export default function EditTeamModal(props) {
             <div className="mb-4 border border-red-400 rounded p-2 px-4">
               <p className="block text-sm font-medium text-gray-700">Tick the box to disband this team.</p>
               <label className="mt-1">
-                <input type="checkbox" onChange={(e) => setCheckedDisbandTeam(e.target.checked)} className="shadow-sm mr-2 focus:ring-blue-500 focus:border-blue-500  sm:text-sm border-gray-300 rounded-md" />
+                <input type="checkbox" onChange={(e) => setCheckedDisbandTeam(e.target.checked)} className="shadow-sm mr-2 focus:ring-black focus:border-black  sm:text-sm border-gray-300 rounded-md" />
                 Disband this team
               </label>
             </div>
diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx
index 2e9a8261..8f2adebd 100644
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@@ -62,21 +62,21 @@ export default function MemberInvitationModal(props) {
           <div>
             <div className="mb-4">
               <label htmlFor="inviteUser" className="block text-sm font-medium text-gray-700">Email or Username</label>
-              <input type="text" name="inviteUser" id="inviteUser" placeholder="email@example.com" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"  />
+              <input type="text" name="inviteUser" id="inviteUser" placeholder="email@example.com" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"  />
             </div>
             <div className="mb-4">
               <label className="block tracking-wide text-gray-700 text-sm font-medium mb-2"
                      htmlFor="role">
                 Role
               </label>
-              <select id="role" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
+              <select id="role" className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
                 <option value="MEMBER">Member</option>
                 <option value="OWNER">Owner</option>
               </select>
             </div>
             <div className="mb-4">
               <label className="mt-1 text-gray-600">
-                <input type="checkbox" name="sendInviteEmail" defaultChecked id="sendInviteEmail" className="shadow-sm mr-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md" />
+                <input type="checkbox" name="sendInviteEmail" defaultChecked id="sendInviteEmail" className="shadow-sm mr-2 focus:ring-black focus:border-black sm:text-sm border-gray-300 rounded-md" />
                 Send an invite email
               </label>
             </div>
diff --git a/components/ui/Scheduler.tsx b/components/ui/Scheduler.tsx
index f60cb551..a10fe998 100644
--- a/components/ui/Scheduler.tsx
+++ b/components/ui/Scheduler.tsx
@@ -69,10 +69,13 @@ export const Scheduler = ({
   };
 
   const OpeningHours = ({ idx, item }) => (
-    <li className="py-2 flex justify-between border-t">
-      <div className="flex flex-col space-y-4 lg:inline-flex ml-2 ">
+    <li className="py-2 flex justify-between border-b">
+      <div className="flex flex-col space-y-4 lg:inline-flex">
         <WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
-        <button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
+        <button
+          className="text-sm bg-neutral-100 rounded-sm py-2 px-3"
+          type="button"
+          onClick={() => setEditSchedule(idx)}>
           {dayjs()
             .startOf("day")
             .add(item.startTime, "minutes")
@@ -106,7 +109,7 @@ export const Scheduler = ({
                 id="timeZone"
                 value={selectedTimeZone}
                 onChange={(tz) => setTimeZone(tz.value)}
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
               />
             </div>
           </div>
@@ -115,8 +118,7 @@ export const Scheduler = ({
               <OpeningHours key={idx} idx={idx} item={item} />
             ))}
           </ul>
-          <hr />
-          <button type="button" onClick={addNewSchedule} className="btn-white btn-sm m-2">
+          <button type="button" onClick={addNewSchedule} className="btn-white btn-sm mt-2">
             Add another
           </button>
         </div>
diff --git a/components/ui/UsernameInput.tsx b/components/ui/UsernameInput.tsx
index 8bef983b..61aa858e 100644
--- a/components/ui/UsernameInput.tsx
+++ b/components/ui/UsernameInput.tsx
@@ -18,7 +18,7 @@ const UsernameInput = React.forwardRef((props, ref) => (
         autoComplete="username"
         required
         {...props}
-        className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300 lowercase"
+        className="focus:ring-black focus:border-black flex-grow block w-full min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300 lowercase"
       />
     </div>
   </div>
diff --git a/components/ui/WeekdaySelect.tsx b/components/ui/WeekdaySelect.tsx
index a9f371d8..24ee655e 100644
--- a/components/ui/WeekdaySelect.tsx
+++ b/components/ui/WeekdaySelect.tsx
@@ -25,9 +25,9 @@ export const WeekdaySelect = (props) => {
             <button
               key={idx}
               onClick={(e) => toggleDay(e, idx)}
-              style={{ marginLeft: "-2px" }}
               className={`
-                    active focus:outline-none border-2 border-blue-500 px-2 py-1 rounded 
+              w-10 h-10
+                      bg-black text-white focus:outline-none px-3 py-1 rounded 
                     ${activeDays[idx + 1] ? "rounded-r-none" : ""} 
                     ${activeDays[idx - 1] ? "rounded-l-none" : ""} 
                     ${idx === 0 ? "rounded-l" : ""} 
@@ -40,7 +40,7 @@ export const WeekdaySelect = (props) => {
               key={idx}
               onClick={(e) => toggleDay(e, idx)}
               style={{ marginTop: "1px", marginBottom: "1px" }}
-              className={`border focus:outline-none px-2 py-1 rounded-none ${
+              className={`w-10 h-10 bg-gray-50 focus:outline-none px-3 py-1 rounded-none ${
                 idx === 0 ? "rounded-l" : "border-l-0"
               } ${idx === days.length - 1 ? "rounded-r" : ""}`}>
               {day}
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index 2334802e..22360edc 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -67,7 +67,7 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="hours"
                 id="startHours"
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="9"
                 defaultValue={startHours}
               />
@@ -86,7 +86,7 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="minutes"
                 id="startMinutes"
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="30"
                 defaultValue={startMinutes}
               />
@@ -106,7 +106,7 @@ export default function SetTimesModal(props) {
                 maxLength="2"
                 name="hours"
                 id="endHours"
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="17"
                 defaultValue={endHours}
               />
@@ -125,7 +125,7 @@ export default function SetTimesModal(props) {
                 step="15"
                 name="minutes"
                 id="endMinutes"
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="30"
                 defaultValue={endMinutes}
               />
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index c1e0aade..cd6fc072 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -192,7 +192,7 @@ export default function Book(props: any): JSX.Element {
                         name="name"
                         id="name"
                         required
-                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="John Doe"
                         defaultValue={props.booking ? props.booking.attendees[0].name : ""}
                       />
@@ -210,7 +210,7 @@ export default function Book(props: any): JSX.Element {
                         name="email"
                         id="email"
                         required
-                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="you@example.com"
                         defaultValue={props.booking ? props.booking.attendees[0].email : ""}
                       />
@@ -248,7 +248,7 @@ export default function Book(props: any): JSX.Element {
                           placeholder="Enter phone number"
                           id="phone"
                           required
-                          className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                          className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                           onChange={() => {
                             /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
                           }}
@@ -274,7 +274,7 @@ export default function Book(props: any): JSX.Element {
                               id={"custom_" + input.id}
                               required={input.required}
                               rows={3}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -284,7 +284,7 @@ export default function Book(props: any): JSX.Element {
                               name={"custom_" + input.id}
                               id={"custom_" + input.id}
                               required={input.required}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -294,7 +294,7 @@ export default function Book(props: any): JSX.Element {
                               name={"custom_" + input.id}
                               id={"custom_" + input.id}
                               required={input.required}
-                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                              className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                               placeholder=""
                             />
                           )}
@@ -304,7 +304,7 @@ export default function Book(props: any): JSX.Element {
                                 type="checkbox"
                                 name={"custom_" + input.id}
                                 id={"custom_" + input.id}
-                                className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
+                                className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
                                 placeholder=""
                               />
                               <label
@@ -326,7 +326,7 @@ export default function Book(props: any): JSX.Element {
                       name="notes"
                       id="notes"
                       rows={3}
-                      className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                       placeholder="Please share anything that will help prepare for our meeting."
                       defaultValue={props.booking ? props.booking.description : ""}
                     />
diff --git a/pages/auth/forgot-password/[id].tsx b/pages/auth/forgot-password/[id].tsx
index 48c5824b..2ebd8c90 100644
--- a/pages/auth/forgot-password/[id].tsx
+++ b/pages/auth/forgot-password/[id].tsx
@@ -83,7 +83,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           <Link href="/auth/login">
             <button
               type="button"
-              className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
               Login
             </button>
           </Link>
@@ -107,7 +107,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           <Link href="/auth/forgot-password">
             <button
               type="button"
-              className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
               Try Again
             </button>
           </Link>
@@ -151,7 +151,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                       type="password"
                       autoComplete="password"
                       required
-                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-black focus:border-black sm:text-sm"
                     />
                   </div>
                 </div>
@@ -160,7 +160,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
+                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
diff --git a/pages/auth/forgot-password/index.tsx b/pages/auth/forgot-password/index.tsx
index f3313900..98a60bbe 100644
--- a/pages/auth/forgot-password/index.tsx
+++ b/pages/auth/forgot-password/index.tsx
@@ -104,7 +104,7 @@ export default function Page({ csrfToken }) {
                       autoComplete="email"
                       placeholder="john.doe@example.com"
                       required
-                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-black focus:border-black sm:text-sm"
                     />
                   </div>
                 </div>
@@ -113,7 +113,7 @@ export default function Page({ csrfToken }) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
+                    className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
@@ -142,7 +142,7 @@ export default function Page({ csrfToken }) {
                   <Link href="/auth/login">
                     <button
                       type="button"
-                      className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                      className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                       Login
                     </button>
                   </Link>
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index b7a79aff..fbc608a8 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -62,7 +62,7 @@ export default function Login({ csrfToken }) {
             <div className="space-y-2">
               <button
                 type="submit"
-                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                 Sign in
               </button>
             </div>
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index 86f8b0da..f2dd5bd8 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -29,7 +29,7 @@ export default function Logout() {
                     </div>
                     <div className="mt-5 sm:mt-6">
                         <Link href="/auth/login">
-                            <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
+                            <a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
                                 Go back to the login page
                             </a>
                         </Link>
diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx
index 7527e45c..dfb4d7a9 100644
--- a/pages/auth/signup.tsx
+++ b/pages/auth/signup.tsx
@@ -75,20 +75,20 @@ export default function Signup(props) {
               </div>
               <div className="mb-2">
                 <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
-                <input type="email" name="email" id="email" placeholder="jdoe@example.com" disabled={!!props.email} readOnly={!!props.email} value={props.email} className="bg-gray-100 mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"  />
+                <input type="email" name="email" id="email" placeholder="jdoe@example.com" disabled={!!props.email} readOnly={!!props.email} value={props.email} className="bg-gray-100 mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"  />
               </div>
               <div className="mb-2">
                 <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
-                <input type="password" name="password" id="password" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"  />
+                <input type="password" name="password" id="password" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"  />
               </div>
               <div>
                 <label htmlFor="passwordcheck" className="block text-sm font-medium text-gray-700">Confirm password</label>
-                <input type="password" name="passwordcheck" id="passwordcheck" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"  />
+                <input type="password" name="passwordcheck" id="passwordcheck" required placeholder="•••••••••••••" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black sm:text-sm"  />
               </div>
             </div>
             <div className="mt-3 sm:mt-4 flex">
               <input type="submit" value="Create Account"
-                     className="btn btn-primary w-7/12 mr-2 inline-flex justify-center rounded-md border border-transparent cursor-pointer shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm" />
+                     className="btn btn-primary w-7/12 mr-2 inline-flex justify-center rounded-md border border-transparent cursor-pointer shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm" />
               <a onClick={() => signIn('Calendso', { callbackUrl: (router.query.callbackUrl || '') as string })}
                  className="w-5/12 inline-flex justify-center text-sm text-gray-500 font-medium  border px-4 py-2 rounded btn cursor-pointer">Login instead</a>
             </div>
diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index 90ad2c71..c78892cc 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -316,7 +316,7 @@ export default function EventTypePage({
                 name="address"
                 id="address"
                 required
-                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                 defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address}
               />
             </div>
@@ -390,7 +390,7 @@ export default function EventTypePage({
                         name="title"
                         id="title"
                         required
-                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="Quick Chat"
                         defaultValue={eventType.title}
                       />
@@ -411,7 +411,7 @@ export default function EventTypePage({
                           name="slug"
                           id="slug"
                           required
-                          className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
+                          className="flex-1 block w-full focus:ring-black focus:border-black min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
                           defaultValue={eventType.slug}
                         />
                       </div>
@@ -429,7 +429,8 @@ export default function EventTypePage({
                             id="location"
                             options={locationOptions}
                             isSearchable="false"
-                            className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
+                            classNamePrefix="react-select"
+                            className="react-select-container rounded-sm border border-gray-300 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 sm:text-sm"
                             onChange={(e) => openLocationModal(e.value)}
                           />
                         </div>
@@ -551,7 +552,7 @@ export default function EventTypePage({
                         ref={descriptionRef}
                         name="description"
                         id="description"
-                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="A quick video meeting."
                         defaultValue={eventType.description}></textarea>
                     </div>
@@ -566,7 +567,7 @@ export default function EventTypePage({
                         type="text"
                         name="title"
                         id="title"
-                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         placeholder="Meeting with {USER}"
                         defaultValue={eventType.eventName}
                       />
@@ -626,7 +627,7 @@ export default function EventTypePage({
                           id="ishidden"
                           name="ishidden"
                           type="checkbox"
-                          className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                          className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded"
                           defaultChecked={eventType.hidden}
                         />
                       </div>
@@ -648,7 +649,7 @@ export default function EventTypePage({
                           id="requiresConfirmation"
                           name="requiresConfirmation"
                           type="checkbox"
-                          className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                          className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded"
                           defaultChecked={eventType.requiresConfirmation}
                         />
                       </div>
@@ -677,7 +678,7 @@ export default function EventTypePage({
                           name="minimumAdvance"
                           id="minimumAdvance"
                           required
-                          className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
+                          className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
                           defaultValue={eventType.minimumBookingNotice}
                         />
                         <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
@@ -734,7 +735,7 @@ export default function EventTypePage({
                                                 type="text"
                                                 name="periodDays"
                                                 id=""
-                                                className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md"
+                                                className="shadow-sm focus:ring-black focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md"
                                                 placeholder="30"
                                                 defaultValue={eventType.periodDays || 30}
                                               />
@@ -742,7 +743,7 @@ export default function EventTypePage({
                                                 ref={periodDaysTypeRef}
                                                 id=""
                                                 name="periodDaysType"
-                                                className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                                                className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-black focus:border-indigo-500 sm:text-sm rounded-md"
                                                 defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                                                 <option value="1">calendar days</option>
                                                 <option value="0">business days</option>
@@ -793,7 +794,7 @@ export default function EventTypePage({
                             name="length"
                             id="length"
                             required
-                            className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
+                            className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
                             placeholder="15"
                             defaultValue={eventType.length}
                           />
@@ -877,7 +878,7 @@ export default function EventTypePage({
                     defaultValue={selectedLocation}
                     options={locationOptions}
                     isSearchable="false"
-                    className="mb-2 flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
+                    className="mb-2 flex-1 block w-full focus:ring-black focus:border-black min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
                     onChange={setSelectedLocation}
                   />
                   <LocationOptions />
@@ -937,7 +938,7 @@ export default function EventTypePage({
                       options={inputOptions}
                       isSearchable="false"
                       required
-                      className="mb-2 flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 mt-1"
+                      className="react-select-container border rounded-sm border-gray-300 mb-2 flex-1 block w-full focus:ring-black focus:border-black min-w-0 sm:text-sm mt-1"
                       onChange={setSelectedInputOption}
                     />
                   </div>
@@ -951,7 +952,7 @@ export default function EventTypePage({
                         name="label"
                         id="label"
                         required
-                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
                         defaultValue={selectedCustomInput?.label}
                       />
                     </div>
@@ -961,7 +962,7 @@ export default function EventTypePage({
                       id="required"
                       name="required"
                       type="checkbox"
-                      className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
+                      className="focus:ring-black h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
                       defaultChecked={selectedCustomInput?.required ?? true}
                     />
                     <label htmlFor="required" className="block text-sm font-medium text-gray-700">
diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index acf20515..3ed8272c 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -90,12 +90,12 @@ export default function Bookings({ bookings }) {
                               <>
                                 <a
                                   href={window.location.href + "/../cancel/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
+                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
                                   Cancel
                                 </a>
                                 <a
                                   href={window.location.href + "/../reschedule/" + booking.uid}
-                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
+                                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
                                   Reschedule
                                 </a>
                               </>
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 78e8e12d..2b07a3b1 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -11,7 +11,7 @@ import { getSession, useSession } from "next-auth/client";
 import { Scheduler } from "@components/ui/Scheduler";
 import { Disclosure } from "@headlessui/react";
 
-import { PhoneIcon, PlusCircleIcon, XIcon } from "@heroicons/react/outline";
+import { PhoneIcon, XIcon } from "@heroicons/react/outline";
 import { EventTypeCustomInput, EventTypeCustomInputType } from "@lib/eventTypeInput";
 import {
   LocationMarkerIcon,
@@ -333,7 +333,7 @@ export default function EventTypePage({
                 name="address"
                 id="address"
                 required
-                className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
                 defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address}
               />
             </div>
@@ -390,13 +390,8 @@ export default function EventTypePage({
         <title>{eventType.title} | Event Type | Calendso</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Shell heading={"Event Type - " + eventType.title}>
-        <div className="flex mb-8">
-          <p className="text-sm text-neutral-500">
-            {eventType.description}
-          </p>
-        </div>
-        <div className="mt-8 flex">
+      <Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
+        <div className="flex">
           <div className="w-10/12 mr-2">
             <div className="bg-white rounded-sm border border-neutral-200 p-8">
               <form onSubmit={updateEventTypeHandler} className="space-y-4">
@@ -414,7 +409,7 @@ export default function EventTypePage({
                       name="title"
                       id="title"
                       required
-                      className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
+                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
                       placeholder="Quick Chat"
                       defaultValue={eventType.title}
                     />
@@ -438,7 +433,7 @@ export default function EventTypePage({
                         name="slug"
                         id="slug"
                         required
-                        className="flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300"
+                        className="flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300"
                         defaultValue={eventType.slug}
                       />
                     </div>
@@ -454,13 +449,14 @@ export default function EventTypePage({
                   <div className="w-3/4">
                     {locations.length === 0 && (
                       <div className="mt-1 mb-2">
-                        <div className="flex rounded-sm shadow-sm">
+                        <div className="flex">
                           <Select
                             name="location"
                             id="location"
                             options={locationOptions}
                             isSearchable="false"
-                            className="flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-sm sm:text-sm border-gray-300"
+                            classNamePrefix="react-select"
+                            className="react-select-container rounded-sm border border-gray-300 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 sm:text-sm"
                             onChange={(e) => openLocationModal(e.value)}
                           />
                         </div>
@@ -547,7 +543,7 @@ export default function EventTypePage({
                                 <button
                                   type="button"
                                   onClick={() => openLocationModal(location.type)}
-                                  className="mr-2 text-sm text-secondary-600">
+                                  className="mr-2 text-sm text-primary-600">
                                   Edit
                                 </button>
                                 <button onClick={() => removeLocation(location)}>
@@ -561,7 +557,7 @@ export default function EventTypePage({
                           <li>
                             <button
                               type="button"
-                              className="sm:flex sm:items-start text-sm text-secondary-600"
+                              className="sm:flex sm:items-start text-sm text-primary-600"
                               onClick={() => setShowLocationModal(true)}>
                               <PlusIcon className="h-5 w-5" />
                               <span className="font-medium">Add another location option</span>
@@ -587,7 +583,7 @@ export default function EventTypePage({
                         name="length"
                         id="length"
                         required
-                        className="focus:ring-secondary-500 focus:border-secondary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
+                        className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
                         placeholder="15"
                         defaultValue={eventType.length}
                       />
@@ -611,12 +607,11 @@ export default function EventTypePage({
                       ref={descriptionRef}
                       name="description"
                       id="description"
-                      className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
                       placeholder="A quick video meeting."
                       defaultValue={eventType.description}></textarea>
                   </div>
                 </div>
-                <hr className="border-b border-neutral-200" />
                 <Disclosure>
                   {({ open }) => (
                     <>
@@ -640,7 +635,7 @@ export default function EventTypePage({
                                 type="text"
                                 name="title"
                                 id="title"
-                                className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
                                 placeholder="Meeting with {USER}"
                                 defaultValue={eventType.eventName}
                               />
@@ -677,7 +672,7 @@ export default function EventTypePage({
                                       <button
                                         type="button"
                                         onClick={() => openEditCustomModel(customInput)}
-                                        className="mr-2 text-sm text-secondary-600">
+                                        className="mr-2 text-sm text-primary-600">
                                         Edit
                                       </button>
                                       <button onClick={(e) => removeCustom(customInput, e)}>
@@ -715,7 +710,7 @@ export default function EventTypePage({
                                   id="ishidden"
                                   name="ishidden"
                                   type="checkbox"
-                                  className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded"
+                                  className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                                   defaultChecked={eventType.hidden}
                                 />
                               </div>
@@ -744,7 +739,7 @@ export default function EventTypePage({
                                   id="requiresConfirmation"
                                   name="requiresConfirmation"
                                   type="checkbox"
-                                  className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded"
+                                  className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
                                   defaultChecked={eventType.requiresConfirmation}
                                 />
                               </div>
@@ -784,9 +779,9 @@ export default function EventTypePage({
                                         <span
                                           className={classnames(
                                             checked
-                                              ? "bg-secondary-600 border-transparent"
+                                              ? "bg-primary-600 border-transparent"
                                               : "bg-white border-gray-300",
-                                            active ? "ring-2 ring-offset-2 ring-secondary-500" : "",
+                                            active ? "ring-2 ring-offset-2 ring-primary-500" : "",
                                             "h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
                                           )}
                                           aria-hidden="true">
@@ -807,7 +802,7 @@ export default function EventTypePage({
                                                   type="text"
                                                   name="periodDays"
                                                   id=""
-                                                  className="mr-2 shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-12 sm:text-sm border-gray-300 rounded-sm"
+                                                  className="mr-2 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-12 sm:text-sm border-gray-300 rounded-sm"
                                                   placeholder="30"
                                                   defaultValue={eventType.periodDays || 30}
                                                 />
@@ -815,7 +810,7 @@ export default function EventTypePage({
                                                   ref={periodDaysTypeRef}
                                                   id=""
                                                   name="periodDaysType"
-                                                  className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-secondary-500 focus:border-secondary-500 sm:text-sm rounded-sm"
+                                                  className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-sm"
                                                   defaultValue={
                                                     eventType.periodCountCalendarDays ? "1" : "0"
                                                   }>
@@ -877,13 +872,13 @@ export default function EventTypePage({
                 </Disclosure>
                 <div className="mt-4 flex justify-end">
                   <Link href="/event-types">
-                    <a className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2">
+                    <a className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2">
                       Cancel
                     </a>
                   </Link>
                   <button
                     type="submit"
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                     Update
                   </button>
                 </div>
@@ -939,7 +934,7 @@ export default function EventTypePage({
               <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <LocationMarkerIcon className="h-6 w-6 text-secondary-600" />
+                    <LocationMarkerIcon className="h-6 w-6 text-primary-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -953,7 +948,8 @@ export default function EventTypePage({
                     defaultValue={selectedLocation}
                     options={locationOptions}
                     isSearchable="false"
-                    className="mb-2 flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"
+                    classNamePrefix="react-select"
+                    className="react-select-container rounded-sm border border-gray-300 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 sm:text-sm my-4"
                     onChange={setSelectedLocation}
                   />
                   <LocationOptions />
@@ -989,7 +985,7 @@ export default function EventTypePage({
               <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <PlusIcon className="h-6 w-6 text-secondary-600" />
+                    <PlusIcon className="h-6 w-6 text-primary-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -1013,7 +1009,7 @@ export default function EventTypePage({
                       options={inputOptions}
                       isSearchable="false"
                       required
-                      className="mb-2 flex-1 block w-full focus:ring-secondary-500 focus:border-secondary-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 mt-1"
+                      className="mb-2 flex-1 block w-full focus:ring-primary-500 focus:border-primary-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 mt-1"
                       onChange={setSelectedInputOption}
                     />
                   </div>
@@ -1027,7 +1023,7 @@ export default function EventTypePage({
                         name="label"
                         id="label"
                         required
-                        className="shadow-sm focus:ring-secondary-500 focus:border-secondary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
                         defaultValue={selectedCustomInput?.label}
                       />
                     </div>
@@ -1037,7 +1033,7 @@ export default function EventTypePage({
                       id="required"
                       name="required"
                       type="checkbox"
-                      className="focus:ring-secondary-500 h-4 w-4 text-secondary-600 border-gray-300 rounded mr-2"
+                      className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded mr-2"
                       defaultChecked={selectedCustomInput?.required ?? true}
                     />
                     <label htmlFor="required" className="block text-sm font-medium text-gray-700">
diff --git a/pages/settings/embed.tsx b/pages/settings/embed.tsx
index ddc94a73..45409ea2 100644
--- a/pages/settings/embed.tsx
+++ b/pages/settings/embed.tsx
@@ -35,7 +35,7 @@ export default function Embed(props) {
               <div className="mt-1">
                 <textarea
                   id="iframe"
-                  className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                  className="h-32 shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
                   placeholder="Loading..."
                   defaultValue={
                     '<iframe src="' +
@@ -55,7 +55,7 @@ export default function Embed(props) {
               <div className="mt-1">
                 <textarea
                   id="fullscreen"
-                  className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                  className="h-32 shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
                   placeholder="Loading..."
                   defaultValue={
                     '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Schedule a meeting</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body><iframe src="' +
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index 1f3ff351..4e93a373 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -61,7 +61,7 @@ export default function Settings(props) {
                     name="current_password"
                     id="current_password"
                     required
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                    className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
                     placeholder="Your old password"
                   />
                 </div>
@@ -77,7 +77,7 @@ export default function Settings(props) {
                     name="new_password"
                     id="new_password"
                     required
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                    className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
                     placeholder="Your super secure new password"
                   />
                 </div>
@@ -87,7 +87,7 @@ export default function Settings(props) {
             <div className="py-4 flex justify-end">
               <button
                 type="submit"
-                className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                 Save
               </button>
             </div>
diff --git a/styles/globals.css b/styles/globals.css
index 4e6db35e..83c64e84 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,6 +81,59 @@
     }
 }
 
+/* !important to override react-select */
+.react-select__value-container{
+    border: 0 !important;
+}
+
+.react-select__input input {
+    border: 0 !important; box-shadow: none !important;
+}
+
+.react-select__option--is-focused{
+    background: #000 !important;
+    color: #fff !important
+}
+
+.react-select__control{
+    border: 2px solid transparent !important;
+    box-shadow: none !important;
+}
+
+.react-select__control.react-select__control--is-focused{
+        border: 2px solid #000 !important;
+        border-color: #000 !important;
+        box-shadow: none !important;
+            margin: -1px;
+            padding: 1px;
+
+}
+
+/* !important to override react-dates */
+.DateRangePickerInput__withBorder{
+    border: 0 !important
+}
+.DateInput_input{
+  border: 1px solid #D1D5DB !important;
+  border-radius: 2px !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  color: #000;
+  padding: 11px ​11px 9px !important;
+  line-height: 16px !important;
+}
+
+.DateInput_input__focused{
+  border: 2px solid #000 !important;
+  border-radius: 2px !important;
+  box-shadow: none !important;
+  padding: 10px ​10px 9px !important;
+}
+
+.DateRangePickerInput_arrow{
+    padding: 0px 10px;
+}
+
 .loader {
   display: block;
   width: 30px;
@@ -184,22 +237,7 @@ body {
     box-shadow: none;
 }
 
-.weekdaySelect {
-    font-family: "Courier New", sans-serif;
-}
-
-.weekdaySelect button.active:first-child {
-    margin-left: -1px !important;
-}
-
-.weekdaySelect button:not(.active) {
-    padding-left: calc(0.5rem + 0px);
-    margin-right: 1px;
-}
-
-.weekdaySelect button.active + button.active {
-    border-color: rgba(3, 169, 244, var(--tw-border-opacity))
-                  rgba(3, 169, 244, var(--tw-border-opacity))
-                  rgba(3, 169, 244, var(--tw-border-opacity))
-                  white;
+.weekdaySelect button.active {
+    background: #000;
+    color: #fff;
 }