Merge pull request Shelf-nu#626 from Shelf-nu/617-fix

Implements front-end styling changes

app/components/assets/actions-dropdown.tsx

@@ -79,9 +79,9 @@ const ConditionalActionsDropdown = ({ asset }: Props) => {
         <DropdownMenuContent
           asChild
           align="end"
-          className="order actions-dropdown static w-screen rounded-b-none rounded-t-lg bg-white p-0 text-right md:static md:w-[180px] md:rounded-lg"
+          className="order actions-dropdown static w-screen rounded-b-none rounded-t-[4px] bg-white p-0 text-right md:static md:w-[180px] md:rounded-t-[4px]"
         >
-          <div className="order fixed bottom-0 left-0 w-screen rounded-b-none rounded-t-lg bg-white p-0 text-right md:static md:w-[180px] md:rounded-lg">
+          <div className="order fixed bottom-0 left-0 w-screen rounded-b-none rounded-t-[4px] bg-white p-0 text-right md:static md:w-[180px] md:rounded-t-[4px]">
             <DropdownMenuItem className="border-b p-4 md:mb-0 md:p-0">
               {!assetIsAvailable ? (
                 <Button

app/components/assets/notes/actions-dropdown.tsx

@@ -17,7 +17,7 @@ export const ActionsDopdown = ({ noteId }: Props) => (
     </DropdownMenuTrigger>
     <DropdownMenuContent
       align="end"
-      className="order w-[180px] rounded-md bg-white p-1.5 text-right"
+      className="order w-[180px] rounded bg-white p-1.5 text-right"
     >
       <div className="relative flex  select-none items-center rounded p-2 text-left text-[13px] leading-none outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gradient-to-br hover:bg-gray-100">
         <DeleteNote noteId={noteId} />

app/components/dashboard/assets-for-each-month.tsx

@@ -1,5 +1,5 @@
 import { useLoaderData } from "@remix-run/react";
-import { AreaChart, Card, Title } from "@tremor/react";
+import { AreaChart, Title } from "@tremor/react";
 import { ClientOnly } from "remix-utils/client-only";
 import type { loader } from "~/routes/_layout+/dashboard";
 import FallbackLoading from "./fallback-loading";
@@ -9,7 +9,7 @@ export default function AssetsForEachMonth() {
   const { totalAssetsAtEndOfEachMonth, totalAssets } =
     useLoaderData<typeof loader>();
   return (
-    <Card className="mb-10 py-4 lg:p-6">
+    <div className="mb-10 rounded border py-4 lg:p-6">
       <ClientOnly fallback={<FallbackLoading className="h-[368px]" />}>
         {() => (
           <>
@@ -49,6 +49,6 @@ export default function AssetsForEachMonth() {
           </>
         )}
       </ClientOnly>
-    </Card>
+    </div>
   );
 }

app/components/forms/input.tsx

@@ -70,7 +70,7 @@ const Input = forwardRef(function Input(
   );
 
   const addonClasses = tw(
-    "pointer-events-none flex items-center rounded-l-[8px] border-y border-l border-gray-300 bg-white px-[14px] text-gray-600"
+    "pointer-events-none flex items-center rounded-l-[4px] border-y border-l border-gray-300 bg-white px-[14px] text-gray-600"
   );
 
   const inputClasses = tw(
@@ -81,9 +81,9 @@ const Input = forwardRef(function Input(
     /** Add or remove classes depending on weather we use an icon or addOn */
     icon || addOn
       ? icon
-        ? "rounded-[8px] pl-[42px]"
-        : "rounded-l-none rounded-r-[8px]"
-      : "rounded-[8px]",
+        ? "rounded-[4px] pl-[42px]"
+        : "rounded-l-none rounded-r-[4px]"
+      : "rounded-[4px]",
     hasAttachedButton ? tw("rounded-r-none") : undefined,
     inputClassName
   );

app/components/forms/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
       ref={ref}
       className={tw(
-        "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-[16px] text-gray-500 placeholder:text-gray-500 focus:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-25 focus:ring-offset-2  disabled:opacity-50 ",
+        "flex h-10 w-full items-center justify-between rounded border border-gray-300 bg-white px-3 py-2 text-[16px] text-gray-500 placeholder:text-gray-500 focus:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-25 focus:ring-offset-2  disabled:opacity-50 ",
         className
       )}
       {...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
       <SelectPrimitive.Content
         ref={ref}
         className={tw(
-          " relative z-50 overflow-hidden rounded-lg border border-gray-300 bg-white  p-3  shadow-md animate-in fade-in-80",
+          " relative z-50 overflow-hidden rounded border border-gray-300 bg-white  p-3  shadow-md animate-in fade-in-80",
           className
         )}
         {...props}
@@ -75,7 +75,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
       ref={ref}
       className={tw(
-        "relative flex cursor-default select-none items-center rounded-lg p-1 text-sm font-medium outline-none focus:bg-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+        "relative flex cursor-default select-none items-center rounded p-1 text-sm font-medium outline-none focus:bg-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
         className
       )}
       {...props}

app/components/layout/breadcrumbs/breadcrumb.tsx

@@ -15,11 +15,20 @@ export function Breadcrumb({
    * This takes care of showing the correct title in asset show page*/
   if (typeof breadcrumb === "string" && breadcrumb === "single") {
     if (match?.data?.location) {
-      breadcrumb = match?.data?.location?.name || "Not found";
+      breadcrumb =
+        <span className="single-crumb">{match?.data?.location?.name}</span> ||
+        "Not found";
     } else if (match?.data?.organization) {
-      breadcrumb = match?.data?.organization?.name || "Not found";
+      breadcrumb =
+        (
+          <span className="single-crumb">
+            {match?.data?.organization?.name}
+          </span>
+        ) || "Not found";
     } else {
-      breadcrumb = match?.data?.asset?.title || "Not found";
+      breadcrumb =
+        <span className="single-crumb">{match?.data?.asset?.title}</span> ||
+        "Not found";
     }
   }
 

app/components/layout/breadcrumbs/breadcrumbs.tsx

@@ -15,16 +15,14 @@ export function Breadcrumbs() {
   );
 
   return (
-    <div className="mb-5">
-      <div className="breadcrumbs">
-        {breadcrumbs.map((match, index) => (
-          <Breadcrumb
-            key={index}
-            match={match}
-            isLastItem={index === breadcrumbs.length - 1}
-          />
-        ))}
-      </div>
+    <div className="breadcrumbs">
+      {breadcrumbs.map((match, index) => (
+        <Breadcrumb
+          key={index}
+          match={match}
+          isLastItem={index === breadcrumbs.length - 1}
+        />
+      ))}
     </div>
   );
 }

app/components/layout/dialog.tsx

@@ -24,7 +24,7 @@ export const Dialog = ({
   return open ? (
     <div className="dialog-backdrop" onClick={handleBackdropClose}>
       <dialog className="dialog" open={true}>
-        <div className="scrollable-content relative z-10 h-full w-full overflow-y-auto bg-white p-6 shadow-lg md:max-h-[85vh] md:rounded-lg">
+        <div className="scrollable-content relative z-10 h-full w-full overflow-y-auto bg-white p-6 shadow-lg md:max-h-[85vh] md:rounded">
           <Button
             to={prevRoute}
             variant="link"

app/components/layout/header/index.tsx

@@ -3,42 +3,49 @@ import Heading from "~/components/shared/heading";
 import SubHeading from "~/components/shared/sub-heading";
 
 import type { HeaderData } from "./types";
+import { Breadcrumbs } from "../breadcrumbs";
 
 export default function Header({
   title = null,
   children,
   subHeading,
+  hidePageDescription = false,
 }: {
   /** Pass a title to replace the default route title set in the loader
    * This is very useful for interactive adjustments of the title
    */
   title?: string | null;
   children?: React.ReactNode;
   subHeading?: React.ReactNode;
+  hidePageDescription?: boolean;
 }) {
   const data = useLoaderData<{
     header?: HeaderData;
   }>();
   const header = data?.header;
 
   return header ? (
-    <header>
-      <div className="block sm:flex sm:items-center sm:justify-between sm:gap-3">
-        <div className="mb-4 sm:mb-0">
-          <Heading
-            as="h2"
-            className="break-all text-display-xs font-semibold md:text-display-sm"
-          >
-            {title || header?.title}
-          </Heading>
-          {subHeading ? (
-            <SubHeading>{subHeading}</SubHeading>
-          ) : (
-            header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>
-          )}
+    <header className="-mx-4 bg-white">
+      <div>
+        <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:py-3">
+          <Breadcrumbs />
+          <div className="hidden shrink-0 gap-3 md:flex">{children}</div>
         </div>
-
-        <div className="flex shrink-0 gap-3">{children}</div>
+        <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:hidden">
+          <div className="flex shrink-0 gap-3">{children}</div>
+        </div>
+        {!hidePageDescription && (
+          <div className="border-b border-gray-200 p-4">
+            <Heading as="h2" className="break-all text-[20px] font-semibold">
+              {title || header?.title}
+            </Heading>
+            {subHeading ? (
+              <SubHeading>{subHeading}</SubHeading>
+            ) : (
+              header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>
+            )}
+          </div>
+        )}
       </div>
     </header>
   ) : null;

app/components/layout/horizontal-tabs/index.tsx

@@ -3,18 +3,19 @@ import type { HorizontalTabsProps } from "./types";
 
 export default function HorizontalTabs({ items }: HorizontalTabsProps) {
   return (
-    <div className="horizontal-menu -mr-4 mb-9 mt-6 flex overflow-scroll lg:mr-0">
+    // eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values
+    <div className="horizontal-menu -mx-4 mb-5 flex overflow-scroll border-b border-b-gray-200 bg-white pl-4 ">
       {items.map((item, index) => (
         <NavLink
           to={item.to}
           key={item.content}
           className={({ isActive }) =>
             `${
               index === 0 ? "pl-1 pr-3" : "px-3"
-            } whitespace-nowrap pb-[11px] pt-[1px] text-text-sm font-semibold  ${
+            } whitespace-nowrap py-[11px] text-text-sm font-semibold  ${
               isActive
                 ? "border-b-2 border-b-primary-700 text-primary-700"
-                : "border-b border-b-gray-200 pb-[12px] text-gray-500"
+                : " pb-[12px] text-gray-500"
             }`
           }
         >

app/components/layout/sidebar/bottom.tsx

@@ -18,34 +18,30 @@ interface Props {
   isSidebarMinimized: boolean;
 }
 
-export default function SidebarBottom({ user, isSidebarMinimized }: Props) {
+export default function SidebarBottom({ user }: Props) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   return (
     <div className="bottom gap-2">
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger
           onClick={() => setDropdownOpen((prev) => !prev)}
-          className="outline-none focus-visible:border-0"
+          className="w-full outline-none focus-visible:border-0"
         >
           <div
-            className={`flex items-center justify-between gap-x-5 rounded-lg border-[1px] border-gray-200 p-2 hover:bg-gray-100 ${
-              isSidebarMinimized && "w-[57px]"
-            }`}
+            className={`flex w-full items-center justify-between gap-x-3 rounded border-[1px] border-gray-200 p-2 hover:bg-gray-100`}
           >
-            <div className="flex gap-3">
-              <ProfilePicture width="w-10" height="h-10" />
-              <div className="user-credentials flex-1 text-left text-[14px] transition-all duration-200 ease-linear">
-                <div className="line-clamp-1 block text-ellipsis font-semibold">
-                  {user.username}
-                </div>
-                <p
-                  className="line-clamp-1 block text-ellipsis"
-                  data-test-id="userEmail"
-                >
-                  {user.email}
-                </p>
+            <ProfilePicture width="w-8" height="h-8" />
+            <div className="user-credentials flex-1 text-left text-[14px] transition-all duration-200 ease-linear">
+              <div className="line-clamp-1 block text-ellipsis font-semibold">
+                {user.username}
               </div>
+              <p
+                className="line-clamp-1 block text-ellipsis"
+                data-test-id="userEmail"
+              >
+                {user.email}
+              </p>
             </div>
 
             <i
@@ -60,7 +56,7 @@ export default function SidebarBottom({ user, isSidebarMinimized }: Props) {
 
         <DropdownMenuContent
           align="end"
-          className="order ml-[16px] w-[260px] rounded-md bg-white p-0 text-right"
+          className="order ml-[16px] w-[280px] rounded-md bg-white p-0 text-right"
         >
           <DropdownMenuItem className="border-b-[1px] border-gray-200 px-4 py-3">
             <Button

app/components/layout/sidebar/menu-items.tsx

@@ -95,7 +95,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                 onClick={toggleMobileNav}
                 title={item.label}
               >
-                <i className="icon text-gray-500">{item.icon}</i>
+                <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
                 <span className="text whitespace-nowrap transition duration-200 ease-linear">
                   {item.label}
                 </span>
@@ -130,7 +130,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   onClick={toggleMobileNav}
                   title={item.label}
                 >
-                  <i className="icon text-gray-500">{item.icon}</i>
+                  <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">
                     {item.label}
                   </span>
@@ -153,7 +153,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                     "crisp-btn mt-1 flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
                   )}
                 >
-                  <i className="icon text-gray-500">
+                  <i className="icon pl-[2px] text-gray-500">
                     <SwitchIcon />
                   </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">

app/components/layout/sidebar/organization-select.tsx

@@ -28,15 +28,11 @@ export const OrganizationSelect = () => {
       }}
     >
       <Select name="organizationId" defaultValue={currentOrganizationId}>
-        <SelectTrigger className="p-3">
+        <SelectTrigger className="w-full p-3">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent
-          position="popper"
-          className="w-full min-w-[300px]"
-          align="start"
-        >
-          <div className=" max-h-[320px] overflow-auto">
+        <SelectContent position="popper" className="w-full" align="start">
+          <div className=" max-h-[320px] w-[253px] overflow-auto">
             {organizations.map((org) => (
               <SelectItem value={org.id} key={org.id} className="p-2">
                 <div className="flex items-center gap-2">

app/components/list/filters/filters.tsx

@@ -65,7 +65,7 @@ export const Filters = ({
   return (
     <div
       className={tw(
-        "flex items-center justify-between bg-white md:rounded-[12px] md:border md:border-gray-200 md:px-6 md:py-5",
+        "flex items-center justify-between bg-white md:rounded md:border md:border-gray-200 md:px-6 md:py-5",
         className
       )}
     >

app/components/list/list.tsx

@@ -38,7 +38,7 @@ export const List = ({
   return (
     <div
       className={tw(
-        "-mx-4 overflow-x-auto border border-gray-200  bg-white md:mx-0 md:rounded-[12px]",
+        "-mx-4 overflow-x-auto border border-gray-200  bg-white md:mx-0 md:rounded",
         className
       )}
     >

app/components/list/pagination/pagination.tsx

@@ -20,7 +20,7 @@ export const Pagination = () => {
 
   return (
     <div className="flex items-center justify-center gap-3 px-6 pb-4 pt-3">
-      <div className="inline-flex items-center rounded-lg border border-gray-300 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]">
+      <div className="inline-flex items-center rounded border border-gray-300 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]">
         <Button
           variant="secondary"
           size="sm"

app/components/location/actions-dropdown.tsx

@@ -36,7 +36,7 @@ export const ActionsDopdown = ({ location, fullWidth }: Props) => (
     </DropdownMenuTrigger>
     <DropdownMenuContent
       align="end"
-      className="order w-[180px] rounded-md bg-white p-1.5 text-right "
+      className="order w-[180px] bg-white p-1.5 text-right "
     >
       <DropdownMenuItem>
         <Button

app/components/shared/button.tsx

@@ -42,7 +42,7 @@ export const Button = React.forwardRef<HTMLElement, ButtonProps>(
   ) {
     const Component = props?.to ? Link : as;
 
-    const baseButtonClasses = `inline-flex items-center justify-center rounded-lg font-semibold text-center  gap-2  max-w-xl border text-sm box-shadow-xs`;
+    const baseButtonClasses = `inline-flex items-center justify-center rounded font-semibold text-center  gap-2  max-w-xl border text-sm box-shadow-xs`;
 
     const variants = {
       primary: tw(

app/components/shared/card.tsx

@@ -7,7 +7,7 @@ export const Card = ({
   children: React.ReactNode;
   className?: string;
 }) => (
-  <div className={tw("my-4 rounded-lg border bg-white px-4 py-5", className)}>
+  <div className={tw("my-4 rounded border bg-white px-4 py-5", className)}>
     {children}
   </div>
 );