Skip to content

Commit e8a432b

Browse files
tlylttlylt
committed
update styles
1 parent 9bbc85e commit e8a432b

File tree

2 files changed

+23
-21
lines changed

2 files changed

+23
-21
lines changed

‎components/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export default function Footer() {
22
return (
33
<footer className="text-gray-600 body-font">
44
<div className="container flex flex-col items-center px-5 py-8 mx-auto sm:flex-row">
5-
<p className="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0">© 2022 —
5+
<p className="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:py-2 sm:mt-0">© {new Date().getFullYear()} —
66
<a href="https://yongliangliu.com" className="ml-1 text-gray-600" rel="noopener noreferrer" target="_blank">@tlylt</a>
77
</p>
88
</div>

‎pages/[id].js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box } from '@chakra-ui/react'
1+
import { Box, Text } from '@chakra-ui/react'
22
import {
33
Input, Button,
44
NumberInput,
@@ -302,6 +302,7 @@ export default function Room() {
302302
status: 'success',
303303
position: 'top',
304304
isClosable: true,
305+
duration: 1000,
305306
})
306307
mutate(`/api/rooms/room?id=${id}`)
307308
}, [id])
@@ -330,7 +331,7 @@ export default function Room() {
330331
</div>
331332

332333
<div className="inline-flex ml-5 lg:w-2/5 lg:justify-end lg:ml-0">
333-
<div className="inline-flex items-center px-3 py-1 mt-4 text-base text-blue-500 border-0 rounded focus:outline-none md:mt-0" ><Button onClick={handleRefresh} variant="outline">Refresh</Button></div>
334+
<div className="inline-flex items-center px-3 py-1 mt-4 text-base text-blue-600 border-0 rounded focus:outline-none md:mt-0" ><Button onClick={handleRefresh} variant="outline">Refresh</Button></div>
334335
<a href="/" className="inline-flex items-center px-3 py-1 mt-4 text-base text-blue-500 border-0 rounded focus:outline-none hover:bg-gray-100 md:mt-0">Back
335336
<svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
336337
<path d="M5 12h14M12 5l7 7-7 7"></path>
@@ -343,7 +344,7 @@ export default function Room() {
343344
<div className="container px-5 py-4 mx-auto">
344345
<div className={`${isRotated ? "rotate-180" : ""}`}>
345346
<div className="flex flex-col w-full mb-10 text-center">
346-
<p className={`${isRotated ? "rotate-180" : ""} w-2/3 mx-auto text-base leading-relaxed text-gray-900 bg-slate-300`}>Front</p>
347+
<p className={`${isRotated ? "rotate-180" : ""} w-2/3 mx-auto text-gray-900 bg-slate-300 font-semibold`}>Front</p>
347348
</div>
348349
<div className="flex justify-center mb-10">
349350
<div className="px-2 py-2 mb-10 overflow-x-auto rounded-lg lg:mb-0">
@@ -353,35 +354,39 @@ export default function Room() {
353354
</div>
354355
</div>
355356
<div className="flex flex-col w-full mb-20 text-center">
356-
<p className={`${isRotated ? "rotate-180" : ""} w-2/3 mx-auto text-base leading-relaxed text-gray-900 bg-slate-300`}>Back</p>
357+
<p className={`${isRotated ? "rotate-180" : ""} w-2/3 mx-auto text-gray-900 bg-slate-300 font-semibold`}>Back</p>
357358
</div>
358359
</div>
359360
<div className="flex flex-wrap">
360-
<div className="px-8 py-6 border-l-2 border-gray-200 xl:w-1/4 lg:w-1/2 md:w-full border-opacity-60">
361-
<h2 className="mb-2 text-lg font-medium text-gray-900 sm:text-xl title-font">Settings</h2>
361+
<div className="px-8 py-6 border-l-2 border-gray-200 lg:border-0 xl:w-1/3 lg:w-1/2 md:w-full border-opacity-60">
362+
<h2 className="mb-2 text-lg font-medium text-gray-900 sm:text-xl title-font">Profile</h2>
363+
<Text mb='8px'>Name:</Text>
362364
<Input placeholder='Enter Name'
363365
value={name}
364366
onChange={handleNameChange}
365367
disabled={locked}
366368
required
367369
/>
368370
</div>
369-
<div className="px-8 py-6 border-l-2 border-gray-200 xl:w-1/4 lg:w-1/2 md:w-full border-opacity-60">
371+
<div className="px-8 py-6 border-l-2 border-gray-200 xl:w-1/3 lg:w-1/2 md:w-full border-opacity-60">
370372
<h2 className="mb-2 text-lg font-medium text-gray-900 sm:text-xl title-font">Actions</h2>
371-
{location.row === -1 && location.col === -1 ? <div className="mb-4 text-base leading-relaxed">Go sit down!</div> :
373+
{location.row === -1 && location.col === -1 ? <div className="mb-4 text-base leading-relaxed">🪑 Go sit down!</div> :
372374
<div className="mb-4 text-base leading-relaxed">
373-
<div>Sitting at: </div>
374-
<div>Row: {location.row + 1}</div>
375-
<div>Column: {location.col + 1}</div>
375+
<div>🧘‍♀️ Now at: </div>
376+
<span>Row: {location.row + 1} </span>
377+
<span>Column: {location.col + 1}</span>
376378
<div className="text-blue-500">
377379
<Button onClick={() => handleExitSeat(location)} disabled={!locked} variant="outline">Exit Seat</Button>
378380
</div>
379381
</div>}
380382
<div>Share:</div>
381-
<QRCode value={`${window.location.href}`} />
383+
<QRCode value={`${window.location.href}`} size={250} />
382384
</div>
383-
<div className="px-8 py-6 border-l-2 border-gray-200 xl:w-1/4 lg:w-1/2 md:w-full border-opacity-60">
384-
<h2 className="mb-2 text-lg font-medium text-gray-900 sm:text-xl title-font">Room Admin(s)</h2>
385+
<div className="px-8 py-6 border-l-2 border-gray-200 xl:w-1/3 lg:w-1/2 md:w-full border-opacity-60">
386+
<h2 className="mb-2 text-lg font-medium text-gray-900 sm:text-xl title-font">Room Admin</h2>
387+
<div className="flex items-center my-1 text-blue-500">
388+
<Button onClick={() => { setIsRotated(prev => !prev) }} variant="outline">Rotate View</Button>
389+
</div>
385390
<p className="mb-4 text-base leading-relaxed">Fill in the room password before executing the actions</p>
386391
<Input placeholder='Room Password'
387392
value={password}
@@ -418,18 +423,15 @@ export default function Room() {
418423
</NumberInput>
419424
</div>
420425
</Stack>
421-
<div className="inline-flex items-center my-1 text-blue-500">
426+
<div className="flex items-center my-1 text-red-500">
422427
<Button onClick={handleRemoveFromSeat} variant="outline">Remove Occupant</Button>
423428
</div>
424-
<div className="inline-flex items-center my-1 text-blue-500">
429+
<div className="flex items-center my-1 text-red-500">
425430
<Button onClick={handleClearSeat} variant="outline">Remove All Occupants</Button>
426431
</div>
427-
<div className="inline-flex items-center my-1 text-blue-500">
432+
<div className="flex items-center my-1 text-red-500">
428433
<Button onClick={handleDeleteRoom} variant="outline">Delete Room</Button>
429434
</div>
430-
<div className="flex items-center my-1 text-blue-500">
431-
<Button onClick={() => { setIsRotated(prev => !prev) }} variant="outline">Rotate View</Button>
432-
</div>
433435
</div>
434436
</div>
435437
</div>

0 commit comments

Comments
 (0)