feat: Start adding more buttons

Author: dawsontoth

src/components/RestartButton.tsx

@@ -1,19 +1,24 @@
 import { Button } from '@/components/ui/button';
+import { buttonVariants } from '@/components/ui/buttonVariants';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { InstanceClientConfig } from '@/config/instanceClientConfig';
 import { useRestartClusterClick } from '@/hooks/useRestartClusterClick';
 import { useRestartInstanceClick } from '@/hooks/useRestartInstanceClick';
+import { cx, VariantProps } from 'class-variance-authority';
 import { RotateCcwIcon } from 'lucide-react';
 
-interface RestartButtonParams extends InstanceClientConfig {
+interface RestartButtonParams extends InstanceClientConfig, VariantProps<typeof buttonVariants> {
 	targetNoun: 'Instance' | 'Cluster';
 	operation: 'restart_service' | 'restart';
+	className?: string;
 }
 
 export function RestartButton({
 	targetNoun,
 	instanceClient,
 	operation,
+	variant,
+	className,
 }: RestartButtonParams) {
 	const {
 		onRestartClick: onRestartClusterClick,
@@ -23,12 +28,12 @@ export function RestartButton({
 	return (<Tooltip>
 		<TooltipTrigger asChild>
 			<Button
-				variant="positiveOutline"
-				className="mx-0 md:mx-4 rounded-full"
+				variant={variant || 'positiveOutline'}
+				className={cx('mx-0 md:mx-4 rounded-full', className)}
 				onClick={targetNoun === 'Cluster' && operation === 'restart' ? onRestartClusterClick : onRestartClick}
 				disabled={isRestartPending || isRestartClusterPending}
 			>
-			<RotateCcwIcon /> Restart {targetNoun}
+				<RotateCcwIcon /> Restart {targetNoun}
 			</Button>
 		</TooltipTrigger>
 		<TooltipContent>

src/components/ui/buttonVariants.tsx

@@ -3,36 +3,37 @@ import { cva } from 'class-variance-authority';
 const hoverBounce = 'hover:-translate-y-1 transition duration-200';
 const outlineCommon = 'border bg-transparent border-2 text-white shadow-xs hover:bg-grey-700/40';
 export const buttonVariants = cva(
-	`inline-flex 
-  items-center 
-  justify-center 
-  gap-2 
-  whitespace-nowrap 
-  rounded-lg 
-  text-sm  
-  transition-[color,box-shadow] 
-  disabled:pointer-events-none 
-  disabled:opacity-50 
-  [&_svg]:pointer-events-none 
-  [&_svg:not([class*='size-'])]:size-4 
-  [&_svg]:shrink-0 
-  ring-ring/10 
-  dark:ring-ring/20 
-  dark:outline-ring/40 
-  outline-ring/50 
-  focus-visible:ring-1 
-  focus-visible:outline-1 
-  focus-visible:ring-purple-200 
+	`inline-flex
+  items-center
+  justify-center
+  gap-2
+  whitespace-nowrap
+  rounded-lg
+  text-sm
+  transition-[color,box-shadow]
+  disabled:pointer-events-none
+  disabled:opacity-50
+  [&_svg]:pointer-events-none
+  [&_svg:not([class*='size-'])]:size-4
+  [&_svg]:shrink-0
+  ring-ring/10
+  dark:ring-ring/20
+  dark:outline-ring/40
+  outline-ring/50
+  focus-visible:ring-1
+  focus-visible:outline-1
+  focus-visible:ring-purple-200
   aria-invalid:focus-visible:ring-0`,
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
 				submit:
 					'bg-gradient-to-r from-blue-100 from-0% to-blue to-100% hover:bg-gradient-to-r hover:from-blue text-primary-foreground shadow-sm',
-				destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+				destructive: 'bg-destructive shadow-xs hover:bg-destructive/90',
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-muted-foreground',
+				destructiveGhost: 'hover:bg-accent hover:text-red',
 				link: 'text-primary underline-offset-4 hover:underline',
 				positive: 'bg-green text-white shadow-xs hover:bg-green/90',
 				warning: 'bg-yellow text-white shadow-xs hover:bg-yellow/90',

src/features/instance/applications/components/ApplicationsSidebar/index.tsx

@@ -38,7 +38,6 @@ export function ApplicationsSidebar() {
 		}
 	}, [openedEntry, focusedItem, items]);
 
-	// TODO: FAB in bottom right for actions
 	// TODO: add file
 	// TODO: add folder
 	// TODO: delete file

src/features/instance/applications/components/TextEditorView/directory-read-me.css

@@ -1,5 +1,5 @@
 .directoryReadMe {
-	padding: 6px 24px;
+	padding: 40px 24px 6px;
 
 	h1 {
 		font-size: 3rem;