Fix(import): design review (#6611)

Design fixes according to Mckayla's review

light:
<img width="689" alt="image"
src="https://github.com/user-attachments/assets/346c684f-9828-4bff-95cf-a4968808474c">

dark:
<img width="685" alt="image"
src="https://github.com/user-attachments/assets/d9f407c7-1792-49df-a584-5a500a560db1">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode

Author: liady

editor/src/components/editor/import-wizard/components.tsx

@@ -9,7 +9,7 @@ import type {
 } from '../../../core/shared/import/import-operation-types'
 import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
 import { assertNever } from '../../../core/shared/utils'
-import { Icons } from '../../../uuiui'
+import { Icn, Icons, useColorTheme } from '../../../uuiui'
 import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
 import { RequirementResolutionResult } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
@@ -21,11 +21,8 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
       ? 'running'
       : 'done'
   }, [operation.timeStarted, operation.timeDone])
-
-  const textColor = React.useMemo(
-    () => getTextColor(operationRunningStatus, operation),
-    [operationRunningStatus, operation],
-  )
+  const colorTheme = useColorTheme()
+  const textColor = operationRunningStatus === 'waiting' ? 'gray' : colorTheme.fg0.value
 
   const [childrenShown, serChildrenShown] = React.useState(false)
   const shouldShowChildren = React.useMemo(
@@ -77,7 +74,7 @@ function OperationChildrenList({ operation }: { operation: ImportOperation }) {
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: 10,
+        gap: 15,
       }}
     >
       {operation.type === 'refreshDependencies' ? (
@@ -114,14 +111,15 @@ function AggregatedChildrenStatus<T extends ImportOperation>({
   successFn: (operation: T) => boolean
   successTextFn: (successCount: number) => string
 }) {
+  const colorTheme = useColorTheme()
   const doneDependencies = childOperations.filter(successFn)
   const restOfDependencies = childOperations.filter((op) => !successFn(op))
   return (
     <React.Fragment>
       {doneDependencies.length > 0 ? (
         <OperationLineWrapper className='operation-done'>
-          <OperationLineContent textColor='black'>
-            <Icons.Checkmark style={getIconColorStyle(ImportOperationResult.Success)} />
+          <OperationLineContent textColor={colorTheme.fg0.value}>
+            <Icn color='green' type='checkmark' />
             <div>{successTextFn(doneDependencies.length)}</div>
           </OperationLineContent>
         </OperationLineWrapper>
@@ -140,20 +138,16 @@ function OperationIcon({
   runningStatus: 'waiting' | 'running' | 'done'
   result?: ImportOperationResult
 }) {
-  const iconColorStyle = React.useMemo(
-    () => (result != null ? getIconColorStyle(result) : {}),
-    [result],
-  )
   if (runningStatus === 'running') {
     return <GithubSpinner />
   } else if (runningStatus === 'done' && result === 'success') {
-    return <Icons.Checkmark style={iconColorStyle} />
+    return <Icn color='green' type='checkmark' />
   } else if (runningStatus === 'done' && result === 'warn') {
-    return <Icons.WarningTriangle style={iconColorStyle} />
+    return <Icn color='component-orange' type='warningtriangle' category='navigator-element' />
   } else if (runningStatus === 'waiting') {
     return <Icons.Dot />
   } else {
-    return <Icons.Cross style={iconColorStyle} />
+    return <Icn color='error' type='cross' />
   }
 }
 
@@ -164,6 +158,7 @@ function TimeFromInSeconds({
   operation: ImportOperation
   runningStatus: 'waiting' | 'running' | 'done'
 }) {
+  const colorTheme = useColorTheme()
   const [currentTime, setCurrentTime] = React.useState(Date.now())
   React.useEffect(() => {
     const interval = setInterval(() => {
@@ -188,7 +183,7 @@ function TimeFromInSeconds({
     <div
       data-short-time={operationTime < 100}
       style={{
-        color: runningStatus === 'running' ? 'black' : 'gray',
+        color: runningStatus === 'running' ? colorTheme.fg0.value : 'gray',
         fontSize: runningStatus === 'running' ? undefined : 12,
       }}
     >
@@ -212,16 +207,11 @@ function OperationLineWrapper({
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: 10,
+        gap: 15,
       }}
       css={{
         '.import-wizard-operation-children > &': {
           paddingLeft: 26,
-          fontSize: 12,
-          img: {
-            width: 12,
-            height: 12,
-          },
         },
         '.import-wizard-operation-children .operation-done [data-short-time=true]': {
           visibility: 'hidden',
@@ -285,39 +275,3 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
       assertNever(operation)
   }
 }
-
-function getTextColor(
-  operationRunningStatus: 'waiting' | 'running' | 'done',
-  operation: ImportOperation,
-) {
-  if (operationRunningStatus === 'waiting') {
-    return 'gray'
-  } else {
-    return 'black'
-  }
-}
-
-function getIconColorStyle(result: ImportOperationResult) {
-  // temp solution since we currently only have black icons
-  // https://codepen.io/sosuke/pen/Pjoqqp
-  if (result === ImportOperationResult.Error) {
-    return {
-      // our error red
-      filter:
-        'invert(14%) sepia(99%) saturate(4041%) hue-rotate(328deg) brightness(101%) contrast(115%)',
-    }
-  } else if (result === ImportOperationResult.Warn) {
-    return {
-      // orange
-      filter:
-        'invert(72%) sepia(90%) saturate(3088%) hue-rotate(1deg) brightness(105%) contrast(104%)',
-    }
-  } else if (result === ImportOperationResult.Success) {
-    return {
-      // green
-      filter:
-        'invert(72%) sepia(60%) saturate(3628%) hue-rotate(126deg) brightness(104%) contrast(76%)',
-    }
-  }
-  return {}
-}

editor/src/components/editor/import-wizard/import-wizard.tsx

@@ -82,10 +82,11 @@ export const ImportWizard = React.memo(() => {
         <div
           style={{
             background: colorTheme.bg0.value,
+            color: colorTheme.fg0.value,
             boxShadow: UtopiaStyles.popup.boxShadow,
             borderRadius: 10,
             width: 600,
-            height: 500,
+            height: 420,
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
@@ -105,18 +106,18 @@ export const ImportWizard = React.memo(() => {
               width: '100%',
             }}
           >
-            <div css={{ fontSize: 16, fontWeight: 400 }}>Project Import</div>
+            <div css={{ fontSize: 16, fontWeight: 400 }}>Loading Project</div>
             {when(
-              totalImportResult != null,
+              totalImportResult == null,
               <Button
                 highlight
                 style={{
-                  width: 22,
-                  height: 22,
+                  padding: 15,
+                  color: colorTheme.fg6.value,
                 }}
                 onClick={handleDismiss}
               >
-                <Icons.Cross />
+                Cancel
               </Button>,
             )}
           </FlexRow>
@@ -157,41 +158,27 @@ export const ImportWizard = React.memo(() => {
 ImportWizard.displayName = 'ImportWizard'
 
 function ActionButtons({ importResult }: { importResult: ImportOperationResult | null }) {
+  const colorTheme = useColorTheme()
   const textColor = React.useMemo(() => {
     switch (importResult) {
       case ImportOperationResult.Success:
         return 'green'
       case ImportOperationResult.Warn:
-        return 'orange'
-      case ImportOperationResult.Error:
-        return 'var(--utopitheme-githubIndicatorFailed)'
-      case null:
-        return 'black'
-      default:
-        assertNever(importResult)
-    }
-  }, [importResult])
-  const buttonColor = React.useMemo(() => {
-    switch (importResult) {
-      case ImportOperationResult.Success:
-        return 'var(--utopitheme-green)'
-      case ImportOperationResult.Warn:
-        return 'var(--utopitheme-githubMUDModified)'
+        return colorTheme.warningOrange.value
       case ImportOperationResult.Error:
         return 'var(--utopitheme-githubIndicatorFailed)'
       case null:
         return 'black'
       default:
         assertNever(importResult)
     }
-  }, [importResult])
+  }, [colorTheme.warningOrange.value, importResult])
   const textStyle = {
     color: textColor,
-    fontSize: 16,
+    fontSize: 14,
   }
   const buttonStyle = {
-    backgroundColor: buttonColor,
-    color: 'white',
+    backgroundColor: colorTheme.buttonBackground.value,
     padding: 20,
     fontSize: 14,
     cursor: 'pointer',

editor/src/uuiui/styles/theme/dark.ts

@@ -111,6 +111,7 @@ const darkErrorStates = {
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
+  warningOrange: createUtopiColor('#FFB751'),
 }
 
 // TEMP colors with preset opacity pulled from within the app

editor/src/uuiui/styles/theme/light.ts

@@ -111,6 +111,7 @@ const lightErrorStates = {
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
+  warningOrange: createUtopiColor('#FF8A44'),
 }
 
 // TEMP colors with preset opacity pulled from within the app