Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reorganized the structure of tailwind.config.js #697

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions frontend/src/components/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@ const Alert: React.FC<Props> = (props) => {
return (
<div
className={twMerge(
'flex flex-col rounded border border-aws-squid-ink-light dark:border-aws-squid-ink-dark shadow-lg',
props.severity === 'info' && 'bg-aws-aqua',
props.severity === 'warning' && 'bg-yellow',
props.severity === 'error' && 'bg-red',
'flex flex-col rounded border border-aws-blue-navy dark:border-aws-black-smoke shadow-lg',
props.severity === 'info' && 'bg-aws-blue-cerulean',
props.severity === 'warning' && 'bg-aws-yellow',
props.severity === 'error' && 'bg-aws-aws-red',
props.className
)}>
<div
className={twMerge(
'flex gap-2 p-2 font-bold text-aws-font-color-white-light dark:text-aws-font-color-white-dark'
'flex gap-2 p-2 font-bold text-aws-white dark:text-aws-white-silver'
)}>
{icon}
<div>{props.title}</div>
</div>

<div className="px-2 pb-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
<div className="px-2 pb-2 text-aws-white dark:text-aws-white-silver">
{props.children}
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/ApiKeyItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,23 +64,23 @@ const ApiKeyItem: React.FC<Props> = (props) => {
{isLoading ? (
<Skeleton className="h-8 w-full" />
) : (
<div className="flex flex-col gap-1 rounded border border-aws-font-color-light/50 dark:border-aws-font-color-dark p-1 text-sm">
<div className="flex flex-col gap-1 rounded border border-aws-blue-navy/50 dark:border-aws-gray-light p-1 text-sm">
<div className="text-base font-semibold">
{botApiKey?.description}
</div>
<div className="flex items-center gap-3">
{botApiKey?.enabled ? (
<div className="flex w-24 items-center gap-1 text-aws-aqua">
<div className="flex w-24 items-center gap-1 text-aws-blue-cerulean">
<PiCheckCircleBold />
{t('bot.apiSettings.label.apiKeyDetail.active')}
</div>
) : (
<div className="flex w-24 items-center gap-1 text-red">
<div className="flex w-24 items-center gap-1 text-aws-red">
<PiXCircleBold />
{t('bot.apiSettings.label.apiKeyDetail.inactive')}
</div>
)}
<div className="text-xs text-aws-font-color-light/70 dark:text-aws-font-color-dark/70">
<div className="text-xs text-aws-blue-navy/70 dark:text-aws-gray-light/70">
<div className="mr-1 inline">
{t('bot.apiSettings.label.apiKeyDetail.creationDate')}:
</div>
Expand All @@ -98,7 +98,7 @@ const ApiKeyItem: React.FC<Props> = (props) => {
<ButtonCopy text={botApiKey?.value ?? ''} className="-my-2" />
<Button
text
className="-m-2 font-bold text-aws-sea-blue-light dark:text-aws-sea-blue-dark"
className="-m-2 font-bold text-aws-blue dark:text-aws-gray"
onClick={() => {
setIsHideKey(!isHideKey);
}}>
Expand All @@ -109,7 +109,7 @@ const ApiKeyItem: React.FC<Props> = (props) => {
</div>
<div>
<Button
className="bg-red"
className="bg-aws-red"
onClick={() => {
setIsOpenDialog(true);
}}>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/AppContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const AppContent: React.FC<Props> = (props) => {
const [isOpenSelectLangage, setIsOpenSelectLangage] = useState(false);

return (
<div className="relative flex h-dvh w-screen bg-aws-paper-light dark:bg-aws-paper-dark">
<div className="relative flex h-dvh w-screen bg-aws-white-smoke dark:bg-aws-black-graphite">
<ChatListDrawer
isAdmin={isAdmin}
conversations={conversations}
Expand Down Expand Up @@ -128,7 +128,7 @@ const AppContent: React.FC<Props> = (props) => {

<main className="min-h-dvh relative flex flex-col flex-1 overflow-y-hidden transition-width">

<header className="visible flex h-12 w-full items-center bg-aws-squid-ink-light dark:bg-aws-squid-ink-dark p-3 text-lg text-aws-font-color-white-light dark:text-aws-font-color-white-dark lg:hidden lg:h-0">
<header className="visible flex h-12 w-full items-center bg-aws-blue-navy dark:bg-aws-black-smoke p-3 text-lg text-aws-white dark:text-aws-white-silver lg:hidden lg:h-0">
<button
className="mr-2 rounded-full p-2 hover:brightness-50 focus:outline-none focus:ring-1 "
onClick={() => {
Expand Down Expand Up @@ -157,7 +157,7 @@ const AppContent: React.FC<Props> = (props) => {
</header>

<div
className="h-full overflow-hidden overflow-y-auto text-aws-font-color-light dark:text-aws-font-color-dark"
className="h-full overflow-hidden overflow-y-auto text-aws-blue-navy dark:text-aws-gray-light"
id="main">
<SnackbarProvider>
<Outlet />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/AuthAmplify.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const AuthAmplify: React.FC<Props> = ({ socialProviders, children }) => {
socialProviders={socialProviders}
components={{
Header: () => (
<div className="mb-5 mt-10 flex justify-center text-3xl text-aws-font-color-light">
<div className="mb-5 mt-10 flex justify-center text-3xl text-aws-blue-navy">
{!MISTRAL_ENABLED ? t('app.name') : t('app.nameWithoutClaude')}
</div>
),
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/AuthCustom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const AuthCustom: React.FC<Props> = ({ children }) => {
</div>
) : !authenticated ? (
<div className="flex flex-col items-center gap-4">
<div className="mb-5 mt-10 text-4xl text-aws-sea-blue-light">
<div className="mb-5 mt-10 text-4xl text-aws-blue">
{!MISTRAL_ENABLED ? t('app.name') : t('app.nameWithoutClaude')}
</div>
<Button onClick={() => handleSignIn()} className="px-20 text-xl">
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
ref={ref}
className={twMerge(
'flex items-center justify-center whitespace-nowrap rounded-lg border p-1 px-3',
props.text && 'border-0 dark:text-aws-font-color-dark',
props.outlined && 'border-aws-squid-ink-light/50 dark:border-aws-font-color-gray/50 hover:bg-white dark:hover:bg-aws-ui-color-dark dark:text-aws-font-color-dark',
props.text && 'border-0 dark:text-aws-gray-light',
props.outlined && 'border-aws-blue-navy/50 dark:border-aws-gray-ash/50 hover:bg-white dark:hover:bg-aws-black-jet dark:text-aws-gray-light',
!props.text &&
!props.outlined &&
'bg-aws-sea-blue-light dark:bg-aws-ui-color-dark dark:border-aws-ui-color-dark text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
'bg-aws-blue dark:bg-aws-black-jet dark:border-aws-black-jet text-aws-white dark:text-aws-white-silver',
props.disabled || props.loading ? 'opacity-30' : 'hover:brightness-75',
props.className
)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ButtonFileChoose.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ const ButtonFileChoose: React.FC<Props> = (props) => {
props.className,
'flex items-center justify-center whitespace-nowrap rounded-lg hover:shadow hover:brightness-75',
props.icon
? 'rounded-full p-2 text-xl text-aws-sea-blue-light dark:text-aws-sea-blue-dark'
: 'border dark:border-aws-ui-color-dark bg-aws-sea-blue-light dark:bg-aws-ui-color-dark p-1 px-3 text-aws-font-color-white-light dark:text-aws-font-color-white-dark',
? 'rounded-full p-2 text-xl text-aws-blue dark:text-aws-gray'
: 'border dark:border-aws-black-jet bg-aws-blue dark:bg-aws-black-jet p-1 px-3 text-aws-white dark:text-aws-white-silver',
props.disabled ? 'opacity-30 ' : 'cursor-pointer'
)}>
{props.children}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ButtonIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ButtonIcon: React.FC<Props> = (props) => {
<button
className={twMerge(
'flex items-center justify-center rounded-full p-2 text-xl hover:shadow',
'dark:text-aws-font-color-dark dark:hover:shadow-aws-font-color-dark',
'dark:text-aws-gray-light dark:hover:shadow-aws-gray-light',
props.disabled ? 'opacity-30' : 'hover:brightness-75',
props.className
)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ButtonSend.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const ButtonSend: React.FC<Props> = (props) => {
<button
className={twMerge(
'flex items-center justify-center rounded-xl p-2 text-xl',
'bg-aws-sea-blue-light text-white hover:bg-aws-sea-blue-hover-light',
'dark:bg-aws-sea-blue-dark dark:hover:bg-aws-sea-blue-hover-dark',
'bg-aws-blue text-white hover:bg-aws-blue-deepteal',
'dark:bg-aws-gray dark:hover:bg-aws-gray-slate',
props.disabled ? 'opacity-30' : '',
props.className
)}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/ChatListDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {

return (
<>
<div className="relative h-full overflow-y-auto bg-aws-squid-ink-light dark:bg-aws-ui-color-dark scrollbar-thin scrollbar-track-white scrollbar-thumb-aws-squid-ink-light/30 dark:scrollbar-thumb-aws-ui-color-dark/30">
<div className="relative h-full overflow-y-auto bg-aws-blue-navy dark:bg-aws-black-jet scrollbar-thin scrollbar-track-white scrollbar-thumb-aws-blue-navy/30 dark:scrollbar-thumb-aws-black-jet/30">
<nav
className={`lg:visible lg:w-64 ${
opened ? 'visible w-64' : 'invisible w-0'
Expand Down Expand Up @@ -388,7 +388,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
<div
className={`${
opened ? 'w-64' : 'w-0'
} fixed bottom-0 flex h-12 items-center justify-between p-2 border-t bg-aws-squid-ink-light dark:bg-aws-ui-color-dark transition-width lg:w-64`}>
} fixed bottom-0 flex h-12 items-center justify-between p-2 border-t bg-aws-blue-navy dark:bg-aws-black-jet transition-width lg:w-64`}>
<Menu
onSignOut={props.onSignOut}
onSelectLanguage={props.onSelectLanguage}
Expand Down Expand Up @@ -423,7 +423,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
<PiX />
</ButtonIcon>
<div
className="fixed z-40 h-dvh w-screen bg-dark-gray/90"
className="fixed z-40 h-dvh w-screen bg-aws-gray-grayish/90"
onClick={switchOpen}></div>
</div>
</>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/ChatMessage.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ export const Conversation = () => {
<div
key={idx}
className={`${
message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
message.role === 'assistant' ? 'bg-aws-blue-navy/5 dark:bg-aws-black-smoke/5' : 'dark:text-aws-gray-light'
}`}>
<ChatMessage
chatContent={message}
/>

<div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
<div className="w-full border-b border-aws-blue-navy/10 dark:border-aws-black-smoke/10"></div>
</div>
))}
</>
Expand Down Expand Up @@ -123,13 +123,13 @@ export const ConversationThinking = () => {
<div
key={idx}
className={`${
message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
message.role === 'assistant' ? 'bg-aws-blue-navy/5 dark:bg-aws-black-smoke/5' : 'dark:text-aws-gray-light'
}`}>
<ChatMessage
chatContent={message}
/>

<div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
<div className="w-full border-b border-aws-blue-navy/10 dark:border-aws-black-smoke/10"></div>
</div>
))}
</>
Expand Down Expand Up @@ -272,7 +272,7 @@ export const ConversationWithAgnet = () => {
<div
key={idx}
className={`${
message.role === 'assistant' ? 'bg-aws-squid-ink-light/5 dark:bg-aws-squid-ink-dark/5' : 'dark:text-aws-font-color-dark'
message.role === 'assistant' ? 'bg-aws-blue-navy/5 dark:bg-aws-black-smoke/5' : 'dark:text-aws-gray-light'
}`}>
<ChatMessage
chatContent={message}
Expand Down Expand Up @@ -313,7 +313,7 @@ export const ConversationWithAgnet = () => {
]}
/>

<div className="w-full border-b border-aws-squid-ink-light/10 dark:border-aws-squid-ink-dark/10"></div>
<div className="w-full border-b border-aws-blue-navy/10 dark:border-aws-black-smoke/10"></div>
</div>
))}
</>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/ChatMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ const ChatMessage: React.FC<Props> = (props) => {

<div className="order-first col-span-12 flex lg:order-none lg:col-span-8 lg:col-start-3">
{chatContent?.role === 'user' && (
<div className="h-min rounded bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark p-2 text-xl text-white">
<div className="h-min rounded bg-aws-blue dark:bg-aws-gray p-2 text-xl text-white">
<PiUserFill />
</div>
)}
Expand Down Expand Up @@ -312,7 +312,7 @@ const ChatMessage: React.FC<Props> = (props) => {
<div className="flex flex-col items-end lg:items-start">
{chatContent?.role === 'user' && !isEdit && (
<ButtonIcon
className="text-dark-gray dark:text-light-gray"
className="text-aws-gray-grayish dark:text-aws-gray-ice"
onClick={() => {
setChangedContent(chatContent.content[firstTextContent].body);
setIsEdit(true);
Expand All @@ -323,7 +323,7 @@ const ChatMessage: React.FC<Props> = (props) => {
{chatContent?.role === 'assistant' && (
<div className="flex">
<ButtonIcon
className="text-dark-gray dark:text-light-gray"
className="text-aws-gray-grayish dark:text-aws-gray-ice"
onClick={() => setIsFeedbackOpen(true)}>
{chatContent.feedback && !chatContent.feedback.thumbsUp ? (
<PiThumbsDownFill />
Expand All @@ -332,7 +332,7 @@ const ChatMessage: React.FC<Props> = (props) => {
)}
</ButtonIcon>
<ButtonCopy
className="text-dark-gray dark:text-light-gray"
className="text-aws-gray-grayish dark:text-aws-gray-ice"
text={chatContent.content[0].body}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ChatMessageMarkdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const RelatedDocumentLink: React.FC<{
className={twMerge(
'mx-0.5 ',
props.relatedDocument != null
? 'cursor-pointer text-aws-sea-blue-light dark:text-aws-sea-blue-dark hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark'
: 'cursor-not-allowed text-gray'
? 'cursor-pointer text-aws-blue dark:text-aws-gray hover:text-aws-blue-deepteal dark:hover:text-aws-gray-slate'
: 'cursor-not-allowed text-aws-gray-french'
)}
onClick={() => {
if (props.relatedDocument != null) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const DialogConfirmClearConversations: React.FC<Props> = (props) => {
onClick={() => {
props.onDelete();
}}
className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
className="bg-aws-red p-2 text-aws-white dark:text-aws-white-silver">
{t('button.deleteAll')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DialogConfirmDeleteApi.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const DialogConfirmDeleteApi: React.FC<Props> = (props) => {
<Button
loading={props.loading}
onClick={props.onDelete}
className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
className="bg-aws-red p-2 text-aws-white dark:text-aws-white-silver">
{t('bot.button.delete')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DialogConfirmDeleteApiKey.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const DialogConfirmDeleteApiKey: React.FC<Props> = (props) => {
</Button>
<Button
onClick={props.onDelete}
className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
className="bg-aws-red p-2 text-aws-white dark:text-aws-white-silver">
{t('bot.button.delete')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DialogConfirmDeleteBot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const DialogConfirmDeleteBot: React.FC<Props> = (props) => {
onClick={() => {
props.onDelete(props.target?.id ?? '');
}}
className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
className="bg-aws-red p-2 text-aws-white dark:text-aws-white-silver">
{t('button.delete')}
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DialogConfirmDeleteChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const DialogConfirmDeleteChat: React.FC<Props> = (props) => {
onClick={() => {
props.onDelete(props.target?.id ?? '');
}}
className="bg-red p-2 text-aws-font-color-white-light dark:text-aws-font-color-white-dark">
className="bg-aws-red p-2 text-aws-white dark:text-aws-white-silver">
{t('button.delete')}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/DialogInstructionsSamples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const PromptSample: React.FC<PromptSampleProps> = (props) => {
return (
<div>
<div>{props.title}</div>
<div className="rounded bg-light-gray dark:bg-aws-ui-color-dark p-2 text-aws-font-color-light dark:text-aws-font-color-dark">
<div className="rounded bg-aws-gray-ice dark:bg-aws-black-jet p-2 text-aws-blue-navy dark:text-aws-gray-light">
{props.prompt.split('\n').map((s, idx) => (
<div key={idx}>{s}</div>
))}
Expand Down Expand Up @@ -58,7 +58,7 @@ const DialogInstructionsSamples: React.FC<Props> = (props) => {
href={t('bot.samples.anthropicLibrary.url')}
target="_blank"
rel="noopener noreferrer"
className="text-aws-sea-blue-light dark:text-aws-font-color-blue underline hover:text-aws-sea-blue-hover-light dark:hover:text-aws-sea-blue-hover-dark">
className="text-aws-blue dark:text-aws-blue-cobalt underline hover:text-aws-blue-deepteal dark:hover:text-aws-gray-slate">
{t('bot.samples.anthropicLibrary.title')}
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/DialogShareBot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ const DialogShareBot: React.FC<Props> = (props) => {
</div>

{isShared && (
<div className="mt-3 flex justify-between rounded border border-aws-squid-ink-light/50 dark:border-aws-font-color-dark/50 bg-aws-paper-light dark:bg-aws-paper-dark">
<div className="mt-3 flex justify-between rounded border border-aws-blue-navy/50 dark:border-aws-gray-light/50 bg-aws-white-smoke dark:bg-aws-black-graphite">
<input
type="text"
className="my-2 ml-2 w-full bg-aws-paper-light dark:bg-aws-paper-dark"
className="my-2 ml-2 w-full bg-aws-white-smoke dark:bg-aws-black-graphite"
readOnly
value={url}
/>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/DrawerItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ const DrawerItem: React.FC<Props> = (props) => {
className={twMerge(
'group mx-2 my-1 flex h-10 items-center rounded px-2',
props.isActive ?? true
? 'bg-aws-sea-blue-light dark:bg-aws-sea-blue-dark'
: 'hover:bg-aws-sea-blue-hover-light dark:hover:bg-aws-paper-dark',
? 'bg-aws-blue dark:bg-aws-gray'
: 'hover:bg-aws-blue-deepteal dark:hover:bg-aws-black-graphite',
props.className
)}
to={props.to}
Expand All @@ -34,8 +34,8 @@ const DrawerItem: React.FC<Props> = (props) => {
className={twMerge(
'absolute inset-y-0 right-0 w-8 bg-gradient-to-l',
props.isActive
? 'from-aws-sea-blue-light dark:from-aws-sea-blue-dark'
: 'from-aws-squid-ink-light dark:from-aws-squid-ink-dark group-hover:from-aws-sea-blue-hover-light dark:group-hover:from-aws-paper-dark'
? 'from-aws-blue dark:from-aws-gray'
: 'from-aws-blue-navy dark:from-aws-black-smoke group-hover:from-aws-blue-deepteal dark:group-hover:from-aws-black-graphite'
)}
/>
)}
Expand Down
Loading
Loading