UI-Bug-fixing-2 (#27)

src/MainRouter.tsx

@@ -17,13 +17,27 @@ import { Session } from "./types/session";
 import { getFeedUpdate, getSessionsData } from "./utils/bee";
 import HowDoesItWork from "./pages/HowDoesItWork/HowDoesItWork";
 import { useGlobalState } from "./GlobalStateContext";
+import ClaimRewardPage from "./pages/ClaimRewardPage/ClaimRevardPage";
 
 const MainRouter = (): ReactElement => {
   const { showGamification, setShowGamification, points } = useGlobalState();
   const [sessions, setSessions] = useState(new Map<string, Session[]>());
   const [sessionsReference, setSessionsReference] = useState<string>("");
   const [isBeeRunning, setBeeRunning] = useState(false);
 
+  const setVhVariable = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  };
+
+  useEffect(() => {
+    setVhVariable();
+    window.addEventListener("resize", setVhVariable);
+    return () => {
+      window.removeEventListener("resize", setVhVariable);
+    };
+  }, []);
+
   const checkBee = async () => {
     fetch(
       process.env.BEE_API_URL + "bytes/" + process.env.HEALTH_CHECK_DATA_REF
@@ -107,6 +121,7 @@ const MainRouter = (): ReactElement => {
         <Route path={ROUTES.AGENDA} element={<Agenda sessions={sessions} />} />
         <Route path={ROUTES.SPACES} element={<SpacesPage />} />
         <Route path={ROUTES.HOWDOESITWORK} element={<HowDoesItWork />} />
+        <Route path={ROUTES.CLAIMREWARD} element={<ClaimRewardPage />} />
       </Routes>
     </>
   );

src/components/Dropdown/Dropdown.scss

@@ -74,7 +74,7 @@
 @media (max-width: 500px) {
   .dropdown__open__background {
     width: 100%;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
   }
 }
 

src/components/Gamification/Gamification.scss

@@ -6,7 +6,7 @@
   left: 0px;
   width: 100%;
   height: 100%;
-  z-index: 2;
+  z-index: 3;
   overflow: hidden;
   padding: 16px;
   box-sizing: border-box;

src/components/WelcomeButton/WelcomeButton.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 interface WelcomeButtonProps {
   children: string;
   version?: "filled" | "outlined" | "inactive";
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 const WelcomeButton: React.FC<WelcomeButtonProps> = ({
@@ -21,7 +21,7 @@ const WelcomeButton: React.FC<WelcomeButtonProps> = ({
         "welcome-button--outlined": version === "outlined",
         "welcome-button--inactive": version === "inactive",
       })}
-      onClick={() => onClick()}
+      onClick={() => (onClick ? onClick() : null)}
     >
       {children}
     </button>

src/index.css

@@ -35,75 +35,6 @@ body {
   margin: 0;
 }
 
-/* :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-} */
-
 a,
 a:hover,
 a:visited {
@@ -114,5 +45,5 @@ a:visited {
 }
 
 html {
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
 }

src/pages/Agenda/Agenda.scss

@@ -1,5 +1,5 @@
 .agenda-page {
-  height: calc(100vh - 56px);
+  height: calc(calc(var(--vh, 1vh) * 100) - 56px);
   display: flex;
   flex-direction: column;
 }

src/pages/Chat/Chat.scss

@@ -1,13 +1,13 @@
 .chat-page {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 56px);
+  height: calc(calc(var(--vh, 1vh) * 100) - 56px);
 
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% - 56px);
-}
+}

src/pages/ClaimRewardPage/ClaimRevardPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import "./ClaimRewardPage.scss";
 
 const ClaimRewardPage: React.FC = () => {
-  return <div className="claim-reward"></div>;
+  return <div className="claim-reward">CLAIM REWARD</div>;
 };
 
 export default ClaimRewardPage;

src/pages/DevconLounge/DevconLounge.tsx

@@ -12,7 +12,7 @@ const DevconLounge: React.FC = () => {
         justifyContent: "start",
         alignItems: "center",
         backgroundColor: "#f5f5f5",
-        height: "100vh",
+        height: "calc(var(--vh, 1vh) * 100)",
         padding: "20px",
       }}
     >

src/pages/ProfileCreation/ProfileCreation.scss

@@ -3,7 +3,7 @@
   font-weight: 700;
 }
 profile-creation .profile-creation {
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -98,7 +98,7 @@ profile-creation .profile-creation {
 .profile-creation__background-effect {
   position: absolute;
   z-index: 0;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   width: 100%;
   top: 0px;
 }

src/pages/Welcome1/Welcome1.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: white;
   text-align: center;
   box-sizing: border-box;
@@ -18,7 +18,7 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     background-color: white;
     text-align: center;
     box-sizing: border-box;
@@ -49,7 +49,7 @@
   position: absolute;
   width: 100%;
   z-index: 0;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: linear-gradient(
     rgb(255 255 255 / -46%) 45.52%,
     rgba(130, 35, 255, 18%) 62.52%,

src/pages/Welcome2/Welcome2.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: white;
   text-align: center;
   box-sizing: border-box;
@@ -18,7 +18,7 @@
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     background-color: white;
     text-align: center;
     box-sizing: border-box;

src/pages/Welcome4/Welcome4.tsx

@@ -44,7 +44,7 @@ const Welcome1: React.FC = () => {
             <WelcomeProgressIndicator active={3} />
             <div className="welcome-page_bottom-bottom__buttons">
               <Link
-                to={ROUTES.WELCOME4}
+                to={ROUTES.WELCOME3}
                 className="welcome-page__navigation-button-link"
               >
                 <WelcomeButton version="outlined">Back</WelcomeButton>

src/styles/global.scss

@@ -50,7 +50,7 @@
   position: absolute;
   width: 100%;
   z-index: 0;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: linear-gradient(
     rgb(255 255 255 / -46%) 45.52%,
     rgba(130, 35, 255, 18%) 62.52%,

src/utils/constants.ts

@@ -18,6 +18,7 @@ export enum ROUTES {
   CATEGORIES = "/categories",
   SPACES = "/spaces",
   HOWDOESITWORK = "/how-does-it-work",
+  CLAIMREWARD = "/claim-reward",
 }
 
 export const CATEGORIES = [
@@ -38,13 +39,13 @@ export const RESOURCE_IDS = {
     "1405000000000000000000000000000000000000000000000000000000000000",
   "Core protocol": "null",
   "Cypherpunk and privacy": "null",
-  "Usability": "null",
+  Usability: "null",
   "Real World Ethereum": "null",
   "Applied Cryptography": "null",
-  "Cryptoeconomics": "null",
-  "Coordination": "null",
+  Cryptoeconomics: "null",
+  Coordination: "null",
   "Developer Experience": "null",
-  "Security": "null",
+  Security: "null",
 };
 
 export const DATE_TO_DEVCON_DAY = new Map([