fix: removed font-medium classes as the base style for all elements i…

…s font-medium (#2146)
open-sauced · Nov 15, 2023 · d06a1ca · d06a1ca
1 parent bdf3831
commit d06a1ca
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 41 deletions.
diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
@@ -29,7 +29,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
         {label && (
           <label
             htmlFor={getId()}
-            className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="ml-3 text-sm leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
             {label}
           </label>

diff --git a/components/atoms/Cmd/command.tsx b/components/atoms/Cmd/command.tsx
@@ -25,7 +25,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="p-0 overflow-hidden shadow-2xl">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -59,7 +59,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={clsx(
-      "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium ",
+      "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs",
       className
     )}
     {...props}

diff --git a/components/atoms/Dropdown/dropdown.tsx b/components/atoms/Dropdown/dropdown.tsx
@@ -33,7 +33,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={clsx(
-      "relative flex cursor-default select-none items-center py-1.5 px-2 text-sm font-medium focus:text-sauced-orange outline-none focus:bg-orange-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+      "relative flex cursor-default select-none items-center py-1.5 px-2 text-sm focus:text-sauced-orange outline-none focus:bg-orange-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
       inset && "pl-8",
       className
     )}

diff --git a/components/atoms/Tabs/tabs.tsx b/components/atoms/Tabs/tabs.tsx
@@ -19,7 +19,7 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     className={clsx(
-      "inline-flex min-w-[100px] items-center justify-center px-3 py-1.5  text-sm font-medium text-slate-700 transition-all  disabled:pointer-events-none disabled:opacity-50  data-[state=active]:text-slate-900",
+      "inline-flex min-w-[100px] items-center justify-center px-3 py-1.5  text-sm text-slate-700 transition-all  disabled:pointer-events-none disabled:opacity-50  data-[state=active]:text-slate-900",
       className
     )}
     {...props}

diff --git a/components/atoms/Toast/toast.tsx b/components/atoms/Toast/toast.tsx
@@ -42,7 +42,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={clsx(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
       className
     )}
     {...props}

diff --git a/components/molecules/Calendar/calendar.tsx b/components/molecules/Calendar/calendar.tsx
@@ -15,7 +15,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+        caption_label: "text-sm",
         nav: "space-x-1 flex items-center",
         nav_button: clsx(
           "h-7 w-7 bg-transparent border inline-flex rounded-md  items-center justify-center p-0 opacity-50 hover:opacity-100"

diff --git a/components/molecules/ContributionsEvolution/contributions-evolution-card.tsx b/components/molecules/ContributionsEvolution/contributions-evolution-card.tsx
@@ -85,7 +85,7 @@ export default function ContributionsEvolutionCard(props: Props) {
           }}
         >
           <div className="text-lg text-slate-900 mb-2">Contributions Evolution</div>
-          <div className="text-sm font-medium text-slate-400 mb-4">This is going to be an auto-generated insight.</div>
+          <div className="text-sm text-slate-400 mb-4">This is going to be an auto-generated insight.</div>
           {/* buttons */}
           <div className="flex gap-1 mb-4">
             <DropdownMenu>

diff --git a/...nents/molecules/ContributionsEvolutionByTypeCard/contributions-evolution-by-type-card.tsx b/...nents/molecules/ContributionsEvolutionByTypeCard/contributions-evolution-by-type-card.tsx
@@ -99,7 +99,7 @@ export default function ContributionsEvolutionByType({ data = [], isLoading }: C
           }}
         >
           <div className="text-lg text-slate-900 mb-2">Contributions Evolution</div>
-          <div className="text-sm font-medium text-slate-400 mb-4">This is going to be an auto-generated insight.</div>
+          <div className="text-sm text-slate-400 mb-4">This is going to be an auto-generated insight.</div>
           {/* chart */}
           <div className="sr-only" aria-live="polite">
             {isLoading ? "Loading the contributions evolution graph" : "The contributions evolution graph has loaded"}

diff --git a/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx b/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx
@@ -129,7 +129,7 @@ export default function MostActiveContributorsCard({
     <MostActiveCard>
       <>
         {topContributor && (
-          <div className="text-sm font-medium text-slate-400 mb-4">
+          <div className="text-sm text-slate-400 mb-4">
             {topContributor.login} made {topContributorPercent} of all code contributions
           </div>
         )}

diff --git a/components/molecules/RecommendedRepoCard/recommended-repo-card.tsx b/components/molecules/RecommendedRepoCard/recommended-repo-card.tsx
@@ -45,7 +45,7 @@ const RecommendedRepoCard = ({ fullName, className }: RecommendedRepoCardProps):
                   src={getAvatarByUsername(owner)}
                 />
               </picture>
-              <span className="text-sm font-medium text-light-slate-11">{owner}</span>
+              <span className="text-sm text-light-slate-11">{owner}</span>
             </a>
           </div>
 
@@ -59,7 +59,7 @@ const RecommendedRepoCard = ({ fullName, className }: RecommendedRepoCardProps):
               {name}
             </a>
 
-            <p title={data.description} className="w-5/6 text-sm font-medium text-gray-500">
+            <p title={data.description} className="w-5/6 text-sm text-gray-500">
               {truncateString(data.description, 100)}
             </p>
           </div>

diff --git a/components/molecules/TeamMembersConfig/team-members-config.tsx b/components/molecules/TeamMembersConfig/team-members-config.tsx
@@ -62,7 +62,7 @@ const TeamMembersConfig = ({
 
   return (
     <div className={` ${className && className}`}>
-      <h2 className="text-lg font-medium tracking-wide">Add Team Members</h2>
+      <h2 className="text-lg tracking-wide">Add Team Members</h2>
       <div className="flex items-center gap-5 mt-3">
         <Search
           isLoading={loading}

diff --git a/components/organisms/RepositoriesCart/repositories-cart.tsx b/components/organisms/RepositoriesCart/repositories-cart.tsx
@@ -56,7 +56,7 @@ const RepositoriesCart = ({
 
   return (
     <>
-      <Title className="!text-1xl !leading-none mb-4 xl:mt-10 font-medium" level={4}>
+      <Title className="!text-1xl !leading-none mb-4 xl:mt-10" level={4}>
         Repositories Added
       </Title>
       <div className="flex flex-col w-full gap-2 p-6 border rounded-lg">

diff --git a/components/organisms/TopNav/top-nav.tsx b/components/organisms/TopNav/top-nav.tsx
@@ -34,7 +34,7 @@ const TopNav: React.FC = () => {
                 </OnboardingButton>
                 <div id="onboarding" className="flex flex-col absolute right-0 sm:hidden">
                   <span className="border-x-transparent border-x-[7px] border-b-[7px] border-b-orange-500 h-0 w-0 self-end mr-[1.1rem]" />
-                  <Text className="text-sm py-1 font-medium px-2 w-max rounded shadow-lg bg-light-slate-2 !text-light-orange-9 outline-[1px] outline outline-orange-500">
+                  <Text className="text-sm py-1 px-2 w-max rounded shadow-lg bg-light-slate-2 !text-light-orange-9 outline-[1px] outline outline-orange-500">
                     Complete the onboarding
                   </Text>
                 </div>

diff --git a/components/organisms/UserSettingsPage/coupon-form.tsx b/components/organisms/UserSettingsPage/coupon-form.tsx
@@ -47,7 +47,7 @@ const CouponForm = ({ refreshUser }: CouponFormProps) => {
       <div className="flex flex-col gap-3 ">
         <label className="text-2xl font-normal text-light-slate-11">Add Coupon</label>
         <TextInput
-          className="font-medium bg-light-slate-4 text-light-slate-11 w-3/4"
+          className="bg-light-slate-4 text-light-slate-11 w-3/4"
           placeholder="Enter Coupon"
           label="Enter provided coupon code to upgrade your account"
           name="couponCode"

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -264,14 +264,14 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
           </Title>
           <form onSubmit={handleUpdateProfile} className="flex flex-col gap-6 mt-6" ref={formRef}>
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               label="Name*"
               placeholder="April O'Neil"
               required
               name="nameInput"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="[email protected]"
               handleChange={handleEmailChange}
               label="Email*"
@@ -281,7 +281,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
 
             {/* Bio section */}
             <div className="flex flex-col gap-2">
-              <label className="flex flex-col w-full text-sm font-medium text-light-slate-9">
+              <label className="flex flex-col w-full text-sm text-light-slate-9">
                 Bio
                 <textarea
                   rows={4}
@@ -304,28 +304,28 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               )}
             </div>
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="https://opensauced.pizza"
               label="URL"
               pattern="http[s]?://.*\..{2,}"
               name="url"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="https://github.com/sponsors/open-sauced"
               label="GitHub Sponsors URL"
               pattern="http[s]?://.*\..{2,}"
               name="github_sponsors_url"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="https://www.linkedin.com/in/brianldouglas"
               label="LinkedIn URL"
               pattern="http[s]?://.*\..{2,}"
               name="linkedin_url"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="https://discord.com/users/832877193112762362"
               label="Discord URL"
               onChange={handleValidateDiscordUrl}
@@ -339,13 +339,13 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               name="twitter_username"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="OpenSauced"
               label="Company"
               name="company"
             />
             <TextInput
-              className="font-medium bg-light-slate-4 text-light-slate-11"
+              className="bg-light-slate-4 text-light-slate-11"
               placeholder="USA"
               label="Location"
               name="location"

diff --git a/layouts/hub.tsx b/layouts/hub.tsx
@@ -42,9 +42,8 @@ const HubLayout = ({ children }: { children: React.ReactNode }) => {
       }
     }
 
-    getUser()
-      .catch(console.error)
-      .then(() => {});
+    // eslint-disable-next-line no-console
+    getUser().catch(console.error);
   }, [router, onboarded]);
 
   const getActiveLinkClassNames = (href: string) => {
@@ -68,10 +67,7 @@ const HubLayout = ({ children }: { children: React.ReactNode }) => {
                         {navLinks.map((link, index) => (
                           <li key={`hub-nav-${index}-${link.name}`}>
                             <Link
-                              className={clsx(
-                                "text-3xl leading-none font-medium mx-0",
-                                getActiveLinkClassNames(link.href)
-                              )}
+                              className={clsx("text-3xl leading-none mx-0", getActiveLinkClassNames(link.href))}
                               href={link.href}
                             >
                               {link.name}

diff --git a/pages/start.tsx b/pages/start.tsx
@@ -371,10 +371,7 @@ const Login: WithPageLayout = () => {
               }
               size={48}
             />
-            <Text
-              disabled={currentLoginStep !== 2}
-              className={`!text-[16px] !font-medium ${currentLoginStep === 2 && highlighted}`}
-            >
+            <Text disabled={currentLoginStep !== 2} className={`!text-[16px] ${currentLoginStep === 2 && highlighted}`}>
               Choose your interests
             </Text>
           </div>

diff --git a/stories/molecules/treemap-prototype/contributor-node.tsx b/stories/molecules/treemap-prototype/contributor-node.tsx
@@ -62,9 +62,7 @@ const NonMemoizedContributorNode = <Datum extends { id: string; value?: number;
               style={{ display: "block", borderRadius: "50%", border: "solid 2px white", flexShrink: 0, flexGrow: 0 }}
             />
 
-            <div className="font-medium" style={{ gridColumnStart: "2", alignItems: "center", alignSelf: "center" }}>
-              {node.id}
-            </div>
+            <div style={{ gridColumnStart: "2", alignItems: "center", alignSelf: "center" }}>{node.id}</div>
             <div
               className="font-normal"
               style={{ textOverflow: "ellipsis", gridColumnStart: "2", marginTop: "-0.5rem" }}

diff --git a/stories/molecules/treemap-prototype/special-node.tsx b/stories/molecules/treemap-prototype/special-node.tsx
@@ -51,7 +51,7 @@ const NonMemoizedSpecialNode = <Datum extends object>({
           }}
         >
           <div className="grid gap-2">
-            <div className="text-sm font-medium">{fullRepoName}</div>
+            <div className="text-sm">{fullRepoName}</div>
             <div className="text-xs font-normal" style={{ textOverflow: "ellipsis" }}>
               {node.label}
             </div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -9,7 +9,7 @@
 }
 
 * {
-  font-weight: 500;
+  @apply font-normal;
 }
 
 body {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     }
     * {
-      font-weight: 500;
+      @apply font-normal;
     }
     body {
@@ Expand Down @@