Skip to content

Commit

Permalink
Merge pull request #105 from kloudlite/design/frontend
Browse files Browse the repository at this point in the history 
Design/frontend
  • Loading branch information
@abdheshnayak
abdheshnayak authored Mar 1, 2024
2 parents 1b62aa7 + 3e7e2ab commit 4260659
Show file tree
Hide file tree
Showing 34 changed files with 2,214 additions and 2,170 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@codemirror/legacy-modes": "^6.3.3",
"@jengaicons/react": "^1.3.0",
"@mdx-js/react": "^2.3.0",
"@oshq/react-select": "^1.3.3",
"@oshq/react-select": "^1.4.1",
"@radix-ui/primitive": "^1.0.1",
"@radix-ui/react-alert-dialog": "1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

246 changes: 110 additions & 136 deletions src/apps/console/components/console-list-components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,169 +1,143 @@
import {ReactNode, useState} from 'react';
import { ReactNode } from 'react';
import Tooltip from '~/components/atoms/tooltip';
import {cn} from '~/components/utils';
import { cn } from '~/components/utils';

interface IBase {
className?: string;
action?: ReactNode;
className?: string;
action?: ReactNode;
}

const BaseStyle = 'flex flex-row items-center gap-xl';

const ListSecondary = ({
className,
action,
title,
avatar,
subtitle,
}: {
className?: string;
action?: ReactNode;
title?: ReactNode;
subtitle?: ReactNode;
avatar?: ReactNode;
className,
action,
title,
avatar,
subtitle,
}: {
className?: string;
action?: ReactNode;
title?: ReactNode;
subtitle?: ReactNode;
avatar?: ReactNode;
}) => {
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-row items-center gap-xl flex-1 truncate">
{avatar}
<div className="flex flex-col gap-sm flex-1 truncate">
{title && (
<div className="bodySm truncate text-text-soft pulsable">
{title}
</div>
)}

{subtitle && (
<div className="bodyMd-medium truncate pulsable">{subtitle}</div>
)}
</div>
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-row items-center gap-xl flex-1 truncate">
{avatar}
<div className="flex flex-col gap-sm flex-1 truncate">
{title && (
<div className="bodySm truncate text-text-soft pulsable">
{title}
</div>
{action}
)}

{subtitle && (
<div className="bodyMd-medium truncate pulsable">{subtitle}</div>
)}
</div>
);
</div>
{action}
</div>
);
};

const ListBody = ({
data,
className = '',
action,
}: {
data: ReactNode;
data,
className = '',
action,
}: {
data: ReactNode;
} & IBase) => {
return (
<div
className={cn('bodyMd text-text-strong truncate', BaseStyle, className)}
>
<div className="flex-1 truncate pulsable">{data}</div>
{action}
</div>
);
return (
<div
className={cn('bodyMd text-text-strong truncate', BaseStyle, className)}
>
<div className="flex-1 truncate pulsable">{data}</div>
{action}
</div>
);
};

const ListItem = ({
data,
subtitle,
className = '',
action,
}: {
data?: ReactNode;
subtitle?: ReactNode;
data,
subtitle,
className = '',
action,
}: {
data?: ReactNode;
subtitle?: ReactNode;
} & IBase) => {
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-col flex-1 truncate">
{data && (
<div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
{data}
</div>
)}
{subtitle && (
<div className="pulsable bodyMd text-text-soft truncate">
{subtitle}
</div>
)}
</div>
{action}
</div>
);
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-col flex-1 truncate">
{data && (
<div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
{data}
</div>
)}
{subtitle && (
<div className="pulsable bodyMd text-text-soft truncate">
{subtitle}
</div>
)}
</div>
{action}
</div>
);
};

