oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish shape of copilot auth UI

Browse Source
This commit is contained in:
Mikayla Maki
2023-03-28 09:42:01 -07:00
parent 6ff09865eb
commit 0ef9cefe0f
5 changed files with 353 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/copilot.ts
+114 -30
View File
@@ -5,41 +5,52 @@ import { background, border, foreground, svg, text } from "./components";
export default function copilot(colorScheme: ColorScheme) {
let layer = colorScheme.highest;
let content_width = 304;
let ctaButton = { // 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"),
},
};
return {
auth: {
popupContainer: {
background: background(colorScheme.highest),
},
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),
modal: {
titleText: text(layer, "sans", { size: "md" }),
titlebar: {
border: border(layer, "active"),
cornerRadius: 4,
margin: {
padding: {
top: 4,
bottom: 4,
left: 8,
right: 8,
},
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"),
},
margin: {
top: 0,
left: 0,
right: 0,
bottom: 8
}
},
container: {
background: background(colorScheme.highest),
},
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: {
@@ -47,13 +58,86 @@ export default function copilot(colorScheme: ColorScheme) {
top: 3,
bottom: 3,
left: 7,
right: 7,
right: 0,
}
},
hover: {
icon: svg(foreground(layer, "on"), "icons/x_mark_16.svg", 16, 16),
}
},
dimensions: {
width: 400,
height: 500,
},
},
auth: {
content_width,
headerGroup: {
margin: {
top: 5,
bottom: 5,
left: 0,
right: 0
}
},
headerText: text(layer, "sans", { size: "lg" }),
copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 36, 36),
plusIcon: svg(foreground(layer, "default"), "icons/plus_16.svg", 36, 36),
zedIcon: svg(foreground(layer, "default"), "icons/logo_96.svg", 36, 36),
instructionText: text(layer, "sans"),
deviceCodeGroup: {
margin: {
top: 5,
bottom: 5,
left: 0,
right: 0
}
},
deviceCode:
text(layer, "mono", { size: "md" }),
deviceCodeCta: {
...ctaButton,
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
},
deviceCodeLeft: content_width * 2 / 3,
deviceCodeLeftContainer: {
padding: {
top: 3,
bottom: 3,
left: 0,
right: 0,
},
},
deviceCodeRight: content_width * 1 / 3,
deviceCodeRightContainer: {
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
padding: {
top: 3,
bottom: 5,
left: 0,
right: 0,
},
},
deviceCodeSeperatorHeight: 0,
githubGroup: {
margin: {
top: 3,
bottom: 3,
left: 0,
right: 0
}
},
ctaButton
}
}
}