Skip to content

Commit b33f3a1

Browse files
xmlisztxmliszt
committed
UI revamp
1 parent 07de821 commit b33f3a1

26 files changed

+251
-208
lines changed

‎app/add-level/page.tsx

+35-35
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import React, {
1010
} from 'react';
1111
import { useRouter } from 'next/navigation';
1212
import _, { zip } from 'lodash';
13-
import { ChevronsUp, Info, Plus, SpellCheck, Trash } from 'lucide-react';
13+
import { ChevronsUp, Info, SpellCheck, X } from 'lucide-react';
1414
import { toast } from 'sonner';
1515

1616
import { useAskForFeedback } from '@/components/ask-for-feedback-provider';
@@ -437,11 +437,12 @@ const AddLevelPage = () => {
437437
onScroll={onScrollChange}
438438
>
439439
<CardContent className='p-6 pt-2'>
440-
<div className='mt-2 text-sm leading-snug text-muted-foreground'>
440+
<div className='mt-2 text-xs leading-snug text-muted-foreground'>
441441
You can create your custom topics here! Fill up the fields below and submit your topics.
442442
Your topic will be reviewed and uploaded to Taboo AI within 3 working days!{' '}
443443
<span>
444444
<InfoButton
445+
className='absolute right-0 top-0'
445446
size={15}
446447
tooltip='Read about Taboo AI content policy'
447448
title='Taboo AI content policy'
@@ -460,7 +461,7 @@ const AddLevelPage = () => {
460461
</span>
461462
</div>
462463
<div className='mt-4 flex flex-col gap-1'>
463-
<Label className='text-lg' htmlFor='input-topicName'>
464+
<Label className='text-md' htmlFor='input-topicName'>
464465
1. Topic name
465466
</Label>
466467
<div className='relative w-full'>
@@ -472,7 +473,7 @@ const AddLevelPage = () => {
472473
: topicName.length > 0
473474
? '!border-green-500'
474475
: '!border-border',
475-
'w-full pr-[40px]'
476+
'w-full pr-[40px] text-sm'
476477
)}
477478
value={topicName}
478479
placeholder='Name for your topic...'
@@ -491,11 +492,11 @@ const AddLevelPage = () => {
491492
<p className='my-1 animate-fade-in text-xs text-red-500'>{topicNameErrorMessage}</p>
492493
)}
493494
<Separator className='mb-1 mt-2' />
494-
<Label className='text-lg'>2. Assess the difficulty level for your topic</Label>
495+
<Label className='text-md'>2. Assess the difficulty level for your topic</Label>
495496
<RadioGroup
496497
onValueChange={setDifficultyLevel}
497498
value={difficultyLevel}
498-
className='flex flex-row items-center gap-2'
499+
className='mt-2 flex flex-row items-center gap-2'
499500
>
500501
<div className='flex flex-row items-center gap-2'>
501502
<RadioGroupItem id='diff-1' value='1' />
@@ -512,34 +513,35 @@ const AddLevelPage = () => {
512513
</RadioGroup>
513514
<Separator className='mb-1 mt-2' />
514515
<div className='flex flex-col gap-2'>
515-
<div className='flex flex-row items-center justify-between'>
516+
<div className='flex flex-row items-center justify-between gap-x-4'>
516517
<Label className='mt-2 text-lg text-primary' htmlFor='ai-switch'>
517518
3. Use AI to generate taboo words for each target word?
518519
</Label>
519520
<Switch
520521
id='ai-switch'
522+
className='cursor-default'
521523
checked={shouldUseAIForTabooWords}
522524
onCheckedChange={(checked) => {
523525
setShouldUseAIForTabooWords(checked);
524526
}}
525527
/>
526528
</div>
527-
<p className='text-sm leading-tight text-muted-foreground'>
529+
<p className='text-xs leading-tight text-muted-foreground'>
528530
If turned on, you are not required to create taboo words for each target word that
529531
you created. After submission, if your submission passes the review, we will use AI
530532
to create the taboo words for you.
531533
</p>
532534
</div>
533535
<Separator className='mb-1 mt-2' />
534-
<Label className='text-lg'>
536+
<Label className='text-md'>
535537
4. Give at least 3 target words relevant to the topic provided
536538
</Label>
537539
{targetWordsErrorMessage && (
538540
<p className='animate-fade-in text-xs text-red-500'>{targetWordsErrorMessage}</p>
539541
)}
540542
<div className='my-4 flex w-full flex-row flex-wrap items-center justify-start gap-4'>
541543
{targetWords.map((w, i) => (
542-
<div key={i} className='relative w-full lg:w-52'>
544+
<div key={i} className='relative w-full'>
543545
<Input
544546
autoFocus
545547
disabled={tabooWordsCheckingStatus[i]}
@@ -565,33 +567,33 @@ const AddLevelPage = () => {
565567
asChild
566568
tooltip='Delete'
567569
disabled={tabooWordsCheckingStatus[i]}
568-
className='absolute -right-3 -top-4 z-10 rounded-full p-2 shadow-sm'
569570
aria-label={`delete this target word with index ${i}`}
570-
variant='destructive'
571+
className='absolute right-1 top-1 z-10 rounded-full p-2'
572+
variant='link'
571573
onClick={() => {
572574
deleteTargetWordAtIndex(i);
573575
}}
574576
>
575-
<Trash size={15} />
577+
<X size={12} />
576578
</IconButton>
577579
</div>
578580
))}
579581
{targetWords.length < MAX_TARGET_WORDS_COUNT && (
580-
<IconButton
581-
asChild
582-
tooltip='Add target word'
582+
<Button
583583
key='add-button'
584584
aria-label='add a new target word'
585+
className='w-full rounded-md'
586+
variant='outline'
585587
onClick={addNewTargetWord}
586588
>
587-
<Plus />
588-
</IconButton>
589+
New target word...
590+
</Button>
589591
)}
590592
</div>
591593
{!shouldUseAIForTabooWords && (
592594
<>
593595
<Separator className='mb-1 mt-2' />
594-
<Label className='text-lg'>
596+
<Label className='text-md'>
595597
5. For each target word, define at least 5 taboo words
596598
</Label>
597599
<Accordion
@@ -632,13 +634,13 @@ const AddLevelPage = () => {
632634
</b>
633635
</div>
634636
</AccordionTrigger>
635-
<AccordionContent key={i} className='px-4'>
637+
<AccordionContent key={i} className='px-1'>
636638
{tabooWordsCheckingStatus[i] ? (
637639
<Skeleton numberOfRows={2} />
638640
) : (
639641
<div>
640642
{tabooWordsExistedStatus[i] && (
641-
<div className='text-primary'>
643+
<div className='text-xs text-muted-foreground'>
642644
<span>
643645
Taboo words for &quot;{w}&quot; have already been defined in our
644646
system by others. In order to respect the contents created by
@@ -651,7 +653,7 @@ const AddLevelPage = () => {
651653
<PopoverTrigger asChild>
652654
<IconButton
653655
tooltip='How to appeal?'
654-
className='!m-0 !w-fit !p-0'
656+
className='inline'
655657
variant='link'
656658
>
657659
<Info size={12} />
@@ -681,7 +683,7 @@ const AddLevelPage = () => {
681683

682684
<div className='my-4 flex w-full flex-row flex-wrap items-center justify-start gap-4'>
683685
{tabooWords[i].map((tw, ti) => (
684-
<div key={`taboo-${ti}`} className='relative w-full lg:w-52'>
686+
<div key={`taboo-${ti}`} className='relative w-full'>
685687
<Input
686688
autoFocus
687689
disabled={tabooWordsExistedStatus[i] ?? false}
@@ -709,15 +711,15 @@ const AddLevelPage = () => {
709711
asChild
710712
tooltip='Delete'
711713
disabled={tabooWordsCheckingStatus[i]}
712-
className='absolute -right-3 -top-4 z-10 rounded-full p-2 shadow-sm'
714+
className='absolute right-1 top-1 z-10 rounded-full p-2'
713715
hidden={tabooWordsExistedStatus[i] ?? false}
714-
variant='destructive'
716+
variant='link'
715717
aria-label={`delete this target word with index ${i}`}
716718
onClick={() => {
717719
deleteTabooWordAtIndex(i, ti);
718720
}}
719721
>
720-
<Trash size={15} />
722+
<X size={12} />
721723
</IconButton>
722724
</>
723725
)}
@@ -726,17 +728,15 @@ const AddLevelPage = () => {
726728
</div>
727729
{!(tabooWordsExistedStatus[i] ?? false) &&
728730
tabooWords[i].length < MAX_TABOO_WORDS_COUNT && (
729-
<IconButton
730-
asChild
731-
tooltip='Add target word'
731+
<Button
732732
key='add-button'
733-
aria-label='add a new target word'
734-
onClick={() => {
735-
addNewTabooWord(i);
736-
}}
733+
aria-label='add a new taboo word'
734+
className='w-full rounded-md'
735+
variant='outline'
736+
onClick={() => addNewTabooWord(i)}
737737
>
738-
<Plus />
739-
</IconButton>
738+
New taboo word...
739+
</Button>
740740
)}
741741
</div>
742742
)}

‎app/globals.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ body {
6767

6868
body {
6969
@apply flex h-full w-full flex-col;
70+
background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--muted)));
7071
}
7172

7273
body > main {
@@ -159,7 +160,7 @@ textarea {
159160
.rotating-golden-border-trace::after {
160161
content: '';
161162
position: absolute;
162-
inset: -0.1rem;
163+
inset: -1px;
163164
z-index: 0;
164165
background: conic-gradient(
165166
from var(--gradient-angle),
@@ -179,7 +180,7 @@ textarea {
179180
.rotating-mono-border-trace::after {
180181
content: '';
181182
position: absolute;
182-
inset: -0.1rem;
183+
inset: -2px;
183184
z-index: 0;
184185
background: conic-gradient(
185186
from var(--gradient-angle),
@@ -195,7 +196,7 @@ textarea {
195196
.rotating-green-border-trace::after {
196197
content: '';
197198
position: absolute;
198-
inset: -0.1rem;
199+
inset: -2px;
199200
z-index: 0;
200201
background: conic-gradient(from var(--gradient-angle), #42eca6, #208ea2, #42eca6);
201202
border-radius: inherit;
@@ -206,7 +207,7 @@ textarea {
206207
.unicorn-color::after {
207208
content: '';
208209
position: absolute;
209-
inset: -0.2rem;
210+
inset: -2px;
210211
z-index: -1;
211212
border-radius: inherit;
212213
animation: rotating 5s linear infinite forwards;

‎app/layout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Metadata, Viewport } from 'next';
2-
import { Lora } from 'next/font/google';
2+
import { Mulish } from 'next/font/google';
33
import Script from 'next/script';
44

55
import { AnalyticsProvider } from '@/components/analytics-provider';
@@ -25,9 +25,9 @@ import { ReactQueryProvider } from '@/components/query-provider';
2525

2626
import { fetchUserProfile } from './profile/server/fetch-user-profile';
2727

28-
const font = Lora({
28+
const font = Mulish({
2929
subsets: ['cyrillic', 'cyrillic-ext', 'latin', 'latin-ext'],
30-
fallback: ['Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
30+
fallback: ['Inter', 'Roboto', 'sans-serif'],
3131
variable: '--font_family_ui',
3232
});
3333

0 commit comments

Comments
 (0)