7.2.5 (#377)

* downgrade wallet-provider

* fix: settings display chains (#376)

Updating `Display chains` Setting to display only available chains in title casing.

* Blossom theme change st 309 (#373)

* changes blossom theme colors and changed some font styles mainly font-smoothing and font weight adjusted to reflect antialiased smoothing

* Added navigation background and aside blurs ST-309

* changed blossom mp4 location

* fixed aside blur on smaller heights

* changed where the aside blurs are placed and added better management for mobile and small heights

* fixed other changes I wanted in

* fixed networking type being behind nav background

* St 410 chain dropdown changes (#372)

* kind of working...

* ST-410 chain selector now does not submit form each time its clicked on, will close on selection, will close if clicked outside of and displays which chain is selected

---------

Co-authored-by: Alessandro Candeago <54709706+alecande11@users.noreply.github.com>
Co-authored-by: Joshua Brigati <brigati.joshua@gmail.com>

src/app/App.tsx

@@ -29,6 +29,7 @@ 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()
@@ -46,6 +47,7 @@ const App = () => {
         </Sidebar>
 
         <Header>
+          <NavBackgrounds />
           <NetworkHeader />
 
           <Actions>

src/app/components/AddressTable.module.scss

@@ -25,4 +25,5 @@
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 80px;
+  font-weight: var(--bold);
 }

src/app/sections/Aside.module.scss

@@ -1,3 +1,5 @@
 .aside {
   padding: 28px 20px;
+  position: relative;
+  z-index: 10;
 }

src/app/sections/Links.module.scss

@@ -7,6 +7,14 @@
 /* tutorial */
 .tutorial {
   border-bottom: 1px solid var(--menu-border);
+
+  &.tutorial_white a {
+    color: #ffffff;
+
+    @media (max-height: 501px) {
+      color: var(--menu-text);
+    }
+  }
 }
 
 /* community */

src/app/sections/Links.tsx

@@ -7,10 +7,12 @@ import { Contacts } from "components/layout"
 import styles from "./Links.module.scss"
 import { capitalize } from "@mui/material"
 import { useAddress } from "data/wallet"
+import { useTheme } from "data/settings/Theme"
 
 const Links = () => {
   const { t } = useTranslation()
   const isConnected = useAddress()
+  const { name } = useTheme()
 
   const community = {
     medium: "https://medium.com/terra-money",
@@ -22,7 +24,11 @@ const Links = () => {
 
   return (
     <div className={styles.links}>
-      <div className={styles.tutorial}>
+      <div
+        className={`${styles.tutorial} ${
+          name === "blossom" && styles.tutorial_white
+        }`}
+      >
         {!isConnected && (
           <ExternalLink href={SETUP} className={styles.link}>
             <BoltIcon style={{ fontSize: 18 }} />

src/app/sections/Nav.module.scss

@@ -30,13 +30,12 @@
   flex: 1;
   display: block;
   font-size: 18px;
-  font-weight: 300;
   padding: 0 20px;
   line-height: var(--header-height);
   color: var(--menu-text);
 
   strong {
-    font-weight: 500;
+    font-weight: var(--bold);
   }
 
   img {
@@ -77,3 +76,97 @@
     }
   }
 }
+
+.background_blur_blossom,
+.background_blur_blossom2,
+.background_blur_blossom3 {
+  background-color: #ec22c0;
+  position: absolute;
+  filter: blur(95px);
+  z-index: 1;
+
+  @include mobile {
+    display: none;
+  }
+
+  &.open {
+    display: block;
+  }
+
+  @media (max-height: 501px) {
+    display: none !important;
+  }
+}
+
+.background_blur_blossom {
+  height: 200px;
+  width: 700px;
+  left: -275px;
+  bottom: 225px;
+  rotate: 65deg;
+  filter: blur(95px);
+  transition: all 0.5s ease-in-out;
+
+  &.open {
+    height: 400px;
+    filter: blur(150px);
+    left: -200px;
+    bottom: 0;
+    width: 1000px;
+    rotate: 45deg;
+  }
+
+  @media (max-height: 1000px) {
+    width: 400px;
+    right: -200px;
+    left: auto;
+    bottom: 0;
+
+    &.open {
+      width: 600px;
+      left: 200px;
+      bottom: -50px;
+      height: 200px;
+      rotate: 20deg;
+      filter: blur(90px);
+    }
+  }
+
+  @media (max-height: 700px) {
+    width: 150px;
+    height: 100px;
+    right: -15px;
+    left: auto;
+    bottom: -15px;
+    rotate: 0deg;
+    filter: blur(35px);
+  }
+}
+
+.background_blur_blossom2 {
+  height: 100px;
+  width: 100px;
+  bottom: -15px;
+  left: -15px;
+  filter: blur(35px);
+
+  @media (max-height: 700px) {
+    height: 150px !important;
+  }
+
+  &.open {
+    height: 250px;
+    width: 250px;
+    left: -50px;
+    bottom: -50px;
+    filter: blur(60px);
+  }
+}
+
+.background_blur_blossom3 {
+  height: 150px;
+  width: 200px;
+  right: -50px;
+  bottom: 10px;
+  rotate: 50deg;
+}

src/app/sections/Nav.tsx

@@ -6,7 +6,7 @@ import CloseIcon from "@mui/icons-material/Close"
 import { mobileIsMenuOpenState } from "components/layout"
 import { useNav } from "../routes"
 import styles from "./Nav.module.scss"
-import { useThemeFavicon } from "data/settings/Theme"
+import { useThemeFavicon, useTheme } from "data/settings/Theme"
 import { isWalletBarOpen } from "pages/wallet/Wallet"
 
 const cx = classNames.bind(styles)
@@ -17,6 +17,7 @@ const Nav = () => {
   const icon = useThemeFavicon()
   const [isOpen, setIsOpen] = useRecoilState(mobileIsMenuOpenState)
   const close = () => setIsOpen(false)
+  const { name } = useTheme()
 
   return (
     <nav>
@@ -44,6 +45,26 @@ const Nav = () => {
           {title}
         </NavLink>
       ))}
+
+      {name === "blossom" && (
+        <>
+          <div
+            className={`${styles.background_blur_blossom} ${
+              isOpen ? styles.open : ""
+            }`}
+          />
+          <div
+            className={`${styles.background_blur_blossom2} ${
+              isOpen ? styles.open : ""
+            }`}
+          />
+          <div
+            className={`${styles.background_blur_blossom3} ${
+              isOpen ? styles.open : ""
+            }`}
+          />
+        </>
+      )}
     </nav>
   )
 }

src/app/sections/NavBackgrounds.module.scss

@@ -0,0 +1,12 @@
+@import "mixins";
+
+.nav_background_wrapper {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  overflow: hidden;
+
+  @include mobile {
+    display: none;
+  }
+}

src/app/sections/NavBackgrounds.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from "data/settings/Theme"
+import BlossomVideo from "../../styles/themes/Blossom/Nav.mp4"
+import styles from "./NavBackgrounds.module.scss"
+
+const NavBackgrounds = () => {
+  const { name } = useTheme()
+
+  const BlossomBackground = (
+    <div className={styles.nav_background_wrapper}>
+      <video autoPlay muted loop>
+        <source src={BlossomVideo} type="video/mp4" />
+      </video>
+    </div>
+  )
+
+  return <>{name === "blossom" && BlossomBackground}</>
+}
+
+export default NavBackgrounds

src/app/sections/NetworkHeader.module.scss

@@ -5,4 +5,5 @@
   font-size: var(--font-size);
   font-weight: var(--bold);
   padding: 6px 12px;
+  z-index: 1;
 }

src/app/sections/Preferences.module.scss

@@ -1,8 +1,7 @@
 .back {
   position: absolute;
   left: 40px;
-
-  top: 40px;
+  top: 46px;
 }
 .extra {
   position: absolute;

src/auth/ledger/AccessWithLedger.module.scss

@@ -5,13 +5,12 @@
 }
 
 .mainButton {
-  //margin-top: 2.6rem;
   min-width: 300px;
 }
 
 .smallButton {
   margin-top: 0.8rem;
-  font-weight: 400;
+  font-weight: var(--normal);
   &:hover {
     color: var(--button-primary-bg);
   }

src/auth/modules/select/SwitchWallet.module.scss

@@ -5,6 +5,10 @@
   gap: 8px;
   list-style: none !important;
   padding: 0 !important;
+
+  button {
+    background: var(--card-bg);
+  }
 }
 
 .wallet {

src/components/form/ChainSelector.module.scss

@@ -41,6 +41,10 @@
     max-height: 125px;
     margin-top: 0;
 
+    .active {
+      background-color: var(--bg-muted);
+    }
+
     &::-webkit-scrollbar {
       width: 12px;
       display: block;

src/components/form/ChainSelector.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react"
+import { useMemo, useState, useRef, useEffect } from "react"
 import styles from "./ChainSelector.module.scss"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import { useNetworks } from "app/InitNetworks"
@@ -35,10 +35,29 @@ const ChainSelector = ({
     [allNetworks, chainsList]
   )
   const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setOpen(false)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleSelection = (selectedChain: string) => {
+    onChange(selectedChain)
+    setOpen(false)
+  }
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={ref}>
       <button
+        type="button"
         className={styles.selector}
         onClick={(e) => {
           e.stopPropagation()
@@ -51,7 +70,9 @@ const ChainSelector = ({
         </span>{" "}
         <ArrowDropDownIcon style={{ fontSize: 20 }} className={styles.caret} />
       </button>
-      {open && <ChainList list={list} onChange={onChange} value={value} />}
+      {open && (
+        <ChainList list={list} onChange={handleSelection} value={value} />
+      )}
     </div>
   )
 }

src/components/form/Toggle.module.scss

@@ -9,7 +9,7 @@
 
   .text {
     flex: 1;
-    font-weight: 400;
+    font-weight: var(--normal);
   }
 }
 

src/components/layout/Card.module.scss

@@ -24,7 +24,7 @@
   text-align: left;
 
   color: inherit;
-  font-weight: normal;
+  font-weight: var(--normal);
   transition: border-color var(--transition);
 
   &:hover {

src/components/layout/Contacts.module.scss

@@ -25,4 +25,12 @@
   &:hover {
     opacity: 1;
   }
+
+  &.icon_white {
+    fill: #ffffff;
+
+    @media (max-height: 501px) {
+      fill: var(--menu-text);
+    }
+  }
 }