feat(ui): added shadows to popup buttons and course blocks (#378)

* feat(ui): added shadows to popup buttons and course blocks

* feat(ui): keep shadow state while dragging course block

* feat(ui): fixed transition "flash" after dragging

* feat(ui): fix linting/styling

* Update src/views/components/PopupMain.tsx

Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>

* fix(ui): change old icons to the new ones from main

* fix(ui): show flag icon instead of plus icon for feedback

* chore: fix button variants after merge

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>
Co-authored-by: Samuel Gunter <sgunter@utexas.edu>
This commit is contained in:
Aaron Chen
2025-01-08 02:20:10 -06:00
committed by GitHub
parent 0aa469af81
commit a20332e53d
3 changed files with 26 additions and 16 deletions

View File

@@ -1,6 +1,6 @@
import splashText from '@assets/insideJokes';
import createSchedule from '@pages/background/lib/createSchedule';
import { CalendarDots, GearSix, Plus } from '@phosphor-icons/react';
import { CalendarDots, Flag, GearSix, Plus } from '@phosphor-icons/react';
import { background } from '@shared/messages';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
@@ -14,8 +14,6 @@ import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeStrin
import useKC_DABR_WASM from 'kc-dabr-wasm';
import React, { useEffect, useState } from 'react';
import Feedback from '~icons/material-symbols/flag';
import { Button } from './common/Button';
import CourseStatus from './common/CourseStatus';
import { SmallLogo } from './common/LogoIcon';
@@ -91,15 +89,14 @@ export default function PopupMain(): JSX.Element {
<div className='flex items-center justify-between bg-white'>
<SmallLogo />
<div className='flex items-center gap-2.5'>
<button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
<CalendarDots className='size-6 text-white' />
</button>
<button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
<GearSix className='size-6 color-ut-black' />
</button>
<button className='bg-transparent px-2 py-1.25 btn' onClick={openReportWindow}>
<Feedback className='size-6 color-ut-black' />
</button>
<Button
variant='filled'
color='ut-burntorange'
onClick={handleCalendarOpenOnClick}
icon={CalendarDots}
/>
<Button variant='minimal' color='ut-black' onClick={handleOpenOptions} icon={GearSix} />
<Button variant='minimal' color='ut-black' onClick={openReportWindow} icon={Flag} />
</div>
</div>
</div>