bad-example.com
demos for spacedust
a lil role tag
+13
atproto-notifications/src/components/setup/Chrome.css
+13
atproto-notifications/src/components/setup/Chrome.css
···
1
+
.chrome-role-tag {
2
+
font-size: 0.6rem;
3
+
/*background: #555;*/
4
+
color: #8c0;
5
+
border: 0.5px solid #690;
6
+
display: inline-block;
7
+
border-radius: 0.5em;
8
+
padding: 0.1em 0.2em 0.15em;
9
+
line-height: 1;
10
+
vertical-align: top;
11
+
margin-left: -0.333rem;
12
+
transform: rotate(13deg);
13
+
}
+6
atproto-notifications/src/components/setup/Chrome.tsx
+6
atproto-notifications/src/components/setup/Chrome.tsx
···
1
1
import { Handle } from '../User';
2
+
import './Chrome.css';
2
3
3
4
export function Chrome({ user, onLogout, children }) {
4
5
const content = children;
···
12
13
<p>
13
14
<span className="handle">
14
15
<Handle did={user.did} />
16
+
{user.role !== 'public' && (
17
+
<span className="chrome-role-tag">
18
+
{user.role}
19
+
</span>
20
+
)}
15
21
</span>
16
22
<button className="subtle bad" onClick={onLogout}>×</button>
17
23
</p>