DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): change icons to phosphor-icons #467 (#469)

Browse Source 
* change icons to phosphor-icons

* feat(ui): change icons to phosphor-icons

* feat(ui): change icons to phosphor-icons

* feat(ui): correct icon sizes, weights, and colors

* feat(ui): change arrow-up-right sizes to 16px
This commit is contained in:
Preston Cook
2024-12-31 13:36:08 -06:00
committed by GitHub
parent 918f4e419c
commit 37bd7e79d9
25 changed files with 112 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/components/common/Button.tsx
View File

@@ -1,17 +1,17 @@
import type { Icon, IconProps } from '@phosphor-icons/react';
import type { ThemeColor } from '@shared/types/ThemeColors';
import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React from 'react';
import type IconComponent from '~icons/material-symbols';
interface Props {
className?: string;
style?: React.CSSProperties;
variant: 'filled' | 'outline' | 'single';
onClick?: () => void;
icon?: typeof IconComponent;
icon?: Icon;
iconProps?: IconProps;
disabled?: boolean;
title?: string;
color: ThemeColor;
@@ -27,6 +27,7 @@ export function Button({
variant,
onClick,
icon,
iconProps,
disabled,
title,
color,
@@ -63,7 +64,7 @@ export function Button({
disabled={disabled}
onClick={disabled ? undefined : onClick}
>
{Icon && <Icon className='h-6 w-6' />}
{Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
{!isIconOnly && (
<Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
{children}

9
src/views/components/common/FileUpload.tsx
View File

@@ -1,17 +1,17 @@
import type { Icon, IconProps } from '@phosphor-icons/react';
import type { ThemeColor } from '@shared/types/ThemeColors';
import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React from 'react';
import type IconComponent from '~icons/material-symbols';
interface Props {
className?: string;
style?: React.CSSProperties;
variant: 'filled' | 'outline' | 'single';
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
icon?: typeof IconComponent;
icon?: Icon;
iconProps?: IconProps;
disabled?: boolean;
title?: string;
color: ThemeColor;
@@ -28,6 +28,7 @@ export default function FileUpload({
variant,
onChange,
icon,
iconProps,
disabled,
title,
color,
@@ -62,7 +63,7 @@ export default function FileUpload({
)}
title={title}
>
{Icon && <Icon className='h-6 w-6' />}
{Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
{!isIconOnly && (
<Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
{children}

5
src/views/components/common/PopupCourseBlock.tsx
View File

@@ -1,4 +1,5 @@
import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
import { DotsSixVertical } from '@phosphor-icons/react';
import { background } from '@shared/messages';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
import type { Course } from '@shared/types/Course';
@@ -10,8 +11,6 @@ import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
/**
* Props for PopupCourseBlock
*/
@@ -79,7 +78,7 @@ export default function PopupCourseBlock({
className='flex items-center self-stretch rounded rounded-r-0 cursor-move!'
{...dragHandleProps}
>
<DragIndicatorIcon className='h-6 w-6 text-white' />
<DotsSixVertical weight='bold' className='h-6 w-6 text-white' />
</div>
<Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
<span className='px-0.5 font-450'>{formattedUniqueId}</span> {course.department} {course.number}

6
src/views/components/common/ScheduleDropdown.tsx
View File

@@ -1,11 +1,9 @@
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
import { CaretDown, CaretUp } from '@phosphor-icons/react';
import Text from '@views/components/common/Text/Text';
import useSchedules from '@views/hooks/useSchedules';
import React from 'react';
import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
/**
* Props for the Dropdown component.
*/
@@ -46,7 +44,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
</div>
</div>
<Text className='text-ut-burntorange text-2xl! font-normal!'>
{open ? <DropdownArrowDown /> : <DropdownArrowUp />}
{open ? <CaretDown weight='fill' /> : <CaretUp weight='fill' />}
</Text>
</DisclosureButton>

24
src/views/components/common/ScheduleListItem.tsx
View File

@@ -2,6 +2,7 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import deleteSchedule from '@pages/background/lib/deleteSchedule';
import duplicateSchedule from '@pages/background/lib/duplicateSchedule';
import renameSchedule from '@pages/background/lib/renameSchedule';
import { Circle, DotsSixVertical, DotsThree, RadioButton } from '@phosphor-icons/react';
import type { UserSchedule } from '@shared/types/UserSchedule';
import Text from '@views/components/common/Text/Text';
import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
@@ -9,9 +10,6 @@ import useSchedules from '@views/hooks/useSchedules';
import clsx from 'clsx';
import React, { useEffect, useMemo, useState } from 'react';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
import MoreActionsIcon from '~icons/material-symbols/more-vert';
import { Button } from './Button';
import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider';
import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot';
@@ -117,21 +115,21 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
<div className='rounded bg-white'>
<li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
<div className='h-full cursor-move focusable' {...dragHandleProps}>
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
<DotsSixVertical
weight='bold'
className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
/>
</div>
<div className='group relative flex flex-1 items-center overflow-x-hidden'>
<div
className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
onClick={(...e) => !isEditing && onClick?.(...e)}
>
<div
className={clsx(
'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active/circle:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
{
'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
}
)}
/>
{isActive ? (
<RadioButton className='h-7.5 w-7.5 btn-transition active:scale-95' weight='fill' />
) : (
<Circle className='h-7.5 w-7.5 btn-transition active:scale-95' />
)}
{isEditing && (
<Text
variant='p'
@@ -158,7 +156,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
<DialogProvider>
<Menu>
<MenuButton className='invisible h-fit bg-transparent p-0 text-ut-gray btn-transition data-[open]:visible group-hover:visible'>
<MoreActionsIcon className='h-6 w-6' />
<DotsThree weight='bold' className='h-6 w-6' />
</MenuButton>
<MenuItems