Change layout

gitpod-io · Nov 14, 2023 · ebe73d4 · ebe73d4
1 parent 5e2ef14
commit ebe73d4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/components/dashboard/src/components/podkit/forms/RadioListField.tsx b/components/dashboard/src/components/podkit/forms/RadioListField.tsx
@@ -17,7 +17,7 @@ export const RadioGroupItem = React.forwardRef<
         <RadioGroupPrimitive.Item
             ref={ref}
             className={cn(
-                "aspect-square h-4 w-4 rounded-full border-2 ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0 text-black dark:text-gray-200 border-black dark:border-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 bg-inherit",
+                "aspect-square h-4 w-4 my-0 rounded-full border-2 ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0 text-black dark:text-gray-200 border-black dark:border-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 bg-inherit",
                 // "dark:accent-kumquat-ripe accent-gitpod-black",
                 className,
             )}

diff --git a/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx b/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx
@@ -9,6 +9,8 @@ import { useState } from "react";
 import { useWorkspaceClasses } from "../../../data/workspaces/workspace-classes-query";
 import { Label } from "@podkit/forms/Label";
 import { RadioGroup, RadioGroupItem } from "@podkit/forms/RadioListField";
+import { Heading2 } from "@podkit/typography/Headings";
+import { TextMuted } from "@podkit/typography/TextMuted";
 
 interface Props {
     configuration: Configuration;
@@ -29,18 +31,26 @@ export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => {
     }
 
     return (
-        <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
-            {classes.map((wsClass) => (
-                <div className="flex items-center space-x-2 my-4">
-                    <RadioGroupItem value={wsClass.id} id={wsClass.id} />
-                    <div className="flex flex-col">
-                        <Label htmlFor={wsClass.id} className="font-bold">
-                            {wsClass.displayName}
-                        </Label>
-                        <span>{wsClass.description}</span>
+        <section>
+            <div className="mb-4">
+                <Heading2 className="text-base font-bold mb-2" asChild>
+                    Workspace Size Options
+                </Heading2>
+                <TextMuted>Choose the size of your workspace based on the resources you need.</TextMuted>
+            </div>
+            <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+                {classes.map((wsClass) => (
+                    <div className="flex items-start space-x-2 my-4">
+                        <RadioGroupItem value={wsClass.id} id={wsClass.id} />
+                        <div className="flex flex-col">
+                            <Label htmlFor={wsClass.id} className="font-bold">
+                                {wsClass.displayName}
+                            </Label>
+                            <span>{wsClass.description}</span>
+                        </div>
                     </div>
-                </div>
-            ))}
-        </RadioGroup>
+                ))}
+            </RadioGroup>
+        </section>
     );
 };