Update favicon and dashboard UI

app/dashboard/repo/[projectId]/instructions/page.tsx

@@ -6,7 +6,7 @@ import prisma from '~/prisma'
 export default async function Page({params}: {params: {projectId: string}}) {
 	return (
 		<Suspense fallback={<PanelSkeletons amount={3} />}>
-			<div className='flex w-full flex-col items-center gap-8'>
+			<div className='flex w-full flex-col gap-8'>
 				<div className='text-2xl font-medium'>Custom Instructions</div>
 				<InstructionsWrapper projectId={params.projectId} />
 			</div>

app/dashboard/repo/[projectId]/layout.tsx

@@ -13,9 +13,9 @@ export default async function Layout({
 	if (!session) redirect('/dashboard')
 
 	return (
-		<div>
+		<div className='space-y-4'>
 			<RepoNavigation />
-			{children}
+			<div className='z-10 h-full w-full'>{children}</div>
 		</div>
 	)
 }

app/icon.tsx

@@ -0,0 +1,110 @@
+import {ImageResponse} from 'next/og'
+import colors from 'tailwindcss/colors'
+import tailwindConfig from '../tailwind.config'
+
+export const runtime = 'edge'
+export const contentType = 'image/png'
+export const size = {height: 32, width: 32}
+
+const orange = colors.orange[100]
+
+export default async function Icon() {
+	return new ImageResponse(
+		(
+			<div
+				style={{
+					alignItems: 'center',
+					color: 'black',
+					display: 'flex',
+					height: '100%',
+					justifyContent: 'center',
+					position: 'relative',
+					width: '100%'
+				}}>
+				<svg
+					viewBox='0 0 500 500'
+					fill='none'
+					style={{
+						width: '100%',
+						height: '100%'
+					}}
+					xmlns='http://www.w3.org/2000/svg'>
+					<path
+						d='M100 400H200V500H100V400Z'
+						fill={orange}
+					/>
+					<path
+						d='M300 400H400V500H300V400Z'
+						fill={orange}
+					/>
+					<path
+						d='M200 200H300V300H200V200Z'
+						fill={orange}
+					/>
+					<path
+						d='M100 200H200V300H100V200Z'
+						fill={orange}
+					/>
+					<path
+						d='M400 0H500V100H400V0Z'
+						fill={orange}
+					/>
+					<path
+						d='M0 0H100V100H0V0Z'
+						fill={orange}
+					/>
+					<path
+						d='M200 0H300V100H200V0Z'
+						fill={orange}
+					/>
+					<path
+						d='M300 100H400V200H300V100Z'
+						fill={orange}
+					/>
+					<path
+						d='M0 100H100V200H0V100Z'
+						fill={orange}
+					/>
+					<path
+						d='M400 300H500V400H400V300Z'
+						fill={orange}
+					/>
+					<path
+						d='M400 400H500V500H400V400Z'
+						fill={orange}
+					/>
+					<path
+						d='M0 400H100V500H0V400Z'
+						fill={orange}
+					/>
+					<path
+						d='M200 400H300V500H200V400Z'
+						fill={orange}
+					/>
+					<path
+						d='M200 300H300V400H200V300Z'
+						fill={orange}
+					/>
+					<path
+						d='M200 100H300V200H200V100Z'
+						fill={orange}
+					/>
+				</svg>
+				<div
+					style={{
+						width: '30%',
+						height: '30%',
+						top: 0,
+						left: `${~~(new Date().getHours() / 2.4)}0%`, // 😎
+						borderRadius: '100%',
+						position: 'absolute',
+						background: `linear-gradient(180deg, ${colors.orange[500]} 0%, ${tailwindConfig.theme.extend.colors.sunset} 100%)`
+					}}
+				/>
+			</div>
+		),
+		{
+			...size
+		}
+	)
+}

lib/components/Feedback.tsx

@@ -31,11 +31,10 @@ export default function Feedback({}: Props) {
 			open={openDialog}
 			onOpenChange={() => setOpenDialog(prev => !prev)}>
 			<DialogTrigger>
-				<Button
-					variant='outline'
-					size='icon'>
+				{/* Making this a button throws a button-in-button HTML error */}
+				<div className='center hover:bg-tertiary h-9 w-9 rounded-sm transition-colors'>
 					<MessageSquareMoreIcon className='h-4 w-4' />
-				</Button>
+				</div>
 			</DialogTrigger>
 			<DialogContent>
 				<div className='flex w-full flex-col gap-4'>

lib/components/dashboard/Input/TextArea.tsx

@@ -7,7 +7,7 @@ export function TextArea({
 }) {
 	return (
 		<textarea
-			className='w-full rounded-lg border-2 bg-primary p-2 text-white focus:outline-none'
+			className='text-primary bg-primary w-full rounded-sm border p-2 focus:outline-none'
 			value={value}
 			onChange={e => onTextChange((e.target as any).value)}></textarea>
 	)

lib/components/dashboard/Instructions/Instructions.tsx

@@ -23,7 +23,7 @@ export function Instructions({
 	projectId: string
 }) {
 	return (
-		<div className='relative flex w-full flex-col items-center space-y-4 pb-10'>
+		<div className='relative flex w-full flex-col space-y-4 pb-10'>
 			{instructions.map((instruction, i) => (
 				<React.Fragment key={instruction.id}>
 					<Instruction
@@ -82,7 +82,7 @@ function Instruction({
 		<div
 			id={instruction.id}
 			className={cn(
-				'group relative flex w-full max-w-xl flex-col gap-4 rounded-lg border-2 bg-primary p-8 opacity-100 transition-opacity duration-200',
+				'bg-primary group relative flex w-full max-w-xl flex-col gap-4 rounded-sm border p-6 opacity-100 transition-opacity duration-200',
 				{'pointer-events-none opacity-50': isDelete}
 			)}>
 			{!isDelete && (
@@ -91,7 +91,7 @@ function Instruction({
 						setDelete(true)
 						deleteInstruction(instruction.projectId, instruction.id)
 					}}
-					className='absolute -right-3 -top-3 hidden rounded-lg bg-red-500 p-1 opacity-0 transition-opacity duration-200 ease-in-out group-hover:block group-hover:opacity-100'>
+					className='absolute -right-3 -top-3 hidden rounded-sm bg-red-500 p-1 opacity-0 transition-opacity duration-200 ease-in-out group-hover:block group-hover:opacity-100'>
 					<XIcon
 						size={15}
 						strokeWidth={3}

lib/components/dashboard/Navigation/Header.tsx

@@ -7,14 +7,14 @@ import Link from 'next/link'
 import {usePathname} from 'next/navigation'
 import {CommandMenu} from '~/components/CommandBar'
 import Feedback from '~/components/Feedback'
+import {Maige} from '~/components/logos'
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger
 } from '~/components/ui/dropdown-menu'
-import MaigeLogo from '../../../../public/logo.png'
 import ProjectRoute from './projectHeader'
 
 export function DashboardHeader({
@@ -29,24 +29,22 @@ export function DashboardHeader({
 	return (
 		<div className='sticky top-0 z-50 flex w-full select-none flex-row items-center justify-between pb-5 pt-4 backdrop-blur-sm'>
 			<div className='flex items-center gap-4'>
-				<Image
-					src={MaigeLogo}
-					width={35}
-					height={35}
-					className='rounded-full object-cover'
-					alt='Maige Logo'
-				/>
+				<Link
+					href='/dashboard'
+					className='group'>
+					<Maige className='group-hover:text-secondary text-tertiary h-8 transition-colors' />
+				</Link>
 				<span className='inline-flex items-center justify-center gap-1.5'>
 					<Link
 						href={'/dashboard'}
-						className='rounded-sm px-2.5 py-0.5 hover:bg-primary/10'>
+						className='hover:bg-primary/10 rounded-sm px-2.5 py-0.5'>
 						{session.user.name}
 					</Link>
 					{pathname.split('/dashboard/repo/')[1] && (
 						<>
 							<span className='text-xl text-accent'>/</span>{' '}
 							<Link
-								className='rounded-sm px-2.5 py-0.5 hover:bg-primary/10'
+								className='hover:bg-primary/10 rounded-sm px-2.5 py-0.5'
 								href={
 									'/dashboard/repo/' +
 									pathname.split('/dashboard/repo/')[1].split('/')[0]

lib/components/dashboard/Navigation/MainNavigation.tsx

@@ -17,25 +17,27 @@ const routes = [
 
 export function MainNavigation() {
 	const pathname = usePathname()
+
 	return (
 		<div className='border-tertiary relative z-10 flex border-b'>
 			{routes.map((page, index) => (
 				<div
 					key={index}
 					className='group relative -bottom-px flex flex-col items-center'>
 					<Link
-						className='mb-1 rounded-sm px-2.5 py-0.5 hover:bg-primary/10'
+						className='hover:bg-primary/10 mb-1 rounded-sm px-2.5 py-0.5'
 						href={`/dashboard${page.path}`}>
 						{page.name}
 					</Link>
 					<div
 						className={cn(
-							'w-full border-b border-secondary transition-opacity',
+							'border-secondary w-full border-b transition-opacity',
 							(page.path === '' && pathname === '/dashboard') ||
 								(page.path !== '' && pathname.startsWith(`/dashboard${page.path}`))
 								? 'opacity-100'
 								: 'opacity-0 group-hover:opacity-100'
-						)}></div>
+						)}
+					/>
 				</div>
 			))}
 		</div>

lib/components/dashboard/Navigation/RepoNavigation.tsx

@@ -21,24 +21,29 @@ const routes = [
 
 export function RepoNavigation() {
 	const pathname = usePathname()
-	const {projectId} = useParams()
+	const { projectId } = useParams()
+
 	return (
-		<div className='flex gap-2 pb-8'>
+		<div className='border-tertiary relative z-10 flex gap-2 border-b'>
 			{routes.map((page, index) => (
 				<div
 					key={index}
-					className='group relative flex flex-col items-center pb-2'>
+					className='group relative -bottom-px flex flex-col items-center'>
 					<Link
-						className='mb-1 rounded-sm px-2.5 py-0.5 hover:bg-primary/10'
+						className='hover:bg-primary/10 mb-1 rounded-sm px-2.5 py-0.5'
 						href={`/dashboard/repo/${projectId}${page.path}`}>
 						{page.name}
 					</Link>
 					<div
 						className={cn(
-							'invisible w-[90%] border-b-[2px] border-b-border border-opacity-50 group-hover:visible',
-							pathname == `/dashboard/repo/${projectId}${page.path}` &&
-								'visible border-opacity-100'
-						)}></div>
+							'border-secondary w-full border-b transition-opacity',
+							(page.path === '' && pathname === `/dashboard/repo/${projectId}`) ||
+								(page.path !== '' &&
+									pathname.startsWith(`/dashboard/repo/${projectId}${page.path}`))
+								? 'opacity-100'
+								: 'opacity-0 group-hover:opacity-100'
+						)}
+					/>
 				</div>
 			))}
 		</div>

lib/components/dashboard/Repositories/Repositories.tsx

@@ -2,12 +2,23 @@ import {PlusIcon} from 'lucide-react'
 import Link from 'next/link'
 import {ReactNode} from 'react'
 import env from '~/env.mjs'
-import {timeAgo} from '~/utils'
+import {cn, timeAgo} from '~/utils'
 
-function RepoLayout({children, href}: {children: ReactNode; href: string}) {
+function RepoLayout({
+	children,
+	href,
+	className
+}: {
+	children: ReactNode
+	href: string
+	className?: string
+}) {
 	return (
 		<Link
-			className='relative flex h-36 w-full cursor-pointer flex-col justify-between rounded-lg border-2 border-border/60 p-4 py-3.5 transition-opacity duration-300 hover:border-border'
+			className={cn(
+				className,
+				'border-tertiary hover:border-secondary relative flex h-36 w-full cursor-pointer flex-col justify-between rounded-lg border p-4 py-3.5 transition-opacity duration-300'
+			)}
 			href={href}>
 			{children}
 		</Link>
@@ -17,6 +28,7 @@ function RepoLayout({children, href}: {children: ReactNode; href: string}) {
 function AddRepository() {
 	return (
 		<RepoLayout
+			className='!border-dashed'
 			href={`https://github.com/apps/${env.GITHUB_APP_NAME}/installations/new`}>
 			<div className='flex h-full w-full items-center justify-center gap-2'>
 				<PlusIcon />
@@ -37,7 +49,7 @@ export function Repositories({projects}: {projects: any[]}) {
 						<div className='flex items-center gap-3'>
 							<div className='relative'>
 								<div className='h-6 w-6 rounded-full bg-foreground' />
-								<p className='absolute left-0 right-0 top-1/2 m-auto -translate-y-1/2 text-center font-medium leading-none text-secondary'>
+								<p className='text-secondary absolute left-0 right-0 top-1/2 m-auto -translate-y-1/2 text-center font-medium leading-none'>
 									{project.name.charAt(0).toUpperCase()}
 								</p>
 							</div>

lib/components/ui/button.tsx

@@ -21,7 +21,7 @@ const buttonVariants = cva(
 			},
 			size: {
 				default: 'h-9 px-4 py-2',
-				sm: 'h-8 rounded-md px-3 text-xs',
+				sm: 'h-8 px-3 text-xs',
 				lg: 'h-10 rounded-md px-8',
 				icon: 'h-9 w-9'
 			}

lib/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'border-tertiary placeholder:text-tertiary flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+					'border-tertiary placeholder:text-tertiary hover:border-secondary flex h-9 w-full rounded-sm border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 					className
 				)}
 				ref={ref}

tailwind.config.js

@@ -2,7 +2,7 @@
 import config from '@rubriclab/tailwind-config'
 import colors from 'tailwindcss/colors'
 
-module.exports = {
+const tailwindConfig = {
 	presets: [config],
 	content: [
 		'./pages/**/*.{ts,tsx}',
@@ -159,3 +159,5 @@ module.exports = {
 	],
 	plugins: [require('tailwindcss-animate'), require('@headlessui/tailwindcss')]
 }
+
+export default tailwindConfig