Changed a neutral- classes to gray (#6603)

* Changed a neutral- classes to gray

* Changed all border-1 to border

apps/web/components/Embed.tsx

@@ -597,7 +597,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
         <iframe
           ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
           data-testid="embed-preview"
-          className="border-1 h-[100vh] border"
+          className="h-[100vh] border"
           width="100%"
           height="100%"
           src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
@@ -639,7 +639,7 @@ const ChooseEmbedTypesDialogContent = () => {
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100 ltr:mr-2 rtl:ml-2"
+            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
             key={index}
             data-testid={embed.type}
             onClick={() => {

apps/web/components/ImageUploader.tsx

@@ -142,7 +142,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
               <input
                 onInput={onInputFile}
                 type="file"

apps/web/components/NavTabs.tsx

@@ -67,7 +67,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   onClick={onClick}
                   className={classNames(
                     isCurrent
-                      ? "border-neutral-900 text-gray-900"
+                      ? "border-gray-900 text-gray-900"
                       : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
                     "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
                     className

apps/web/components/availability/SkeletonLoader.tsx

@@ -6,7 +6,7 @@ import classNames from "@lib/classNames";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/BookingListItem.tsx

@@ -274,7 +274,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="group flex flex-col hover:bg-neutral-50 sm:flex-row">
+      <tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>

apps/web/components/booking/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/pages/BookingPage.tsx

@@ -492,7 +492,7 @@ const BookingPage = ({
         <div
           className={classNames(
             "main overflow-hidden",
-            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
+            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">

apps/web/components/eventtype/EventSetupTab.tsx

@@ -162,7 +162,7 @@ export const EventSetupTab = (
                 return null;
               }
               return (
-                <li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2">
+                <li key={location.type} className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
                   <div className="flex max-w-full justify-between">
                     <div key={index} className="flex flex-grow items-center">
                       <img

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -324,7 +324,7 @@ function EventTypeSingleLayout({
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
-                "mt-4 rounded-md  border-neutral-200 bg-white sm:mx-0 xl:mt-0",
+                "mt-4 rounded-md  border-gray-200 bg-white sm:mx-0 xl:mt-0",
                 disableBorder ? "border-0 xl:-mt-4 " : "p-2 md:border md:p-6"
               )}>
               {children}

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -10,7 +10,7 @@ function SkeletonLoader() {
           <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -113,7 +113,7 @@ const UserProfile = (props: IUserProfileProps) => {
           name="avatar"
           id="avatar"
           placeholder="URL"
-          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
           defaultValue={imageSrc}
         />
         <div className="flex items-center px-4">
@@ -146,7 +146,7 @@ const UserProfile = (props: IUserProfileProps) => {
           ref={bioRef}
           name="bio"
           id="bio"
-          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
           defaultValue={user?.bio || undefined}
           onChange={(event) => {
             setValue("bio", event.target.value);

apps/web/components/ui/AuthContainer.tsx

@@ -32,7 +32,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-10 sm:px-10">
+        <div className="mx-2 rounded-md border border-gray-200 bg-white px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="mt-8 text-center text-sm text-gray-600">

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -190,7 +190,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       <div className="flex rounded-md">
         <span
           className={classNames(
-            isInputUsernamePremium ? "border-1 border-orange-400 " : "",
+            isInputUsernamePremium ? "border border-orange-400 " : "",
             "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
@@ -207,8 +207,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             className={classNames(
               "border-l-1 mb-0 mt-0 rounded-md rounded-l-none font-sans text-sm leading-4 focus:!ring-0",
               isInputUsernamePremium
-                ? "border-1 focus:border-1 border-orange-400 focus:border-orange-400"
-                : "border-1 focus:border-2",
+                ? "border border-orange-400 focus:border focus:border-orange-400"
+                : "border focus:border",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
                 : "border-l-gray-300",

apps/web/components/ui/form/CheckedSelect.tsx

@@ -41,7 +41,7 @@ export const CheckedSelect = ({
         {...props}
       />
       {value.map((option) => (
-        <div key={option.value} className="border-1 border p-2 font-medium">
+        <div key={option.value} className="border p-2 font-medium">
           <Avatar
             className="inline h-6 w-6 rounded-full ltr:mr-2 rtl:ml-2"
             imageSrc={option.avatar}

apps/web/pages/[user].tsx

@@ -56,7 +56,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600">
+          className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
           <Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
@@ -145,8 +145,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           <div
             className={classNames(
               "rounded-md ",
-              !isEventListEmpty &&
-                "border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
+              !isEventListEmpty && "border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600"
             )}
             data-testid="event-types">
             {user.away ? (
@@ -165,7 +164,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600">
+                  className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
                   <Icon.FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link

apps/web/pages/[user]/[type].tsx

@@ -24,7 +24,7 @@ export default function Type(props: AvailabilityPageProps) {
   const { t } = useLocale();
 
   return props.away ? (
-    <div className="h-screen dark:bg-neutral-900">
+    <div className="h-screen dark:bg-gray-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">

apps/web/pages/[user]/book.tsx

@@ -27,7 +27,7 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Book(props: BookPageProps) {
   const { t } = useLocale();
   return props.away ? (
-    <div className="h-screen dark:bg-neutral-900">
+    <div className="h-screen dark:bg-gray-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
@@ -42,7 +42,7 @@ export default function Book(props: BookPageProps) {
       </main>
     </div>
   ) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
-    <div className="h-screen dark:bg-neutral-900">
+    <div className="h-screen dark:bg-gray-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">

apps/web/pages/availability/[schedule].tsx

@@ -186,7 +186,7 @@ export default function Availability({ schedule }: { schedule: number }) {
             });
           }}
           className="flex flex-col pb-16 sm:mx-0 xl:flex-row xl:space-x-6">
-          <div className="flex-1 divide-y divide-neutral-200 rounded-md border">
+          <div className="flex-1 divide-y divide-gray-200 rounded-md border">
             <div className=" py-5 sm:p-6">
               {typeof me.data?.weekStart === "string" && (
                 <Schedule

apps/web/pages/availability/index.tsx

@@ -84,7 +84,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
         </div>
       ) : (
         <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
-          <ul className="divide-y divide-neutral-200" data-testid="schedules" ref={animationParentRef}>
+          <ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
             {schedules.map((schedule) => (
               <ScheduleListItem
                 displayOptions={{

apps/web/pages/availability/troubleshoot.tsx

@@ -78,7 +78,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
                 .map((slot: IBusySlot) => (
                   <div
                     key={dayjs(slot.start).format("HH:mm")}
-                    className="overflow-hidden rounded-md bg-neutral-100"
+                    className="overflow-hidden rounded-md bg-gray-100"
                     data-testid="troubleshooter-busy-time">
                     <div className="px-4 py-5 text-black sm:p-6">
                       {t("calendar_shows_busy_between")}{" "}
@@ -97,7 +97,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
                   </div>
                 ));
             return (
-              <div className="overflow-hidden rounded-md bg-neutral-100">
+              <div className="overflow-hidden rounded-md bg-gray-100">
                 <div className="px-4 py-5 text-black sm:p-6">{t("calendar_no_busy_slots")}</div>
               </div>
             );

apps/web/pages/booking/[uid].tsx

@@ -637,7 +637,7 @@ export default function Success(props: SuccessProps) {
                                   encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
                                 : "")
                             }
-                            className="h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-neutral-700 dark:text-white">
+                            className="h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:text-white">
                             <svg
                               className="-mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
@@ -660,7 +660,7 @@ export default function Success(props: SuccessProps) {
                                   eventName
                               ) + (location ? "&location=" + location : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -684,7 +684,7 @@ export default function Success(props: SuccessProps) {
                                   eventName
                               ) + (location ? "&location=" + location : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -697,7 +697,7 @@ export default function Success(props: SuccessProps) {
                           </Link>
                           <Link
                             href={"data:text/calendar," + eventLink()}
-                            className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"
+                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
                             download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"

apps/web/pages/event-types/index.tsx

@@ -251,7 +251,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
   const lastItem = types[types.length - 1];
   return (
     <div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
-      <ul ref={parent} className="!static w-full divide-y divide-neutral-200" data-testid="event-types">
+      <ul ref={parent} className="!static w-full divide-y divide-gray-200" data-testid="event-types">
         {types.map((type, index) => {
           const embedLink = `${group.profile.slug}/${type.slug}`;
           const calLink = `${CAL_URL}/${embedLink}`;

apps/web/pages/settings/billing/index.tsx

@@ -29,7 +29,7 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
         </div>
         <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
       </section>
-      <hr className="border-neutral-200" />
+      <hr className="border-gray-200" />
     </>
   );
 };

apps/web/pages/settings/my-account/appearance.tsx

@@ -123,7 +123,7 @@ const AppearanceView = () => {
         />
       </div>
 
-      <hr className="border-1 my-8 border-neutral-200" />
+      <hr className="my-8 border border-gray-200" />
       <div className="mb-6 flex items-center text-sm">
         <div>
           <p className="font-semibold">{t("custom_brand_colors")}</p>
@@ -169,7 +169,7 @@ const AppearanceView = () => {
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-      <hr className="border-1 my-8 border-neutral-200" />
+      <hr className="my-8 border border-gray-200" />
       <Controller
         name="hideBranding"
         control={formMethods.control}

apps/web/pages/settings/my-account/profile.tsx

@@ -223,7 +223,7 @@ const ProfileView = () => {
         }
       />
 
-      <hr className="my-6  border-neutral-200" />
+      <hr className="my-6 border-gray-200" />
 
       <Label>{t("danger_zone")}</Label>
       {/* Delete account Dialog */}

apps/web/pages/team/[slug].tsx

@@ -36,12 +36,12 @@ function TeamPage({ team }: TeamPageProps) {
   }, [telemetry, router.asPath]);
 
   const EventTypes = () => (
-    <ul className="rounded-md border border-neutral-200 dark:border-neutral-700">
+    <ul className="rounded-md border border-gray-200 dark:border-gray-700">
       {team.eventTypes.map((type, index) => (
         <li
           key={index}
           className={classNames(
-            "dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600",
+            "dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600",
             !isEmbed && "bg-white"
           )}>
           <Link

apps/web/styles/globals.css

@@ -183,19 +183,19 @@ button[role="switch"][data-state="checked"] {
   }
 
   .slider > .slider-track {
-    @apply relative h-1 flex-grow rounded-md bg-neutral-400;
+    @apply relative h-1 flex-grow rounded-md bg-gray-400;
   }
 
   .slider .slider-range {
-    @apply absolute h-full rounded-full bg-neutral-700;
+    @apply absolute h-full rounded-full bg-gray-700;
   }
 
   .slider .slider-thumb {
-    @apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 transition-all;
+    @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all;
   }
 
   .slider .slider-thumb:hover {
-    @apply bg-neutral-600;
+    @apply bg-gray-600;
   }
 
   .slider .slider-thumb:focus {
@@ -237,12 +237,12 @@ button[role="switch"][data-state="checked"] {
 }
 
 .react-multi-email > [type="text"] {
-  @apply dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500 dark:text-white;
+  @apply dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-white block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500;
 }
 
 .react-multi-email [data-tag] {
   box-shadow: none !important;
-  @apply dark:bg-brand my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:text-white;
+  @apply dark:bg-brand my-1 inline-flex items-center rounded-md border border-transparent bg-gray-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:text-white;
 }
 
 .react-multi-email > span[data-placeholder] {
@@ -270,7 +270,7 @@ button[role="switch"][data-state="checked"] {
 }
 
 .react-multi-email [data-tag] {
-  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700;
+  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-gray-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700;
 }
 
 .react-multi-email [data-tag] [data-tag-item] {
@@ -383,7 +383,7 @@ nav#nav--settings > a svg {
 }
 
 nav#nav--settings > a.active {
-  @apply border-neutral-500 bg-neutral-50 text-gray-700 hover:bg-neutral-50 hover:text-gray-700;
+  @apply border-gray-500 bg-gray-50 text-gray-700 hover:bg-gray-50 hover:text-gray-700;
 }
 
 nav#nav--settings > a.active svg {

packages/features/ee/sso/components/SAMLConfiguration.tsx

@@ -102,7 +102,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
         {/* Service Provider Details */}
         {connection && connection.provider && (
           <>
-            <hr className="border-1 my-8 border-gray-200" />
+            <hr className="my-8 border border-gray-200" />
             <div className="mb-3 text-base font-semibold">{t("saml_sp_title")}</div>
             <p className="mt-3 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
               {t("saml_sp_description")}
@@ -153,7 +153,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
         {/* Danger Zone and Delete Confirmation */}
         {connection && connection.provider && (
           <>
-            <hr className="border-1 my-8 border-gray-200" />
+            <hr className="my-8 border border-gray-200" />
             <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
             <Dialog>
               <DialogTrigger asChild>

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -277,7 +277,7 @@ const ProfileView = () => {
               </div>
             </div>
           )}
-          <hr className="border-1 my-8 border-gray-200" />
+          <hr className="my-8 border border-gray-200" />
 
           <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
           {team?.membership.role === "OWNER" ? (

packages/ui/components/card/Card.tsx

@@ -64,7 +64,7 @@ export function Card({
       className={classNames(
         containerProps?.className,
         cardTypeByVariant[variant].card,
-        "border-1 rounded-md border-gray-200 bg-white"
+        "rounded-md border border-gray-200 bg-white"
       )}
       {...containerProps}>
       {image && (

packages/ui/components/form/select/components.tsx

@@ -147,7 +147,7 @@ export const MenuComponent = <
   <reactSelectComponents.Menu
     {...props}
     className={classNames(
-      "dark:bg-darkgray-100 dark:border-darkgray-300 border-1 !rounded-md border-gray-900 bg-white text-sm leading-4 dark:text-white",
+      "dark:bg-darkgray-100 dark:border-darkgray-300 !rounded-md border border-gray-900 bg-white text-sm leading-4 dark:text-white",
       className
     )}
   />

packages/ui/form/AddressInput.tsx

@@ -42,7 +42,7 @@ function AddressInput<FormValues>({ bookingForm, name, className, ...rest }: Add
         {...bookingForm.register("attendeeAddress")}
         name={name}
         color="#D2D2D2"
-        className={`${className} border-1 focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block h-10 w-full rounded-md  border border-gray-300 py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:placeholder-gray-500 dark:selection:bg-green-500 disabled:dark:text-gray-500`}
+        className={`${className} focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block h-10 w-full rounded-md border  border border-gray-300 py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:placeholder-gray-500 dark:selection:bg-green-500 disabled:dark:text-gray-500`}
       />
     </div>
   );

packages/ui/form/PhoneInput.tsx

@@ -29,7 +29,7 @@ function PhoneInput<FormValues>({
       numberInputProps={{
         className: "border-0 text-sm focus:ring-0 dark:bg-darkgray-100 dark:placeholder:text-darkgray-600",
       }}
-      className={`${className} border-1 focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block w-full rounded-md rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500`}
+      className={`${className} focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block w-full rounded-md rounded-sm border border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500`}
     />
   );
 }

packages/ui/form/radio-area/RadioAreaGroup.tsx

@@ -14,7 +14,7 @@ const RadioArea = React.forwardRef<HTMLInputElement, RadioAreaProps>(
           type="radio"
           {...props}
         />
-        <div className="peer-checked:border-brand border-1 rounded-md border p-4 pt-3 pl-10 focus:outline-none focus:ring focus:ring-neutral-500">
+        <div className="peer-checked:border-brand rounded-md border p-4 pt-3 pl-10 focus:outline-none focus:ring focus:ring-neutral-500">
           {children}
         </div>
       </label>

packages/ui/form/radio-area/Select.tsx

@@ -42,7 +42,7 @@ export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>
         type="button"
         disabled={disabled}
         className={classNames(
-          "border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm sm:text-sm",
+          "focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border border-gray-300 bg-white p-2 text-left shadow-sm sm:text-sm",
           disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}