[dashboard] Rename DropDown 'contextMenuWidth' → 'customClasses' to reflect reality

Author: jankeromnes

components/dashboard/src/Menu.tsx

@@ -281,7 +281,7 @@ export default function Menu() {
                 )}
                 <div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
                     <ContextMenu
-                        classes="w-64 left-0"
+                        customClasses="w-64 left-0"
                         menuEntries={[
                             {
                                 title: userFullName,

components/dashboard/src/admin/TeamDetail.tsx

@@ -125,7 +125,7 @@ export default function TeamDetail(props: { team: Team }) {
                             <ItemField className="flex items-center my-auto">
                                 <span className="text-gray-400 capitalize">
                                     <DropDown
-                                        contextMenuWidth="w-32"
+                                        customClasses="w-32"
                                         activeEntry={m.role}
                                         entries={[
                                             {

components/dashboard/src/components/ContextMenu.tsx

@@ -11,7 +11,7 @@ import { Link } from "react-router-dom";
 export interface ContextMenuProps {
     children?: React.ReactChild[] | React.ReactChild;
     menuEntries: ContextMenuEntry[];
-    classes?: string;
+    customClasses?: string;
 }
 
 export interface ContextMenuEntry {
@@ -98,7 +98,7 @@ function ContextMenu(props: ContextMenuProps) {
             {expanded ? (
                 <div
                     className={`mt-2 z-50 bg-white dark:bg-gray-900 absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg truncated ${
-                        props.classes || "w-48 right-0"
+                        props.customClasses || "w-48 right-0"
                     }`}
                     data-analytics='{"button_type":"context_menu"}'
                 >

components/dashboard/src/components/DropDown.tsx

@@ -10,7 +10,7 @@ import ContextMenu from "./ContextMenu";
 
 export interface DropDownProps {
     prefix?: string;
-    contextMenuWidth?: string;
+    customClasses?: string;
     activeEntry?: string;
     entries: DropDownEntry[];
 }
@@ -38,7 +38,7 @@ function DropDown(props: DropDownProps) {
     const font =
         "text-gray-400 dark:text-gray-500 text-sm leading-1 group hover:text-gray-600 dark:hover:text-gray-400 transition ease-in-out";
     return (
-        <ContextMenu menuEntries={enhancedEntries} classes={`${props.contextMenuWidth} right-0`}>
+        <ContextMenu menuEntries={enhancedEntries} customClasses={`${props.customClasses} right-0`}>
             <span className={`py-2 cursor-pointer ${font}`}>
                 {props.prefix}
                 {current}

components/dashboard/src/components/PendingChangesDropdown.tsx

@@ -41,7 +41,7 @@ export default function PendingChangesDropdown(props: { workspaceInstance?: Work
         return <div className="text-sm text-gray-400 dark:text-gray-500">No Changes</div>;
     }
     return (
-        <ContextMenu menuEntries={menuEntries} classes="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
+        <ContextMenu menuEntries={menuEntries} customClasses="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
             <p className="flex justify-center text-gitpod-red">
                 <span>
                     {totalChanges} Change{totalChanges === 1 ? "" : "s"}

components/dashboard/src/projects/NewProject.tsx

@@ -376,7 +376,10 @@ export default function NewProject() {
                 </p>
                 <div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? "w-96" : ""}`}>
                     <div className="px-8 flex flex-col space-y-2" data-analytics='{"label":"Identity"}'>
-                        <ContextMenu classes="w-full left-0 cursor-pointer" menuEntries={getDropDownEntries(accounts)}>
+                        <ContextMenu
+                            customClasses="w-full left-0 cursor-pointer"
+                            menuEntries={getDropDownEntries(accounts)}
+                        >
                             <div className="w-full">
                                 {!selectedAccount && user && user.name && user.avatarUrl && (
                                     <>

components/dashboard/src/projects/Prebuilds.tsx

@@ -180,7 +180,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
                     </div>
                     <div className="flex-1" />
                     <div className="py-3 pl-3">
-                        <DropDown prefix="Prebuild Status: " contextMenuWidth="w-32" entries={statusFilterEntries()} />
+                        <DropDown prefix="Prebuild Status: " customClasses="w-32" entries={statusFilterEntries()} />
                     </div>
                     {!isLoadingPrebuilds && prebuilds.length === 0 && !props.isAdminDashboard && (
                         <button onClick={() => triggerPrebuild(null)} className="ml-2">

components/dashboard/src/teams/Members.tsx

@@ -145,7 +145,7 @@ export default function () {
                     <div className="py-3 pl-3">
                         <DropDown
                             prefix="Role: "
-                            contextMenuWidth="w-32"
+                            customClasses="w-32"
                             activeEntry={roleFilter === "owner" ? "Owner" : roleFilter === "member" ? "Member" : "All"}
                             entries={[
                                 {
@@ -226,7 +226,7 @@ export default function () {
                                             m.role
                                         ) : (
                                             <DropDown
-                                                contextMenuWidth="w-32"
+                                                customClasses="w-32"
                                                 activeEntry={m.role}
                                                 entries={[
                                                     {

components/dashboard/src/teams/TeamBilling.tsx

@@ -149,7 +149,7 @@ export default function TeamBilling() {
                     <div className="flex space-x-1">
                         <span>Select a new billing plan for this team. Currency:</span>
                         <DropDown
-                            contextMenuWidth="w-32"
+                            customClasses="w-32"
                             activeEntry={currency}
                             entries={[
                                 {

components/dashboard/src/workspaces/Workspaces.tsx

@@ -85,7 +85,7 @@ export default function () {
                             <div className="py-3 pl-3">
                                 <DropDown
                                     prefix="Limit: "
-                                    contextMenuWidth="w-32"
+                                    customClasses="w-32"
                                     activeEntry={workspaceModel ? workspaceModel?.limit + "" : undefined}
                                     entries={[
                                         {