Merge pull request #4805 from janhq/fix/ui-minor-issue
fix: minor ui issue
This commit is contained in:
Faisal Amir
GitHub
commit
74f6682263
@ -51,7 +51,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
|
|||||||
>
|
>
|
||||||
<div className="flex h-full w-full justify-center">
|
<div className="flex h-full w-full justify-center">
|
||||||
<div className="flex w-full max-w-[800px] flex-col ">
|
<div className="flex w-full max-w-[800px] flex-col ">
|
||||||
<div className="sticky top-0 flex h-12 items-center bg-[hsla(var(--app-bg))] px-4">
|
<div className="sticky top-0 z-10 flex h-12 items-center bg-[hsla(var(--app-bg))] px-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
onClick={onGoBack}
|
onClick={onGoBack}
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { useCallback } from 'react'
|
|||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
|
|
||||||
import { fs, joinPath } from '@janhq/core'
|
import { fs, joinPath } from '@janhq/core'
|
||||||
import { Button, Select, Switch } from '@janhq/joi'
|
import { Button, ScrollArea, Select, Switch } from '@janhq/joi'
|
||||||
import { useAtom, useAtomValue } from 'jotai'
|
import { useAtom, useAtomValue } from 'jotai'
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
@ -73,147 +73,152 @@ export default function AppearanceOptions() {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="m-4 block">
|
<ScrollArea
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
type={showScrollBar ? 'always' : 'scroll'}
|
||||||
<div className="flex-shrink-0 space-y-1">
|
className="h-full w-full"
|
||||||
<div className="flex gap-x-2">
|
>
|
||||||
<h6 className="font-semibold capitalize">Appearance</h6>
|
<div className="m-4 block">
|
||||||
</div>
|
|
||||||
<p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
|
||||||
Select a color theme.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Select
|
|
||||||
position="popper"
|
|
||||||
sideOffset={4}
|
|
||||||
value={selectedIdTheme}
|
|
||||||
options={themeOptions}
|
|
||||||
onValueChange={(e) => handleClickTheme(e)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{themeData?.reduceTransparent && (
|
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
||||||
<div className="flex-shrink-0 space-y-1">
|
<div className="flex-shrink-0 space-y-1">
|
||||||
<div className="flex gap-x-2">
|
<div className="flex gap-x-2">
|
||||||
<h6 className="font-semibold capitalize">Interface theme</h6>
|
<h6 className="font-semibold capitalize">Appearance</h6>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
||||||
|
Select a color theme.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Select
|
||||||
|
position="popper"
|
||||||
|
sideOffset={4}
|
||||||
|
value={selectedIdTheme}
|
||||||
|
options={themeOptions}
|
||||||
|
onValueChange={(e) => handleClickTheme(e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{themeData?.reduceTransparent && (
|
||||||
|
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
||||||
|
<div className="flex-shrink-0 space-y-1">
|
||||||
|
<div className="flex gap-x-2">
|
||||||
|
<h6 className="font-semibold capitalize">Interface theme</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-x-2">
|
||||||
|
<Button
|
||||||
|
theme={reduceTransparent ? 'primary' : 'ghost'}
|
||||||
|
variant={reduceTransparent ? 'solid' : 'outline'}
|
||||||
|
onClick={() => setReduceTransparent(true)}
|
||||||
|
>
|
||||||
|
Solid
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
theme={reduceTransparent ? 'ghost' : 'primary'}
|
||||||
|
variant={reduceTransparent ? 'outline' : 'solid'}
|
||||||
|
onClick={() => setReduceTransparent(false)}
|
||||||
|
>
|
||||||
|
Translucent
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-2">
|
)}
|
||||||
<Button
|
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
||||||
theme={reduceTransparent ? 'primary' : 'ghost'}
|
<div className="w-full space-y-1 lg:w-3/4">
|
||||||
variant={reduceTransparent ? 'solid' : 'outline'}
|
<div className="flex gap-x-2">
|
||||||
onClick={() => setReduceTransparent(true)}
|
<h6 className="font-semibold capitalize">Chat Width</h6>
|
||||||
>
|
</div>
|
||||||
Solid
|
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
||||||
</Button>
|
Choose the width of the chat area to customize your conversation
|
||||||
<Button
|
view.
|
||||||
theme={reduceTransparent ? 'ghost' : 'primary'}
|
</p>
|
||||||
variant={reduceTransparent ? 'outline' : 'solid'}
|
|
||||||
onClick={() => setReduceTransparent(false)}
|
|
||||||
>
|
|
||||||
Translucent
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="flex-shrink-0">
|
||||||
)}
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
{chatWidthOption.map((option) => {
|
||||||
<div className="w-full space-y-1 lg:w-3/4">
|
return (
|
||||||
<div className="flex gap-x-2">
|
<div
|
||||||
<h6 className="font-semibold capitalize">Chat Width</h6>
|
className="inline-flex flex-col items-center justify-center text-center"
|
||||||
</div>
|
key={option.name}
|
||||||
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
|
||||||
Choose the width of the chat area to customize your conversation
|
|
||||||
view.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{chatWidthOption.map((option) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="inline-flex flex-col items-center justify-center text-center"
|
|
||||||
key={option.name}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="relative cursor-pointer"
|
|
||||||
htmlFor={option.name}
|
|
||||||
onClick={() => setChatWidth(option.value)}
|
|
||||||
>
|
>
|
||||||
<img
|
<label
|
||||||
src={theme === 'dark' ? option.darkImg : option.img}
|
className="relative cursor-pointer"
|
||||||
alt={option.value}
|
htmlFor={option.name}
|
||||||
width={140}
|
onClick={() => setChatWidth(option.value)}
|
||||||
className={twMerge(
|
>
|
||||||
'rounded-lg border-2 border-[hsla(var(--app-border))] bg-[hsla(var(--secondary-bg))] transition-all',
|
<img
|
||||||
chatWidth === option.value &&
|
src={theme === 'dark' ? option.darkImg : option.img}
|
||||||
'border-[hsla(var(--primary-bg))]'
|
alt={option.value}
|
||||||
|
width={140}
|
||||||
|
className={twMerge(
|
||||||
|
'rounded-lg border-2 border-[hsla(var(--app-border))] bg-[hsla(var(--secondary-bg))] transition-all',
|
||||||
|
chatWidth === option.value &&
|
||||||
|
'border-[hsla(var(--primary-bg))]'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<p className="my-2 font-medium">{option.name}</p>
|
||||||
|
{chatWidth === option.value && (
|
||||||
|
<div className="absolute right-2 top-2 ">
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
rx="8"
|
||||||
|
className="fill-[hsla(var(--primary-bg))]"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11.1111 5.66699L6.83333 9.94477L4.88889 8.00033"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="0.886667"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
</label>
|
||||||
<p className="my-2 font-medium">{option.name}</p>
|
</div>
|
||||||
{chatWidth === option.value && (
|
)
|
||||||
<div className="absolute right-2 top-2 ">
|
})}
|
||||||
<svg
|
</div>
|
||||||
width="24"
|
</div>
|
||||||
height="24"
|
</div>
|
||||||
viewBox="0 0 16 16"
|
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
||||||
fill="none"
|
<div className="w-full space-y-1 lg:w-3/4">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<div className="flex gap-x-2">
|
||||||
>
|
<h6 className="font-semibold capitalize">Spell Check</h6>
|
||||||
<rect
|
</div>
|
||||||
width="16"
|
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
||||||
height="16"
|
Turn on to enable spell check.
|
||||||
rx="8"
|
</p>
|
||||||
className="fill-[hsla(var(--primary-bg))]"
|
</div>
|
||||||
/>
|
<div className="flex-shrink-0">
|
||||||
<path
|
<Switch
|
||||||
d="M11.1111 5.66699L6.83333 9.94477L4.88889 8.00033"
|
checked={spellCheck}
|
||||||
stroke="white"
|
onChange={(e) => setSpellCheck(e.target.checked)}
|
||||||
strokeWidth="0.886667"
|
/>
|
||||||
strokeLinecap="round"
|
</div>
|
||||||
strokeLinejoin="round"
|
</div>
|
||||||
/>
|
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
||||||
</svg>
|
<div className="w-full space-y-1 lg:w-3/4">
|
||||||
</div>
|
<div className="flex gap-x-2">
|
||||||
)}
|
<h6 className="font-semibold capitalize">Scrolling Bar</h6>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
||||||
)
|
Turn on to make scrolling bar visible across windows.
|
||||||
})}
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Switch
|
||||||
|
checked={showScrollBar}
|
||||||
|
onChange={(e) => setShowScrollBar(e.target.checked)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
</ScrollArea>
|
||||||
<div className="w-full space-y-1 lg:w-3/4">
|
|
||||||
<div className="flex gap-x-2">
|
|
||||||
<h6 className="font-semibold capitalize">Spell Check</h6>
|
|
||||||
</div>
|
|
||||||
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
|
||||||
Turn on to enable spell check.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<Switch
|
|
||||||
checked={spellCheck}
|
|
||||||
onChange={(e) => setSpellCheck(e.target.checked)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
|
|
||||||
<div className="w-full space-y-1 lg:w-3/4">
|
|
||||||
<div className="flex gap-x-2">
|
|
||||||
<h6 className="font-semibold capitalize">Scrolling Bar</h6>
|
|
||||||
</div>
|
|
||||||
<p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
|
||||||
Turn on to make scrolling bar visible across windows.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<Switch
|
|
||||||
checked={showScrollBar}
|
|
||||||
onChange={(e) => setShowScrollBar(e.target.checked)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -100,6 +100,9 @@
|
|||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
li {
|
li {
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
|
p {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user