Skip to content

improved the popup UI #8

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

Open
PrakharSinha-09 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

improved the popup UI #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4446bd1
improved the popup UI
PrakharSinha-09 Nov 15, 2024
76cb5b2
Merge branch 'main' into main
PrakharSinha-09 Nov 15, 2024
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
1 change: 1 addition & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
8 changes: 5 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,26 @@ const Popup: React.FC = () => {
};

return (
<div className="dark relative w-[350px] h-[550px] bg-black text-white p-4">
<div className="dark relative w-[350px] h-[550px] bg-black p-4 text-white">
{isLoaded && (
<div>
<div className="w-full mt-10">
<div className="w-full mt-10 bg-black">
<img className="mx-auto" src={leetCode} width={150} height={150} />
</div>
<div className="text-center">
<h1 className="text-white font-bold text-2xl">LeetCode Whisper</h1>
<p className='mt-1 font-dancing font-semibold'><span className='italic'>Problem-solving made intuitive </span>{"</>"}</p>
</div>
<div className="mt-10 flex flex-col gap-2">
<label htmlFor="text" className='text-white font-bold text-xl'>Enter Your OpenAI API key</label>
<Input
className='text-white'
value={openAIKey}
onChange={(e) => setOpenAIKey(e.target.value)}
placeholder="Ex. 0aBbnGgzXXXXXX"
className='bg-white outline-none'
/>
<Button onClick={handleAddOpenAPIKey} className="dark">
<Button onClick={handleAddOpenAPIKey} className="mt-2 dark bg-blue-500 hover:bg-blue-600">
Save
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,4 @@
body {
@apply bg-background text-foreground;
}
}
}
4 changes: 4 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ export default {

theme: {
extend: {
fontFamily: {
dancing: ['Dancing Script', 'cursive'],
},

borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
Expand Down