const ListTitle = ({
className,
action,
title,
avatar,
subtitle,
}: {
className?: string;
action?: ReactNode;
title?: ReactNode;
subtitle?: ReactNode;
avatar?: ReactNode;
className,
action,
title,
avatar,
subtitle,
}: {
className?: string;
action?: ReactNode;
title?: ReactNode;
subtitle?: ReactNode;
avatar?: ReactNode;
}) => {
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-row items-center gap-xl flex-1 truncate">
{avatar}
<div className="flex flex-col gap-sm flex-1 truncate">
{title && (
<div className="bodyMd-semibold text-text-default truncate pulsable">
<Tooltip.Root
className="!w-fit !max-w-fit"
side="top"
content={<div className="bodySm text-text-strong">{title}</div>}
>
<span className="w-fit">{title}</span>
</Tooltip.Root>
</div>
)}

{subtitle && (
<div className="bodySm text-text-soft truncate pulsable">
{subtitle}
</div>
)}
</div>
return (
<div className={cn(BaseStyle, className)}>
<div className="flex flex-row items-center gap-xl flex-1 truncate">
{avatar}
<div className="flex flex-col gap-sm flex-1 truncate">
{title && (
<div className="bodyMd-semibold text-text-default truncate pulsable">
<Tooltip.Root
className="!w-fit !max-w-fit"
side="top"
content={<div className="bodySm text-text-strong">{title}</div>}
>
<span className="w-fit">{title}</span>
</Tooltip.Root>
</div>
{action}
</div>
);
};
)}

const ListDomainItem = ({
data,
value,
}: {
data: ReactNode;
value: string;
}) => {
return (
<div
onClick={(event) => {
event.preventDefault()
window.open(`https://${value}`, "_blank")
}}
className="flex flex-row gap-md items-center"
>
<div className="flex flex-col flex-1">
{data && (
<div className="bodyMd-medium text-border-focus underline underline-offset-2 truncate pulsable">
{data}
</div>
)}
{subtitle && (
<div className="bodySm text-text-soft truncate pulsable">
{subtitle}
</div>
)}
</div>
);
</div>
{action}
</div>
);
};

const listFlex = ({key}: { key: string }) => ({
key,
className: 'basis-full',
render: () => <div/>,
const listFlex = ({ key }: { key: string }) => ({
key,
className: 'basis-full',
render: () => <div />,
});

const listClass = {
title: 'w-[180px] min-w-[180px] max-w-[180px] mr-2xl',
author: 'w-[180px] min-w-[180px] max-w-[180px]',
title: 'w-[180px] min-w-[180px] max-w-[180px] mr-2xl',
author: 'w-[180px] min-w-[180px] max-w-[180px]',
};
export {ListBody, ListItem, ListTitle, ListSecondary, listFlex, ListDomainItem, listClass};
export { ListBody, ListItem, ListTitle, ListSecondary, listFlex, listClass };
13 changes: 2 additions & 11 deletions src/apps/console/components/git.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import { useAppend, useMapper } from '~/components/utils';
import { ReactNode, useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { Button } from '~/components/atoms/button';
import { useReload } from '~/root/lib/client/helpers/reloader';
import { useLocation } from '@remix-run/react';
import { ILoginUrls, ILogins } from '../server/gql/queries/git-queries';
import Pulsable from './pulsable';
import useGit, { IGIT_PROVIDERS } from '../hooks/use-git';
Expand Down Expand Up @@ -320,7 +318,7 @@ const Git = ({
size="lg"
valueRender={valueRender}
options={async () => accountsModified}
value={{ label: org, value: org }}
value={org}
onChange={(res) => {
switch (res.value) {
case extraAddOption:
Expand Down Expand Up @@ -434,14 +432,7 @@ const Git = ({
<Select
label="Select branch"
size="lg"
value={
branch && !showProviderOverlay
? {
label: branch,
value: branch,
}
: undefined
}
value={branch && !showProviderOverlay ? branch : undefined}
disabled={!repo || showProviderOverlay}
placeholder="Select a branch"
options={async () => [
Expand Down
Loading

0 comments on commit 4260659

Please sign in to comment.