fix: styles

cardano-foundation · Jul 10, 2024 · f3c102e · f3c102e
1 parent 6d657ee
commit f3c102e
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 69 deletions.
diff --git a/ui/summit-2024/index.html b/ui/summit-2024/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Dosis:[email protected]&display=swap" rel="stylesheet">

diff --git a/ui/summit-2024/src/App.css b/ui/summit-2024/src/App.css
diff --git a/ui/summit-2024/src/App.tsx b/ui/summit-2024/src/App.tsx
@@ -1,7 +1,7 @@
 import "./App.scss";
 import { Box, CircularProgress, Container, Grid } from "@mui/material";
 import { BrowserRouter } from "react-router-dom";
-import Header from "./components/common/Header/Header";
+import Header from "./components/Header/Header";
 import { PageRouter } from "./routes";
 import { Footer } from "./components/common/Footer/Footer";
 import { TermsAndConditionsModal } from "./components/LegalOptInModal/TermsAndConditionsModal";
@@ -47,7 +47,7 @@ function App() {
             </Box>
             <Footer />
           </Grid>
-          <Cookies position="bottom" />
+          <Cookies/>
           <TermsAndConditionsModal />
         </Container>
       </BrowserRouter>

diff --git a/ui/summit-2024/src/components/GLBViewer/GLBViewer.tsx b/ui/summit-2024/src/components/GLBViewer/GLBViewer.tsx
@@ -34,7 +34,7 @@ const Model = ({ glbUrl, isInteracting, setIsInteracting }: ModelProps) => {
   useFrame(() => {
     if (!isInteracting) {
       // @ts-ignore
-      ref.current.rotation.y += 0.007;
+      ref.current.rotation.y += 0.01;
     }
   });
 
@@ -77,9 +77,8 @@ const GLBViewer: React.FC<GLBViewerProps> = ({ glbUrl, height, width }) => {
           setIsInteracting={setIsInteracting}
         />
         <OrbitControls
-          enableZoom={true}
           maxDistance={4}
-          minDistance={3}
+          minDistance={4}
           enabled={true}
         />
       </Canvas>

diff --git a/...4/src/components/common/Header/Header.tsx → ...mit-2024/src/components/Header/Header.tsx b/...4/src/components/common/Header/Header.tsx → ...mit-2024/src/components/Header/Header.tsx
@@ -2,22 +2,22 @@ import React, { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { AppBar, Box, Toolbar, Typography, IconButton } from "@mui/material";
 import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
-import Logo from "../../../assets/logo.svg";
-import { useIsPortrait } from "../../../common/hooks/useIsPortrait";
-import { eventBus, EventName } from "../../../utils/EventBus";
-import { ToastType } from "../Toast/Toast.types";
-import { ConnectWalletModal } from "../../ConnectWalletModal/ConnectWalletModal";
-import { Toast } from "../Toast/Toast";
-import { VerifyWalletModal } from "../../VerifyWalletModal";
-import { resolveCardanoNetwork } from "../../../utils/utils";
-import { env } from "../../../common/constants/env";
+import Logo from "../../assets/logo.svg";
+import { useIsPortrait } from "../../common/hooks/useIsPortrait";
+import { eventBus, EventName } from "../../utils/EventBus";
+import { ToastType } from "../common/Toast/Toast.types";
+import { ConnectWalletModal } from "../ConnectWalletModal/ConnectWalletModal";
+import { Toast } from "../common/Toast/Toast";
+import { VerifyWalletModal } from "../VerifyWalletModal";
+import { resolveCardanoNetwork } from "../../utils/utils";
+import { env } from "../../common/constants/env";
 import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
-import { ConnectWalletButton } from "../../ConnectWalletButton/ConnectWalletButton";
-import { ROUTES } from "../../../routes";
+import { ConnectWalletButton } from "../ConnectWalletButton/ConnectWalletButton";
+import { ROUTES } from "../../routes";
 import { RightMenu } from "./RightMenu/RightMenu";
-import theme from "../../../common/styles/theme";
-import { useAppDispatch } from "../../../store/hooks";
-import { resetUser } from "../../../store/reducers/userCache";
+import theme from "../../common/styles/theme";
+import { useAppDispatch } from "../../store/hooks";
+import { resetUser } from "../../store/reducers/userCache";
 
 const Header = () => {
   const dispatch = useAppDispatch();

diff --git a/...nts/common/Header/RightMenu/RightMenu.tsx → ...components/Header/RightMenu/RightMenu.tsx b/...nts/common/Header/RightMenu/RightMenu.tsx → ...components/Header/RightMenu/RightMenu.tsx
@@ -1,9 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
 import { Box, Drawer, List, ListItem, ListItemText } from "@mui/material";
 import { useNavigate, useLocation } from "react-router-dom";
-import { ROUTES } from "../../../../routes";
+import { ROUTES } from "../../../routes";
 
-const RightMenu = ({ menuIsOpen, setMenuIsOpen }) => {
+interface RightMenuProps {
+    menuIsOpen: boolean;
+    setMenuIsOpen: (isOpen: boolean) => void;
+}
+
+const RightMenu: React.FC<RightMenuProps> = ({ menuIsOpen, setMenuIsOpen }) => {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -22,6 +27,7 @@ const RightMenu = ({ menuIsOpen, setMenuIsOpen }) => {
         onClose={() => setMenuIsOpen(false)}
       >
         <Box
+          component="div"
           sx={{
             width: 250,
             height: "100%",
@@ -32,16 +38,15 @@ const RightMenu = ({ menuIsOpen, setMenuIsOpen }) => {
           }}
         >
           <List>
-            <ListItem button onClick={() => handleClickMenu(ROUTES.CATEGORIES)}>
+            <ListItem onClick={() => handleClickMenu(ROUTES.CATEGORIES)}>
               <ListItemText primary="Categories" />
             </ListItem>
             <ListItem
-              button
               onClick={() => handleClickMenu(ROUTES.LEADERBOARD)}
             >
               <ListItemText primary="Leaderboard" />
             </ListItem>
-            <ListItem button onClick={() => handleClickMenu(ROUTES.USER_GUIDE)}>
+            <ListItem onClick={() => handleClickMenu(ROUTES.USER_GUIDE)}>
               <ListItemText primary="User Guide" />
             </ListItem>
           </List>

diff --git a/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx b/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx
@@ -42,7 +42,7 @@ const TicketsSection = () => {
           item
           xs={12}
           sm={6}
-          style={{
+          sx={{
             textAlign: {
               xs: "center",
               sm: "left",