fix: styling tweaks to header areas and box shadow tweaks (#2058)

open-sauced · Nov 7, 2023 · 2ad5a3c · 2ad5a3c
2 parents 0a74372 + f020d0d
commit 2ad5a3c
Show file tree

Hide file tree

Showing 16 changed files with 17 additions and 18 deletions.
diff --git a/components/TabList/tab-list.tsx b/components/TabList/tab-list.tsx
@@ -20,7 +20,7 @@ const TabList: React.FC<NavProps> = ({ tabList, pageId, selectedTab }) => {
       aria-orientation="horizontal"
       aria-label="Browse the tools"
       tabIndex={0}
-      className="tool-list-nav flex w-full overflow-x-auto overflow-y-hidden gap-2 px-4 bg-light-slate-3 border-b pt-3"
+      className="tool-list-nav flex w-full overflow-x-auto overflow-y-hidden gap-2 px-4 border-b pt-3"
     >
       {tabList.map((tab, index) => (
         <div

diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx
@@ -9,9 +9,7 @@ interface CardProps {
 const Card: React.FC<CardProps> = ({ className, children, heading }) => {
   return (
     <article
-      className={`${className ? className : ""} block ${
-        heading ? "" : "p-3"
-      } bg-white border rounded-lg drop-shadow-md`}
+      className={`${className ? className : ""} block ${heading ? "" : "p-3"} bg-white border rounded-lg shadow-xs`}
     >
       {heading ? (
         <>

diff --git a/components/atoms/Dropdown/dropdown.tsx b/components/atoms/Dropdown/dropdown.tsx
@@ -15,7 +15,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={clsx(
-        "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 ",
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-slate-100 bg-white p-1 text-slate-700 shadow-xs animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 ",
         className
       )}
       {...props}

diff --git a/components/atoms/LayoutToggle/layout-toggle.tsx b/components/atoms/LayoutToggle/layout-toggle.tsx
@@ -15,7 +15,7 @@ const LayoutToggle = ({ value, onChange }: LayoutToggleProps) => {
   };
 
   return (
-    <div className="flex h-8 border rounded-lg shadow-md w-28 p-[1px] text-light-slate-9">
+    <div className="flex h-8 border rounded-lg shadow-xs w-28 p-[1px] text-light-slate-9">
       <div
         onClick={() => handleToggle("list")}
         role="toggle"

diff --git a/components/atoms/Select/select.tsx b/components/atoms/Select/select.tsx
@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={clsx(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border  shadow-md animate-in fade-in-80",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border  shadow-xs animate-in fade-in-80",
         position === "popper" && "translate-y-1",
         className
       )}

diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -158,7 +158,7 @@ const ContributorProfileHeader = ({
           <Tooltip content="Get dev card">
             <Link
               href={cardPageUrl(username!)}
-              className="absolute bottom-0 z-10 grid w-12 h-12 rounded-full shadow-md place-content-center border-conic-gradient right-4"
+              className="absolute bottom-0 z-10 grid w-12 h-12 rounded-full shadow-xs place-content-center border-conic-gradient right-4"
             >
               <div className="grid overflow-hidden rounded-full w-11 h-11 place-content-center bg-black/80">
                 <Image priority alt="user profile cover image" className="w-6 h-[1.7rem] " src={PizzaGradient} />
@@ -178,7 +178,7 @@ const ContributorProfileHeader = ({
           />
           <Link
             href={cardPageUrl(username!)}
-            className="absolute bottom-0 z-10 grid rounded-full shadow-md w-11 h-11 right-1 place-content-center border-conic-gradient"
+            className="absolute bottom-0 z-10 grid rounded-full shadow-xs w-11 h-11 right-1 place-content-center border-conic-gradient"
           >
             <div className="grid w-[2.5em] h-[2.5em] overflow-hidden rounded-full place-content-center bg-black/80">
               <Image priority alt="user profile cover image" className="w-5 h-5 " src={PizzaGradient} />

diff --git a/components/molecules/PieChart/pie-chart.tsx b/components/molecules/PieChart/pie-chart.tsx
@@ -49,7 +49,7 @@ const PieChart = ({ data }: PierChartProps) => {
         tooltip={function (e) {
           var t = e.datum;
           return (
-            <div className="bg-white py-1 px-2 rounded-lg shadow-md">
+            <div className="bg-white py-1 px-2 rounded-lg shadow-xs">
               <div className="flex gap-1 items-center text-light-slate-12 text-xs   capitalize">
                 <div className="w-2 h-2 rounded-full mr-1" style={{ backgroundColor: t.color }}></div>
                 <span className="font-semibold text-light-slate-11">{t.label}:</span> {t.formattedValue} PRs

diff --git a/components/molecules/Popover/popover.tsx b/components/molecules/Popover/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={clsx(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-xs outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

diff --git a/components/organisms/Header/header.tsx b/components/organisms/Header/header.tsx
@@ -7,7 +7,7 @@ interface HeaderProps {
 }
 const Header = ({ children, classNames }: HeaderProps): JSX.Element => {
   return (
-    <section className={clsx("flex flex-col pt-6 header md:flex-row md:px-16 bg-light-slate-3", classNames)}>
+    <section className={clsx("flex flex-col pt-6 header md:flex-row md:px-16 bg-light-slate-2", classNames)}>
       {children}
     </section>
   );

diff --git a/components/organisms/ToolList/nav.tsx b/components/organisms/ToolList/nav.tsx
@@ -21,7 +21,7 @@ const Nav: React.FC<NavProps> = ({ toolList, selectedTool = "dashboard", selecte
       aria-orientation="horizontal"
       aria-label="Browse the tools"
       tabIndex={0}
-      className="tool-list-nav flex w-full overflow-x-auto overflow-y-hidden gap-2 px-4 md:px-16 bg-light-slate-3 border-b pt-3"
+      className="tool-list-nav flex w-full overflow-x-auto overflow-y-hidden gap-2 px-4 md:px-16 border-b pt-3"
     >
       {toolList.map((tool, index) => (
         <div

diff --git a/components/organisms/TopNav/top-nav.tsx b/components/organisms/TopNav/top-nav.tsx
@@ -14,7 +14,7 @@ const TopNav: React.FC = () => {
   const { user } = useSupabaseAuth();
   const { onboarded } = useSession();
   return (
-    <header className="top-nav-container w-full fixed top-0 left-0 z-50 py-0.5 bg-light-slate-3 border-b">
+    <header className="top-nav-container w-full fixed top-0 left-0 z-50 py-0.5 bg-light-slate-2 border-b">
       <div className="flex justify-between items-center mx-auto container px-2 md:px-16">
         <div className="flex gap-3 md:gap-8 items-center">
           <HeaderLogo withBg={false} textIsBlack />

diff --git a/layouts/filter.tsx b/layouts/filter.tsx
@@ -14,7 +14,7 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="min-h-screen flex flex-col">
       <TopNav />
-      <div className="page-container flex grow bg-light-slate-3 flex-col pt-28 sm:pt-20 md:pt-14 items-center">
+      <div className="page-container flex grow flex-col pt-28 sm:pt-20 md:pt-14 items-center">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             <FilterHeader />

diff --git a/layouts/hub-contributors.tsx b/layouts/hub-contributors.tsx
@@ -7,7 +7,7 @@ const HubContributorsPageLayout = ({ children }: { children: React.ReactNode })
     <div className="flex flex-col min-h-screen">
       <TopNav />
 
-      <div className="flex flex-col items-center pt-20 page-container grow bg-light-slate-3 md:pt-14">
+      <div className="flex flex-col items-center pt-20 page-container grow md:pt-14">
         <main className="flex flex-col items-center flex-1 w-full bg-light-slate-3">
           <div className="container w-full mx-auto">{children}</div>
         </main>

diff --git a/layouts/hub-page.tsx b/layouts/hub-page.tsx
@@ -27,7 +27,7 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="flex flex-col items-center pt-20 page-container grow bg-light-slate-3 md:pt-14">
+      <div className="flex flex-col items-center pt-20 page-container grow md:pt-14">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             {insight ? (

diff --git a/layouts/lists.tsx b/layouts/lists.tsx
@@ -31,7 +31,7 @@ const ListPageLayout = ({
     <div className="flex flex-col min-h-screen">
       <TopNav />
 
-      <div className="flex flex-col items-center pt-20 page-container grow bg-light-slate-3 md:pt-14">
+      <div className="flex flex-col items-center pt-20 page-container grow md:pt-14">
         <div className="info-container md:px-16 container w-full min-h-[100px]">
           <Header classNames="px-0 md:px-0">
             {list && (

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -216,6 +216,7 @@ module.exports = {
         },
       },
       boxShadow: {
+        xs: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
         login: "0px 64px 100px -80px #FF5F13, 0px 16px 56px rgba(181, 107, 72, 0.19)",
         superlative: "0px 22px 24px -8px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.1)",
         paginate: "0px 1px 2px rgba(237, 95, 0, 0.05), 0px 1px 1px rgba(237, 95, 0, 0.05)",