@lifi/widget 4.0.0-beta.12 → 4.0.0-beta.14
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/esm/components/AmountInput/PriceFormHelperText.style.js +2 -2
- package/dist/esm/components/AmountInput/PriceFormHelperText.style.js.map +1 -1
- package/dist/esm/components/ButtonTertiary.js +6 -6
- package/dist/esm/components/ButtonTertiary.js.map +1 -1
- package/dist/esm/components/Card/Card.js +2 -2
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Card/CardIconButton.js +2 -2
- package/dist/esm/components/Card/CardIconButton.js.map +1 -1
- package/dist/esm/components/Card/CardLabel.js +2 -2
- package/dist/esm/components/Card/CardLabel.js.map +1 -1
- package/dist/esm/components/ContextMenu.style.js +1 -1
- package/dist/esm/components/ContextMenu.style.js.map +1 -1
- package/dist/esm/components/Header/ActivitiesButton.js +1 -0
- package/dist/esm/components/Header/ActivitiesButton.js.map +1 -1
- package/dist/esm/components/Header/ActivitiesButton.style.js +4 -4
- package/dist/esm/components/Header/ActivitiesButton.style.js.map +1 -1
- package/dist/esm/components/Header/Header.style.js +2 -2
- package/dist/esm/components/Header/Header.style.js.map +1 -1
- package/dist/esm/components/Header/SettingsButton.style.js +8 -8
- package/dist/esm/components/Header/SettingsButton.style.js.map +1 -1
- package/dist/esm/components/IconCircle/IconCircle.style.js +7 -7
- package/dist/esm/components/IconCircle/IconCircle.style.js.map +1 -1
- package/dist/esm/components/IconTypography.js +2 -2
- package/dist/esm/components/IconTypography.js.map +1 -1
- package/dist/esm/components/ListItemButton.js +1 -1
- package/dist/esm/components/ListItemButton.js.map +1 -1
- package/dist/esm/components/Messages/AlertMessage.style.js +4 -4
- package/dist/esm/components/Messages/AlertMessage.style.js.map +1 -1
- package/dist/esm/components/Messages/GasRefuelMessage.style.js +2 -2
- package/dist/esm/components/Messages/GasRefuelMessage.style.js.map +1 -1
- package/dist/esm/components/RouteCard/RouteTokens.js +1 -2
- package/dist/esm/components/RouteCard/RouteTokens.js.map +1 -1
- package/dist/esm/components/Step/CircularProgress.style.js +4 -4
- package/dist/esm/components/Step/CircularProgress.style.js.map +1 -1
- package/dist/esm/components/StepActions/StepActions.style.js +4 -4
- package/dist/esm/components/StepActions/StepActions.style.js.map +1 -1
- package/dist/esm/components/Switch.js +2 -2
- package/dist/esm/components/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/NavigationTabs.js +2 -2
- package/dist/esm/components/Tabs/NavigationTabs.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.style.js +3 -3
- package/dist/esm/components/Tabs/Tabs.style.js.map +1 -1
- package/dist/esm/components/Token/Token.style.js +1 -1
- package/dist/esm/components/Token/Token.style.js.map +1 -1
- package/dist/esm/components/TokenList/TokenList.style.js +1 -1
- package/dist/esm/components/TokenList/TokenList.style.js.map +1 -1
- package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js +1 -1
- package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js.map +1 -1
- package/dist/esm/config/version.d.ts +1 -1
- package/dist/esm/config/version.js +1 -1
- package/dist/esm/config/version.js.map +1 -1
- package/dist/esm/pages/SettingsPage/ResetSettingsButton.style.js +2 -2
- package/dist/esm/pages/SettingsPage/ResetSettingsButton.style.js.map +1 -1
- package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js +5 -5
- package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map +1 -1
- package/dist/esm/pages/TransactionDetailsPage/ActionRow.style.js +2 -2
- package/dist/esm/pages/TransactionDetailsPage/ActionRow.style.js.map +1 -1
- package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.style.js +1 -1
- package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.style.js.map +1 -1
- package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js +7 -7
- package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map +1 -1
- package/dist/esm/stores/form/useFormRef.js +8 -0
- package/dist/esm/stores/form/useFormRef.js.map +1 -1
- package/dist/esm/stores/routes/createRouteExecutionStore.js +2 -2
- package/dist/esm/stores/routes/createRouteExecutionStore.js.map +1 -1
- package/dist/esm/stores/routes/utils.js +1 -1
- package/dist/esm/stores/routes/utils.js.map +1 -1
- package/dist/esm/themes/createTheme.js +15 -19
- package/dist/esm/themes/createTheme.js.map +1 -1
- package/dist/esm/themes/types.d.ts +0 -11
- package/dist/esm/themes/types.d.ts.map +1 -1
- package/dist/esm/themes/watermelonLight.js +1 -1
- package/dist/esm/themes/watermelonLight.js.map +1 -1
- package/package.json +5 -5
- package/src/components/AmountInput/PriceFormHelperText.style.tsx +2 -2
- package/src/components/ButtonTertiary.tsx +6 -6
- package/src/components/Card/Card.tsx +2 -2
- package/src/components/Card/CardIconButton.tsx +2 -2
- package/src/components/Card/CardLabel.tsx +2 -2
- package/src/components/ContextMenu.style.tsx +1 -1
- package/src/components/Header/ActivitiesButton.style.tsx +4 -4
- package/src/components/Header/ActivitiesButton.tsx +1 -0
- package/src/components/Header/Header.style.ts +2 -2
- package/src/components/Header/SettingsButton.style.tsx +8 -8
- package/src/components/IconCircle/IconCircle.style.tsx +7 -7
- package/src/components/IconTypography.ts +2 -2
- package/src/components/ListItemButton.tsx +1 -1
- package/src/components/Messages/AlertMessage.style.tsx +4 -4
- package/src/components/Messages/GasRefuelMessage.style.ts +2 -2
- package/src/components/RouteCard/RouteTokens.tsx +1 -2
- package/src/components/Step/CircularProgress.style.tsx +4 -4
- package/src/components/StepActions/StepActions.style.tsx +4 -4
- package/src/components/Switch.tsx +2 -2
- package/src/components/Tabs/NavigationTabs.tsx +2 -2
- package/src/components/Tabs/Tabs.style.tsx +3 -3
- package/src/components/Token/Token.style.tsx +1 -1
- package/src/components/TokenList/TokenList.style.tsx +1 -1
- package/src/components/TransactionCard/ActiveTransactionCard.style.tsx +1 -1
- package/src/config/version.ts +1 -1
- package/src/pages/SettingsPage/ResetSettingsButton.style.tsx +2 -2
- package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx +5 -5
- package/src/pages/TransactionDetailsPage/ActionRow.style.tsx +2 -2
- package/src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx +1 -1
- package/src/pages/TransactionPage/StatusBottomSheet.style.tsx +7 -7
- package/src/stores/form/useFormRef.ts +20 -1
- package/src/stores/routes/createRouteExecutionStore.ts +4 -2
- package/src/stores/routes/utils.ts +1 -1
- package/src/themes/createTheme.ts +14 -18
- package/src/themes/types.ts +0 -12
- package/src/themes/watermelonLight.ts +1 -1
|
@@ -10,10 +10,10 @@ const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
|
|
|
10
10
|
backgroundColor: "transparent",
|
|
11
11
|
minWidth: 32,
|
|
12
12
|
...onClick ? {
|
|
13
|
-
"&:hover": { backgroundColor: `
|
|
13
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
|
|
14
14
|
...theme.applyStyles("dark", {
|
|
15
15
|
backgroundColor: "transparent",
|
|
16
|
-
"&:hover": { backgroundColor: `
|
|
16
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
|
|
17
17
|
})
|
|
18
18
|
} : {
|
|
19
19
|
cursor: "text",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n styled(Button)(({ theme, onClick }) => ({\n color: theme.vars.palette.text.secondary,\n padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n maxHeight: 16,\n fontSize: '0.75rem',\n fontWeight: 500,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n minWidth: 32,\n ...(onClick\n ? {\n '&:hover': {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"PriceFormHelperText.style.js","names":[],"sources":["../../../../src/components/AmountInput/PriceFormHelperText.style.tsx"],"sourcesContent":["import { Button, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const InputPriceButton: React.FC<React.ComponentProps<typeof Button>> =\n styled(Button)(({ theme, onClick }) => ({\n color: theme.vars.palette.text.secondary,\n padding: theme.spacing(0.25, 0.5, 0.25, 0.75),\n maxHeight: 16,\n fontSize: '0.75rem',\n fontWeight: 500,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n minWidth: 32,\n ...(onClick\n ? {\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n }),\n }\n : {\n cursor: 'text',\n userSelect: 'text',\n pointerEvents: 'none',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n }),\n }))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,OAAO,EAAE,EAAE,OAAO,eAAe;CACtC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,KAAM,IAAK,KAAM,IAAK;CAC7C,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,UAAU;CACV,GAAI,UACA;EACE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB;GACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACF,CAAC;EACH,GACD;EACE,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACH;CACN,EAAE"}
|
|
@@ -4,14 +4,14 @@ const ButtonTertiary = styled(Button)(({ theme }) => ({
|
|
|
4
4
|
color: theme.vars.palette.text.primary,
|
|
5
5
|
height: 40,
|
|
6
6
|
fontSize: 14,
|
|
7
|
-
backgroundColor: `
|
|
8
|
-
"&:hover, &:active": { backgroundColor: `
|
|
9
|
-
[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `
|
|
7
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
|
|
8
|
+
"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
|
|
9
|
+
[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
|
|
10
10
|
...theme.applyStyles("dark", {
|
|
11
11
|
color: theme.vars.palette.text.primary,
|
|
12
|
-
backgroundColor: `
|
|
13
|
-
"&:hover, &:active": { backgroundColor: `
|
|
14
|
-
[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `
|
|
12
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
|
|
13
|
+
"&:hover, &:active": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
|
|
14
|
+
[`&.${buttonClasses.loading}:disabled`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
|
|
15
15
|
}),
|
|
16
16
|
[`.${buttonClasses.loadingIndicator}`]: { color: theme.vars.palette.text.primary }
|
|
17
17
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n styled(Button)(({ theme }) => ({\n color: theme.vars.palette.text.primary,\n height: 40,\n fontSize: 14,\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"ButtonTertiary.js","names":[],"sources":["../../../src/components/ButtonTertiary.tsx"],"sourcesContent":["import { Button, buttonClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ButtonTertiary: React.FC<React.ComponentProps<typeof Button>> =\n styled(Button)(({ theme }) => ({\n color: theme.vars.palette.text.primary,\n height: 40,\n fontSize: 14,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n '&:hover, &:active': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n },\n [`&.${buttonClasses.loading}:disabled`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.text.primary,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n '&:hover, &:active': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n },\n [`&.${buttonClasses.loading}:disabled`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n }),\n [`.${buttonClasses.loadingIndicator}`]: {\n color: theme.vars.palette.text.primary,\n },\n }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,OAAO,EAAE,EAAE,aAAa;CAC7B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,qBAAqB,EACnB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACA,KAAK,cAAc,QAAQ,aAAa,EACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,qBAAqB,EACtC,OAAO,MAAM,KAAK,QAAQ,KAAK,SAChC;CACF,EAAE"}
|
|
@@ -38,11 +38,11 @@ const Card$1 = styled(Card, { shouldForwardProp: (prop) => ![
|
|
|
38
38
|
style: {
|
|
39
39
|
borderWidth: 1,
|
|
40
40
|
borderStyle: "solid",
|
|
41
|
-
borderColor: `
|
|
41
|
+
borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
|
|
42
42
|
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
|
|
43
43
|
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
|
|
44
44
|
...theme.applyStyles("dark", {
|
|
45
|
-
borderColor: `
|
|
45
|
+
borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,
|
|
46
46
|
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
|
|
47
47
|
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)` }
|
|
48
48
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n type?: 'default' | 'selected' | 'error'\n selectionColor?: 'primary' | 'secondary'\n indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n styled(MuiCard, {\n shouldForwardProp: (prop) =>\n !['type', 'indented', 'selectionColor'].includes(prop as string),\n })<CardProps>(({ theme }) => {\n return {\n padding: 0,\n variants: [\n {\n props: ({ indented }) => indented,\n style: {\n padding: theme.spacing(2),\n },\n },\n {\n props: {\n selectionColor: 'primary',\n type: 'selected',\n },\n style: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: theme.vars.palette.primary.main,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n },\n borderColor: theme.vars.palette.primary.main,\n }),\n },\n },\n {\n props: {\n selectionColor: 'secondary',\n type: 'selected',\n },\n style: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: `
|
|
1
|
+
{"version":3,"file":"Card.js","names":["Card","MuiCard"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { CardProps as MuiCardProps } from '@mui/material'\nimport { Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\n\nexport interface CardProps extends MuiCardProps {\n type?: 'default' | 'selected' | 'error'\n selectionColor?: 'primary' | 'secondary'\n indented?: boolean\n}\n\nexport const Card: React.FC<React.ComponentProps<typeof MuiCard> & CardProps> =\n styled(MuiCard, {\n shouldForwardProp: (prop) =>\n !['type', 'indented', 'selectionColor'].includes(prop as string),\n })<CardProps>(({ theme }) => {\n return {\n padding: 0,\n variants: [\n {\n props: ({ indented }) => indented,\n style: {\n padding: theme.spacing(2),\n },\n },\n {\n props: {\n selectionColor: 'primary',\n type: 'selected',\n },\n style: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: theme.vars.palette.primary.main,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 5%, white)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 10%, white)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 35%, black)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.main} 40%, black)`,\n },\n borderColor: theme.vars.palette.primary.main,\n }),\n },\n },\n {\n props: {\n selectionColor: 'secondary',\n type: 'selected',\n },\n style: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n },\n ...theme.applyStyles('dark', {\n borderColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 32%, transparent)`,\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n },\n }),\n },\n },\n {\n props: {\n type: 'error',\n },\n style: {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: theme.vars.palette.error.main,\n },\n },\n ],\n }\n })\n"],"mappings":";;AAUA,MAAaA,SACX,OAAOC,MAAS,EACd,oBAAoB,SAClB,CAAC;CAAC;CAAQ;CAAY;CAAiB,CAAC,SAAS,KAAe,EACnE,CAAC,EAAa,EAAE,YAAY;AAC3B,QAAO;EACL,SAAS;EACT,UAAU;GACR;IACE,QAAQ,EAAE,eAAe;IACzB,OAAO,EACL,SAAS,MAAM,QAAQ,EAAE,EAC1B;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,QAAQ;KACxC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;MACvE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,eACxE;MACD,aAAa,MAAM,KAAK,QAAQ,QAAQ;MACzC,CAAC;KACH;IACF;GACD;IACE,OAAO;KACL,gBAAgB;KAChB,MAAM;KACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;KACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;KACD,GAAG,MAAM,YAAY,QAAQ;MAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACrE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;MACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;MACF,CAAC;KACH;IACF;GACD;IACE,OAAO,EACL,MAAM,SACP;IACD,OAAO;KACL,aAAa;KACb,aAAa;KACb,aAAa,MAAM,KAAK,QAAQ,MAAM;KACvC;IACF;GACF;EACF;EACD"}
|
|
@@ -3,8 +3,8 @@ import { IconButton, styled } from "@mui/material";
|
|
|
3
3
|
const CardIconButton = styled(IconButton)(({ theme }) => {
|
|
4
4
|
return {
|
|
5
5
|
padding: theme.spacing(.5),
|
|
6
|
-
backgroundColor: `
|
|
7
|
-
"&:hover": { backgroundColor: `
|
|
6
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
|
|
7
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
|
|
8
8
|
fontSize: "1rem"
|
|
9
9
|
};
|
|
10
10
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n React.ComponentProps<typeof MuiIconButton> &\n IconButtonProps &\n Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n return {\n padding: theme.spacing(0.5),\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n React.ComponentProps<typeof MuiIconButton> &\n IconButtonProps &\n Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n return {\n padding: theme.spacing(0.5),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n },\n fontSize: '1rem',\n }\n})\n"],"mappings":";;AAIA,MAAa,iBAIT,OAAOA,WAAc,EAEtB,EAAE,YAAY;AACf,QAAO;EACL,SAAS,MAAM,QAAQ,GAAI;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACD,UAAU;EACX;EACD"}
|
|
@@ -36,10 +36,10 @@ const CardLabel = styled(Box, { shouldForwardProp: (prop) => prop !== "variant"
|
|
|
36
36
|
{
|
|
37
37
|
props: { variant: "warning" },
|
|
38
38
|
style: {
|
|
39
|
-
backgroundColor: `
|
|
39
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
|
|
40
40
|
color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
|
|
41
41
|
...theme.applyStyles("dark", {
|
|
42
|
-
backgroundColor: `
|
|
42
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
|
|
43
43
|
color: theme.vars.palette.warning.main
|
|
44
44
|
})
|
|
45
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n React.ComponentProps<typeof Box> & {\n variant?: 'secondary' | 'success' | 'warning'\n }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n borderRadius: theme.vars.shape.borderRadius,\n padding: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: 24,\n minWidth: 24,\n userSelect: 'none',\n fontSize: '1rem',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n color: theme.vars.palette.text.primary,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n }),\n variants: [\n {\n props: { variant: 'secondary' },\n style: {\n color: theme.palette.getContrastText(theme.palette.secondary.main),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n }),\n },\n },\n {\n props: { variant: 'success' },\n style: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n color: theme.vars.palette.success.main,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n }),\n },\n },\n {\n props: { variant: 'warning' },\n style: {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n React.ComponentProps<typeof Box> & {\n variant?: 'secondary' | 'success' | 'warning'\n }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n borderRadius: theme.vars.shape.borderRadius,\n padding: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: 24,\n minWidth: 24,\n userSelect: 'none',\n fontSize: '1rem',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n color: theme.vars.palette.text.primary,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n }),\n variants: [\n {\n props: { variant: 'secondary' },\n style: {\n color: theme.palette.getContrastText(theme.palette.secondary.main),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n }),\n },\n },\n {\n props: { variant: 'success' },\n style: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n color: theme.vars.palette.success.main,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n }),\n },\n },\n {\n props: { variant: 'warning' },\n style: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n color: theme.vars.palette.warning.main,\n }),\n },\n },\n ],\n}))\n\nexport const CardLabelTypography: React.FC<\n React.ComponentProps<typeof Typography> & { type?: 'icon' }\n> = styled(Typography, {\n shouldForwardProp: (prop) => prop !== 'type',\n})<{ type?: 'icon' }>(({ theme }) => ({\n padding: theme.spacing(0.75, 1.5),\n fontSize: 12,\n lineHeight: 1,\n fontWeight: '600',\n variants: [\n {\n props: {\n type: 'icon',\n },\n style: {\n padding: theme.spacing(0.75, 0, 0.75, 0.75),\n },\n },\n ],\n}))\n"],"mappings":";;AAGA,MAAa,YAIT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAAqD,EAAE,aAAa;CACpE,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;CAC3E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;CACF,UAAU;EACR;GACE,OAAO,EAAE,SAAS,aAAa;GAC/B,OAAO;IACL,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,UAAU,KAAK;IAClE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK;IACrH,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK,IACtH,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACnH,OAAO,MAAM,KAAK,QAAQ,QAAQ;IAClC,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACnH,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KAC9D,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC7D,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,OAAO,MAAM,KAAK,QAAQ,QAAQ;KACnC,CAAC;IACH;GACF;EACF;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAqB,EAAE,aAAa;CACpC,SAAS,MAAM,QAAQ,KAAM,IAAI;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU,CACR;EACE,OAAO,EACL,MAAM,QACP;EACD,OAAO,EACL,SAAS,MAAM,QAAQ,KAAM,GAAG,KAAM,IAAK,EAC5C;EACF,CACF;CACF,EAAE"}
|
|
@@ -4,7 +4,7 @@ const ContextMenuButton = styled(IconButton)(({ theme }) => ({
|
|
|
4
4
|
position: "absolute",
|
|
5
5
|
top: theme.spacing(1.75),
|
|
6
6
|
right: theme.spacing(2),
|
|
7
|
-
"&:hover": { backgroundColor: `
|
|
7
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
|
|
8
8
|
}));
|
|
9
9
|
//#endregion
|
|
10
10
|
export { ContextMenuButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.style.js","names":[],"sources":["../../../src/components/ContextMenu.style.tsx"],"sourcesContent":["import { IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ContextMenuButton: React.FC<\n React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(1.75),\n right: theme.spacing(2),\n '&:hover': {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"ContextMenu.style.js","names":[],"sources":["../../../src/components/ContextMenu.style.tsx"],"sourcesContent":["import { IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ContextMenuButton: React.FC<\n React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(1.75),\n right: theme.spacing(2),\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n}))\n"],"mappings":";;AAGA,MAAa,oBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,KAAK,MAAM,QAAQ,KAAK;CACxB,OAAO,MAAM,QAAQ,EAAE;CACvB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACF,EAAE"}
|
|
@@ -19,6 +19,7 @@ const ActivitiesButton = () => {
|
|
|
19
19
|
active: indicator.active || indicator.failed,
|
|
20
20
|
size: "medium",
|
|
21
21
|
onClick: () => navigate({ to: navigationRoutes.activities }),
|
|
22
|
+
disableRipple: true,
|
|
22
23
|
children: /* @__PURE__ */ jsx(ErrorBadge, {
|
|
23
24
|
invisible: !indicator.failed,
|
|
24
25
|
badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAA;aAEA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
|
|
@@ -20,11 +20,11 @@ const IconContainer = styled(Box)(() => ({
|
|
|
20
20
|
const ActivitiesIconButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "active" })({ variants: [{
|
|
21
21
|
props: { active: true },
|
|
22
22
|
style: ({ theme }) => ({
|
|
23
|
-
backgroundColor: `
|
|
24
|
-
"&:hover": { backgroundColor: `
|
|
23
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
|
|
24
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
|
|
25
25
|
...theme.applyStyles("dark", {
|
|
26
|
-
backgroundColor: `
|
|
27
|
-
"&:hover": { backgroundColor: `
|
|
26
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
|
|
27
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
|
|
28
28
|
})
|
|
29
29
|
})
|
|
30
30
|
}] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivitiesButton.style.js","names":["MuiIconButton","MuiCircularProgress"],"sources":["../../../../src/components/Header/ActivitiesButton.style.tsx"],"sourcesContent":["import {\n Badge,\n Box,\n CircularProgress as MuiCircularProgress,\n IconButton as MuiIconButton,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(\n Badge\n)(({ theme }) => ({\n '& .MuiBadge-badge': {\n padding: 0,\n minWidth: 16,\n width: 16,\n height: 16,\n borderRadius: '50%',\n backgroundColor: theme.vars.palette.background.paper,\n boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,\n top: -2,\n left: 10,\n },\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)(() => ({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n}))\n\nexport const ActivitiesIconButton: React.FC<\n React.ComponentProps<typeof MuiIconButton> & { active?: boolean }\n> = styled(MuiIconButton, {\n shouldForwardProp: (prop) => prop !== 'active',\n})<{ active?: boolean }>({\n variants: [\n {\n props: { active: true },\n style: ({ theme }) => ({\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"ActivitiesButton.style.js","names":["MuiIconButton","MuiCircularProgress"],"sources":["../../../../src/components/Header/ActivitiesButton.style.tsx"],"sourcesContent":["import {\n Badge,\n Box,\n CircularProgress as MuiCircularProgress,\n IconButton as MuiIconButton,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(\n Badge\n)(({ theme }) => ({\n '& .MuiBadge-badge': {\n padding: 0,\n minWidth: 16,\n width: 16,\n height: 16,\n borderRadius: '50%',\n backgroundColor: theme.vars.palette.background.paper,\n boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,\n top: -2,\n left: 10,\n },\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)(() => ({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n}))\n\nexport const ActivitiesIconButton: React.FC<\n React.ComponentProps<typeof MuiIconButton> & { active?: boolean }\n> = styled(MuiIconButton, {\n shouldForwardProp: (prop) => prop !== 'active',\n})<{ active?: boolean }>({\n variants: [\n {\n props: { active: true },\n style: ({ theme }) => ({\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n },\n }),\n }),\n },\n ],\n})\n\nexport const ProgressTrack: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n position: 'absolute',\n color: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.grey[800],\n }),\n}))\n"],"mappings":";;AASA,MAAa,aAA2D,OACtE,MACD,EAAE,EAAE,aAAa,EAChB,qBAAqB;CACnB,SAAS;CACT,UAAU;CACV,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,aAAa,MAAM,KAAK,QAAQ,WAAW;CACtD,KAAK;CACL,MAAM;CACP,EACF,EAAE;AAEH,MAAa,gBAA4D,OACvE,IACD,QAAQ;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EAAE;AAEH,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,UACvC,CAAC,CAAuB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,MAAM;CACvB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACF,CAAC;EACH;CACF,CACF,EACF,CAAC;AAEF,MAAa,gBAET,OAAOC,iBAAoB,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,MAChC,CAAC;CACH,EAAE"}
|
|
@@ -37,10 +37,10 @@ const WalletButton = styled(Button, { shouldForwardProp: (prop) => prop !== "wit
|
|
|
37
37
|
fontWeight: 600,
|
|
38
38
|
borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
|
|
39
39
|
backgroundColor: "transparent",
|
|
40
|
-
"&:hover": { backgroundColor: `
|
|
40
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
|
|
41
41
|
...theme.applyStyles("dark", {
|
|
42
42
|
backgroundColor: "transparent",
|
|
43
|
-
"&:hover": { backgroundColor: `
|
|
43
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
|
|
44
44
|
}),
|
|
45
45
|
[`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },
|
|
46
46
|
[`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n AppBar,\n Avatar,\n Box,\n Button,\n buttonClasses,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n backgroundColor: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n color: theme.vars.palette.text.primary,\n flexDirection: 'row',\n alignItems: 'center',\n position: 'relative',\n}))\n\nexport const Container: React.FC<\n React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n return {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.vars.palette.background.default,\n position: sticky ? 'sticky' : 'relative',\n top: 0,\n zIndex: 1200,\n gap: theme.spacing(0.5),\n padding: theme.spacing(1.5, 3, 1.5, 3),\n overflow: 'auto',\n borderRadius: theme.container?.borderRadius ?? 0,\n ...theme.header,\n ...(theme.header?.position === 'fixed'\n ? {\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n width: '100%',\n }\n : {}),\n }\n})\n\nexport const WalletButton: React.FC<\n React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n color: theme.vars.palette.text.primary,\n padding: theme.spacing(1, 1.5),\n maxHeight: 40,\n fontSize: '0.875rem',\n fontWeight: 600,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n AppBar,\n Avatar,\n Box,\n Button,\n buttonClasses,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n backgroundColor: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n color: theme.vars.palette.text.primary,\n flexDirection: 'row',\n alignItems: 'center',\n position: 'relative',\n}))\n\nexport const Container: React.FC<\n React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n return {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.vars.palette.background.default,\n position: sticky ? 'sticky' : 'relative',\n top: 0,\n zIndex: 1200,\n gap: theme.spacing(0.5),\n padding: theme.spacing(1.5, 3, 1.5, 3),\n overflow: 'auto',\n borderRadius: theme.container?.borderRadius ?? 0,\n ...theme.header,\n ...(theme.header?.position === 'fixed'\n ? {\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n width: '100%',\n }\n : {}),\n }\n})\n\nexport const WalletButton: React.FC<\n React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n color: theme.vars.palette.text.primary,\n padding: theme.spacing(1, 1.5),\n maxHeight: 40,\n fontSize: '0.875rem',\n fontWeight: 600,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n }),\n [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n ...(theme.navigation.edge && {\n marginRight: withOffset ? theme.spacing(-1.25) : 0,\n }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n\n ...(theme.navigation.edge && {\n '& button:first-of-type': {\n marginLeft: theme.spacing(-1),\n },\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n display: 'flex',\n gap: theme.spacing(0.5),\n ...(theme.navigation.edge && {\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const WalletAvatar: React.FC<\n React.ComponentProps<typeof Avatar> & {\n avatarSize?: number\n badgeSize?: number\n }\n> = styled(Avatar, {\n shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n ({ avatarSize = 24, badgeSize = 12 }) => ({\n mask: getAvatarMask(badgeSize),\n width: avatarSize,\n height: avatarSize,\n })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;AAC9C,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,EACF"}
|
|
@@ -14,19 +14,19 @@ const SettingsIconBadge = styled(Badge)(({ theme }) => ({
|
|
|
14
14
|
const SettingsIconButton = styled(IconButton, { shouldForwardProp: (props) => props !== "variant" })(({ theme, variant }) => {
|
|
15
15
|
switch (variant) {
|
|
16
16
|
case "info": return {
|
|
17
|
-
backgroundColor: `
|
|
18
|
-
"&:hover": { backgroundColor: `
|
|
17
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
|
|
18
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
|
|
19
19
|
...theme.applyStyles("dark", {
|
|
20
|
-
backgroundColor: `
|
|
21
|
-
"&:hover": { backgroundColor: `
|
|
20
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
|
|
21
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
|
|
22
22
|
})
|
|
23
23
|
};
|
|
24
24
|
case "warning": return {
|
|
25
|
-
backgroundColor: `
|
|
26
|
-
"&:hover": { backgroundColor: `color-mix(in srgb,
|
|
25
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
|
|
26
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)` },
|
|
27
27
|
...theme.applyStyles("dark", {
|
|
28
|
-
backgroundColor: `
|
|
29
|
-
"&:hover": { backgroundColor: `color-mix(in srgb,
|
|
28
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
|
|
29
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)` }
|
|
30
30
|
})
|
|
31
31
|
};
|
|
32
32
|
default: return {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n badgeClasses,\n IconButton,\n Badge as MuiBadge,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.25),\n [`.${badgeClasses.badge}`]: {\n width: 10,\n height: 10,\n borderRadius: '50%',\n transform: 'translate(70%, -70%)',\n },\n}))\n\ninterface SettingsIconButtonProps {\n variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n badgeClasses,\n IconButton,\n Badge as MuiBadge,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.25),\n [`.${badgeClasses.badge}`]: {\n width: 10,\n height: 10,\n borderRadius: '50%',\n transform: 'translate(70%, -70%)',\n },\n}))\n\ninterface SettingsIconButtonProps {\n variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n },\n }),\n }\n case 'warning':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n },\n }),\n }\n default:\n return {}\n }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;AAClD,SAAQ,SAAR;EACE,KAAK,OACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;IACF,CAAC;GACH;EACH,KAAK,UACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;IACF,CAAC;GACH;EACH,QACE,QAAO,EAAE;;EAEb"}
|
|
@@ -3,25 +3,25 @@ import { Box, styled } from "@mui/material";
|
|
|
3
3
|
const getStatusColor = (status, theme) => {
|
|
4
4
|
switch (status) {
|
|
5
5
|
case "success": return {
|
|
6
|
-
color: theme.vars.palette.success.
|
|
6
|
+
color: theme.vars.palette.success.main,
|
|
7
7
|
mixAmount: 12,
|
|
8
8
|
lightDarken: 0,
|
|
9
9
|
darkDarken: 0
|
|
10
10
|
};
|
|
11
11
|
case "error": return {
|
|
12
|
-
color: theme.vars.palette.error.
|
|
12
|
+
color: theme.vars.palette.error.main,
|
|
13
13
|
mixAmount: 12,
|
|
14
14
|
lightDarken: 0,
|
|
15
15
|
darkDarken: 0
|
|
16
16
|
};
|
|
17
17
|
case "warning": return {
|
|
18
|
-
color: theme.vars.palette.warning.
|
|
18
|
+
color: theme.vars.palette.warning.main,
|
|
19
19
|
mixAmount: 48,
|
|
20
20
|
lightDarken: .32,
|
|
21
21
|
darkDarken: 0
|
|
22
22
|
};
|
|
23
23
|
case "info": return {
|
|
24
|
-
color: theme.vars.palette.info.
|
|
24
|
+
color: theme.vars.palette.info.main,
|
|
25
25
|
mixAmount: 12,
|
|
26
26
|
lightDarken: 0,
|
|
27
27
|
darkDarken: 0
|
|
@@ -32,7 +32,7 @@ const iconSizeRatio = 48 / 90;
|
|
|
32
32
|
const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colorConfig" && prop !== "circleSize" })(({ theme, colorConfig, circleSize }) => {
|
|
33
33
|
const svgSize = Math.round(circleSize * iconSizeRatio);
|
|
34
34
|
return {
|
|
35
|
-
backgroundColor: `color-mix(in srgb,
|
|
35
|
+
backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
|
|
36
36
|
borderRadius: "50%",
|
|
37
37
|
width: circleSize,
|
|
38
38
|
height: circleSize,
|
|
@@ -40,12 +40,12 @@ const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colo
|
|
|
40
40
|
position: "relative",
|
|
41
41
|
placeItems: "center",
|
|
42
42
|
"& > svg": {
|
|
43
|
-
color: `color-mix(in srgb,
|
|
43
|
+
color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
|
|
44
44
|
width: svgSize,
|
|
45
45
|
height: svgSize
|
|
46
46
|
},
|
|
47
47
|
...theme.applyStyles("dark", { "& > svg": {
|
|
48
|
-
color: `color-mix(in srgb,
|
|
48
|
+
color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
|
|
49
49
|
width: svgSize,
|
|
50
50
|
height: svgSize
|
|
51
51
|
} })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconCircle.style.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { StatusIcon } from './statusIcons'\n\nexport const iconCircleSize = 90\n\ninterface StatusColorConfig {\n color: string\n mixAmount: number\n lightDarken: number\n darkDarken: number\n}\n\nexport const getStatusColor = (\n status: StatusIcon,\n theme: Theme\n): StatusColorConfig => {\n switch (status) {\n case 'success':\n return {\n color: theme.vars.palette.success.
|
|
1
|
+
{"version":3,"file":"IconCircle.style.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { StatusIcon } from './statusIcons'\n\nexport const iconCircleSize = 90\n\ninterface StatusColorConfig {\n color: string\n mixAmount: number\n lightDarken: number\n darkDarken: number\n}\n\nexport const getStatusColor = (\n status: StatusIcon,\n theme: Theme\n): StatusColorConfig => {\n switch (status) {\n case 'success':\n return {\n color: theme.vars.palette.success.main,\n mixAmount: 12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case 'error':\n return {\n color: theme.vars.palette.error.main,\n mixAmount: 12,\n lightDarken: 0,\n darkDarken: 0,\n }\n case 'warning':\n return {\n color: theme.vars.palette.warning.main,\n mixAmount: 48,\n lightDarken: 0.32,\n darkDarken: 0,\n }\n case 'info':\n return {\n color: theme.vars.palette.info.main,\n mixAmount: 12,\n lightDarken: 0,\n darkDarken: 0,\n }\n }\n}\n\nexport const iconSizeRatio: number = 48 / 90\n\nexport const IconCircleRoot: React.FC<\n React.ComponentProps<typeof Box> & {\n colorConfig: StatusColorConfig\n circleSize: number\n }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',\n})<{ colorConfig: StatusColorConfig; circleSize: number }>(\n ({ theme, colorConfig, circleSize }) => {\n const svgSize = Math.round(circleSize * iconSizeRatio)\n return {\n backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,\n borderRadius: '50%',\n width: circleSize,\n height: circleSize,\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n '& > svg': {\n color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,\n width: svgSize,\n height: svgSize,\n },\n ...theme.applyStyles('dark', {\n '& > svg': {\n color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,\n width: svgSize,\n height: svgSize,\n },\n }),\n }\n }\n)\n"],"mappings":";;AAcA,MAAa,kBACX,QACA,UACsB;AACtB,SAAQ,QAAR;EACE,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,QACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,OACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,cACjE,CAAC,EACC,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,cAAc;AACtD,QAAO;EACL,iBAAiB,sBAAsB,YAAY,MAAM,GAAG,YAAY,UAAU,KAAK,MAAM,KAAK,QAAQ,WAAW,MAAM;EAC3H,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,eAAe,IAAI;GACtF,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,cAAc,IAAI;GACrF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Box, styled } from "@mui/material";
|
|
2
2
|
//#region src/components/IconTypography.ts
|
|
3
3
|
const IconTypography = styled(Box)(({ theme }) => ({
|
|
4
|
-
color: `
|
|
4
|
+
color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
|
|
5
5
|
lineHeight: 0,
|
|
6
|
-
...theme.applyStyles("dark", { color: `
|
|
6
|
+
...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)` })
|
|
7
7
|
}));
|
|
8
8
|
//#endregion
|
|
9
9
|
export { IconTypography };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)(({ theme }) => ({\n color: `
|
|
1
|
+
{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)(({ theme }) => ({\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n lineHeight: 0,\n ...theme.applyStyles('dark', {\n color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n }),\n }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE,CAAC;CACH,EAAE"}
|
|
@@ -5,7 +5,7 @@ const ListItemButton$1 = styled(ListItemButton)(({ theme }) => {
|
|
|
5
5
|
borderRadius: theme.vars.shape.borderRadius,
|
|
6
6
|
paddingLeft: theme.spacing(1.5),
|
|
7
7
|
height: 56,
|
|
8
|
-
"&:hover": { backgroundColor: `
|
|
8
|
+
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
|
|
9
9
|
[`&.${listItemButtonClasses.selected}`]: {
|
|
10
10
|
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
|
|
11
11
|
"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n listItemButtonClasses,\n ListItemButton as MuiListItemButton,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n return {\n borderRadius: theme.vars.shape.borderRadius,\n paddingLeft: theme.spacing(1.5),\n height: 56,\n '&:hover': {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n listItemButtonClasses,\n ListItemButton as MuiListItemButton,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n return {\n borderRadius: theme.vars.shape.borderRadius,\n paddingLeft: theme.spacing(1.5),\n height: 56,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n [`&.${listItemButtonClasses.selected}`]: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n },\n }),\n },\n variants: [\n {\n props: ({ disabled }) => disabled,\n style: {\n opacity: 0.5,\n cursor: 'auto',\n '&:hover': {\n backgroundColor: 'none',\n },\n },\n },\n ],\n }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,eAAkB,EAAE,EAAE,YAAY;AAC3C,QAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,IAAI;EAC/B,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACA,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;IACF,CAAC;GACH;EACD,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,QAClB;IACF;GACF,CACF;EACF;EACD"}
|
|
@@ -6,13 +6,13 @@ const AlertMessageCard = styled(Box, { shouldForwardProp: (prop) => prop !== "se
|
|
|
6
6
|
whiteSpace: "pre-line",
|
|
7
7
|
width: "100%",
|
|
8
8
|
paddingBottom: theme.spacing(2),
|
|
9
|
-
backgroundColor: `
|
|
10
|
-
...theme.applyStyles("dark", { backgroundColor: `
|
|
9
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
|
|
10
|
+
...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }),
|
|
11
11
|
variants: [{
|
|
12
12
|
props: { severity: "warning" },
|
|
13
13
|
style: {
|
|
14
|
-
backgroundColor: `
|
|
15
|
-
...theme.applyStyles("dark", { backgroundColor: `
|
|
14
|
+
backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
|
|
15
|
+
...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)` })
|
|
16
16
|
}
|
|
17
17
|
}]
|
|
18
18
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n borderRadius: theme.vars.shape.borderRadius,\n position: 'relative',\n whiteSpace: 'pre-line',\n width: '100%',\n paddingBottom: theme.spacing(2),\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n borderRadius: theme.vars.shape.borderRadius,\n position: 'relative',\n whiteSpace: 'pre-line',\n width: '100%',\n paddingBottom: theme.spacing(2),\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n }),\n variants: [\n {\n props: {\n severity: 'warning',\n },\n style: {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n }),\n },\n },\n ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n display: 'flex',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n paddingTop: theme.spacing(2),\n gap: theme.spacing(1),\n color: theme.vars.palette.info.main,\n ...theme.applyStyles('dark', {\n color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n }),\n variants: [\n {\n props: {\n severity: 'warning',\n },\n style: {\n color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.warning.main,\n }),\n },\n },\n ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,EAAE;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;CACpE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,qBACxE,CAAC;GACH;EACF,CACF;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,EAAE;CAC7B,cAAc,MAAM,QAAQ,EAAE;CAC9B,YAAY,MAAM,QAAQ,EAAE;CAC5B,KAAK,MAAM,QAAQ,EAAE;CACrB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,eAC3D,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACnC,CAAC;GACH;EACF,CACF;CACF,EAAE"}
|
|
@@ -4,11 +4,11 @@ import { styled, switchClasses } from "@mui/material";
|
|
|
4
4
|
const InfoMessageSwitch = styled(Switch$1)(({ theme }) => ({ [`.${switchClasses.switchBase}`]: {
|
|
5
5
|
[`&.${switchClasses.checked}`]: { [`& + .${switchClasses.track}`]: {
|
|
6
6
|
backgroundColor: theme.vars.palette.info.main,
|
|
7
|
-
...theme.applyStyles("dark", { backgroundColor: `
|
|
7
|
+
...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
|
|
8
8
|
} },
|
|
9
9
|
[`&.Mui-focusVisible .${switchClasses.thumb}`]: {
|
|
10
10
|
color: theme.vars.palette.info.main,
|
|
11
|
-
...theme.applyStyles("dark", { color: `
|
|
11
|
+
...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
|
|
12
12
|
}
|
|
13
13
|
} }));
|
|
14
14
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n styled(Switch)(({ theme }) => ({\n [`.${switchClasses.switchBase}`]: {\n [`&.${switchClasses.checked}`]: {\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.info.main,\n ...theme.applyStyles('dark', {\n backgroundColor: `
|
|
1
|
+
{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n styled(Switch)(({ theme }) => ({\n [`.${switchClasses.switchBase}`]: {\n [`&.${switchClasses.checked}`]: {\n [`& + .${switchClasses.track}`]: {\n backgroundColor: theme.vars.palette.info.main,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n }),\n },\n },\n [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n color: theme.vars.palette.info.main,\n ...theme.applyStyles('dark', {\n color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n }),\n },\n },\n }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,SAAO,EAAE,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE,CAAC;EACH,EACF;EACA,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBAC3D,CAAC;EACH;CACF,EACF,EAAE"}
|
|
@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
|
7
7
|
//#region src/components/RouteCard/RouteTokens.tsx
|
|
8
8
|
const RouteTokens = ({ route, showEssentials }) => {
|
|
9
|
-
const { subvariant
|
|
9
|
+
const { subvariant } = useWidgetConfig();
|
|
10
10
|
const fromToken = {
|
|
11
11
|
...route.steps[0].action.fromToken,
|
|
12
12
|
amount: BigInt(route.steps[0].action.fromAmount)
|
|
@@ -38,7 +38,6 @@ const RouteTokens = ({ route, showEssentials }) => {
|
|
|
38
38
|
route,
|
|
39
39
|
token: toToken,
|
|
40
40
|
impactToken: fromToken,
|
|
41
|
-
defaultExpanded: defaultUI?.transactionDetailsExpanded,
|
|
42
41
|
showEssentials
|
|
43
42
|
}) : null
|
|
44
43
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n}> = ({ route, showEssentials }) => {\n const { subvariant
|
|
1
|
+
{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n}> = ({ route, showEssentials }) => {\n const { subvariant } = useWidgetConfig()\n\n const fromToken = {\n ...route.steps[0].action.fromToken,\n amount: BigInt(route.steps[0].action.fromAmount),\n }\n\n const lastStepIndex = route.steps.length - 1\n const toToken = {\n ...(route.steps[lastStepIndex].execution?.toToken ??\n route.steps[lastStepIndex].action.toToken),\n amount: route.steps[lastStepIndex].execution?.toAmount\n ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n : subvariant === 'custom'\n ? BigInt(route.toAmount)\n : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n }\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {fromToken ? <Token token={fromToken} /> : null}\n <Box\n sx={{\n width: 40,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n </Box>\n {toToken ? (\n <RouteToken\n route={route}\n token={toToken}\n impactToken={fromToken}\n showEssentials={showEssentials}\n />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAGP,EAAE,OAAO,qBAAqB;CAClC,MAAM,EAAE,eAAe,iBAAiB;CAExC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,GAAG,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,GAAG,OAAO,WAAW;EACjD;CAED,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,eAAe,WAAW,WACxC,MAAM,MAAM,eAAe,OAAO;EACpC,QAAQ,MAAM,MAAM,eAAe,WAAW,WAC1C,OAAO,MAAM,MAAM,eAAe,UAAU,SAAS,GACrD,eAAe,WACb,OAAO,MAAM,SAAS,GACtB,OAAO,MAAM,MAAM,eAAe,SAAS,SAAS;EAC3D;AAED,QACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAK;YAA/D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,WAAa,CAAA,GAAG;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;KACjB;cAED,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACvC,CAAA;GACL,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IAChB,CAAA,GACA;GACA"}
|