@lifi/widget 4.0.0-beta.13 → 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.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/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/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 +6 -6
- 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/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/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/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"}
|
|
@@ -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"}
|
|
@@ -4,11 +4,11 @@ const getStatusColor = (theme, status, substatus) => {
|
|
|
4
4
|
switch (status) {
|
|
5
5
|
case "ACTION_REQUIRED":
|
|
6
6
|
case "MESSAGE_REQUIRED":
|
|
7
|
-
case "RESET_REQUIRED": return `
|
|
7
|
+
case "RESET_REQUIRED": return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`;
|
|
8
8
|
case "DONE":
|
|
9
|
-
if (substatus === "PARTIAL" || substatus === "REFUNDED") return `
|
|
10
|
-
return `
|
|
11
|
-
case "FAILED": return `
|
|
9
|
+
if (substatus === "PARTIAL" || substatus === "REFUNDED") return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`;
|
|
10
|
+
return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`;
|
|
11
|
+
case "FAILED": return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`;
|
|
12
12
|
default: return null;
|
|
13
13
|
}
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgress.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Step/CircularProgress.style.tsx"],"sourcesContent":["import type { ExecutionActionStatus, Substatus } from '@lifi/sdk'\nimport type { Theme } from '@mui/material'\nimport {\n Box,\n circularProgressClasses,\n keyframes,\n CircularProgress as MuiCircularProgress,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nconst getStatusColor = (\n theme: Theme,\n status?: ExecutionActionStatus,\n substatus?: Substatus\n) => {\n switch (status) {\n case 'ACTION_REQUIRED':\n case 'MESSAGE_REQUIRED':\n case 'RESET_REQUIRED':\n return `
|
|
1
|
+
{"version":3,"file":"CircularProgress.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Step/CircularProgress.style.tsx"],"sourcesContent":["import type { ExecutionActionStatus, Substatus } from '@lifi/sdk'\nimport type { Theme } from '@mui/material'\nimport {\n Box,\n circularProgressClasses,\n keyframes,\n CircularProgress as MuiCircularProgress,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nconst getStatusColor = (\n theme: Theme,\n status?: ExecutionActionStatus,\n substatus?: Substatus\n) => {\n switch (status) {\n case 'ACTION_REQUIRED':\n case 'MESSAGE_REQUIRED':\n case 'RESET_REQUIRED':\n return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`\n case 'DONE':\n if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {\n return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`\n }\n return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`\n case 'FAILED':\n return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`\n default:\n return null\n }\n}\n\nexport const CircularIcon: React.FC<\n React.ComponentProps<typeof Box> & {\n status?: ExecutionActionStatus\n substatus?: Substatus\n }\n> = styled(Box, {\n shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),\n})<{ status?: ExecutionActionStatus; substatus?: Substatus }>(\n ({ theme, status, substatus }) => {\n const statusColor = getStatusColor(theme, status, substatus)\n const isSpecialStatus = [\n 'ACTION_REQUIRED',\n 'MESSAGE_REQUIRED',\n 'RESET_REQUIRED',\n 'DONE',\n 'FAILED',\n ].includes(status!)\n\n return {\n backgroundColor: isSpecialStatus\n ? statusColor!\n : theme.vars.palette.background.paper,\n borderStyle: 'solid',\n borderColor: statusColor || theme.vars.palette.grey[300],\n borderWidth: !isSpecialStatus ? 3 : 0,\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n width: 40,\n height: 40,\n borderRadius: '50%',\n ...theme.applyStyles('dark', {\n borderColor: statusColor || theme.vars.palette.grey[800],\n }),\n }\n }\n)\n\nconst circleAnimation = keyframes`\n 0% {\n stroke-dashoffset: 129;\n transform: rotate(0);\n }\n 50% {\n stroke-dashoffset: 56;\n transform: rotate(45deg);\n };\n 100% {\n stroke-dashoffset: 129;\n transform: rotate(360deg);\n }\n`\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const CircularProgressPending: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)`\n color: ${({ theme }) => theme.vars.palette.primary.main};\n ${({ theme }) =>\n theme.applyStyles('dark', {\n color: theme.vars.palette.primary.light,\n })}\n animation-duration: 3s;\n position: absolute;\n .${circularProgressClasses.circle} {\n animation-duration: 2s;\n animation-timing-function: linear;\n animation-name: ${circleAnimation};\n stroke-dasharray: 129;\n stroke-dashoffset: 129;\n stroke-linecap: round;\n transform-origin: 100% 100%;\n }\n`\n"],"mappings":";;AAWA,MAAM,kBACJ,OACA,QACA,cACG;AACH,SAAQ,QAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK,iBACH,QAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EAC5D,KAAK;AACH,OAAI,cAAc,aAAa,cAAc,WAC3C,QAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;AAE/D,UAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;EAC/D,KAAK,SACH,QAAO,sBAAsB,MAAM,KAAK,QAAQ,MAAM,KAAK;EAC7D,QACE,QAAO;;;AAIb,MAAa,eAKT,OAAO,KAAK,EACd,oBAAoB,SAAiB,CAAC,CAAC,UAAU,YAAY,CAAC,SAAS,KAAK,EAC7E,CAAC,EACC,EAAE,OAAO,QAAQ,gBAAgB;CAChC,MAAM,cAAc,eAAe,OAAO,QAAQ,UAAU;CAC5D,MAAM,kBAAkB;EACtB;EACA;EACA;EACA;EACA;EACD,CAAC,SAAS,OAAQ;AAEnB,QAAO;EACL,iBAAiB,kBACb,cACA,MAAM,KAAK,QAAQ,WAAW;EAClC,aAAa;EACb,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK;EACpD,aAAa,CAAC,kBAAkB,IAAI;EACpC,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,cAAc;EACd,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK,MACrD,CAAC;EACH;EAEJ;AAED,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,iBAAoB;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,OACnC,CAAC,CAAC;;;KAGF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}
|
|
@@ -10,8 +10,8 @@ const StepConnector$1 = styled(StepConnector, { shouldForwardProp: (prop) => ![
|
|
|
10
10
|
[`.${stepConnectorClasses.line}`]: {
|
|
11
11
|
minHeight: 8,
|
|
12
12
|
borderLeftWidth: 2,
|
|
13
|
-
borderColor: `
|
|
14
|
-
...theme.applyStyles("dark", { borderColor: `
|
|
13
|
+
borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
|
|
14
|
+
...theme.applyStyles("dark", { borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` })
|
|
15
15
|
}
|
|
16
16
|
}));
|
|
17
17
|
const StepLabel$1 = styled(StepLabel, { shouldForwardProp: (prop) => ![
|
|
@@ -43,8 +43,8 @@ const StepLabelTypography = styled(Typography)(({ theme }) => ({
|
|
|
43
43
|
const StepContent = styled(Box, { shouldForwardProp: (prop) => !["last"].includes(prop) })(({ theme }) => ({
|
|
44
44
|
margin: theme.spacing(0, 0, 0, 2.375),
|
|
45
45
|
paddingLeft: theme.spacing(4.375),
|
|
46
|
-
borderLeft: `2px solid
|
|
47
|
-
...theme.applyStyles("dark", { borderLeft: `2px solid
|
|
46
|
+
borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
|
|
47
|
+
...theme.applyStyles("dark", { borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` }),
|
|
48
48
|
variants: [{
|
|
49
49
|
props: ({ last }) => last,
|
|
50
50
|
style: {
|