diff --git a/src/app/App.tsx b/src/app/App.tsx
index f57739f19..255a99a4a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -12,24 +12,27 @@ import UpdateExtension from "./sections/UpdateExtension"
/* sidebar */
import Nav from "./sections/Nav"
import Aside from "./sections/Aside"
+import AsideBackground from "./components/AsideBackground"
/* header */
import NetworkHeader from "./sections/NetworkHeader"
import Refresh from "./sections/Refresh"
import Preferences from "./sections/Preferences"
import ConnectWallet from "./sections/ConnectWallet"
+import ActionsBackground from "./components/ActionsBackground"
+import NavBackgrounds from "./components/NavBackgrounds"
/* extra */
import LatestTx from "./sections/LatestTx"
import ValidatorButton from "./sections/ValidatorButton"
import DevTools from "./sections/DevTools"
+import BackgroundBlobs from "components/layout/BackgroundBlobs"
/* init */
import InitBankBalance from "./InitBankBalance"
import Wallet from "pages/wallet/Wallet"
import NavButton from "./sections/NavButton"
import NetworkStatus from "components/display/NetworkStatus"
-import NavBackgrounds from "./sections/NavBackgrounds"
const App = () => {
const { element: routes } = useNav()
@@ -44,6 +47,7 @@ const App = () => {
+
@@ -60,6 +64,7 @@ const App = () => {
+
@@ -67,6 +72,7 @@ const App = () => {
+
{routes}
diff --git a/src/app/components/ActionsBackground.module.scss b/src/app/components/ActionsBackground.module.scss
new file mode 100644
index 000000000..1142a50c1
--- /dev/null
+++ b/src/app/components/ActionsBackground.module.scss
@@ -0,0 +1,9 @@
+.background_blur {
+ background-color: var(--menu-bg);
+ width: 325px;
+ position: absolute;
+ z-index: -1;
+ height: 125%;
+ right: 0px;
+ filter: blur(45px);
+}
diff --git a/src/app/components/ActionsBackground.tsx b/src/app/components/ActionsBackground.tsx
new file mode 100644
index 000000000..ad25ceed5
--- /dev/null
+++ b/src/app/components/ActionsBackground.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from "data/settings/Theme"
+import styles from "./ActionsBackground.module.scss"
+
+const ActionsBackground = () => {
+ const { name } = useTheme()
+
+ if (name === "light" || name === "whale") {
+ return <>
+ }
+
+ return
+}
+
+export default ActionsBackground
diff --git a/src/app/components/AsideBackground.module.scss b/src/app/components/AsideBackground.module.scss
new file mode 100644
index 000000000..c9847a85c
--- /dev/null
+++ b/src/app/components/AsideBackground.module.scss
@@ -0,0 +1,16 @@
+.aside_background {
+ position: absolute;
+ top: 20%;
+
+ @media screen and (max-height: 1100px) {
+ top: 10%;
+ }
+
+ @media screen and (max-height: 900px) {
+ top: 0%;
+ }
+
+ @media screen and (max-width: 992px) {
+ display: none;
+ }
+}
diff --git a/src/app/components/AsideBackground.tsx b/src/app/components/AsideBackground.tsx
new file mode 100644
index 000000000..1ffb28784
--- /dev/null
+++ b/src/app/components/AsideBackground.tsx
@@ -0,0 +1,37 @@
+import MoonVideo from "styles/themes/Moon/Rocket V5 schuin.mp4"
+import { useTheme } from "data/settings/Theme"
+import styles from "./AsideBackground.module.scss"
+
+const AsideBackground = () => {
+ const { name } = useTheme()
+
+ const handleVideoEnd = (e: React.SyntheticEvent) => {
+ const video = e.currentTarget
+
+ video.pause()
+
+ setTimeout(() => {
+ video.play()
+ }, 60 * 1000)
+ }
+
+ if (name === "moon") {
+ return (
+
+
+
+ )
+ }
+
+ return <>
+}
+
+export default AsideBackground
diff --git a/src/app/components/NavBackgrounds.module.scss b/src/app/components/NavBackgrounds.module.scss
new file mode 100644
index 000000000..5b6e769d4
--- /dev/null
+++ b/src/app/components/NavBackgrounds.module.scss
@@ -0,0 +1,23 @@
+@import "mixins";
+
+.nav_background_wrapper {
+ position: absolute;
+ left: 0;
+ height: 100%;
+ overflow: hidden;
+
+ &.moon {
+ width: 100%;
+ object-fit: cover;
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ @include mobile {
+ display: none;
+ }
+}
diff --git a/src/app/components/NavBackgrounds.tsx b/src/app/components/NavBackgrounds.tsx
new file mode 100644
index 000000000..9f24ce57d
--- /dev/null
+++ b/src/app/components/NavBackgrounds.tsx
@@ -0,0 +1,32 @@
+import { useTheme } from "data/settings/Theme"
+import BlossomVideo from "styles/themes/Blossom/Nav.mp4"
+import MoonVideo from "styles/themes/Moon/Top Large 2V7.mp4"
+import styles from "./NavBackgrounds.module.scss"
+
+const NavBackgrounds = () => {
+ const { name } = useTheme()
+
+ if (name === "blossom") {
+ return (
+
+
+
+ )
+ }
+
+ if (name === "moon") {
+ return (
+
+
+
+ )
+ }
+
+ return <>
+}
+
+export default NavBackgrounds
diff --git a/src/app/sections/Nav.module.scss b/src/app/sections/Nav.module.scss
index a1e45c70a..0a8357955 100644
--- a/src/app/sections/Nav.module.scss
+++ b/src/app/sections/Nav.module.scss
@@ -4,6 +4,7 @@
@include flex(space-between);
border-bottom: var(--border-width) solid var(--menu-border);
margin-bottom: 26px;
+ z-index: 1;
}
/* mobile */
@@ -20,6 +21,8 @@
.item {
color: var(--menu-text);
fill: var(--menu-text);
+ z-index: 1;
+ position: relative;
&:hover {
text-decoration: none;
diff --git a/src/auth/modules/create/CreateWalletForm.tsx b/src/auth/modules/create/CreateWalletForm.tsx
index 93630a887..515aaa791 100644
--- a/src/auth/modules/create/CreateWalletForm.tsx
+++ b/src/auth/modules/create/CreateWalletForm.tsx
@@ -54,6 +54,7 @@ const CreateWalletForm = () => {
{...register("confirm", {
validate: (confirm) => validate.confirm(password, confirm),
})}
+ onFocus={() => form.trigger("confirm")}
type="password"
/>
diff --git a/src/auth/modules/manage/ChangePasswordForm.tsx b/src/auth/modules/manage/ChangePasswordForm.tsx
index 39e95d361..b0f064064 100644
--- a/src/auth/modules/manage/ChangePasswordForm.tsx
+++ b/src/auth/modules/manage/ChangePasswordForm.tsx
@@ -64,6 +64,7 @@ const ChangePasswordForm = () => {
{...register("confirm", {
validate: (value) => validate.confirm(password, value),
})}
+ onFocus={() => form.trigger("confirm")}
type="password"
/>
diff --git a/src/auth/scripts/decrypt.ts b/src/auth/scripts/decrypt.ts
index 5719429d9..af5af73c9 100644
--- a/src/auth/scripts/decrypt.ts
+++ b/src/auth/scripts/decrypt.ts
@@ -4,8 +4,8 @@ const keySize = 256
const iterations = 100
const decrypt = (transitmessage: string, pass: string) => {
- const salt = CryptoJS.enc.Hex.parse(transitmessage.substr(0, 32))
- const iv = CryptoJS.enc.Hex.parse(transitmessage.substr(32, 32))
+ const salt = CryptoJS.enc.Hex.parse(transitmessage.substring(0, 32))
+ const iv = CryptoJS.enc.Hex.parse(transitmessage.substring(32, 64))
const encrypted = transitmessage.substring(64)
const key = CryptoJS.PBKDF2(pass, salt, {
@@ -17,10 +17,14 @@ const decrypt = (transitmessage: string, pass: string) => {
iv: iv,
padding: CryptoJS.pad.Pkcs7,
mode: CryptoJS.mode.CBC,
- }).toString(CryptoJS.enc.Utf8)
+ })
+
+ const decoded = decrypted.toString(CryptoJS.enc.Utf8)
+
+ if (!decoded || decrypted.sigBytes < 128)
+ throw new Error("Incorrect password")
- if (!decrypted) throw new Error("Invalid Password")
- return decrypted
+ return decoded
}
export default decrypt
diff --git a/src/components/feedback/Fetching.tsx b/src/components/feedback/Fetching.tsx
index 5543dd63b..d1ee60805 100644
--- a/src/components/feedback/Fetching.tsx
+++ b/src/components/feedback/Fetching.tsx
@@ -1,6 +1,6 @@
import { PropsWithChildren, ReactNode, useState } from "react"
import LinearProgress from "@mui/material/LinearProgress"
-import { getErrorMessage } from "utils/error"
+import { getErrorMessage, isError } from "utils/error"
import useTimeout from "utils/hooks/useTimeout"
import { Card } from "../layout"
import Wrong from "./Wrong"
@@ -37,7 +37,7 @@ export const WithFetching = (props: WithFetchingProps) => {
sx={{ position: "absolute" /* to overwrite */ }}
/>
) : undefined,
- error ? {getErrorMessage(error)} : undefined
+ isError(error) ? {getErrorMessage(error)} : undefined
)}
)
diff --git a/src/components/general/FinderLink.tsx b/src/components/general/FinderLink.tsx
index ca9a094ba..984337270 100644
--- a/src/components/general/FinderLink.tsx
+++ b/src/components/general/FinderLink.tsx
@@ -26,7 +26,7 @@ const FinderLink = forwardRef(
const { block, tx, validator, chainID, ...attrs } = rest
const networks = useNetwork()
const value =
- rest.value ?? typeof children === "string" ? (children as string) : ""
+ rest.value || (typeof children === "string" ? (children as string) : "")
const className = classNames(attrs.className, styles.link)
const explorer =
diff --git a/src/components/layout/BackgroundBlobs.module.scss b/src/components/layout/BackgroundBlobs.module.scss
new file mode 100644
index 000000000..13a7dbe12
--- /dev/null
+++ b/src/components/layout/BackgroundBlobs.module.scss
@@ -0,0 +1,30 @@
+.blob1,
+.blob2,
+.blob3 {
+ position: absolute;
+ transform: translate(-50%, -50%);
+ background: #85cafb7a;
+ z-index: -1;
+ filter: blur(250px);
+}
+
+.blob1 {
+ top: 50%;
+ left: 45%;
+ height: 600px;
+ width: 700px;
+}
+
+.blob2 {
+ top: 5%;
+ left: 5%;
+ height: 200px;
+ width: 200px;
+}
+
+.blob3 {
+ top: 5%;
+ right: 15%;
+ height: 200px;
+ width: 200px;
+}
diff --git a/src/components/layout/BackgroundBlobs.tsx b/src/components/layout/BackgroundBlobs.tsx
new file mode 100644
index 000000000..0b7c66626
--- /dev/null
+++ b/src/components/layout/BackgroundBlobs.tsx
@@ -0,0 +1,20 @@
+import { useTheme } from "data/settings/Theme"
+import styles from "./BackgroundBlobs.module.scss"
+
+const BackgroundBlobs = () => {
+ const { name } = useTheme()
+
+ if (name === "moon") {
+ return (
+ <>
+
+
+
+
+ )
+ }
+
+ return <>
+}
+
+export default BackgroundBlobs
diff --git a/src/components/layout/Card.module.scss b/src/components/layout/Card.module.scss
index dfdf603a0..40ace2320 100644
--- a/src/components/layout/Card.module.scss
+++ b/src/components/layout/Card.module.scss
@@ -10,6 +10,10 @@
background: var(--card-bg);
overflow: hidden; // truncate title, linear progress
position: relative; // for progress bar
+
+ &.moon {
+ background: var(--card-special);
+ }
}
.inputCard {
@@ -82,6 +86,16 @@
}
}
+.twoTone {
+ .header {
+ border-bottom: var(--border-width) solid var(--card-border);
+ }
+
+ .main {
+ background-color: var(--card-bg-muted);
+ }
+}
+
/* theme */
.default {
padding: var(--card-padding);
diff --git a/src/components/layout/Card.tsx b/src/components/layout/Card.tsx
index 3e295425c..417568709 100644
--- a/src/components/layout/Card.tsx
+++ b/src/components/layout/Card.tsx
@@ -5,6 +5,7 @@ import { ExternalLink } from "components/general"
import { Flex } from "../layout"
import { ErrorBoundary, WithFetching } from "../feedback"
import styles from "./Card.module.scss"
+import { useTheme } from "data/settings/Theme"
const cx = classNames.bind(styles)
@@ -21,6 +22,7 @@ export interface Props extends QueryState {
className?: string
mainClassName?: string
inputCard?: boolean
+ twoTone?: boolean
/* button */
onClick?: () => void
@@ -42,8 +44,11 @@ const Card = (props: PropsWithChildren) => {
mainClassName,
muted,
inputCard,
+ twoTone,
} = props
+ const { name } = useTheme()
+
return (
{(progress, wrong) => {
@@ -56,6 +61,7 @@ const Card = (props: PropsWithChildren) => {
link: to || href,
button: onClick,
error: wrong,
+ twoTone,
}
const cardClassName = cx(styles.card, size, style, className)
@@ -71,7 +77,9 @@ const Card = (props: PropsWithChildren) => {
)}
-
+
{wrong ?? (children && {children})}
@@ -82,7 +90,7 @@ const Card = (props: PropsWithChildren) => {
{content}
) : to ? (
-
+
{content}
) : onClick ? (
diff --git a/src/components/layout/Layout.module.scss b/src/components/layout/Layout.module.scss
index 518aae540..e0850d59c 100644
--- a/src/components/layout/Layout.module.scss
+++ b/src/components/layout/Layout.module.scss
@@ -101,6 +101,12 @@
gap: 10px;
margin-left: auto;
z-index: 1;
+ color: var(--menu-text);
+
+ &.light,
+ &.whale {
+ color: var(--text);
+ }
}
.main {
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index c2f9cf0a9..53916bff8 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,6 +1,7 @@
import { PropsWithChildren } from "react"
import { atom, useRecoilValue } from "recoil"
import classNames from "classnames/bind"
+import { useTheme } from "data/settings/Theme"
import styles from "./Layout.module.scss"
const cx = classNames.bind(styles)
@@ -36,7 +37,8 @@ export const Header = ({ children }: PropsWithChildren<{}>) => {
}
export const Actions = ({ children }: PropsWithChildren<{}>) => {
- return {children}
+ const { name } = useTheme()
+ return {children}
}
export const Content = ({ children }: PropsWithChildren<{}>) => {
diff --git a/src/components/layout/PaginationButtons.module.scss b/src/components/layout/PaginationButtons.module.scss
index 6329ee2a0..29622bc62 100644
--- a/src/components/layout/PaginationButtons.module.scss
+++ b/src/components/layout/PaginationButtons.module.scss
@@ -17,12 +17,19 @@
.prev {
border-right: 0;
- border-top-left-radius: 2px;
- border-bottom-left-radius: 2px;
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ background: var(--card-bg);
}
.next {
border-left: 0;
- border-top-right-radius: 2px;
- border-bottom-right-radius: 2px;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ background: var(--card-bg);
+ transition: all 0.2s ease-in-out;
+
+ &:hover {
+ background: var(--input-bg);
+ }
}
diff --git a/src/pages/gov/ProposalDepositors.tsx b/src/pages/gov/ProposalDepositors.tsx
index 3963a85ed..1afae7266 100644
--- a/src/pages/gov/ProposalDepositors.tsx
+++ b/src/pages/gov/ProposalDepositors.tsx
@@ -14,7 +14,7 @@ const ProposalDepositors = ({ id, chain }: { id: string; chain: string }) => {
const { data: deposits, ...state } = useDeposits(id, chain)
return (
-
+
{deposits && (
{
}
return card ? (
-
+
{render()}
) : (
diff --git a/src/pages/gov/ProposalParams.tsx b/src/pages/gov/ProposalParams.tsx
index 97270697c..ba3c4b76d 100644
--- a/src/pages/gov/ProposalParams.tsx
+++ b/src/pages/gov/ProposalParams.tsx
@@ -30,7 +30,7 @@ const ProposalParams = ({ chain }: { chain: string }) => {
}
return (
-
+
{render()}
)
diff --git a/src/pages/gov/ProposalVotes.module.scss b/src/pages/gov/ProposalVotes.module.scss
index e81f06d82..857aa207b 100644
--- a/src/pages/gov/ProposalVotes.module.scss
+++ b/src/pages/gov/ProposalVotes.module.scss
@@ -5,6 +5,10 @@
grid-template-rows: auto 1fr;
gap: 4px;
font-size: var(--font-size-small);
+
+ .title {
+ font-size: var(--font-size);
+ }
}
.list {
@@ -38,4 +42,5 @@
.end {
margin-top: 20px;
+ color: var(--text-muted);
}
diff --git a/src/pages/gov/ProposalVotes.tsx b/src/pages/gov/ProposalVotes.tsx
index f84935758..8aab47b86 100644
--- a/src/pages/gov/ProposalVotes.tsx
+++ b/src/pages/gov/ProposalVotes.tsx
@@ -129,7 +129,7 @@ const ProposalVotes = ({
}
return card ? (
-
+
{render()}
) : (
diff --git a/src/pages/gov/ProposalVotesByValidator.module.scss b/src/pages/gov/ProposalVotesByValidator.module.scss
index 8e3dfdf65..b8a7747bc 100644
--- a/src/pages/gov/ProposalVotesByValidator.module.scss
+++ b/src/pages/gov/ProposalVotesByValidator.module.scss
@@ -38,6 +38,7 @@
/* content */
.link {
@include inline-flex;
+ vertical-align: middle;
&.disabled {
cursor: not-allowed;
diff --git a/src/pages/gov/ProposalVotesByValidator.tsx b/src/pages/gov/ProposalVotesByValidator.tsx
index 002f57e3c..fd6d0cf88 100644
--- a/src/pages/gov/ProposalVotesByValidator.tsx
+++ b/src/pages/gov/ProposalVotesByValidator.tsx
@@ -189,7 +189,7 @@ const ProposalVotesByValidator = ({ id }: { id: string }) => {
if (!TerraProposal?.length) return null
return (
-
+
{render()}
)
diff --git a/src/pages/gov/components/VoteProgress.module.scss b/src/pages/gov/components/VoteProgress.module.scss
index 8a530aa5f..5f938713a 100644
--- a/src/pages/gov/components/VoteProgress.module.scss
+++ b/src/pages/gov/components/VoteProgress.module.scss
@@ -26,6 +26,7 @@
background: var(--bg-muted);
overflow: hidden;
width: 100%;
+ border-radius: 8px;
}
.item {
diff --git a/src/pages/stake/Stake.tsx b/src/pages/stake/Stake.tsx
index 1eb9a5ed5..484dcf32c 100644
--- a/src/pages/stake/Stake.tsx
+++ b/src/pages/stake/Stake.tsx
@@ -17,7 +17,7 @@ import DelegationsPromote from "app/containers/DelegationsPromote"
const Stake = () => {
const { t } = useTranslation()
const [chainSelected, setChainSelected] = useState("all")
-
+
const { data: chartData, ...state } = useStakeChartData()
const tabs = [
diff --git a/src/pages/stake/ValidatorActions.tsx b/src/pages/stake/ValidatorActions.tsx
index 85ef0c8e9..2a3a5f450 100644
--- a/src/pages/stake/ValidatorActions.tsx
+++ b/src/pages/stake/ValidatorActions.tsx
@@ -119,14 +119,14 @@ const ValidatorActions = ({ destination }: { destination: ValAddress }) => {
return (
-
+
{renderDelegationsValue()}
{renderDelegationsActions()}
-
+
{renderRewardsValue()}
{renderRewardsActions()}
diff --git a/src/pages/stake/ValidatorAddresses.tsx b/src/pages/stake/ValidatorAddresses.tsx
index cc309ec42..37c898126 100644
--- a/src/pages/stake/ValidatorAddresses.tsx
+++ b/src/pages/stake/ValidatorAddresses.tsx
@@ -24,7 +24,7 @@ const ValidatorAddresses = ({ validator }: { validator: Validator }) => {
]
return (
-
+
{addresses.map((item) => (
diff --git a/src/pages/stake/ValidatorCommission.tsx b/src/pages/stake/ValidatorCommission.tsx
index 39019a008..26b76ab96 100644
--- a/src/pages/stake/ValidatorCommission.tsx
+++ b/src/pages/stake/ValidatorCommission.tsx
@@ -32,7 +32,7 @@ const ValidatorCommission = ({ validator }: { validator: Validator }) => {
]
return (
-
+
)
diff --git a/src/pages/wallet/AssetList.tsx b/src/pages/wallet/AssetList.tsx
index 57ca825d0..63b53833e 100644
--- a/src/pages/wallet/AssetList.tsx
+++ b/src/pages/wallet/AssetList.tsx
@@ -10,10 +10,7 @@ import Asset from "./Asset"
import styles from "./AssetList.module.scss"
import { useTokenFilters } from "utils/localStorage"
import { toInput } from "txs/utils"
-import {
- useCustomTokensCW20,
- useCustomTokensNative,
-} from "data/settings/CustomTokens"
+import { isNativeToken } from "utils/chain"
const AssetList = () => {
const { t } = useTranslation()
@@ -23,16 +20,6 @@ const AssetList = () => {
const coins = useBankBalance()
const { data: prices } = useExchangeRates()
const readNativeDenom = useNativeDenoms()
- const native = useCustomTokensNative()
- const cw20 = useCustomTokensCW20()
- const alwaysVisibleDenoms = useMemo(
- () =>
- new Set([
- ...cw20.list.map((a) => a.token),
- ...native.list.map((a) => a.denom),
- ]),
- [cw20.list, native.list]
- )
const list = useMemo(
() =>
@@ -68,7 +55,7 @@ const AssetList = () => {
(a) => (hideNoWhitelist ? !a.symbol.endsWith("...") : true) // TODO: update and implement whitelist check
)
.filter((a) => {
- if (!hideLowBal || a.price === 0 || alwaysVisibleDenoms.has(a.denom))
+ if (!(hideLowBal && a.price === 0) || isNativeToken(a.denom))
return true
return a.price * toInput(a.balance) >= 1
})
@@ -76,14 +63,7 @@ const AssetList = () => {
(a, b) =>
b.price * parseInt(b.balance) - a.price * parseInt(a.balance)
),
- [
- coins,
- readNativeDenom,
- prices,
- hideNoWhitelist,
- hideLowBal,
- alwaysVisibleDenoms,
- ]
+ [coins, readNativeDenom, prices, hideNoWhitelist, hideLowBal]
)
const render = () => {
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index b49bf58f8..e8338d74c 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -213,37 +213,40 @@
--border-width: 0;
--border-radius: 8px;
- --button-primary-bg-h: 47;
- --button-primary-bg-s: 93%;
- --button-primary-bg-l: 67%;
+ --button-primary-bg-h: 201;
+ --button-primary-bg-s: 90%;
+ --button-primary-bg-l: 61%;
--button-primary-bg: hsl(
var(--button-primary-bg-h),
var(--button-primary-bg-s),
var(--button-primary-bg-l)
);
- --button-primary-text: hsl(248 55% 8%);
- --button-default-bg-h: 47;
- --button-default-bg-s: 93%;
- --button-default-bg-l: 67%;
+ --button-primary-text: hsl(0 0% 100%);
+ --button-default-bg-h: 0;
+ --button-default-bg-s: 0%;
+ --button-default-bg-l: 22%;
--button-default-bg: hsl(
var(--button-default-bg-h),
var(--button-default-bg-s),
var(--button-default-bg-l)
);
- --button-default-text: var(--button-primary-text);
+ --button-default-text: hsl(0, 0%, 100%);
- --menu-bg: var(--card-bg);
- --menu-text: var(--text);
+ --menu-bg: hsl(0, 0%, 0%);
+ --menu-text: hsl(0, 0%, 100%);
- --link: var(--button-primary-bg);
- --text: hsl(240 9% 66%);
- --text-muted: hsl(247 9% 40%);
+ --link: hsl(47, 93%, 67%);
+ --info: hsl(47, 93%, 67%);
+
+ --text: hsl(0, 0%, 100%);
+ --text-muted: hsl(211, 32%, 68%);
--chart: var(--button-primary-bg);
- --bg: hsl(249 54% 3%);
+ --bg: hsl(248 50% 3%);
--bg-muted: hsl(248 55% 8%);
- --card-bg: hsl(247, 55%, 9%);
- --card-bg-muted: #130f32;
+ --card-bg: hsl(248, 50%, 3%);
+ --card-bg-muted: hsl(0, 0%, 8%);
+ --card-special: #2c4253;
--card-border: hsl(240 5% 22%);
--input-bg: var(--card-bg);
--input-border: hsl(0 0% 100% / 0.1);
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
index ff1ec12c3..308795b42 100644
--- a/src/styles/_utils.scss
+++ b/src/styles/_utils.scss
@@ -16,7 +16,7 @@ $colors: (
}
.border-#{$color} {
- border: var(--border-width) solid $value;
+ border: 1px solid $value;
}
}
diff --git a/src/styles/themes/Moon/Rocket V5 schuin.mp4 b/src/styles/themes/Moon/Rocket V5 schuin.mp4
new file mode 100644
index 000000000..ed4b25fa1
Binary files /dev/null and b/src/styles/themes/Moon/Rocket V5 schuin.mp4 differ
diff --git a/src/styles/themes/Moon/Top Large 2V7.mp4 b/src/styles/themes/Moon/Top Large 2V7.mp4
new file mode 100644
index 000000000..c80e279db
Binary files /dev/null and b/src/styles/themes/Moon/Top Large 2V7.mp4 differ
diff --git a/src/styles/themes/Moon/favicon.svg b/src/styles/themes/Moon/favicon.svg
index 42c9235b7..88be8e64f 100644
--- a/src/styles/themes/Moon/favicon.svg
+++ b/src/styles/themes/Moon/favicon.svg
@@ -1,4 +1,4 @@
diff --git a/src/styles/themes/Moon/preview.svg b/src/styles/themes/Moon/preview.svg
index bce55cdd8..405812630 100644
--- a/src/styles/themes/Moon/preview.svg
+++ b/src/styles/themes/Moon/preview.svg
@@ -1,7 +1,27 @@
-