Create copilot auth popup UI

styles/src/styleTree/components.ts

@@ -280,3 +280,15 @@ export function border(
         ...properties,
     }
 }
+
+
+export function svg(color: string, asset: String, width: Number, height: Number) {
+    return {
+        color,
+        asset,
+        dimensions: {
+            width,
+            height,
+        }
+    }
+}

styles/src/styleTree/copilot.ts

@@ -1,21 +1,59 @@
 import { ColorScheme } from "../themes/common/colorScheme"
-import { background, border, text } from "./components";
+import { background, border, foreground, svg, text } from "./components";
 
 
 export default function copilot(colorScheme: ColorScheme) {
     let layer = colorScheme.highest;
 
-
     return {
-        authModal: {
-            background: background(colorScheme.lowest),
-            border: border(colorScheme.lowest),
-            shadow: colorScheme.modalShadow,
-            cornerRadius: 12,
-            padding: {
-                bottom: 4,
+        auth: {
+            popupContainer: {
+                background: background(colorScheme.highest),
             },
-        },
-        authText: text(layer, "sans")
+            popupDimensions: {
+                width: 336,
+                height: 256,
+            },
+            instructionText: text(layer, "sans"),
+            userCode:
+                text(layer, "sans", { size: "lg" }),
+            button: { // Copied from welcome screen. FIXME: Move this into a ZDS component
+                background: background(layer),
+                border: border(layer, "active"),
+                cornerRadius: 4,
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", { size: "sm" }),
+                hover: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
+            },
+            buttonWidth: 320,
+            copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 64, 64),
+            closeIcon: {
+                icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
+                container: {
+                    padding: {
+                        top: 3,
+                        bottom: 3,
+                        left: 7,
+                        right: 7,
+                    }
+                },
+                hover: {
+                    icon: svg(foreground(layer, "on"), "icons/x_mark_16.svg", 16, 16),
+                }
+            },
+        }
     }
 }

styles/src/styleTree/welcome.ts

@@ -6,6 +6,7 @@ import {
     foreground,
     text,
     TextProperties,
+    svg,
 } from "./components"
 
 export default function welcome(colorScheme: ColorScheme) {
@@ -32,14 +33,7 @@ export default function welcome(colorScheme: ColorScheme) {
 
     return {
         pageWidth: 320,
-        logo: {
-            color: foreground(layer, "default"),
-            icon: "icons/logo_96.svg",
-            dimensions: {
-                width: 64,
-                height: 64,
-            },
-        },
+        logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
         logoSubheading: {
             ...text(layer, "sans", "variant", { size: "md" }),
             margin: {
@@ -109,14 +103,7 @@ export default function welcome(colorScheme: ColorScheme) {
                 ...text(layer, "sans", interactive_text_size),
                 // Also supports margin, container, border, etc.
             },
-            icon: {
-                color: foreground(layer, "on"),
-                icon: "icons/check_12.svg",
-                dimensions: {
-                    width: 12,
-                    height: 12,
-                },
-            },
+            icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
             default: {
                 ...checkboxBase,
                 background: background(layer, "default"),

styles/src/styleTree/workspace.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../themes/common/colorScheme"
 import { withOpacity } from "../utils/color"
-import { background, border, borderColor, foreground, text } from "./components"
+import { background, border, borderColor, foreground, svg, text } from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
 
@@ -46,27 +46,14 @@ export default function workspace(colorScheme: ColorScheme) {
                 width: 256,
                 height: 256,
             },
-            logo: {
-                color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
-                icon: "icons/logo_96.svg",
-                dimensions: {
-                    width: 256,
-                    height: 256,
-                },
-            },
-            logoShadow: {
-                color: withOpacity(
-                    colorScheme.isLight
-                        ? "#FFFFFF"
-                        : colorScheme.lowest.base.default.background,
-                    colorScheme.isLight ? 1 : 0.6
-                ),
-                icon: "icons/logo_96.svg",
-                dimensions: {
-                    width: 256,
-                    height: 256,
-                },
-            },
+            logo: svg(withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), "icons/logo_96.svg", 256, 256),
+
+            logoShadow: svg(withOpacity(
+                colorScheme.isLight
+                    ? "#FFFFFF"
+                    : colorScheme.lowest.base.default.background,
+                colorScheme.isLight ? 1 : 0.6
+            ), "icons/logo_96.svg", 256, 256),
             keyboardHints: {
                 margin: {
                     top: 96,