Small UI Update

manuelc2209 · Dec 21, 2023 · 324f9ff · 324f9ff
1 parent 0c20a51
commit 324f9ff
Show file tree

Hide file tree

Showing 16 changed files with 147 additions and 154 deletions.
diff --git a/public/bg.gif b/public/bg.gif
diff --git a/public/blurred_video.mp4 b/public/blurred_video.mp4
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,57 +1,18 @@
 import React from 'react';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
-import { StyledColumn, StyledContainer, StyledContent, StyledHeader, StyledOverlay } from './styles';
 import data from './data/index.json';
-import { Button, Portefolio } from './components';
 import { ProjectsUI, ForumOutlet, Threads } from './pages';
 import { ForumContextWrapper } from './pages/forum/context/forumContext';
+import { Home } from './pages/home';
 
 export const App: React.FC = () => {
-    const navigate = useNavigate();
     const { profile } = data;
 
-    const handleProjects = () => {
-        navigate('/projects');
-    };
-
-    const handleBack = () => {
-        navigate('/');
-    };
-
-    const App = (
-        <StyledContainer>
-            <StyledHeader>
-                <Button size="large" label="Projects" onClick={() => handleProjects && handleProjects()} />
-            </StyledHeader>
-            <StyledContent>
-                <StyledOverlay>
-                    <StyledColumn>
-                        <Portefolio
-                            label={profile.label}
-                            img={profile.img}
-                            headline={profile.headline}
-                            currentStack={profile.currentTechStack}
-                            otherStack={profile.otherToolsFrameworks}
-                            cards={profile.cards}
-                        />
-                    </StyledColumn>
-                </StyledOverlay>
-            </StyledContent>
-        </StyledContainer>
-    );
-
-    const buttonProps = {
-        label: 'Go back',
-        size: 'large',
-        disabled: false,
-        onClick: () => handleBack()
-    };
-
     return (
         <Routes>
-            <Route path="/" element={App} />
-            <Route path="/projects" element={<ProjectsUI buttonProperties={buttonProps} />} />
+            <Route path="/" element={<Home profile={profile} />} />
+            <Route path="/projects" element={<ProjectsUI />} />
             <Route path="/forum" element={<ForumOutlet />}>
                 <Route
                     path="/forum"

diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`renders snapshot correctly 1`] = `
 <div
-  className="sc-ezOQGI jLXQH"
+  className="sc-AHaJN bWdlo"
 >
   <div
-    className="sc-kDvujY lGomR sc-jIRcFI efuAGQ"
+    className="sc-kDvujY hEHKHG"
   >
     <button
       aria-label="Button"
@@ -25,13 +25,21 @@ exports[`renders snapshot correctly 1`] = `
     </button>
   </div>
   <div
-    className="sc-bYMpWt gOxeEx"
+    className="sc-hTBuwn kbcjXJ"
   >
+    <video
+      autoPlay={true}
+      className="sc-khsqcC goTqhi"
+      loop={true}
+      muted={true}
+      playsInline={true}
+      src="/blurred_video.mp4"
+    />
     <div
-      className="sc-kMjNwy fGowAf"
+      className="sc-jfTVlA YtWqg"
     >
       <div
-        className="sc-ilhmMj pojUl"
+        className="sc-gScZFl fcdiOt"
       >
         <div
           className="sc-iJnaPW dFTIFI"
@@ -389,10 +397,10 @@ exports[`renders snapshot correctly 1`] = `
 exports[`renders without crashing 1`] = `
 <div>
   <div
-    class="sc-ezOQGI jLXQH"
+    class="sc-AHaJN bWdlo"
   >
     <div
-      class="sc-kDvujY lGomR sc-jIRcFI efuAGQ"
+      class="sc-kDvujY hEHKHG"
     >
       <button
         aria-label="Button"
@@ -407,13 +415,20 @@ exports[`renders without crashing 1`] = `
       </button>
     </div>
     <div
-      class="sc-bYMpWt gOxeEx"
+      class="sc-hTBuwn kbcjXJ"
     >
+      <video
+        autoplay=""
+        class="sc-khsqcC goTqhi"
+        loop=""
+        playsinline=""
+        src="/blurred_video.mp4"
+      />
       <div
-        class="sc-kMjNwy fGowAf"
+        class="sc-jfTVlA YtWqg"
       >
         <div
-          class="sc-ilhmMj pojUl"
+          class="sc-gScZFl fcdiOt"
         >
           <div
             class="sc-iJnaPW dFTIFI"

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`renders snapshot correctly 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bcXHqe fMdByr"
+        class="sc-bcXHqe jwMHZI"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bcXHqe fMdByr"
+      class="sc-bcXHqe jwMHZI"
     />
   </div>,
   "debug": [Function],
@@ -75,13 +75,13 @@ exports[`renders without crashing 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bcXHqe fMdByr"
+        class="sc-bcXHqe jwMHZI"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bcXHqe fMdByr"
+      class="sc-bcXHqe jwMHZI"
     />
   </div>,
   "debug": [Function],

diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx
@@ -12,13 +12,11 @@ export const StyledHeader = styled.div<StyledHeaderProps>`
     position: relative;
     width: 100%;
     display: flex;
+    flex: 1 0 auto;
     background: ${setColor};
     flex-direction: row;
     justify-content: flex-end;
     height: 60px;
     align-items: center;
-
-    > * {
-        padding: 0 13px;
-    }
+    padding: 0 16px;
 `;
diff --git a/src/pages/forum/components/header/index.tsx b/src/pages/forum/components/header/index.tsx
@@ -9,24 +9,12 @@ export const Header = () => {
     const navigate = useNavigate();
 
     return (
-        <>
-            <StyledHeaderWrapper>
-                <StyledButton size="large" buttonType="border" label="Back" onClick={() => navigate(-1)} />
-                <StyledCTAEnd>
-                    <StyledButton
-                        size="large"
-                        buttonType="border"
-                        label="Login"
-                        onClick={() => navigate('/forum/login')}
-                    />
-                    <StyledButton
-                        size="large"
-                        buttonType="border"
-                        label="Sign Up"
-                        onClick={() => navigate('/forum/register')}
-                    />
-                </StyledCTAEnd>
-            </StyledHeaderWrapper>
-        </>
+        <StyledHeaderWrapper>
+            <StyledCTAEnd>
+                <StyledButton size="large" label="Login" onClick={() => navigate('/forum/login')} />
+                <StyledButton size="large" label="Sign Up" onClick={() => navigate('/forum/register')} />
+            </StyledCTAEnd>
+            <StyledButton size="large" label="Back" onClick={() => navigate(-1)} />
+        </StyledHeaderWrapper>
     );
 };
diff --git a/src/pages/forum/components/header/styles.tsx b/src/pages/forum/components/header/styles.tsx
@@ -6,17 +6,14 @@ export const StyledHeaderWrapper = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    height: 64px;
+    height: 60px;
     gap: 16px;
-    background: #e3e3e3;
+    background: #151515;
     align-items: center;
     padding: 16px;
-    border: 1px solid #bdbdbd;
 `;
 
-export const StyledButton = styled(Button)`
-    color: #000000;
-`;
+export const StyledButton = styled(Button)``;
 
 export const StyledCTAEnd = styled.div`
     display: flex;

diff --git a/src/pages/forum/layout/ThreadsView/styles.tsx b/src/pages/forum/layout/ThreadsView/styles.tsx
@@ -16,11 +16,15 @@ export const StyledThreadContainer = styled.div`
 `;
 
 export const StyledSideSection = styled.div`
+    width: 300px;
+    position: relative;
+`;
+
+export const StyledFixedContainer = styled.div`
+    position: fixed;
     display: flex;
     flex-direction: column;
-    min-width: 300px;
     padding: 16px;
     gap: 16px;
     background-color: #f7f7f7;
-    border: 1px solid #dddddd;
 `;
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button, Header, Portefolio } from '../../components';
+
+import { HomeProps } from './types';
+import { StyledColumn, StyledContainer, StyledOverlay, StyledVideo, StyledVideoContainer } from './styles';
+
+export const Home: React.FC<HomeProps> = ({ profile }) => {
+    const navigate = useNavigate();
+
+    return (
+        <StyledContainer>
+            <Header>
+                <Button size="large" label="Projects" onClick={() => navigate('/projects')} />
+            </Header>
+            <StyledVideoContainer>
+                <StyledVideo src="/blurred_video.mp4" autoPlay loop playsInline muted />
+                <StyledOverlay>
+                    <StyledColumn>
+                        <Portefolio
+                            label={profile.label}
+                            img={profile.img}
+                            headline={profile.headline}
+                            currentStack={profile.currentTechStack}
+                            otherStack={profile.otherToolsFrameworks}
+                            cards={profile.cards}
+                        />
+                    </StyledColumn>
+                </StyledOverlay>
+            </StyledVideoContainer>
+        </StyledContainer>
+    );
+};
diff --git a/src/pages/home/index.ts b/src/pages/home/index.ts
@@ -0,0 +1 @@
+export * from './Home';
diff --git a/src/styles.tsx → src/pages/home/styles.tsx b/src/styles.tsx → src/pages/home/styles.tsx
@@ -1,21 +1,20 @@
 import styled from 'styled-components';
 
-import { Header } from './components';
-import { COLOR_PRIMARY_2 } from './GlobalStyles';
-
 export const StyledContainer = styled.div`
     height: 100%;
     display: flex;
     flex-direction: column;
 `;
 
-export const StyledContent = styled.div`
+export const StyledVideo = styled.video`
     display: flex;
     flex-direction: row;
-    background-image: url('https://64.media.tumblr.com/2df67fe7bdbba84c88cdbbdf84fd2743/tumblr_nqgvxz92HC1s85u2fo1_500.gif');
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+    object-fit: cover;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
     position: relative;
     height: inherit;
     overflow: auto;
@@ -31,7 +30,19 @@ export const StyledContent = styled.div`
     }
 `;
 
+export const StyledVideoContainer = styled.div`
+    position: relative;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    left: 0;
+`;
+
 export const StyledOverlay = styled.div`
+    position: absolute;
+    top: 0;
+    height: inherit;
     display: flex;
     flex: 1;
     background-color: #1e476c6e;
@@ -57,16 +68,3 @@ export const StyledColumn = styled.div`
         width: 100%;
     }
 `;
-
-export const StyledHeader = styled(Header)`
-    border-bottom: 1px solid ${COLOR_PRIMARY_2};
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    height: 60px;
-    align-items: center;
-
-    > * {
-        margin: 10px;
-    }
-`;
diff --git a/src/pages/home/types.ts b/src/pages/home/types.ts
@@ -0,0 +1,3 @@
+export interface HomeProps {
+    profile: any;
+}