Skip to content

Commit de8d81b

Browse files
laanderlaander
committed
small visual tweaks
1 parent 2ae2c2f commit de8d81b

5 files changed

Lines changed: 34 additions & 35 deletions

File tree

‎packages/browser-sdk/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="color-scheme" content="light dark" />
88
<title>Bucket Browser SDK</title>
99
</head>
10-
<body>
10+
<body style="background-color: black">
1111
<div id="app"></div>
1212
<span id="loading">Loading...</span>
1313

‎packages/browser-sdk/src/toolbar/Features.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
}
7474

7575
.feature-reset-cell {
76-
width: 30px;
76+
width: 32px;
7777
padding: 6px 0;
7878
text-align: right;
7979
}

‎packages/browser-sdk/src/toolbar/Toolbar.css‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,11 @@
5656
--gray500: #787c91;
5757
--black: #1e1f24;
5858

59-
--bg-color: #1e1f24;
60-
--border-color: #292b32;
59+
--bg-color: hsla(230, 9%, 13%, 0.85);
60+
--bg-light-color: hsla(230, 9%, 11%, 0.85);
61+
--border-color: hsl(227, 10%, 18%);
62+
--bg-blur: 3px;
63+
6164
--logo-color: white;
6265
--text-color: white;
6366
--text-size: 13px;
@@ -83,20 +86,24 @@
8386
.dialog {
8487
color: #ffffff;
8588
box-sizing: border-box;
86-
background-color: var(--black);
87-
border: 1px solid var(--border-color);
89+
background: var(--bg-color);
90+
backdrop-filter: blur(var(--bg-blur));
91+
-webkit-backdrop-filter: blur(var(--bg-blur));
92+
93+
border: 0;
8894
box-shadow:
8995
0px 10px 15px -3px rgba(0, 0, 0, 0.1),
90-
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
96+
0px 4px 6px -2px rgba(0, 0, 0, 0.05),
97+
inset 0px 1px rgba(255, 255, 255, 0.1);
9198
border-radius: 7px;
9299
z-index: 999999;
93100
min-width: 200px;
94101
padding: 0;
95102
}
96103

97104
.toolbar-toggle {
98-
width: 34px;
99-
height: 34px;
105+
width: 36px;
106+
height: 36px;
100107
position: fixed;
101108
z-index: 999999;
102109
padding: 0;
@@ -105,11 +112,14 @@
105112

106113
color: var(--logo-color);
107114
background: var(--bg-color);
108-
border: 1px solid var(--border-color);
115+
backdrop-filter: blur(var(--bg-blur));
116+
-webkit-backdrop-filter: blur(var(--bg-blur));
117+
109118
box-shadow:
110119
0px 10px 15px -3px rgba(0, 0, 0, 0.15),
111-
0px 4px 6px -2px rgba(0, 0, 0, 0.1);
112-
border-radius: 10px;
120+
0px 4px 6px -2px rgba(0, 0, 0, 0.1),
121+
inset 0px 1px rgba(255, 255, 255, 0.1);
122+
border-radius: 999px;
113123

114124
cursor: pointer;
115125

@@ -119,45 +129,30 @@
119129

120130
animation: bounceInUp 1s ease-out;
121131

122-
transition: color 0.1s ease;
132+
transition:
133+
color 0.1s ease,
134+
background 0.1s ease;
123135

124136
&.open {
125137
color: var(--gray500);
138+
background: var(--bg-light-color);
126139
}
127140

128141
& .override-indicator {
129142
position: absolute;
130-
top: -3px;
131-
right: -3px;
143+
top: 1px;
144+
right: 1px;
132145
width: 8px;
133146
height: 8px;
134147
background-color: var(--brand400);
135148
border-radius: 50%;
136149
opacity: 0;
137150
transition: opacity 0.1s ease-in-out;
138-
border: 1px solid var(--brand300);
151+
box-shadow: inset 0px 1px rgba(255, 255, 255, 0.1);
139152

140153
&.show {
141154
opacity: 1;
142155
animation: gelatine 0.5s;
143156
}
144157
}
145158
}
146-
147-
.arrow {
148-
background-color: var(--black);
149-
box-shadow: var(--border-color) -1px -1px 1px 0px;
150-
151-
&.bottom {
152-
box-shadow: var(--border-color) -1px -1px 1px 0px;
153-
}
154-
&.top {
155-
box-shadow: var(--border-color) 1px 1px 1px 0px;
156-
}
157-
&.left {
158-
box-shadow: var(--border-color) 1px -1px 1px 0px;
159-
}
160-
&.right {
161-
box-shadow: var(--border-color) -1px 1px 1px 0px;
162-
}
163-
}

‎packages/browser-sdk/src/toolbar/Toolbar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export default function Toolbar({
9393
anchor: toggleToolbarRef.current,
9494
placement: "top-start",
9595
}}
96+
showArrow={false}
9697
close={close}
9798
>
9899
<DialogHeader>

‎packages/browser-sdk/src/ui/Dialog.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export interface OpenDialogOptions {
3232

3333
containerId: string;
3434

35+
showArrow?: boolean;
36+
3537
children?: preact.ComponentChildren;
3638
}
3739

@@ -71,6 +73,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
7173
containerId,
7274
strategy,
7375
children,
76+
showArrow = true,
7477
}) => {
7578
const arrowRef = useRef<HTMLDivElement>(null);
7679
const dialogRef = useRef<HTMLDialogElement>(null);
@@ -199,7 +202,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
199202
>
200203
{children && <Fragment>{children}</Fragment>}
201204

202-
{anchor && (
205+
{anchor && showArrow && (
203206
<DialogArrow
204207
arrowRef={arrowRef}
205208
arrowData={middlewareData?.arrow}

0 commit comments

Comments
 (0)