fix: feeds page typography and styles improvements (#1467)

open-sauced · Aug 4, 2023 · a3b289e · a3b289e
1 parent 00d3f11
commit a3b289e
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 14 deletions.
diff --git a/components/atoms/TopContributorCard/top-contributor-card.tsx b/components/atoms/TopContributorCard/top-contributor-card.tsx
@@ -44,7 +44,7 @@ const TopContributorCard = ({ login }: TopContributorCardProps) => {
       <Link href={`/user/${login}`}>
         <div className="flex items-center gap-2">
           <Avatar isCircle size={35} avatarURL={getAvatarByUsername(login)} />
-          <p className="font-semibold text-light-slate-12">{login}</p>
+          <p className="text-sm font-semibold text-light-slate-12">{login}</p>
         </div>
       </Link>
       {sessionToken && !notFollowing ? (

diff --git a/components/atoms/UserCard/user-card.tsx b/components/atoms/UserCard/user-card.tsx
@@ -18,7 +18,7 @@ const UserCard = ({ username, name, meta, loading }: UserCardProps) => {
   const avatarUrl = getAvatarByUsername(username);
 
   return (
-    <div className="pb-6 border bg-light-slate-1 w-max rounded-2xl border-zinc-200">
+    <div className="w-full pb-6 border rounded-lg bg-light-slate-1 border-zinc-200">
       {loading ? (
         <div className="flex items-center justify-center h-32 w-72">
           <Spinner className="mt-6 " />
@@ -34,14 +34,14 @@ const UserCard = ({ username, name, meta, loading }: UserCardProps) => {
               alt={`${username}'s avatar image`}
             />
             <div className="text-center">
-              <h3>{name}</h3>
-              <Link className="text-light-slate-9" href={`/user/${username}`}>{`@${username}`}</Link>
+              <h3 className="text-lg ">{name}</h3>
+              <Link className="text-lg text-slate-700" href={`/user/${username}`}>{`@${username}`}</Link>
             </div>
           </div>
           <div className="flex items-center gap-5 text-base text-center ">
             {meta.map(({ name, count }, i) => (
               <div key={i.toLocaleString()}>
-                <p className="text-center text-light-slate-9">{name}</p>
+                <p className="text-xs text-center text-light-slate-9">{name}</p>
                 {count > 0 ? count : "-"}
               </div>
             ))}

diff --git a/components/molecules/AnnouncementCard/announcement-card.tsx b/components/molecules/AnnouncementCard/announcement-card.tsx
@@ -9,7 +9,7 @@ interface AnnouncementCardProps {
 }
 const AnnouncementCard = ({ title, description, bannerSrc, url }: AnnouncementCardProps) => {
   return (
-    <div className="overflow-hidden border bg-light-slate-1 rounded-xl">
+    <div className="overflow-hidden border rounded-lg bg-light-slate-1">
       <div className="w-full p-0.5 ">
         <AspectRatio.Root ratio={1.85 / 1}>
           <picture>
@@ -18,8 +18,8 @@ const AnnouncementCard = ({ title, description, bannerSrc, url }: AnnouncementCa
         </AspectRatio.Root>
       </div>
       <div className="flex flex-col gap-3 p-5">
-        <h1>{title}</h1>
-        <p className="font-light">{description}</p>
+        <h1 className="text-lg">{title}</h1>
+        <p className="text-sm font-normal text-light-slate-11">{description}</p>
         <a
           href={url}
           target="_blank"

diff --git a/components/molecules/FeaturedHighlightsPanel/featured-highlights-panel.tsx b/components/molecules/FeaturedHighlightsPanel/featured-highlights-panel.tsx
@@ -18,7 +18,7 @@ const FeaturedHighlightsPanel = ({ highlights }: FeaturedHighlightsPanelProps) =
       <h2 className="pb-2 text-lg border-b">Featured Highlights</h2>
       <div className="flex flex-col gap-4 text-sm">
         {highlights.map(({ id, title }) => (
-          <Link className="transition hover:text-light-orange-10" key={id} href={`${host}/feed/${id}`}>
+          <Link className="font-normal transition hover:text-light-orange-10" key={id} href={`${host}/feed/${id}`}>
             {title}
           </Link>
         ))}

diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -155,7 +155,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                 value={title}
                 maxLength={50}
                 onChange={(e) => setTitle(e.target.value)}
-                className="flex-1 focus:outline-none"
+                className="flex-1 font-normal placeholder:text-sm focus:outline-none"
                 type="text"
                 placeholder={isDivFocused ? "Add title (optional)" : "Post a highlight to show your work!"}
               />

diff --git a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
@@ -25,7 +25,7 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights
 
   return (
     <div className="py-4 px-6 rounded-lg bg-light-slate-1  border w-[18.625rem] h-max">
-      <Title className="!font-normal" level={3}>
+      <Title className="!text-lg" level={3}>
         Repositories
       </Title>
       <p className="mb-2 text-sm font-normal text-light-slate-11">Click to filter the highlights</p>

diff --git a/components/molecules/NewsletterForm/newsletter-form.tsx b/components/molecules/NewsletterForm/newsletter-form.tsx
@@ -68,7 +68,9 @@ const NewsletterForm = () => {
         <div className="flex flex-col w-full gap-3 px-4 py-6 border rounded-lg bg-light-slate-1">
           <div className="w-64 space-y-1">
             <h2 className="text-lg">Subscribe to our newsletter</h2>
-            <p className="text-sm text-light-slate-11">Stay up to date with the latest OpenSauced news and trends!</p>
+            <p className="text-sm font-normal text-light-slate-11">
+              Stay up to date with the latest OpenSauced news and trends!
+            </p>
           </div>
           <form
             name="newsletter"

diff --git a/components/molecules/TopContributorsPanel/top-contributors-panel.tsx b/components/molecules/TopContributorsPanel/top-contributors-panel.tsx
@@ -13,8 +13,8 @@ const TopContributorsPanel = ({ loggedInUserLogin }: TopContributorsPanelProps)
   const top3Contributors = topContributorsWithoutLoggedInUser.slice(0, 3).map((user) => user.login);
 
   return (
-    <div className="flex flex-col max-w-xs gap-6 p-6 border bg-light-slate-1 rounded-xl">
-      <h2 className="pb-2 text-2xl border-b">Top Contributors</h2>
+    <div className="flex flex-col max-w-xs gap-5 p-6 border rounded-lg bg-light-slate-1">
+      <h2 className="pb-2 text-lg border-b">Top Contributors</h2>
 
       {isLoading &&
         Array.from({ length: 3 }).map((_, i) => (