diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxBadge.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxBadge.tsx index 4dfe35979fd..ae2eb6f40a0 100644 --- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxBadge.tsx +++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxBadge.tsx @@ -15,8 +15,7 @@ export const SandboxBadge: React.FC = ({ const isRestricted = restricted; const isTemplate = !!sandbox.customTemplate; - const boxIcon = isDevbox ? 'boxDevbox' : 'boxSandbox'; - let boxTypeColor = isDevbox ? '#FFFFFF' : '#A6A6A6'; + const boxIcon = isDevbox ? 'server' : 'boxDevbox'; let boxTypeLabel = isDevbox ? 'Devbox' : 'Sandbox'; if (isTemplate) { @@ -24,14 +23,13 @@ export const SandboxBadge: React.FC = ({ } if (isRestricted) { - boxTypeColor = '#F7CC66'; boxTypeLabel += ' (Restricted)'; } return ( - - + + {boxTypeLabel} diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx index 0ab1911c384..1f1e8e2ec1d 100644 --- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx +++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx @@ -184,7 +184,7 @@ export const SandboxCard = ({ // drag preview thumbnailRef, isDragging, - + username, 'data-selection-id': dataSelectionId, ...props }: SandboxItemComponentProps) => { @@ -193,11 +193,14 @@ export const SandboxCard = ({ }); let textColor = '#EBEBEB'; // default + let userNameTextColor = '#A6A6A6'; if (restricted) { textColor = thumbnail.isCustom ? textColor : '#999999'; + userNameTextColor = textColor; } else if (thumbnail?.brightness && thumbnail.isCustom) { textColor = thumbnail.brightness === 'light' ? '#0E0E0E' : '#FFFFFF'; + userNameTextColor = textColor; } return ( @@ -279,7 +282,16 @@ export const SandboxCard = ({ ) : null} - + + + + Created by {username} + + - {timeAgo} + {timeAgo} by {username} )} diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx index 60d0a4983c3..4d97c7bb8cf 100644 --- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx +++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx @@ -13,6 +13,7 @@ import track, { import { Icon } from '@codesandbox/components'; import { formatNumber } from '@codesandbox/components/lib/components/Stats'; import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor'; + import { SandboxCard } from './SandboxCard'; import { SandboxListItem } from './SandboxListItem'; import { getTemplateIcon } from './TemplateIcon'; @@ -67,7 +68,7 @@ function getFolderName(item: GenericSandboxProps['item']): string | undefined { } const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => { - const { dashboard, activeWorkspaceAuthorization } = useAppState(); + const { user, dashboard, activeWorkspaceAuthorization } = useAppState(); const [hasBetaEditorExperiment] = useBetaSandboxEditor(); const actions = useActions(); @@ -306,6 +307,11 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => { {...sandboxProps} {...interactionProps} isScrolling={isScrolling} + username={ + sandboxProps.sandbox.author.username === user.username + ? 'you' + : sandboxProps.sandbox.author.username + } /> ); diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/types.ts b/packages/app/src/app/pages/Dashboard/Components/Sandbox/types.ts index 28755bf5895..69fdee15c52 100644 --- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/types.ts +++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/types.ts @@ -15,7 +15,7 @@ export interface SandboxItemComponentProps { PrivacyIcon: React.FC; screenshotUrl: string | null; restricted: boolean; - + username: string; interaction: 'button' | 'link'; isScrolling: boolean; selected: boolean;