From 9100480b17696fcb5a61d739805658857c5bd272 Mon Sep 17 00:00:00 2001 From: hunar Date: Wed, 20 Dec 2023 17:58:26 +0530 Subject: [PATCH 01/11] enhanced apps layout UI --- app/components/forms/input.tsx | 8 ++--- app/components/forms/select.tsx | 6 ++-- .../layout/breadcrumbs/breadcrumbs.tsx | 18 +++++----- app/components/layout/header/index.tsx | 35 +++++++++++-------- app/components/list/filters/filters.tsx | 2 +- app/components/list/list.tsx | 2 +- app/components/shared/button.tsx | 2 +- app/components/shared/card.tsx | 2 +- app/routes/_layout+/_layout.tsx | 4 +-- 9 files changed, 40 insertions(+), 39 deletions(-) diff --git a/app/components/forms/input.tsx b/app/components/forms/input.tsx index c15502f10..d4ba97080 100644 --- a/app/components/forms/input.tsx +++ b/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 ); diff --git a/app/components/forms/select.tsx b/app/components/forms/select.tsx index 784eac4f8..77544aeb4 100644 --- a/app/components/forms/select.tsx +++ b/app/components/forms/select.tsx @@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef< -
- {breadcrumbs.map((match, index) => ( - - ))} -
+
+ {breadcrumbs.map((match, index) => ( + + ))}
); } diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx index 21abf8113..8d978fb06 100644 --- a/app/components/layout/header/index.tsx +++ b/app/components/layout/header/index.tsx @@ -3,6 +3,7 @@ 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, @@ -22,23 +23,27 @@ export default function Header({ const header = data?.header; return header ? ( -
-
+
+
- - {title || header?.title} - - {subHeading ? ( - {subHeading} - ) : ( - header?.subHeading && {header.subHeading} - )} +
+ +
{children}
+
+
+ + {title || header?.title} + + {subHeading ? ( + {subHeading} + ) : ( + header?.subHeading && {header.subHeading} + )} +
- -
{children}
) : null; diff --git a/app/components/list/filters/filters.tsx b/app/components/list/filters/filters.tsx index 9b14327dc..1bf9f1556 100644 --- a/app/components/list/filters/filters.tsx +++ b/app/components/list/filters/filters.tsx @@ -65,7 +65,7 @@ export const Filters = ({ return (
diff --git a/app/components/list/list.tsx b/app/components/list/list.tsx index b8a6a0a48..0b3eceba2 100644 --- a/app/components/list/list.tsx +++ b/app/components/list/list.tsx @@ -38,7 +38,7 @@ export const List = ({ return (
diff --git a/app/components/shared/button.tsx b/app/components/shared/button.tsx index bb0254789..88b05d0fe 100644 --- a/app/components/shared/button.tsx +++ b/app/components/shared/button.tsx @@ -42,7 +42,7 @@ export const Button = React.forwardRef( ) { 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( diff --git a/app/components/shared/card.tsx b/app/components/shared/card.tsx index 757e34d5d..3a9e24715 100644 --- a/app/components/shared/card.tsx +++ b/app/components/shared/card.tsx @@ -7,7 +7,7 @@ export const Card = ({ children: React.ReactNode; className?: string; }) => ( -
+
{children}
); diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx index 3353889af..17ccad630 100644 --- a/app/routes/_layout+/_layout.tsx +++ b/app/routes/_layout+/_layout.tsx @@ -4,7 +4,6 @@ import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; import { json, redirect } from "@remix-run/node"; import { Outlet } from "@remix-run/react"; import { ErrorBoundryComponent } from "~/components/errors"; -import { Breadcrumbs } from "~/components/layout/breadcrumbs"; import Sidebar from "~/components/layout/sidebar/sidebar"; import { useCrisp } from "~/components/marketing/crisp"; import { Toaster } from "~/components/shared/toast"; @@ -110,9 +109,8 @@ export default function App() {
-
+
-
From 76d4f53bb8eb83d6eefaec510d5f4adb3c7da6e7 Mon Sep 17 00:00:00 2001 From: hunar Date: Wed, 20 Dec 2023 18:03:20 +0530 Subject: [PATCH 02/11] fixed headers mobile UI --- app/components/layout/header/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx index 8d978fb06..5808c8f2d 100644 --- a/app/components/layout/header/index.tsx +++ b/app/components/layout/header/index.tsx @@ -26,8 +26,11 @@ export default function Header({
-
+
+
{children}
+
+
{children}
From 11290e5e6997f3365e4e7e0013f30740d467987f Mon Sep 17 00:00:00 2001 From: hunar Date: Wed, 20 Dec 2023 18:25:26 +0530 Subject: [PATCH 03/11] Ui update --- app/components/layout/header/index.tsx | 4 ++-- app/routes/_layout+/_layout.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx index 5808c8f2d..7188aa655 100644 --- a/app/components/layout/header/index.tsx +++ b/app/components/layout/header/index.tsx @@ -23,10 +23,10 @@ export default function Header({ const header = data?.header; return header ? ( -
+
-
+
{children}
diff --git a/app/routes/_layout+/_layout.tsx b/app/routes/_layout+/_layout.tsx index 17ccad630..0117a3363 100644 --- a/app/routes/_layout+/_layout.tsx +++ b/app/routes/_layout+/_layout.tsx @@ -109,7 +109,7 @@ export default function App() {
-
+
From 13e1de8be3f1f3ae8eda94bde126ee845a69c91b Mon Sep 17 00:00:00 2001 From: hunar Date: Wed, 20 Dec 2023 20:16:11 +0530 Subject: [PATCH 04/11] Ui updates as per feedback --- app/components/layout/header/index.tsx | 29 +++++++++---------- .../layout/horizontal-tabs/index.tsx | 2 +- .../layout/sidebar/organization-select.tsx | 8 ++--- .../workspace/team-members-table.tsx | 2 +- app/components/workspace/users-table.tsx | 2 +- app/root.tsx | 10 ------- app/routes/_layout+/assets.$assetId.tsx | 20 ++++++------- app/routes/_layout+/dashboard.tsx | 3 ++ app/routes/_layout+/settings.account.tsx | 2 +- .../_layout+/settings.custom-fields.index.tsx | 2 +- app/routes/_layout+/settings.general.tsx | 2 +- app/routes/_layout+/settings.tsx | 2 +- .../_layout+/settings.workspace.index.tsx | 4 +-- 13 files changed, 38 insertions(+), 50 deletions(-) diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx index 7188aa655..68603210d 100644 --- a/app/components/layout/header/index.tsx +++ b/app/components/layout/header/index.tsx @@ -9,6 +9,7 @@ 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 @@ -16,6 +17,7 @@ export default function Header({ title?: string | null; children?: React.ReactNode; subHeading?: React.ReactNode; + hidePageDescription?: boolean; }) { const data = useLoaderData<{ header?: HeaderData; @@ -24,20 +26,17 @@ export default function Header({ return header ? (
-
-
-
- -
{children}
-
-
-
{children}
-
-
- +
+
+ +
{children}
+
+
+
{children}
+
+ {!hidePageDescription && ( +
+ {title || header?.title} {subHeading ? ( @@ -46,7 +45,7 @@ export default function Header({ header?.subHeading && {header.subHeading} )}
-
+ )}
) : null; diff --git a/app/components/layout/horizontal-tabs/index.tsx b/app/components/layout/horizontal-tabs/index.tsx index 5c204c805..64f3e28e3 100644 --- a/app/components/layout/horizontal-tabs/index.tsx +++ b/app/components/layout/horizontal-tabs/index.tsx @@ -3,7 +3,7 @@ import type { HorizontalTabsProps } from "./types"; export default function HorizontalTabs({ items }: HorizontalTabsProps) { return ( -
+
{items.map((item, index) => ( { }} > - + - -
+ +
{organizations.map((org) => (
diff --git a/app/components/list/pagination/pagination.tsx b/app/components/list/pagination/pagination.tsx index 9bf6aa3e0..6961ffa80 100644 --- a/app/components/list/pagination/pagination.tsx +++ b/app/components/list/pagination/pagination.tsx @@ -20,7 +20,7 @@ export const Pagination = () => { return (
-
+