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

Merge branch 'hackathon' of https://github.com/UT-Developers/UT-Registration-Plus into hackathon

Browse Source
This commit is contained in:
knownotunknown
2024-02-17 12:09:10 -06:00
parent 1168584b8a a0496fea18
commit ed8915bcd1
4 changed files with 20 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/shared/util/themeColors.ts
View File

@@ -1,15 +1,15 @@
export const colors = {
ut: {
'burnt-orange': '#BF5700',
burntorange: '#BF5700',
black: '#333F48',
orange: '#f8971f',
yellow: '#ffd600',
'light-green': '#a6cd57',
lightgreen: '#a6cd57',
green: '#579d42',
teal: '#00a9b7',
blue: '#005f86',
gray: '#9cadb7',
'off-white': '#d6d2c4',
offwhite: '#d6d2c4',
concrete: '#95a5a6',
},
theme: {

12
src/stories/components/Button.stories.tsx
View File

@@ -1,14 +1,14 @@
import { Button } from 'src/views/components/common/Button/Button';
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { colorsFlattened } from 'src/shared/util/themeColors';
import ImagePlaceholderIcon from '~icons/material-symbols/image';
import { Button } from 'src/views/components/common/Button/Button';
import AddIcon from '~icons/material-symbols/add';
import RemoveIcon from '~icons/material-symbols/remove';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
import ReviewsIcon from '~icons/material-symbols/reviews';
import HappyFaceIcon from '~icons/material-symbols/mood';
import DescriptionIcon from '~icons/material-symbols/description';
import ImagePlaceholderIcon from '~icons/material-symbols/image';
import HappyFaceIcon from '~icons/material-symbols/mood';
import RemoveIcon from '~icons/material-symbols/remove';
import ReviewsIcon from '~icons/material-symbols/reviews';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
@@ -128,7 +128,7 @@ export const CourseCatalogActionButtons: Story = {
},
render: props => (
<div style={{ display: 'flex', gap: '15px' }}>
<Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
<Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
<Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
RateMyProf
</Button>

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

@@ -1,7 +1,7 @@
import clsx from 'clsx';
import React from 'react';
import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import type IconComponent from '~icons/material-symbols';
import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import Text from '../Text/Text';
interface Props {
@@ -33,28 +33,24 @@ export function Button({
const Icon = icon;
const isIconOnly = !children && !!icon;
const colorHex = getThemeColorHexByName(color);
const colorRgb = getThemeColorRgbByName(color).join(' ');
const colorRgb = getThemeColorRgbByName(color)?.join(' ');
return (
<button
style={
{
...style,
'--color': colorHex,
'--bg-color-8': `rgba(${colorRgb} / 0.08)`,
'--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
'--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
color: colorHex,
backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
} as React.CSSProperties
}
className={clsx(
'btn',
{
'disabled:(cursor-not-allowed opacity-50)': disabled,
'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
variant === 'filled',
'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
variant === 'outline',
'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
'px-2 py-1.25': isIconOnly && variant !== 'outline',
'px-1.75 py-1.25': isIconOnly && variant === 'outline',
'px-3.75': variant === 'outline' && !isIconOnly,
@@ -65,7 +61,7 @@ export function Button({
disabled={disabled}
onClick={disabled ? undefined : onClick}
>
{icon && <Icon className='size-6' />}
{icon && <Icon className='h-6 w-6' />}
{!isIconOnly && (
<Text variant='h4' className='translate-y-0.08'>
{children}

15
unocss.config.ts
View File

@@ -7,18 +7,9 @@ import { colors } from './src/shared/util/themeColors';
export default defineConfig({
rules: [
['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
[
'btn-shadow',
{
'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
},
],
[
'btn-shade',
{
'background-color': 'var(--bg-color-8)',
},
'btn-transition',
{ transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 100ms, transform 50ms' },
],
[
'ring-offset-0',
@@ -29,7 +20,7 @@ export default defineConfig({
],
shortcuts: {
focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
},
theme: {
easing: {