style: updated latencySlider spacing and correct hover bx

- updated latencySlider for better fitting for case study - removed extraneous css properties for footer - removed extraneous useEffect and event handler for scroll event on home page - cursor pointer active when hovering over arrow Co-authored-by: Alex Sklar <[email protected]> Co-authored-by: Erik Margetis <[email protected]>
syncosaurus · Apr 23, 2024 · 990b21d · 990b21d
1 parent dfc8e8b
commit 990b21d
Show file tree

Hide file tree

Showing 10 changed files with 1,447 additions and 1,722 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -75,7 +75,7 @@ const config = {
           {
             type: 'html',
             value: `
-              <a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
+              <a className="navbar__item" style={ text-decoration: none, color: black } target="_blank" href="https://github.com/syncosaurus">
                 Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
               </a>`,
             position: 'right',
@@ -112,7 +112,7 @@ const config = {
             items: [
               {
                 html: `
-                  <a className="navbar__item" style={ text-decoration: none, color: black } href=https://github.com/syncosaurus>
+                  <a className="navbar__item" style={ text-decoration: none, color: black } target="_blank" href="https://github.com/syncosaurus">
                     Github <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
                   </a>`,
               },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,8 +29,6 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "rehype-katex": "^6.0.3",
-    "remark-math": "^5.1.1",
     "tailwindcss": "^3.4.3",
     "uuid": "^9.0.1"
   },

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -8,7 +8,7 @@ export default function HomepageFeatures() {
   return (
     <>
       <FadeInSection>
-        <div className="text-center mt-5 pt-10 pb-2">
+        <div className="text-center mt-6 pt-10 pb-2">
           <h1 className="text-5xl text-syncoGreen">Key Features</h1>
         </div>
       </FadeInSection>
@@ -24,7 +24,7 @@ export default function HomepageFeatures() {
                 ></object>
               </div>
               <div className="w-full shrink-0 grow-0 basis-auto lg:w-7/12 align-middle">
-                <div className="flex h-full justify-center rounded-lg bg-primary p-6  text-black lg:pl-12 lg:text-left">
+                <div className="flex h-full rounded-lg bg-primary p-6  text-black lg:pl-12 lg:text-left">
                   <div className="lg:pl-12">
                     <h2 className="mb-6 text-3xl font-bold  text-syncoBlue">
                       Robust and Flexible Collaboration Engine
@@ -79,7 +79,7 @@ export default function HomepageFeatures() {
         <div className="grid w-9/12 h-30 py-10 my-20 mx-auto md:px-6">
           <section className="mb-27">
             <div className="flex flex-wrap items-center">
-              <div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-8/12">
+              <div className="mb-12 w-full shrink-0 grow-0 basis-auto lg:mb-0 lg:w-7/12">
                 <div className="flex lg:py-12 w-auto">
                   <img
                     src="img/screenshots/dashboard_screenshot.png"
@@ -88,7 +88,7 @@ export default function HomepageFeatures() {
                   />
                 </div>
               </div>
-              <div className="w-full shrink-0 grow-0 basis-auto lg:w-4/12">
+              <div className="w-full shrink-0 grow-0 basis-auto lg:w-5/12">
                 <div className="flex h-full items-center rounded-lg bg-primary p-6 text-center text-black lg:pl-12 lg:text-left">
                   <div className="lg:pl-12">
                     <h2 className="mb-6 text-3xl  text-syncoBlue font-bold">

diff --git a/src/components/LatencySlider/LatencySlider.js b/src/components/LatencySlider/LatencySlider.js
@@ -23,7 +23,7 @@ export default function LatencySlider() {
     <>
       <FormControl sx={{ display: "inline-block" }}>
         <FormHelperText sx={{ fontSize: "17px" }}>Latency</FormHelperText>
-        <Select sx={{ width: "120px" }}value={secondSliderlatency} onChange={handleLatencyChange}>
+        <Select sx={{ width: "120px", height: "30px" }} value={secondSliderlatency} onChange={handleLatencyChange}>
           <MenuItem value={50}> 50 ms</MenuItem>
           <MenuItem value={150}>150 ms</MenuItem>
           <MenuItem value={300}>300 ms</MenuItem>

diff --git a/src/components/LatencySlider/VerticalSlider.js b/src/components/LatencySlider/VerticalSlider.js
@@ -51,7 +51,7 @@ const Slider = styled(BaseSlider)(
   display: inline-block;
   position: relative;
   margin-top: 0.75rem;
-  cursor: pointer;
+  cursor: ${delay === 0 ? "pointer" : null};
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
@@ -115,7 +115,7 @@ const Slider = styled(BaseSlider)(
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 8px ${alpha("#99CCF3", 0.5)};
+      ${delay === 0 ? `box-shadow: 0 0 0 8px ${alpha("#99CCF3", 0.5)}` : null};
       outline: none;
       width: 100px;
       height: 100px;

diff --git a/src/components/LatencySlider/VerticalSliderContainer.js b/src/components/LatencySlider/VerticalSliderContainer.js
@@ -6,8 +6,9 @@ const VerticalSliderContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   padding: '3rem',
   margin: '5rem',
-  marginTop: '0rem',
-  gap: theme.spacing(30), // Adjust the gap between sliders
+  marginBottom: '0.75rem',
+  marginTop: '0.75rem',
+  gap: theme.spacing(50), // Adjust the gap between sliders
 }));
 
 export default VerticalSliderContainer;
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -56,25 +56,23 @@
 }
 
 .footer {
-  display: flex;
+  width: 99.5%;
   align-self: center;
   align-items: center;
-  width: 99.5%;
-  opacity: 92%;
-  outline: none;
-  max-height: 180px;
-  margin-top: auto;
-  bottom: 0;
   background-color: #f9f9f9;
   opacity: 92%;
   border-top-right-radius: 1.5rem; /* 24px */
   border-top-left-radius: 1.5rem; /* 24px */
   box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 
+.footer__inner {
+  display: flex;
+  width: 100%;
+}
+
 .footer__items a {
   color: #1d3370;
-  align-content: center;
 }
 
 .footer__items a:hover {
@@ -83,26 +81,17 @@
 }
 
 .footer__title {
-  padding-top:0.75rem;
   color: #1d3370;
-  font-size: 1.08rem;
-  align-self: center;
+  font-weight: 800;
+  font-size: 1.10rem;
 }
 
-/* .footer__copyright {
-  color: #1d3370;
-  font-size: 0.9rem;
-  padding-bottom: 0.5rem;
-} */
-
 .navbar {
-  display: flex;
   align-items: center;
   width: 99.5%;
   height: 50px;
   align-self: center;
   background-color: #f9f9f9;
-  margin-bottom: 0.25rem;
   opacity: 92%;
   outline: none;
   border-bottom-right-radius: 1.5rem; /* 24px */

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,31 +3,17 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
 import Puzzle from '@site/src/components/Puzzle'
-import { useState, useEffect, useRef } from 'react'
+import { useRef } from 'react'
 
 export default function Home() {
   const featureRef = useRef(null)
-  const [scrollDownArrowOpacity, setScrollDownArrowOpacity] = useState(0.9)
-
-  const setScroll = () => {
-    const displayValue =
-      window.scrollY / document.body.scrollHeight < 0.05 ? 1 : 0;
-    setScrollDownArrowOpacity(displayValue)
-  }
 
   const handleScrollClick = () => {
     if (featureRef.current) {
-      featureRef.current.scrollIntoView({ behavior: 'smooth'});
+      featureRef.current.scrollIntoView({ behavior: 'smooth' });
     }
   }
 
-  useEffect(() => {
-    window.addEventListener('scroll', setScroll)
-    return () => {
-      window.removeEventListener('scroll', setScroll)
-    }
-  }, [])
-
   const { siteConfig } = useDocusaurusContext()
 
   return (
@@ -44,7 +30,7 @@ export default function Home() {
       <div className="pt-2 pb-20">
         <Link
           href="#_"
-          className="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-xl text-white font-lg font-800 bg-syncoGreen shadow-lg shadow-green-500/400 rounded-md hover:syncoGreen-800 hover:no-underline sm:w-auto sm:mb-0"
+          className="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-xl text-white font-lg font-800 bg-syncoGreen hover:shadow-lg syncoGreen-400/500 rounded-md hover:syncoGreen-800 hover:no-underline sm:w-auto sm:mb-0"
           data-primary="green-500"
           data-rounded="rounded-3xl"
           data-primary-reset="{}"
@@ -55,8 +41,7 @@ export default function Home() {
       </div>
       <div className="pt-8 pb-0">
         <img
-          style={{ opacity: scrollDownArrowOpacity  }}
-          className="opacity-10 animate-pulse"
+          className="cursor-pointer opacity-10 animate-pulse"
           src="/img/icons/scroll-down-arrow.png"
           onClick={handleScrollClick}
         ></img>

diff --git a/src/pages/team.js b/src/pages/team.js
@@ -4,26 +4,26 @@ import Layout from '@theme/Layout'
 export default function Team() {
   return (
     <Layout title="The Team" description="Syncosaurus Team Page">
-      <div class="mx-auto w-full max-w-4xl px-8 py-8 text-center sm:py-24">
-        <h1 class="mb-8 text-[32px] sm:text-5xl text-syncoBlue">The Team</h1>
-        <div class="mt-5">
-          <div class="mx-auto h-[2px] max-w-md bg-gradient-to-r from-transparent via-syncoGreen to-transparent"></div>
+      <div className="mx-auto w-full max-w-4xl px-8 py-8 text-center sm:py-24">
+        <h2 className="mb-8 mt-0 text-[32px] sm:text-5xl text-syncoBlue">The Team</h2>
+        <div className="mt-5">
+          <div className="mx-auto h-[2px] max-w-md bg-gradient-to-r from-transparent via-syncoGreen to-transparent"></div>
         </div>
-        <p class="mx-auto mb-0 mt-4 max-w-prose text-lg sm:mt-8 sm:text-2xl text-syncoBlue"></p>
-        <div class="mt-0 grid grid-cols-1 sm:mt-4 sm:grid-cols-3">
-          <div class="mt-4 flex flex-col items-center p-4">
+        <p className="mx-auto mb-0 mt-4 max-w-prose text-lg sm:mt-8 sm:text-2xl text-syncoBlue"></p>
+        <div className="mt-0 grid grid-cols-1 sm:mt-4 sm:grid-cols-3">
+          <div className="mt-4 flex flex-col items-center p-4">
             <img
               src="/img/team/alex.jpeg"
               alt="Alex Sklar"
-              class="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
+              className="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
             />
-            <h3 class="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
+            <h3 className="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
               Alex Sklar
             </h3>
-            <p class="text-gray-500 text-center text-lg sm:text-md md:text-lg">
+            <p className="text-gray-500 text-center text-lg sm:text-md md:text-lg">
               Portland, OR
             </p>
-            <div class="flex gap-3">
+            <div className="flex gap-3">
               <a
                 href="https://www.google.com"
                 target="_blank"
@@ -53,19 +53,19 @@ export default function Team() {
               </a>
             </div>
           </div>
-          <div class="mt-4 flex flex-col items-center p-4">
+          <div className="mt-4 flex flex-col items-center p-4">
             <img
               src="/img/team/erik.jpeg"
               alt="Erik Margetis"
-              class="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
+              className="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
             />
-            <h3 class="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
+            <h3 className="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
               Erik Margetis
             </h3>
-            <p class="text-gray-500 text-center text-lg sm:text-md md:text-lg">
+            <p className="text-gray-500 text-center text-lg sm:text-md md:text-lg">
               San Francisco, CA
             </p>
-            <div class="flex gap-3">
+            <div className="flex gap-3">
               <a
                 href="https://www.google.com"
                 target="_blank"
@@ -95,19 +95,19 @@ export default function Team() {
               </a>
             </div>
           </div>
-          <div class="mt-4 flex flex-col items-center p-4">
+          <div className="mt-4 flex flex-col items-center p-4">
             <img
               src="/img/team/joseph.jpeg"
               alt="Joseph Liang"
-              class="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
+              className="mix-blend-screen mb-4 mt-4 block w-11/12 max-w-[200px] rounded-full"
             />
-            <h3 class="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
+            <h3 className="text-syncoBlue mb-3 mt-3 text-center text-2xl sm:text-lg md:text-2xl">
               Joseph Liang
             </h3>
-            <p class="text-gray-500 text-center text-lg sm:text-md md:text-lg">
+            <p className="text-gray-500 text-center text-lg sm:text-md md:text-lg">
               Oakland, CA
             </p>
-            <div class="flex gap-3">
+            <div className="flex gap-3">
               <a
                 href="https://www.google.com"
                 target="_blank"