Add nexus gates and sound ui tweaks

TempleDAO · Feb 27, 2023 · bffbf07 · bffbf07
1 parent 2ddecda
commit bffbf07
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/apps/dapp/src/components/Pages/Nexus/NexusGates.tsx b/apps/dapp/src/components/Pages/Nexus/NexusGates.tsx
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import gatesImage from 'assets/images/EnterTheGates.jpg';
+import { Link } from 'react-router-dom';
+
+export const NexusGates = () => {
+  return (
+    <NexusGatesContainer>
+      <KeyForm onSubmit={(e) => e.preventDefault()}>
+        <Link to="/nexus">
+          <EnterButton>ENTER</EnterButton>
+        </Link>
+      </KeyForm>
+    </NexusGatesContainer>
+  );
+};
+
+const NexusGatesContainer = styled.div`
+  background-image: url(${gatesImage});
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100vw;
+`;
+
+const KeyForm = styled.form`
+  //   position: absolute;
+  //   bottom: 2rem;
+  //   right: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+
+const EnterButton = styled.button`
+  ${(props) => props.theme.typography.h2};
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: ${(props) => props.theme.palette.brand};
+  cursor: pointer;
+  font-size: 2rem;
+  padding: 0rem 1rem;
+  &:focus {
+    outline: 1px solid ${(props) => props.theme.palette.brand25};
+  }
+`;
diff --git a/apps/dapp/src/components/Pages/Nexus/NexusSoundscape.tsx b/apps/dapp/src/components/Pages/Nexus/NexusSoundscape.tsx
@@ -23,7 +23,7 @@ export const NexusSoundscape = () => {
     <FullScreenContainer>
       <NexusSoundscapeContainer>
         <SoundscapeIcon src={icon} onClick={soundIconClickHandler} />
-        <ReactHowler src={nexusSoundtrack} playing={true} volume={volume} />
+        <ReactHowler src={nexusSoundtrack} playing={true} loop volume={volume} />
       </NexusSoundscapeContainer>
     </FullScreenContainer>
   );
@@ -39,15 +39,24 @@ const FullScreenContainer = styled.div`
 `;
 
 const SoundscapeIcon = styled(Image)`
-  width: 50px;
-  height: 50px;
+  width: 30px;
+  height: 30px;
+  filter: invert(45%) sepia(100%) saturate(263%) hue-rotate(341deg) brightness(97%) contrast(86%);
 `;
 
 const NexusSoundscapeContainer = styled.div`
   position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   bottom: 0;
   right: 0;
-  margin-right: 100px;
-  margin-bottom: 100px;
+  margin-right: 25px;
+  margin-bottom: 25px;
+  height: 50px;
+  width: 50px;
+  background-color: #000;
+  border: 1px solid ${(props) => props.theme.palette.brandDark};
+  border-radius: 50%;
 `;
diff --git a/apps/dapp/src/main.tsx b/apps/dapp/src/main.tsx
@@ -34,6 +34,7 @@ import QuestPage from 'components/Pages/Nexus/Quest';
 import ForgePage from 'components/Pages/Nexus/Forge';
 import NexusUserManual from 'components/Pages/Nexus/Manual/UserManual';
 import NexusPartnerManual from 'components/Pages/Nexus/Manual/PartnerManual';
+import { NexusGates } from 'components/Pages/Nexus/NexusGates';
 
 // Separate Chunks
 const TeamPayments = React.lazy(() => import('components/Pages/TeamPayments'));
@@ -113,10 +114,7 @@ ReactDOM.render(
           )}
           {nexusOnly && (
             <>
-              <Route path="/" element={<PageLayout />}>
-                <Route path="" element={<Navigate replace to="/nexus/" />} />
-                <Route path="*" element={<Navigate replace to="/nexus/" />} />
-              </Route>
+              <Route path="" element={<NexusGates />} />
               <Route path="/nexus/*" element={<CoreLayout mode="nexus" />}>
                 <Route path="" element={<Navigate to="relic" />} />
                 <Route path="relic/*" element={<NexusPage />} />