Skip to content

Commit c4df062

Browse files
kunjal2002kunjal2002
committed
Made some UI changes
1 parent d6988e5 commit c4df062

4 files changed

Lines changed: 128 additions & 3 deletions

File tree

‎frontend/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Full Stack FastAPI Project</title>
88
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
912
</head>
1013
<body>
1114
<div id="root"></div>

‎frontend/src/components/Admin/AddUser.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const AddUser = () => {
7575
mutationFn: (data: UserCreate) =>
7676
UsersService.createUser({ requestBody: data }),
7777
onSuccess: () => {
78-
showSuccessToast("User created successfully")
78+
showSuccessToast("Good job. The user was added successfully.")
7979
form.reset()
8080
setIsOpen(false)
8181
},
@@ -113,7 +113,7 @@ const AddUser = () => {
113113
render={({ field }) => (
114114
<FormItem>
115115
<FormLabel>
116-
Email <span className="text-destructive">*</span>
116+
Email ID<span className="text-destructive">*</span>
117117
</FormLabel>
118118
<FormControl>
119119
<Input

‎frontend/src/index.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@
4242
}
4343

4444
:root {
45+
--chakra-colors-brand-500: #3b82f6; /* Your brand blue */
46+
--chakra-colors-brand-400: #60a5fa;
4547
--radius: 0.625rem;
4648
--background: oklch(1 0 0);
4749
--foreground: oklch(0.145 0 0);
@@ -116,9 +118,97 @@
116118
}
117119
body {
118120
@apply bg-background text-foreground;
121+
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
122+
Roboto, "Helvetica Neue", Arial;
123+
-webkit-font-smoothing: antialiased;
124+
-moz-osx-font-smoothing: grayscale;
125+
transition: background-color 220ms ease, color 220ms ease;
126+
background-image: radial-gradient(1000px 400px at 10% 10%, rgba(59,130,246,0.06), transparent),
127+
radial-gradient(800px 300px at 90% 90%, rgba(99,102,241,0.04), transparent);
128+
background-attachment: fixed;
119129
}
120130
button,
121131
[role="button"] {
122132
cursor: pointer;
123133
}
124134
}
135+
136+
/* Lightweight component helpers for consistent small UI polish */
137+
@layer components {
138+
.card {
139+
background: var(--color-card, white);
140+
color: var(--color-card-foreground, inherit);
141+
padding: 1rem;
142+
border-radius: var(--radius-md);
143+
border: 1px solid var(--color-border, rgba(0,0,0,0.06));
144+
box-shadow: 0 6px 18px rgba(15,23,42,0.06);
145+
}
146+
147+
.btn {
148+
display: inline-flex;
149+
align-items: center;
150+
gap: 0.5rem;
151+
padding: 0.5rem 0.9rem;
152+
border-radius: calc(var(--radius) - 4px);
153+
background-color: var(--chakra-colors-brand-500);
154+
color: white;
155+
border: none;
156+
box-shadow: 0 6px 18px rgba(59,130,246,0.12);
157+
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
158+
}
159+
160+
.btn:hover {
161+
transform: translateY(-2px);
162+
box-shadow: 0 10px 28px rgba(59,130,246,0.14);
163+
}
164+
165+
input,
166+
textarea,
167+
select {
168+
border-radius: var(--radius-sm);
169+
padding: 0.5rem 0.75rem;
170+
border: 1px solid var(--color-border, rgba(0,0,0,0.06));
171+
background: var(--color-input, transparent);
172+
transition: box-shadow 160ms ease, border-color 160ms ease;
173+
}
174+
175+
input:focus,
176+
textarea:focus,
177+
select:focus {
178+
outline: none;
179+
box-shadow: 0 6px 18px rgba(59,130,246,0.08);
180+
border-color: var(--chakra-colors-brand-400);
181+
}
182+
183+
a {
184+
color: var(--chakra-colors-brand-500);
185+
text-decoration: none;
186+
transition: color 120ms ease, text-decoration 120ms ease;
187+
}
188+
189+
a:hover {
190+
text-decoration: underline;
191+
}
192+
}
193+
194+
/* Banner + FAB styles */
195+
@layer components {
196+
.ui-update-banner {
197+
border-left: 4px solid var(--chakra-colors-brand-500);
198+
background: linear-gradient(180deg, rgba(59,130,246,0.04), transparent);
199+
padding: 0.75rem 1rem;
200+
}
201+
202+
.fab {
203+
position: fixed;
204+
right: 20px;
205+
bottom: 20px;
206+
z-index: 60;
207+
padding: 0.65rem 0.9rem;
208+
border-radius: 999px;
209+
box-shadow: 0 12px 30px rgba(2,6,23,0.18);
210+
display: inline-flex;
211+
align-items: center;
212+
gap: 0.5rem;
213+
}
214+
}

‎frontend/src/main.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
QueryClientProvider,
66
} from "@tanstack/react-query"
77
import { createRouter, RouterProvider } from "@tanstack/react-router"
8-
import { StrictMode } from "react"
8+
import React, { StrictMode, useState } from "react"
99
import ReactDOM from "react-dom/client"
1010
import { ApiError, OpenAPI } from "./client"
1111
import { ThemeProvider } from "./components/theme-provider"
@@ -44,9 +44,41 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
4444
<StrictMode>
4545
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
4646
<QueryClientProvider client={queryClient}>
47+
{/* Small visible demo: dismissible banner and floating feedback button */}
48+
<div style={{position: 'relative'}}>
49+
<Banner />
50+
<Fab />
51+
</div>
4752
<RouterProvider router={router} />
4853
<Toaster richColors closeButton />
4954
</QueryClientProvider>
5055
</ThemeProvider>
5156
</StrictMode>,
5257
)
58+
59+
function Banner() {
60+
const [open, setOpen] = useState(true)
61+
if (!open) return null
62+
return (
63+
<div className="card ui-update-banner" style={{maxWidth: 920, margin: '1rem auto'}}>
64+
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12}}>
65+
<div>
66+
<strong>UI updated</strong>
67+
<div style={{opacity: 0.85}}>Refreshed typography, subtle background gradients, buttons, and cards.</div>
68+
</div>
69+
<div style={{display: 'flex', gap: 8}}>
70+
<button className="btn" onClick={() => window.location.reload()}>Refresh</button>
71+
<button className="btn" onClick={() => setOpen(false)}>Dismiss</button>
72+
</div>
73+
</div>
74+
</div>
75+
)
76+
}
77+
78+
function Fab() {
79+
return (
80+
<a className="btn fab" href="mailto:dev@example.com" title="Send feedback">
81+
Feedback
82+
</a>
83+
)
84+
}

0 commit comments

Comments
 (0)