@equinor/cpl-top-bar-react 0.0.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +68 -33
- package/dist/index.mjs +70 -35
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -13,15 +13,15 @@ interface TopBarProps {
|
|
|
13
13
|
declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
|
|
14
14
|
|
|
15
15
|
interface UserMenuProps {
|
|
16
|
-
|
|
17
|
-
darkMode?: boolean;
|
|
16
|
+
logout: string | (() => void);
|
|
18
17
|
user: {
|
|
19
18
|
name: string;
|
|
20
19
|
email: string;
|
|
21
20
|
};
|
|
21
|
+
darkMode?: boolean;
|
|
22
22
|
settingsLink?: string;
|
|
23
23
|
children?: React.ReactNode;
|
|
24
24
|
}
|
|
25
|
-
declare function UserMenu({ user,
|
|
25
|
+
declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
|
|
26
26
|
|
|
27
27
|
export { TopBar, UserMenu };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,15 +13,15 @@ interface TopBarProps {
|
|
|
13
13
|
declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
|
|
14
14
|
|
|
15
15
|
interface UserMenuProps {
|
|
16
|
-
|
|
17
|
-
darkMode?: boolean;
|
|
16
|
+
logout: string | (() => void);
|
|
18
17
|
user: {
|
|
19
18
|
name: string;
|
|
20
19
|
email: string;
|
|
21
20
|
};
|
|
21
|
+
darkMode?: boolean;
|
|
22
22
|
settingsLink?: string;
|
|
23
23
|
children?: React.ReactNode;
|
|
24
24
|
}
|
|
25
|
-
declare function UserMenu({ user,
|
|
25
|
+
declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
|
|
26
26
|
|
|
27
27
|
export { TopBar, UserMenu };
|
package/dist/index.js
CHANGED
|
@@ -39,6 +39,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
39
39
|
var import_eds_core_react = require("@equinor/eds-core-react");
|
|
40
40
|
var import_eds_icons = require("@equinor/eds-icons");
|
|
41
41
|
var import_styled_components = __toESM(require("styled-components"));
|
|
42
|
+
var import_eds_tokens = require("@equinor/eds-tokens");
|
|
42
43
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
44
|
function TopBar({
|
|
44
45
|
appName,
|
|
@@ -65,10 +66,12 @@ function TopBar({
|
|
|
65
66
|
] });
|
|
66
67
|
}
|
|
67
68
|
var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_react.TopBar)`
|
|
68
|
-
background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
69
|
-
color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
|
|
70
69
|
border-color: rgba(255, 255, 255, 0.16);
|
|
71
70
|
gap: 0;
|
|
71
|
+
${({ $darkMode }) => $darkMode ? import_styled_components.css`
|
|
72
|
+
background: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
73
|
+
color: #fff;
|
|
74
|
+
` : ""}
|
|
72
75
|
`;
|
|
73
76
|
var AppNameContainer = import_styled_components.default.div`
|
|
74
77
|
display: flex;
|
|
@@ -77,30 +80,37 @@ var AppNameContainer = import_styled_components.default.div`
|
|
|
77
80
|
`;
|
|
78
81
|
var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
|
|
79
82
|
font-weight: 300;
|
|
80
|
-
|
|
83
|
+
${({ $darkMode }) => $darkMode ? import_styled_components.css`
|
|
84
|
+
color: #fff;
|
|
85
|
+
` : ""}
|
|
81
86
|
`;
|
|
82
87
|
var DocumentationDiv = import_styled_components.default.div`
|
|
83
88
|
text-decoration: none;
|
|
84
|
-
color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
|
|
85
89
|
display: flex;
|
|
86
90
|
gap: 0.3rem;
|
|
87
91
|
font-weight: 300;
|
|
88
92
|
a {
|
|
89
93
|
text-decoration: none;
|
|
90
|
-
color:
|
|
94
|
+
color: inherit;
|
|
91
95
|
}
|
|
96
|
+
${({ $darkMode }) => $darkMode ? import_styled_components.css`
|
|
97
|
+
color: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
98
|
+
a {
|
|
99
|
+
color: #fff;
|
|
100
|
+
}
|
|
101
|
+
` : ""}
|
|
92
102
|
`;
|
|
93
103
|
|
|
94
104
|
// src/UserMenu/UserMenu.tsx
|
|
95
105
|
var import_eds_core_react2 = require("@equinor/eds-core-react");
|
|
96
106
|
var import_eds_icons2 = require("@equinor/eds-icons");
|
|
97
|
-
var
|
|
107
|
+
var import_eds_tokens2 = require("@equinor/eds-tokens");
|
|
98
108
|
var import_react = require("react");
|
|
99
109
|
var import_styled_components2 = __toESM(require("styled-components"));
|
|
100
110
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
101
111
|
function UserMenu({
|
|
102
112
|
user,
|
|
103
|
-
|
|
113
|
+
logout,
|
|
104
114
|
darkMode = false,
|
|
105
115
|
settingsLink,
|
|
106
116
|
children
|
|
@@ -114,6 +124,19 @@ function UserMenu({
|
|
|
114
124
|
const closeMenu = () => {
|
|
115
125
|
setIsOpen(false);
|
|
116
126
|
};
|
|
127
|
+
const LogOutMenuItem = () => {
|
|
128
|
+
if (typeof logout === "string") {
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
|
|
132
|
+
] });
|
|
133
|
+
} else {
|
|
134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
|
|
137
|
+
] });
|
|
138
|
+
}
|
|
139
|
+
};
|
|
117
140
|
const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
|
|
118
141
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
119
142
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
@@ -141,7 +164,7 @@ function UserMenu({
|
|
|
141
164
|
anchorEl,
|
|
142
165
|
style: { padding: 0, paddingBottom: 2 },
|
|
143
166
|
children: [
|
|
144
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { children: [
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { $darkMode: darkMode, children: [
|
|
145
168
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
|
|
146
169
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
147
170
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
|
|
@@ -152,10 +175,7 @@ function UserMenu({
|
|
|
152
175
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.settings }),
|
|
153
176
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Settings" })
|
|
154
177
|
] }),
|
|
155
|
-
|
|
156
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
|
|
157
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
|
|
158
|
-
] }),
|
|
178
|
+
LogOutMenuItem(),
|
|
159
179
|
children
|
|
160
180
|
]
|
|
161
181
|
}
|
|
@@ -163,59 +183,71 @@ function UserMenu({
|
|
|
163
183
|
] });
|
|
164
184
|
}
|
|
165
185
|
var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu)`
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
margin-
|
|
169
|
-
|
|
170
|
-
padding-bottom: ${import_eds_tokens.tokens.spacings.comfortable.small};
|
|
186
|
+
border-radius: ${import_eds_tokens2.tokens.shape.corners.borderRadius};
|
|
187
|
+
margin-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
|
|
188
|
+
margin-bottom: -${import_eds_tokens2.tokens.spacings.comfortable.small};
|
|
189
|
+
padding-bottom: ${import_eds_tokens2.tokens.spacings.comfortable.small};
|
|
171
190
|
padding-left: 0;
|
|
172
191
|
padding-right: 0;
|
|
173
|
-
padding-top: ${
|
|
192
|
+
padding-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
|
|
174
193
|
width: 315px;
|
|
175
|
-
color: white;
|
|
176
194
|
|
|
177
195
|
.menu-item {
|
|
178
196
|
align-items: center;
|
|
179
|
-
background: transparent;
|
|
180
|
-
color: white;
|
|
181
197
|
display: flex;
|
|
182
|
-
gap: ${
|
|
198
|
+
gap: ${import_eds_tokens2.tokens.spacings.comfortable.medium};
|
|
183
199
|
opacity: 0.85;
|
|
184
|
-
padding: ${
|
|
200
|
+
padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
|
|
185
201
|
svg {
|
|
186
202
|
opacity: 0.7;
|
|
187
203
|
}
|
|
188
204
|
&:hover {
|
|
189
|
-
background: #305c75;
|
|
190
205
|
opacity: 1;
|
|
191
206
|
svg {
|
|
192
207
|
opacity: 1;
|
|
193
208
|
}
|
|
194
209
|
}
|
|
195
210
|
}
|
|
211
|
+
${({ $darkMode }) => $darkMode ? import_styled_components2.css`
|
|
212
|
+
background: #3e4f5c; //TODO: get color from token in the future
|
|
213
|
+
color: #fff;
|
|
214
|
+
.menu-item {
|
|
215
|
+
color: #fff;
|
|
216
|
+
&:hover {
|
|
217
|
+
background: #305c75;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
` : ``}
|
|
196
221
|
`;
|
|
197
222
|
var LetterCircle = import_styled_components2.default.span`
|
|
198
223
|
align-items: center;
|
|
199
|
-
background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
|
|
200
224
|
border-radius: 1000px;
|
|
201
|
-
color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
202
225
|
display: flex;
|
|
203
226
|
flex-shrink: 0;
|
|
204
227
|
font-weight: bold;
|
|
205
228
|
height: 32px;
|
|
206
229
|
justify-content: center;
|
|
207
230
|
width: 32px;
|
|
231
|
+
background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex};
|
|
232
|
+
color: #fff;
|
|
233
|
+
${({ $darkMode }) => $darkMode ? import_styled_components2.css`
|
|
234
|
+
background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
|
|
235
|
+
color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
236
|
+
` : ``};
|
|
208
237
|
`;
|
|
209
238
|
var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
|
|
210
|
-
background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
|
|
211
|
-
color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
212
239
|
margin: 10px 12px;
|
|
213
240
|
font-weight: bold;
|
|
214
241
|
width: 32px;
|
|
215
242
|
height: 32px;
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
243
|
+
|
|
244
|
+
${({ $darkMode }) => $darkMode && import_styled_components2.css`
|
|
245
|
+
background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
|
|
246
|
+
color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
247
|
+
&:hover {
|
|
248
|
+
background: #fff;
|
|
249
|
+
}
|
|
250
|
+
`}
|
|
219
251
|
`;
|
|
220
252
|
var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu.Item)`
|
|
221
253
|
display: flex;
|
|
@@ -223,8 +255,11 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
|
|
|
223
255
|
padding: 12px 20px;
|
|
224
256
|
width: 315px;
|
|
225
257
|
color: inherit;
|
|
226
|
-
&:hover
|
|
227
|
-
|
|
258
|
+
&:hover,
|
|
259
|
+
&:focus,
|
|
260
|
+
&:active {
|
|
261
|
+
background-color: transparent;
|
|
262
|
+
cursor: default;
|
|
228
263
|
}
|
|
229
264
|
`;
|
|
230
265
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// src/TopBar/TopBar.tsx
|
|
2
2
|
import { TopBar as EDSTopBar, Icon, Typography } from "@equinor/eds-core-react";
|
|
3
3
|
import { external_link } from "@equinor/eds-icons";
|
|
4
|
-
import styled from "styled-components";
|
|
4
|
+
import styled, { css } from "styled-components";
|
|
5
|
+
import { tokens } from "@equinor/eds-tokens";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
function TopBar({
|
|
7
8
|
appName,
|
|
@@ -28,10 +29,12 @@ function TopBar({
|
|
|
28
29
|
] });
|
|
29
30
|
}
|
|
30
31
|
var StyledEDSTopBar = styled(EDSTopBar)`
|
|
31
|
-
background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
32
|
-
color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
|
|
33
32
|
border-color: rgba(255, 255, 255, 0.16);
|
|
34
33
|
gap: 0;
|
|
34
|
+
${({ $darkMode }) => $darkMode ? css`
|
|
35
|
+
background: ${tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
36
|
+
color: #fff;
|
|
37
|
+
` : ""}
|
|
35
38
|
`;
|
|
36
39
|
var AppNameContainer = styled.div`
|
|
37
40
|
display: flex;
|
|
@@ -40,30 +43,37 @@ var AppNameContainer = styled.div`
|
|
|
40
43
|
`;
|
|
41
44
|
var StyledTypography = styled(Typography)`
|
|
42
45
|
font-weight: 300;
|
|
43
|
-
|
|
46
|
+
${({ $darkMode }) => $darkMode ? css`
|
|
47
|
+
color: #fff;
|
|
48
|
+
` : ""}
|
|
44
49
|
`;
|
|
45
50
|
var DocumentationDiv = styled.div`
|
|
46
51
|
text-decoration: none;
|
|
47
|
-
color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
|
|
48
52
|
display: flex;
|
|
49
53
|
gap: 0.3rem;
|
|
50
54
|
font-weight: 300;
|
|
51
55
|
a {
|
|
52
56
|
text-decoration: none;
|
|
53
|
-
color:
|
|
57
|
+
color: inherit;
|
|
54
58
|
}
|
|
59
|
+
${({ $darkMode }) => $darkMode ? css`
|
|
60
|
+
color: ${tokens.colors.interactive.table__cell__fill_resting.hex};
|
|
61
|
+
a {
|
|
62
|
+
color: #fff;
|
|
63
|
+
}
|
|
64
|
+
` : ""}
|
|
55
65
|
`;
|
|
56
66
|
|
|
57
67
|
// src/UserMenu/UserMenu.tsx
|
|
58
68
|
import { Button, Icon as Icon2, Menu } from "@equinor/eds-core-react";
|
|
59
69
|
import { log_out, settings } from "@equinor/eds-icons";
|
|
60
|
-
import { tokens } from "@equinor/eds-tokens";
|
|
70
|
+
import { tokens as tokens2 } from "@equinor/eds-tokens";
|
|
61
71
|
import { useState } from "react";
|
|
62
|
-
import styled2 from "styled-components";
|
|
72
|
+
import styled2, { css as css2 } from "styled-components";
|
|
63
73
|
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
64
74
|
function UserMenu({
|
|
65
75
|
user,
|
|
66
|
-
|
|
76
|
+
logout,
|
|
67
77
|
darkMode = false,
|
|
68
78
|
settingsLink,
|
|
69
79
|
children
|
|
@@ -77,6 +87,19 @@ function UserMenu({
|
|
|
77
87
|
const closeMenu = () => {
|
|
78
88
|
setIsOpen(false);
|
|
79
89
|
};
|
|
90
|
+
const LogOutMenuItem = () => {
|
|
91
|
+
if (typeof logout === "string") {
|
|
92
|
+
return /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
|
|
93
|
+
/* @__PURE__ */ jsx2(Icon2, { data: log_out }),
|
|
94
|
+
/* @__PURE__ */ jsx2("span", { children: "Log out" })
|
|
95
|
+
] });
|
|
96
|
+
} else {
|
|
97
|
+
return /* @__PURE__ */ jsxs2(Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
|
|
98
|
+
/* @__PURE__ */ jsx2(Icon2, { data: log_out }),
|
|
99
|
+
/* @__PURE__ */ jsx2("span", { children: "Log out" })
|
|
100
|
+
] });
|
|
101
|
+
}
|
|
102
|
+
};
|
|
80
103
|
const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
|
|
81
104
|
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
82
105
|
/* @__PURE__ */ jsx2(
|
|
@@ -104,7 +127,7 @@ function UserMenu({
|
|
|
104
127
|
anchorEl,
|
|
105
128
|
style: { padding: 0, paddingBottom: 2 },
|
|
106
129
|
children: [
|
|
107
|
-
/* @__PURE__ */ jsxs2(IconAndTextWrapper, { children: [
|
|
130
|
+
/* @__PURE__ */ jsxs2(IconAndTextWrapper, { $darkMode: darkMode, children: [
|
|
108
131
|
/* @__PURE__ */ jsx2(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
|
|
109
132
|
isOpen && /* @__PURE__ */ jsxs2("div", { children: [
|
|
110
133
|
/* @__PURE__ */ jsx2("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
|
|
@@ -115,10 +138,7 @@ function UserMenu({
|
|
|
115
138
|
/* @__PURE__ */ jsx2(Icon2, { data: settings }),
|
|
116
139
|
/* @__PURE__ */ jsx2("span", { children: "Settings" })
|
|
117
140
|
] }),
|
|
118
|
-
|
|
119
|
-
/* @__PURE__ */ jsx2(Icon2, { data: log_out }),
|
|
120
|
-
/* @__PURE__ */ jsx2("span", { children: "Log out" })
|
|
121
|
-
] }),
|
|
141
|
+
LogOutMenuItem(),
|
|
122
142
|
children
|
|
123
143
|
]
|
|
124
144
|
}
|
|
@@ -126,59 +146,71 @@ function UserMenu({
|
|
|
126
146
|
] });
|
|
127
147
|
}
|
|
128
148
|
var MenuWrapper = styled2(Menu)`
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
margin-
|
|
132
|
-
|
|
133
|
-
padding-bottom: ${tokens.spacings.comfortable.small};
|
|
149
|
+
border-radius: ${tokens2.shape.corners.borderRadius};
|
|
150
|
+
margin-top: ${tokens2.spacings.comfortable.small};
|
|
151
|
+
margin-bottom: -${tokens2.spacings.comfortable.small};
|
|
152
|
+
padding-bottom: ${tokens2.spacings.comfortable.small};
|
|
134
153
|
padding-left: 0;
|
|
135
154
|
padding-right: 0;
|
|
136
|
-
padding-top: ${
|
|
155
|
+
padding-top: ${tokens2.spacings.comfortable.small};
|
|
137
156
|
width: 315px;
|
|
138
|
-
color: white;
|
|
139
157
|
|
|
140
158
|
.menu-item {
|
|
141
159
|
align-items: center;
|
|
142
|
-
background: transparent;
|
|
143
|
-
color: white;
|
|
144
160
|
display: flex;
|
|
145
|
-
gap: ${
|
|
161
|
+
gap: ${tokens2.spacings.comfortable.medium};
|
|
146
162
|
opacity: 0.85;
|
|
147
|
-
padding: ${
|
|
163
|
+
padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
|
|
148
164
|
svg {
|
|
149
165
|
opacity: 0.7;
|
|
150
166
|
}
|
|
151
167
|
&:hover {
|
|
152
|
-
background: #305c75;
|
|
153
168
|
opacity: 1;
|
|
154
169
|
svg {
|
|
155
170
|
opacity: 1;
|
|
156
171
|
}
|
|
157
172
|
}
|
|
158
173
|
}
|
|
174
|
+
${({ $darkMode }) => $darkMode ? css2`
|
|
175
|
+
background: #3e4f5c; //TODO: get color from token in the future
|
|
176
|
+
color: #fff;
|
|
177
|
+
.menu-item {
|
|
178
|
+
color: #fff;
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #305c75;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
` : ``}
|
|
159
184
|
`;
|
|
160
185
|
var LetterCircle = styled2.span`
|
|
161
186
|
align-items: center;
|
|
162
|
-
background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
|
|
163
187
|
border-radius: 1000px;
|
|
164
|
-
color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
165
188
|
display: flex;
|
|
166
189
|
flex-shrink: 0;
|
|
167
190
|
font-weight: bold;
|
|
168
191
|
height: 32px;
|
|
169
192
|
justify-content: center;
|
|
170
193
|
width: 32px;
|
|
194
|
+
background-color: ${tokens2.colors.interactive.primary__resting.hex};
|
|
195
|
+
color: #fff;
|
|
196
|
+
${({ $darkMode }) => $darkMode ? css2`
|
|
197
|
+
background: ${tokens2.colors.interactive.link_in_snackbars.hex};
|
|
198
|
+
color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
|
|
199
|
+
` : ``};
|
|
171
200
|
`;
|
|
172
201
|
var StyledUserButton = styled2(Button)`
|
|
173
|
-
background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
|
|
174
|
-
color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
|
|
175
202
|
margin: 10px 12px;
|
|
176
203
|
font-weight: bold;
|
|
177
204
|
width: 32px;
|
|
178
205
|
height: 32px;
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
206
|
+
|
|
207
|
+
${({ $darkMode }) => $darkMode && css2`
|
|
208
|
+
background: ${tokens2.colors.interactive.link_in_snackbars.hex};
|
|
209
|
+
color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
|
|
210
|
+
&:hover {
|
|
211
|
+
background: #fff;
|
|
212
|
+
}
|
|
213
|
+
`}
|
|
182
214
|
`;
|
|
183
215
|
var IconAndTextWrapper = styled2(Menu.Item)`
|
|
184
216
|
display: flex;
|
|
@@ -186,8 +218,11 @@ var IconAndTextWrapper = styled2(Menu.Item)`
|
|
|
186
218
|
padding: 12px 20px;
|
|
187
219
|
width: 315px;
|
|
188
220
|
color: inherit;
|
|
189
|
-
&:hover
|
|
190
|
-
|
|
221
|
+
&:hover,
|
|
222
|
+
&:focus,
|
|
223
|
+
&:active {
|
|
224
|
+
background-color: transparent;
|
|
225
|
+
cursor: default;
|
|
191
226
|
}
|
|
192
227
|
`;
|
|
193
228
|
export {
|