Skip to content

feat(style): enhance visual consistency #255

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.

Sign up for GitHub

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

Merged
babblebey merged 6 commits into from
Dec 3, 2025
Merged

feat(style): enhance visual consistency #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
77fb1df
style: update component borders to use rounded-xl for a consistent de…
babblebey Dec 3, 2025
87f49d2
style(profile): update button and dropdown border radius for improved…
babblebey Dec 3, 2025
2c1b777
style(contribution-cta): update button border radius to rounded-xl fo…
babblebey Dec 3, 2025
1e74935
style(search): update keyboard shortcut button border radius to round…
babblebey Dec 3, 2025
49943f0
style(word-editor): update keyboard shortcut button border radius to …
babblebey Dec 3, 2025
45b4321
style(word-search): update loading and error state components to use …
babblebey Dec 3, 2025
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
10 changes: 5 additions & 5 deletions apps/jai/components/follow-up-chat.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default function JAIFollowUpChatWidget({ word }) {
<div key={index} className="flex space-x-3">
{message.role === "user" ? (
<>
<div className="flex-none flex items-center justify-center rounded-lg size-10 border bg-neutral-100 border-neutral-200 border-opacity-50 overflow-hidden">
<div className="flex-none flex items-center justify-center rounded-xl size-10 border bg-neutral-100 border-neutral-200 border-opacity-50 overflow-hidden">
<img src={user.avatar_url} alt={user.name} />
</div>
<div className="w-1 flex-1 bg-neutral-50 border border-neutral-200 border-opacity-50 rounded-tl-sm rounded-2xl p-5">
Expand All @@ -132,7 +132,7 @@ export default function JAIFollowUpChatWidget({ word }) {
</>
) : (
<>
<div className="flex-none flex items-center justify-center rounded-lg size-10 border bg-black border-black border-opacity-50">
<div className="flex-none flex items-center justify-center rounded-xl size-10 border bg-black border-black border-opacity-50">
<svg
width="19"
height="18"
Expand Down Expand Up @@ -161,7 +161,7 @@ export default function JAIFollowUpChatWidget({ word }) {
{/* jAI Loading */}
{status === "submitted" && (
<div className="flex space-x-3">
<div className="flex-none flex items-center justify-center rounded-lg size-10 border bg-black border-black border-opacity-50">
<div className="flex-none flex items-center justify-center rounded-xl size-10 border bg-black border-black border-opacity-50">
<svg
width="19"
height="18"
Expand Down Expand Up @@ -304,7 +304,7 @@ function JAIIntro({ status, word, onQuestionClick }) {
<button
key={index}
onClick={() => onQuestionClick(questionTemplate)}
className="bg-neutral-100 border border-neutral-200 rounded-lg text-sm md:text-base px-4 py-1.5 md:px-5 md:py-2.5 hover:bg-neutral-200 transition-colors duration-200 cursor-pointer"
className="bg-neutral-100 border border-neutral-200 rounded-xl text-sm md:text-base px-4 py-1.5 md:px-5 md:py-2.5 hover:bg-neutral-200 transition-colors duration-200 cursor-pointer"
>
{formatQuestion(questionTemplate, word)}
</button>
Expand All @@ -313,7 +313,7 @@ function JAIIntro({ status, word, onQuestionClick }) {
) : (
<a
href={`/login?return_to=${encodeURIComponent(pathname + (pathname.includes("?") ? "&" : "?") + "jai=1")}`}
className="flex items-center justify-center h-12 mr-3 px-3 text-lg font-medium bg-black text-white border no-underline rounded-lg focus:outline-none hover:shadow-xl"
className="flex items-center justify-center h-12 mr-3 px-3 text-lg font-medium bg-black text-white border no-underline rounded-xl focus:outline-none hover:shadow-xl"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
10 changes: 5 additions & 5 deletions apps/jai/components/word-search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ export default function JAIWordSearch({ word }) {
if (status === "submitted" || (status === "ready" && messages.length === 0))
return (
<div className="space-y-4">
<div className="h-6 w-full animate-pulse bg-gray-200 rounded-md" />
<div className="h-6 w-3/4 animate-pulse bg-gray-200 rounded-md" />
<div className="h-6 w-4/5 animate-pulse bg-gray-200 rounded-md" />
<div className="h-6 w-3/5 animate-pulse bg-gray-200 rounded-md" />
<div className="h-6 w-full animate-pulse bg-gray-200 rounded-lg" />
<div className="h-6 w-3/4 animate-pulse bg-gray-200 rounded-lg" />
<div className="h-6 w-4/5 animate-pulse bg-gray-200 rounded-lg" />
<div className="h-6 w-3/5 animate-pulse bg-gray-200 rounded-lg" />
</div>
);

Expand All @@ -58,7 +58,7 @@ export default function JAIWordSearch({ word }) {
*/
if (error)
return (
<div className="rounded-md bg-red-50 p-4">
<div className="rounded-lg bg-red-50 p-4">
<div className="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
4 changes: 2 additions & 2 deletions src/components/contribution-cta.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="rounded-lg border shadow-sm">
<section class="rounded-xl border shadow-sm">
<div
class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4"
>
Expand All @@ -9,7 +9,7 @@
</p>
</div>
<a
class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
href="/editor/new"
>
<span>Start Now</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/islands/profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function Profile({ isAuthed, userData, authUrl }) {
<div className="relative">
{/* Profile */}
<button
className={`${isDropdownOpen && "ring-2 ring-gray-200"} relative border p-0.5 border-gray-200 shadow flex items-center justify-center hover:bg-gray-100 overflow-hidden rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
className={`${isDropdownOpen && "ring-2 ring-gray-200"} relative border p-0.5 border-gray-200 shadow flex items-center justify-center hover:bg-gray-100 overflow-hidden rounded-r-xl rounded-l-3xl transition-colors duration-700 cursor-pointer focus-visible:outline-none`}
onClick={() => setIsDropdownOpen((prev) => !prev)}
>
{/* User Avatar */}
Expand Down Expand Up @@ -99,7 +99,7 @@ export default function Profile({ isAuthed, userData, authUrl }) {

{/* Dropdown */}
<div
className={`${!isDropdownOpen && "hidden"} z-50 absolute overflow-hidden mt-2 right-0 bg-white border text-sm divide-y divide-gray-100 rounded-lg shadow-lg min-w-64`}
className={`${!isDropdownOpen && "hidden"} z-50 absolute overflow-hidden mt-2 right-0 bg-white border text-sm divide-y divide-gray-100 rounded-xl shadow-lg min-w-64`}
>
<div className="flex items-center space-x-2 px-4 py-3 text-sm">
{/* User Avatar */}
Expand Down
12 changes: 6 additions & 6 deletions src/components/islands/search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function SearchTrigger({ size = "md" }) {
if (size === "sm")
return (
<div onClick={() => $isSearchOpen.set(!isSearchOpen)}>
<div className="relative w-56 text-sm hidden @lg:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-lg cursor-text">
<div className="relative w-56 text-sm hidden @lg:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-xl cursor-text">
<div className="flex items-center text-gray-400 space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -110,7 +110,7 @@ function SearchTrigger({ size = "md" }) {
</svg>
<span className="focus:outline-none truncate">Search word</span>
</div>
<kbd className="text-gray-600 py-1 px-2 rounded-md border border-gray-400 ml-auto bg-gray-100">
<kbd className="text-gray-600 py-1 px-2 rounded-lg border border-gray-400 ml-auto bg-gray-100">
{isMacOS ? (
<>
<span className="text-sm mr-0.5">⌘</span>K
Expand Down Expand Up @@ -142,7 +142,7 @@ function SearchTrigger({ size = "md" }) {
return (
<div
onClick={() => $isSearchOpen.set(!isSearchOpen)}
className="relative flex items-center justify-between mt-2 border pl-3 p-1 md:pl-5 md:pr-2 md:py-2 space-x-3 border-gray-400 rounded-lg hover:shadow cursor-text"
className="relative flex items-center justify-between mt-2 border pl-3 p-1 md:pl-5 md:pr-2 md:py-2 space-x-3 border-gray-400 rounded-xl hover:shadow cursor-text"
>
<div className="flex items-center text-gray-400 space-x-3">
<svg
Expand All @@ -163,7 +163,7 @@ function SearchTrigger({ size = "md" }) {
Search words
</span>
</div>
<kbd className="text-gray-600 rounded-md p-1 md:px-4 md:py-2 text-sm sm:text-base border border-gray-400 bg-gray-100">
<kbd className="text-gray-600 rounded-lg p-1 md:px-4 md:py-2 text-sm sm:text-base border border-gray-400 bg-gray-100">
{isMacOS ? (
<>
<span className="text-sm mr-0.5">⌘</span>K
Expand Down Expand Up @@ -254,7 +254,7 @@ function SearchDialog() {
/>

<div
className="flex flex-col bg-white h-fit max-w-5xl max-h-full w-full shadow-xl z-50 border rounded-lg overflow-hidden"
className="flex flex-col bg-white h-fit max-w-5xl max-h-full w-full shadow-xl z-50 border rounded-xl overflow-hidden"
onMouseMove={() => cursor !== -1 && setCursor(-1)}
>
{/* Form Field */}
Expand Down Expand Up @@ -286,7 +286,7 @@ function SearchDialog() {
/>
<kbd
onClick={() => $isSearchOpen.set(!isSearchOpen)}
className="text-gray-600 rounded-md px-2 py-1 md:px-4 md:py-2 text-sm sm:text-base border bg-gray-100 cursor-pointer"
className="text-gray-600 rounded-lg px-2 py-1 md:px-4 md:py-2 text-sm sm:text-base border bg-gray-100 cursor-pointer"
>
ESC
</kbd>
Expand Down
10 changes: 5 additions & 5 deletions src/components/islands/word-editor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function WordEditor({
const togglePreview = useStore($togglePreview);

return (
<div className="w-full flex border rounded-lg">
<div className="w-full flex border rounded-xl">
<Editor
action={action}
eTitle={title}
Expand All @@ -54,7 +54,7 @@ export function SubmitButton({ children = "Submit" }) {

return (
<button
className={`flex items-center justify-center no-underline text-white ${isSubmitted ? "bg-green-700" : "bg-gray-900 hover:bg-gray-700"} focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center`}
className={`flex items-center justify-center no-underline text-white ${isSubmitted ? "bg-green-700" : "bg-gray-900 hover:bg-gray-700"} focus:ring-0 font-medium rounded-xl text-base px-5 py-2.5 text-center`}
type="submit"
form="jargons.dev:word_editor"
disabled={isSubmitLoading || isSubmitted}
Expand Down Expand Up @@ -237,7 +237,7 @@ function Preview({ className, ...props }) {

return (
<div className={`${className} select-none`} {...props}>
<div className="h-1 grow overflow-auto rounded-lg border p-5 shadow-lg scrollbar">
<div className="h-1 grow overflow-auto rounded-xl border p-5 shadow-lg scrollbar">
<DummyPreviewNavbar />

<div className="max-w-4xl space-y-8 mx-auto">
Expand Down Expand Up @@ -283,7 +283,7 @@ const DummyPreviewNavbar = () => (
</span>

<div className="cursor-not-allowed">
<div className="relative w-56 text-sm hidden @md:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-lg">
<div className="relative w-56 text-sm hidden @md:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-xl">
<div className="flex items-center text-gray-400 space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -301,7 +301,7 @@ const DummyPreviewNavbar = () => (
</svg>
<span className="focus:outline-none truncate">Search word</span>
</div>
<kbd className="text-gray-600 py-1 px-2 rounded-md border border-gray-400 ml-auto bg-gray-100">
<kbd className="text-gray-600 py-1 px-2 rounded-lg border border-gray-400 ml-auto bg-gray-100">
<>
<span className="text-sm mr-0.5">⌘</span>K
</>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/word.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const editUrl = `/editor/edit/${frontmatter.url.split("/")[3].split(".")[0]}`;
<JAIFollowUpChatWidgetTrigger client:visible />
</span>

<!-- <div class="w-2/5 h-3 bg-neutral-100 rounded-lg" /> -->
<!-- <div class="w-2/5 h-3 bg-neutral-100 rounded-xl" /> -->
</div>

<!-- Edit Button -->
Expand Down
8 changes: 4 additions & 4 deletions src/pages/editor/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const totalWords = {

<div class="grid md:grid-cols-2 gap-2">
<!-- Total Words -->
<div class="p-6 space-y-2 rounded-lg border shadow-sm">
<div class="p-6 space-y-2 rounded-xl border shadow-sm">
<div class="w-full flex justify-between">
<div class="text-3xl font-bold tracking-tighter">
{totalWords.count}
Expand Down Expand Up @@ -151,7 +151,7 @@ const totalWords = {
</div>

<!-- Pending Words -->
<div class="p-6 space-y-2 rounded-lg border shadow-sm">
<div class="p-6 space-y-2 rounded-xl border shadow-sm">
<div class="w-full flex justify-between">
<div class="text-3xl font-bold tracking-tighter">
{pendingWords.count}
Expand Down Expand Up @@ -202,7 +202,7 @@ const totalWords = {
</div>

<!-- New Words -->
<div class="p-6 space-y-2 rounded-lg border shadow-sm">
<div class="p-6 space-y-2 rounded-xl border shadow-sm">
<div class="w-full flex justify-between">
<div class="text-3xl font-bold tracking-tighter">
{newWords.count}
Expand Down Expand Up @@ -255,7 +255,7 @@ const totalWords = {
</div>

<!-- Edited Words -->
<div class="p-6 space-y-2 rounded-lg border shadow-sm">
<div class="p-6 space-y-2 rounded-xl border shadow-sm">
<div class="w-full flex justify-between">
<div class="text-3xl font-bold tracking-tighter">
{editedWords.count}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/login.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const authUrl = getAuthUrl({ path: searchParams.get("return_to") || "/" });
class="flex flex-col max-w-screen-lg p-5 justify-center mx-auto min-h-screen"
>
<div
class="text-center mx-auto border px-5 py-10 space-y-6 rounded-lg w-full md:w-2/3 shadow"
class="text-center mx-auto border px-5 py-10 space-y-6 rounded-xl w-full md:w-2/3 shadow"
>
<div class="flex justify-center">
<svg
Expand Down Expand Up @@ -61,7 +61,7 @@ const authUrl = getAuthUrl({ path: searchParams.get("return_to") || "/" });
<a
href={authUrl}
id="auth-link"
class="flex items-center justify-center h-12 mr-3 px-3 text-lg font-medium bg-black text-white border no-underline rounded-lg focus:outline-none hover:shadow-xl"
class="flex items-center justify-center h-12 mr-3 px-3 text-lg font-medium bg-black text-white border no-underline rounded-xl focus:outline-none hover:shadow-xl"
>
<div
id="loading"
Expand Down