Skip to content

Commit 2533ec8

Browse files
aaronsteersdevin-ai-integration[bot]
aaronsteers
and
devin-ai-integration[bot]
authored
chore(ui): Apply Airbyte branding to Reflex web app (#41)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1 parent 5c9a522 commit 2533ec8

File tree

4 files changed

+197
-23
lines changed

4 files changed

+197
-23
lines changed

‎agentic_connector_builder_webapp/components/chat_sidebar.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ def chat_sidebar(
7272
mb=6,
7373
pb=4,
7474
border_bottom="1px solid",
75-
border_color="gray.700",
75+
border_color="gray.600",
7676
width="100%",
7777
),
7878
rx.vstack(

‎agentic_connector_builder_webapp/pages/index.py‎

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,61 @@
1515

1616
SIDEBAR_WIDTH_PERCENT = "33.333%"
1717
MAIN_CONTENT_WIDTH_PERCENT = "66.667%"
18+
HEADER_HEIGHT = "72px"
1819

1920

2021
def index() -> rx.Component:
21-
"""Main page with tabbed connector builder interface and fixed chat sidebar."""
22+
"""Main page with tabbed connector builder interface, fixed header, and fixed chat sidebar."""
2223
return rx.box(
24+
rx.box(
25+
rx.box(
26+
rx.flex(
27+
rx.flex(
28+
rx.box(
29+
rx.link(
30+
rx.image(
31+
src="/airbyte-logo-light.png",
32+
alt="Airbyte Logo",
33+
height="60px",
34+
width="auto",
35+
class_name="logo",
36+
),
37+
href="https://airbyte.com",
38+
is_external=True,
39+
),
40+
mx="2",
41+
),
42+
rx.heading(
43+
"AI Connector Builder",
44+
size="8",
45+
class_name="header-title",
46+
),
47+
gap="4",
48+
align="center",
49+
),
50+
settings_button(
51+
has_api_key=UIState.has_api_key,
52+
on_click=UIState.open_settings_modal,
53+
),
54+
justify="between",
55+
align="center",
56+
width="100%",
57+
),
58+
px="6",
59+
height=HEADER_HEIGHT,
60+
display="flex",
61+
align_items="center",
62+
class_name="app-header",
63+
),
64+
position="fixed",
65+
top="0",
66+
left="0",
67+
width="100%",
68+
z_index="20",
69+
background="gray.900",
70+
border_bottom="1px solid",
71+
border_color="gray.600",
72+
),
2373
rx.box(
2474
chat_sidebar(
2575
messages=ChatAgentState.chat_messages,
@@ -31,35 +81,19 @@ def index() -> rx.Component:
3181
),
3282
position="fixed",
3383
left="0",
34-
top="0",
84+
top=HEADER_HEIGHT,
3585
width=SIDEBAR_WIDTH_PERCENT,
36-
height="100vh",
86+
height=f"calc(100vh - {HEADER_HEIGHT})",
3787
background="gray.900",
38-
border_right="2px solid",
39-
border_color="gray.700",
88+
border_right="1px solid",
89+
border_color="gray.600",
4090
padding="6",
4191
overflow_y="auto",
4292
z_index="10",
4393
),
4494
rx.box(
4595
rx.container(
4696
rx.vstack(
47-
rx.flex(
48-
rx.heading(
49-
"Agentic Connector Builder",
50-
size="9",
51-
text_align="center",
52-
),
53-
settings_button(
54-
has_api_key=UIState.has_api_key,
55-
on_click=UIState.open_settings_modal,
56-
),
57-
justify="center",
58-
align="center",
59-
gap="4",
60-
width="100%",
61-
mb=6,
62-
),
6397
rx.text(
6498
"Build and configure data connectors using YAML",
6599
text_align="center",
@@ -74,9 +108,9 @@ def index() -> rx.Component:
74108
py=8,
75109
),
76110
width="100%",
77-
height="100vh",
78111
),
79112
margin_left=SIDEBAR_WIDTH_PERCENT,
113+
margin_top=HEADER_HEIGHT,
80114
width=MAIN_CONTENT_WIDTH_PERCENT,
81115
),
82116
settings_modal(

‎assets/airbyte-logo-light.png‎

7.39 KB
Loading

‎assets/airbyte.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
* Airbyte Brand Styling for Agentic Connector Builder WebApp
3+
*
4+
* This stylesheet applies Airbyte branding to the Reflex web application.
5+
* Colors and design tokens are sourced from the main Airbyte documentation site.
6+
*
7+
* Primary source: https://github.com/airbytehq/airbyte/blob/main/docusaurus/src/css/custom.css
8+
* The Airbyte design system uses a purple primary color (#615eff) and Inter font family.
9+
*/
10+
11+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
12+
13+
:root {
14+
/* Airbyte Primary Colors */
15+
--airbyte-primary: #615eff;
16+
--airbyte-primary-dark: #3f3bff;
17+
--airbyte-primary-darker: #2e2aff;
18+
--airbyte-primary-darkest: #0500f4;
19+
--airbyte-primary-light: #8381ff;
20+
--airbyte-primary-lighter: #9492ff;
21+
--airbyte-primary-lightest: #c8c7ff;
22+
23+
/* Airbyte Color Palette */
24+
--color-white: hsl(0, 0%, 100%);
25+
--color-grey-40: hsl(240, 25%, 98%);
26+
--color-grey-100: hsl(240, 12%, 92%);
27+
--color-grey-400: hsl(239, 10%, 59%);
28+
--color-grey-500: hsl(240, 10%, 49%);
29+
--color-grey-900: hsl(240, 19%, 18%);
30+
--color-green-40: hsl(185, 76%, 97%);
31+
--color-green-50: hsl(184, 67%, 92%);
32+
--color-green-600: hsl(185, 100%, 35%);
33+
--color-green-800: hsl(184, 100%, 26%);
34+
--color-blue-30: hsl(240, 100%, 98%);
35+
--color-dark-blue-40: hsl(230, 23%, 95%);
36+
--color-dark-blue-700: hsl(236, 43%, 31%);
37+
}
38+
39+
/* Dark mode colors */
40+
@media (prefers-color-scheme: dark) {
41+
:root {
42+
--airbyte-primary: #7976ff;
43+
--airbyte-primary-dark: #3f3bff;
44+
--airbyte-primary-darker: #2e2aff;
45+
--airbyte-primary-light: #8381ff;
46+
--airbyte-primary-lighter: #9492ff;
47+
--airbyte-primary-lightest: #c8c7ff;
48+
49+
--color-grey-40: hsl(240, 14%, 14%);
50+
--color-grey-100: hsl(240, 15%, 15%);
51+
--color-grey-400: hsl(240, 13%, 72%);
52+
--color-grey-500: hsl(240, 10%, 70%);
53+
--color-grey-900: hsl(240, 10%, 90%);
54+
--color-green-50: hsl(184, 100%, 12%);
55+
--color-blue-30: hsl(252, 25%, 18%);
56+
--color-dark-blue-700: hsl(240, 100%, 98%);
57+
--color-white: hsl(0, 0%, 16%);
58+
}
59+
}
60+
61+
/* Apply Inter font family - Airbyte's brand font */
62+
body {
63+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
64+
}
65+
66+
/* Apply Airbyte purple to links */
67+
a {
68+
color: var(--airbyte-primary) !important;
69+
transition: color 0.2s ease;
70+
}
71+
72+
a:hover {
73+
color: var(--airbyte-primary-light) !important;
74+
}
75+
76+
/* Style buttons with Airbyte purple */
77+
.rt-Button {
78+
background-color: var(--airbyte-primary) !important;
79+
border-color: var(--airbyte-primary) !important;
80+
transition: background-color 0.2s ease;
81+
}
82+
83+
.rt-Button:hover {
84+
background-color: var(--airbyte-primary-dark) !important;
85+
border-color: var(--airbyte-primary-dark) !important;
86+
}
87+
88+
/* Style input fields with Airbyte focus ring */
89+
input:focus,
90+
textarea:focus,
91+
select:focus {
92+
outline: none !important;
93+
border-color: var(--airbyte-primary) !important;
94+
box-shadow: 0 0 0 3px var(--airbyte-primary-lightest) !important;
95+
}
96+
97+
/* Enhanced heading styles */
98+
h1, h2, h3, h4, h5, h6 {
99+
font-weight: 600 !important;
100+
}
101+
102+
/* Style tabs with Airbyte purple */
103+
[role="tab"][data-state="active"] {
104+
color: var(--airbyte-primary) !important;
105+
border-bottom-color: var(--airbyte-primary) !important;
106+
}
107+
108+
/* Style the main heading with Airbyte purple accent */
109+
.rt-Heading {
110+
color: var(--airbyte-primary-lighter) !important;
111+
}
112+
113+
/* Improve spacing and readability */
114+
.rt-Text {
115+
line-height: 1.6;
116+
}
117+
118+
/* Style code blocks (exclude Monaco editor to preserve its theme) */
119+
code:not(.monaco-editor *),
120+
pre:not(.monaco-editor *) {
121+
border-radius: 8px;
122+
background-color: var(--color-blue-30) !important;
123+
}
124+
125+
/* Header container scoped styles */
126+
.app-header .rt-Heading {
127+
color: #ffffff !important;
128+
}
129+
130+
/* Legacy support for header-title class */
131+
.header-title {
132+
color: #ffffff !important;
133+
}
134+
135+
/* Responsive improvements */
136+
@media (max-width: 768px) {
137+
body {
138+
font-size: 14px;
139+
}
140+
}

0 commit comments

Comments
 (0)