sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-23 04:38:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Simplify the home page color scheme and overall design

Browse source
This commit is contained in:
sabaimran 2024-12-19 14:02:49 -08:00
parent 0ae21e5628
commit a4aeb9fdf3
4 changed files with 28 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/interface/web/app/automations/page.tsx
View file

@ -320,9 +320,7 @@ function AutomationsCard(props: AutomationsCardProps) {
} }
return ( return (
<Card <Card className={`h-full shadow-md rounded-lg dark:bg-muted ${styles.automationCard}`}>
className={`bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border ${styles.automationCard}`}
>
<CardHeader> <CardHeader>
<CardTitle className="line-clamp-2 leading-normal flex justify-between"> <CardTitle className="line-clamp-2 leading-normal flex justify-between">
{updatedAutomationData?.subject || automation.subject} {updatedAutomationData?.subject || automation.subject}
@ -884,13 +882,13 @@ function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfil
return ( return (
<div className="flex flex-wrap gap-2 items-center justify-start"> <div className="flex flex-wrap gap-2 items-center justify-start">
{authenticatedData ? ( {authenticatedData ? (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" /> <Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
{authenticatedData.email} {authenticatedData.email}
</span> </span>
) : null} ) : null}
{ipLocationData && ( {ipLocationData && (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" /> <MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
{ipLocationData {ipLocationData
? `${ipLocationData.city}, ${ipLocationData.country}` ? `${ipLocationData.city}, ${ipLocationData.country}`
@ -898,7 +896,7 @@ function metadataMap(ipLocationData: LocationData, authenticatedData: UserProfil
</span> </span>
)} )}
{ipLocationData && ( {ipLocationData && (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<Clock className="h-4 w-4 mr-2 inline text-green-500" /> <Clock className="h-4 w-4 mr-2 inline text-green-500" />
{ipLocationData ? `${ipLocationData.timezone}` : "Unknown"} {ipLocationData ? `${ipLocationData.timezone}` : "Unknown"}
</span> </span>
@ -1039,13 +1037,13 @@ export default function Automations() {
<h1 className="text-3xl flex items-center">Automations</h1> <h1 className="text-3xl flex items-center">Automations</h1>
<div className="flex flex-wrap gap-2 items-center justify-start"> <div className="flex flex-wrap gap-2 items-center justify-start">
{authenticatedData ? ( {authenticatedData ? (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" /> <Envelope className="h-4 w-4 mr-2 inline text-orange-500 shadow-sm" />
{authenticatedData.email} {authenticatedData.email}
</span> </span>
) : null} ) : null}
{locationData && ( {locationData && (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" /> <MapPinSimple className="h-4 w-4 mr-2 inline text-purple-500" />
{locationData {locationData
? `${locationData.city}, ${locationData.country}` ? `${locationData.city}, ${locationData.country}`
@ -1053,7 +1051,7 @@ export default function Automations() {
</span> </span>
)} )}
{locationData && ( {locationData && (
<span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm"> <span className="rounded-lg text-sm border-secondary border p-1 flex items-center shadow-sm dark:bg-muted">
<Clock className="h-4 w-4 mr-2 inline text-green-500" /> <Clock className="h-4 w-4 mr-2 inline text-green-500" />
{locationData ? `${locationData.timezone}` : "Unknown"} {locationData ? `${locationData.timezone}` : "Unknown"}
</span> </span>
@ -1076,7 +1074,6 @@ export default function Automations() {
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<div className="flex justify-between items-center py-4"> <div className="flex justify-between items-center py-4">
<h3 className="text-xl">Your Creations</h3>
{authenticatedData ? ( {authenticatedData ? (
<AutomationComponentWrapper <AutomationComponentWrapper
isMobileWidth={isMobileWidth} isMobileWidth={isMobileWidth}
@ -1110,35 +1107,6 @@ export default function Automations() {
setNewAutomationData={setNewAutomationData} setNewAutomationData={setNewAutomationData}
/> />
</Suspense> </Suspense>
{(!personalAutomations || personalAutomations.length === 0) &&
allNewAutomations.length == 0 &&
!isLoading && (
<div className="px-4">
So empty! Create your own automation to get started.
<div className="mt-4">
{authenticatedData ? (
<AutomationComponentWrapper
isMobileWidth={isMobileWidth}
callToAction="Design Automation"
createNew={true}
setIsCreating={setIsCreating}
setShowLoginPrompt={setShowLoginPrompt}
setNewAutomationData={setNewAutomationData}
authenticatedData={authenticatedData}
isCreating={isCreating}
ipLocationData={locationData}
/>
) : (
<Button
onClick={() => setShowLoginPrompt(true)}
variant={"default"}
>
Design
</Button>
)}
</div>
</div>
)}
{isLoading && <InlineLoading message="booting up your automations" />} {isLoading && <InlineLoading message="booting up your automations" />}
<div className={`${styles.automationsLayout}`}> <div className={`${styles.automationsLayout}`}>
{personalAutomations && {personalAutomations &&
@ -1165,7 +1133,7 @@ export default function Automations() {
/> />
))} ))}
</div> </div>
<h3 className="text-xl py-4">Try these out</h3> <h3 className="text-xl py-4">Explore</h3>
<div className={`${styles.automationsLayout}`}> <div className={`${styles.automationsLayout}`}>
{suggestedAutomations.map((automation) => ( {suggestedAutomations.map((automation) => (
<AutomationsCard <AutomationsCard

27
src/interface/web/app/components/agentCard/agentCard.tsx
View file

@ -321,9 +321,7 @@ export function AgentCard(props: AgentCardProps) {
} }
return ( return (
<Card <Card className={`shadow-md rounded-xl hover:shadow-lg dark:bg-muted`}>
className={`shadow-sm bg-gradient-to-b from-white 20% to-${props.data.color ? props.data.color : "gray"}-100/50 dark:from-[hsl(var(--background))] dark:to-${props.data.color ? props.data.color : "gray"}-950/50 rounded-xl hover:shadow-md`}
>
{showLoginPrompt && ( {showLoginPrompt && (
<LoginPrompt <LoginPrompt
loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`} loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
@ -404,7 +402,7 @@ export function AgentCard(props: AgentCardProps) {
</div> </div>
)} )}
{(props.showChatButton ?? true) && ( {(props.showChatButton ?? true) && (
<div className="float-right"> <div className="float-right ml-2">
{props.userProfile ? ( {props.userProfile ? (
<Button <Button
className={`bg-[hsl(var(--background))] w-10 h-10 p-0 rounded-xl border dark:border-neutral-700 shadow-sm hover:bg-stone-100 dark:hover:bg-neutral-900`} className={`bg-[hsl(var(--background))] w-10 h-10 p-0 rounded-xl border dark:border-neutral-700 shadow-sm hover:bg-stone-100 dark:hover:bg-neutral-900`}
@ -733,7 +731,11 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
memorable. memorable.
</FormDescription> </FormDescription>
<FormControl> <FormControl>
<Input placeholder="Biologist" {...field} /> <Input
className="dark:bg-muted"
placeholder="Biologist"
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -765,7 +767,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
disabled={!props.isSubscribed} disabled={!props.isSubscribed}
> >
<FormControl> <FormControl>
<SelectTrigger className="text-left"> <SelectTrigger className="text-left dark:bg-muted">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -825,7 +827,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
</FormDescription> </FormDescription>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-[200px] dark:bg-muted">
<SelectValue placeholder="private" /> <SelectValue placeholder="private" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -855,7 +857,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<FormLabel>Color</FormLabel> <FormLabel>Color</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-[200px] dark:bg-muted">
<SelectValue placeholder="Color" /> <SelectValue placeholder="Color" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -889,7 +891,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<FormLabel>Icon</FormLabel> <FormLabel>Icon</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger className="w-[200px]"> <SelectTrigger className="w-[200px] dark:bg-muted">
<SelectValue placeholder="Icon" /> <SelectValue placeholder="Icon" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
@ -930,6 +932,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
</FormDescription> </FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
className="dark:bg-muted"
placeholder="You are an excellent biologist, at the top of your field in marine biology." placeholder="You are an excellent biologist, at the top of your field in marine biology."
{...field} {...field}
/> />
@ -953,7 +956,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<a href="/settings">Manage data</a>. <a href="/settings">Manage data</a>.
</FormDescription> </FormDescription>
<Collapsible> <Collapsible>
<CollapsibleTrigger className="flex items-center justify-between text-sm gap-2"> <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
<CaretUpDown /> <CaretUpDown />
{field.value && field.value.length > 0 {field.value && field.value.length > 0
? `${field.value.length} files selected` ? `${field.value.length} files selected`
@ -1085,7 +1088,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<b>Default:</b> No limitations. <b>Default:</b> No limitations.
</FormDescription> </FormDescription>
<Collapsible> <Collapsible>
<CollapsibleTrigger className="flex items-center justify-between text-sm gap-2"> <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
<CaretUpDown /> <CaretUpDown />
{field.value && field.value.length > 0 {field.value && field.value.length > 0
? `${field.value.length} tools selected` ? `${field.value.length} tools selected`
@ -1171,7 +1174,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<b>Default:</b> No limitations. <b>Default:</b> No limitations.
</FormDescription> </FormDescription>
<Collapsible> <Collapsible>
<CollapsibleTrigger className="flex items-center justify-between text-sm gap-2"> <CollapsibleTrigger className="flex items-center justify-between text-sm gap-2 bg-muted p-2 rounded-lg">
<CaretUpDown /> <CaretUpDown />
{field.value && field.value.length > 0 {field.value && field.value.length > 0
? `${field.value.length} modes selected` ? `${field.value.length} modes selected`

3
src/interface/web/app/components/suggestions/suggestionCard.tsx
View file

@ -13,8 +13,7 @@ interface SuggestionCardProps {
} }
export default function SuggestionCard(data: SuggestionCardProps) { export default function SuggestionCard(data: SuggestionCardProps) {
const bgColors = converColorToBgGradient(data.color); const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[180px] cursor-pointer md:p-2`;
const descriptionClassName = `${styles.text} dark:text-white`; const descriptionClassName = `${styles.text} dark:text-white`;
const cardContent = ( const cardContent = (

8
src/interface/web/app/settings/page.tsx
View file

@ -512,7 +512,7 @@ export default function SettingsView() {
const isMobileWidth = useIsMobileWidth(); const isMobileWidth = useIsMobileWidth();
const cardClassName = const cardClassName =
"w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg bg-gradient-to-b from-background to-gray-50 dark:to-gray-950 border border-opacity-50"; "w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg border dark:border-none dark:bg-muted border-opacity-50";
useEffect(() => { useEffect(() => {
setUserConfig(initialUserConfig); setUserConfig(initialUserConfig);
@ -1293,9 +1293,9 @@ export default function SettingsView() {
<div id="clients" className="text-2xl"> <div id="clients" className="text-2xl">
Clients Clients
</div> </div>
<div className="cards flex flex-wrap gap-8"> <div className="cards flex flex-col flex-wrap gap-8">
{!userConfig.anonymous_mode && ( {!userConfig.anonymous_mode && (
<Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg bg-gradient-to-b from-background to-gray-50 dark:to-gray-950"> <Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg dark:bg-muted dark:border-none border-opacity-50 lg:w-2/3">
<CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0"> <CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0">
<span className="flex flex-wrap"> <span className="flex flex-wrap">
<Key className="h-7 w-7 mr-2" /> <Key className="h-7 w-7 mr-2" />
@ -1377,7 +1377,7 @@ export default function SettingsView() {
<CardFooter className="flex flex-wrap gap-4"></CardFooter> <CardFooter className="flex flex-wrap gap-4"></CardFooter>
</Card> </Card>
)} )}
<Card className={cardClassName}> <Card className={`${cardClassName} lg:w-2/3`}>
<CardHeader className="text-xl flex flex-row"> <CardHeader className="text-xl flex flex-row">
<WhatsappLogo className="h-7 w-7 mr-2" /> <WhatsappLogo className="h-7 w-7 mr-2" />
Chat on Whatsapp Chat on Whatsapp