fix: using gradient right bg

cardano-foundation · Sep 11, 2024 · 0520ba0 · 0520ba0
1 parent 9692ebc
commit 0520ba0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/ui/summit-2024/src/pages/Leaderboard/Leaderboard.tsx b/ui/summit-2024/src/pages/Leaderboard/Leaderboard.tsx
@@ -29,10 +29,13 @@ import { getStats } from "../../common/api/leaderboardService";
 import { ByCategoryStats } from "../../types/voting-app-types";
 import { useAppSelector } from "../../store/hooks";
 import { getEventCache } from "../../store/reducers/eventCache";
+import Ellipses from "../../assets/ellipse.svg";
+import {useIsPortrait} from "../../common/hooks/useIsPortrait";
 
 const Leaderboard: React.FC = () => {
   const [stats, setStats] = useState<ByCategoryStats[]>();
   const eventCache = useAppSelector(getEventCache);
+  const isMobile = useIsPortrait();
 
   const [selected, setSelected] = useState<number | undefined>(undefined);
   const [hovered, setHovered] = useState<number | undefined>(undefined);
@@ -497,6 +500,18 @@ const Leaderboard: React.FC = () => {
               </Box>
             </Fade>
           </Container>
+          <img
+              src={Ellipses}
+              style={{
+                position: "fixed",
+                right: "0",
+                top: "90%",
+                transform: "translateY(-30%)",
+                zIndex: "-1",
+                width: "70%",
+                height: isMobile ? "auto" : "auto",
+              }}
+          />
         </>
       </PageBase>
     </>

diff --git a/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx b/ui/summit-2024/src/pages/UserGuide/UserGuide.tsx
@@ -8,9 +8,12 @@ import { CustomButton } from "../../components/common/CustomButton/CustomButton"
 import { ROUTES } from "../../routes";
 import { useNavigate } from "react-router-dom";
 import SupportedWalletsList from "./components/SupportedWalletList";
+import Ellipses from "../../assets/ellipse.svg";
+import {useIsPortrait} from "../../common/hooks/useIsPortrait";
 
 const UserGuide = () => {
   const navigate = useNavigate();
+    const isMobile = useIsPortrait();
 
   const handleNavigate = (pathname: string) => {
     navigate(pathname);
@@ -167,6 +170,18 @@ const UserGuide = () => {
     <>
       <PageBase title="User Guide">
         <Layout menuOptions={optionsForScroll} bottom={bottom} mode="scroll" />
+          <img
+              src={Ellipses}
+              style={{
+                  position: "fixed",
+                  right: "0",
+                  top: "90%",
+                  transform: "translateY(-30%)",
+                  zIndex: "-1",
+                  width: "70%",
+                  height: isMobile ? "auto" : "auto",
+              }}
+          />
       </PageBase>
       <SupportedWalletsList />
     </>