style update (#2261)

* style update

* better placeholder

Author: DaniiRix

src/containers/LlamaAI/components/RecommendedPrompts.tsx

@@ -123,7 +123,7 @@ export const RecommendedPrompts = ({
 							key={`prompt-category-${category.name}`}
 							id={`tab-${category.name}`}
 							tabbable
-							className="flex items-center justify-center gap-2.5 rounded-lg border border-[#e6e6e6] px-4 py-1 text-[#666] hover:bg-[#f7f7f7] hover:text-black focus-visible:bg-[#f7f7f7] focus-visible:text-black dark:border-[#222324] dark:text-[#919296] dark:hover:bg-[#222324] dark:hover:text-white dark:focus-visible:bg-[#222324] dark:focus-visible:text-white"
+							className="flex items-center justify-center gap-2.5 rounded-lg border border-[#e6e6e6] px-4 py-1 text-[#666] hover:bg-[#f7f7f7] hover:text-black focus-visible:bg-[#f7f7f7] focus-visible:text-black data-[active-item]:bg-[#f7f7f7] data-[active-item]:text-black dark:border-[#222324] dark:text-[#919296] dark:hover:bg-[#222324] dark:hover:text-white dark:focus-visible:bg-[#222324] dark:focus-visible:text-white dark:data-[active-item]:bg-[#222324] dark:data-[active-item]:text-white"
 						>
 							<Icon name={category.icon} height={16} width={16} />
 							<span>{category.name}</span>

src/containers/LlamaAI/index.tsx

@@ -1086,7 +1086,7 @@ export function LlamaAI({ initialSessionId, sharedSession, readOnly = false, sho
 											handleStopRequest={handleStopRequest}
 											isStreaming={isStreaming}
 											initialValue={prompt}
-											placeholder="Ask LlamaAI... Type @ to insert a protocol, chain"
+											placeholder="Ask LlamaAI... Type @ to add a protocol, chain or stablecoin"
 										/>
 										<RecommendedPrompts setPrompt={setPrompt} submitPrompt={submitPrompt} isPending={isPending} />
 									</>
@@ -1284,7 +1284,7 @@ export function LlamaAI({ initialSessionId, sharedSession, readOnly = false, sho
 										handleStopRequest={handleStopRequest}
 										isStreaming={isStreaming}
 										initialValue={prompt}
-										placeholder="Reply to LlamaAI... Type @ to insert a protocol, chain"
+										placeholder="Reply to LlamaAI... Type @ to add a protocol, chain or stablecoin"
 									/>
 								)}
 							</div>
@@ -1321,7 +1321,7 @@ const PromptInput = memo(function PromptInput({
 
 	// Use different placeholder for mobile devices
 	const isMobile = useMedia('(max-width: 640px)')
-	const mobilePlaceholder = placeholder.replace('Type @ to insert a protocol, chain', '')
+	const mobilePlaceholder = placeholder.replace('Type @ to add a protocol, chain or stablecoin', '')
 	const finalPlaceholder = isMobile ? mobilePlaceholder : placeholder
 
 	const combobox = Ariakit.useComboboxStore({ defaultValue: initialValue })
@@ -1693,7 +1693,7 @@ const PromptResponse = ({
 				<p className="text-(--error)">{error}</p>
 				<button
 					onClick={onRetry}
-					className="flex items-center justify-center gap-2 rounded-lg border border-(--old-blue) bg-(--old-blue)/12 px-4 py-2 text-(--old-blue) hover:bg-(--old-blue) hover:text-white"
+					className="flex w-fit items-center justify-center gap-2 rounded-lg border border-(--old-blue) bg-(--old-blue)/12 px-4 py-2 text-(--old-blue) hover:bg-(--old-blue) hover:text-white"
 				>
 					<Icon name="repeat" height={16} width={16} />
 					Retry