[dashboad] Apply Default IDE code review feedback

Author: jankeromnes

components/dashboard/public/images/theia-gray.svg

@@ -0,0 +1,19 @@
+export interface SelectableCardProps {
+    title: string;
+    selected: boolean;
+    className?: string;
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+
+function SelectableCard(props: SelectableCardProps) {
+    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 ${props.selected ? 'border-green-600' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+        <div className="flex items-center">
+            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-600' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
+            <input className={props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} type="radio" checked={props.selected} />
+        </div>
+        {props.children}
+    </div>;
+}
+
+export default SelectableCard;

components/dashboard/public/images/theia.svg

@@ -1,30 +1,35 @@
 import { useContext, useState } from "react";
-import OptionCard from "../components/OptionCard";
+import { getGitpodService } from "../service/service";
+import SelectableCard from "../components/SelectableCard";
 import { UserContext } from "../user-context";
 import { SettingsPage } from "./SettingsPage";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
     const [ defaultIde, setDefaultIde ] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || 'code');
+    const [ hasIDESettingsPermissions, setHasIDESettingsPermissions ] = useState<boolean | undefined>(undefined);
+    if (hasIDESettingsPermissions === undefined) {
+        getGitpodService().server.hasPermission('ide-settings').then(hasPermission => setHasIDESettingsPermissions(hasPermission));
+    }
 
     return <div>
         <SettingsPage title='Preferences' subtitle='Configure your Default IDE for all workspaces.'>
             <h3>Default IDE</h3>
-            <p className="text-base">Gitpod is using Code as the default IDE.</p>
+            <p className="text-base">Choose which IDE your workspaces should use.</p>
             <div className="mt-4 space-x-4 flex">
-                <OptionCard className="w-36 h-40" title="VS Code" selected={defaultIde === 'code'} onClick={()=>setDefaultIde('code')}>
+                <SelectableCard className="w-36 h-40" title="VS Code" selected={defaultIde === 'code'} onClick={()=>setDefaultIde('code')}>
                     <div className="flex-grow flex justify-center align-center">
-                        <img className="w-16" src="/images/vscode.svg"/>
+                        <img className="w-16 filter-grayscale" src="/images/vscode.svg"/>
                     </div>
-                </OptionCard>
-                <OptionCard className="w-36 h-40" title="Theia" selected={defaultIde === 'theia'} onClick={()=>setDefaultIde('theia')}>
+                </SelectableCard>
+                <SelectableCard className="w-36 h-40" title="Theia" selected={defaultIde === 'theia'} onClick={()=>setDefaultIde('theia')}>
                     <div className="flex-grow flex justify-center align-center">
-                        <img className="w-16" src="/images/theia.svg"/>
+                        <img className="w-16" src="/images/theia-gray.svg"/>
                     </div>
-                </OptionCard>
-                <OptionCard className="w-36 h-40" title="Custom" selected={!['code', 'theia'].includes(defaultIde)} onClick={()=>setDefaultIde('')}></OptionCard>
+                </SelectableCard>
+                <SelectableCard className={`w-36 h-40 ${hasIDESettingsPermissions ? '' : 'invisible'}`} title="Custom" selected={!['code', 'theia'].includes(defaultIde)} onClick={()=>setDefaultIde('')}></SelectableCard>
             </div>
-            <div className="mt-4">
+            <div className={`mt-4 ${hasIDESettingsPermissions ? '' : 'invisible'}`}>
                 <label className={['code', 'theia'].includes(defaultIde) ? 'opacity-0' : 'opacity-100'}>
                     <p className="text-base text-gray-600 font-bold leading-5">Custom IDE image name</p>
                     <input className="w-80 mt-1" type="text" />