Merge pull request #154 from StackOverflowIsBetterThanAnyAI/149-add-shadow-to-hero-section

add shadows, fix navigation expanding when filtering

Author: StackOverflowIsBetterThanAnyAI

cypress/e2e/navigation_large_screen.cy.js

@@ -16,7 +16,12 @@ describe('twitch-app contains navigation bar for large screen sizes', () => {
     it('displays the whole navigation bar content for large screen sizes', () => {
         cy.get('[data-testid="navigation"]').should('have.length', 1)
 
-        cy.get('[data-testid="navigation"]').children().should('have.length', 3)
+        cy.get('[data-testid="navigation"]').children().should('have.length', 1)
+
+        cy.get('[data-testid="navigation"]')
+            .children()
+            .children()
+            .should('have.length', 3)
     })
 
     it('displays the homepage button for large screen sizes', () => {

cypress/e2e/navigation_small_screen.cy.js

@@ -17,7 +17,12 @@ describe('twitch-app contains navigation bar for small screen sizes', () => {
     it('displays the whole navigation bar content for small screen sizes', () => {
         cy.get('[data-testid="navigation"]').should('have.length', 1)
 
-        cy.get('[data-testid="navigation"]').children().should('have.length', 3)
+        cy.get('[data-testid="navigation"]').children().should('have.length', 1)
+
+        cy.get('[data-testid="navigation"]')
+            .children()
+            .children()
+            .should('have.length', 3)
     })
 
     it('displays the homepage button for small screen sizes', () => {

src/components/UI/navigation/Navigation.tsx

@@ -342,11 +342,11 @@ const Navigation = () => {
     return (
         <div className="sticky top-0 z-10" data-testid="navigation-container">
             <nav
-                className={`bg-zinc-925 text-slate-300 py-2 px-4 h-16
+                className={`bg-zinc-925 text-slate-300 
                 transition-opacity duration-500 ease-in-out ${navOpacity}`}
                 data-testid="navigation"
             >
-                <div className="max-w-[2048px] flex justify-between w-full m-auto">
+                <div className="max-w-[2048px] flex justify-between w-full py-2 px-4 h-16 m-auto">
                     <HomeIcon />
                     {contextScreenWidth === 'TABLET' ||
                     contextScreenWidth === 'DESKTOP' ? (

src/components/UI/navigation/SearchResultSuggestion.tsx

@@ -41,7 +41,7 @@ const SearchResultSuggestion = forwardRef<
 
     return (
         <div
-            className="outline outline-zinc-700 rounded-lg bg-zinc-900 flex flex-col overflow-auto"
+            className="outline outline-zinc-700 shadow-zinc-900 shadow-xl rounded-lg bg-zinc-900 flex flex-col overflow-auto"
             style={{
                 maxHeight: '377px',
                 minHeight: `clamp(0px, ${

src/components/streamFeed/StreamHero.tsx

@@ -34,15 +34,15 @@ const StreamHero = ({ bgColors, filteredStreamData }: StreamHeroProps) => {
             {contextScreenWidth === 'DESKTOP' ? (
                 <article
                     className="flex w-4/5 max-w-6xl m-auto p-4 my-4 items-center gap-4
-                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 rounded-lg"
+                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 shadow-zinc-900 shadow-lg rounded-lg"
                     data-testid="streamfeed-article-0"
                 >
                     <div className={`w-1/2 ${bgColors[0]} aspect-video`}>
                         <StreamPlayer
                             channel={filteredStreamData.data[0].user_login}
                         />
                     </div>
-                    <section className="flex items-center gap-x-2 w-1/2 bg-zinc-800 p-4 rounded-xl">
+                    <section className="flex items-center gap-x-2 w-1/2 bg-zinc-800 shadow-zinc-800/75 shadow-md p-4 rounded-xl">
                         <StreamProfilePicture
                             isHeroPicture
                             user_id={filteredStreamData.data[0].user_id}
@@ -79,7 +79,7 @@ const StreamHero = ({ bgColors, filteredStreamData }: StreamHeroProps) => {
             ) : contextScreenWidth === 'TABLET' ? (
                 <article
                     className="flex flex-col w-full m-auto p-4 my-4 gap-2
-                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 rounded-lg"
+                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 shadow-zinc-900 shadow-lg rounded-lg"
                     data-testid="streamfeed-article-0"
                 >
                     <div className="flex items-center gap-4">
@@ -88,7 +88,7 @@ const StreamHero = ({ bgColors, filteredStreamData }: StreamHeroProps) => {
                                 channel={filteredStreamData.data[0].user_login}
                             />
                         </div>
-                        <section className="flex items-center gap-x-2 w-1/2 bg-zinc-800 p-4 rounded-xl">
+                        <section className="flex items-center gap-x-2 w-1/2 bg-zinc-800 shadow-zinc-800/75 shadow-md p-4 rounded-xl">
                             <StreamProfilePicture
                                 isHeroPicture
                                 user_id={filteredStreamData.data[0].user_id}
@@ -127,16 +127,16 @@ const StreamHero = ({ bgColors, filteredStreamData }: StreamHeroProps) => {
                 </article>
             ) : (
                 <article
-                    className="flex flex-col m-auto p-4 my-4 gap-2
-                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 rounded-lg"
+                    className="flex flex-col m-auto p-4 my-4 gap-4
+                    bg-gradient-to-b from-zinc-700 to-zinc-700/80 shadow-zinc-900 shadow-lg rounded-lg"
                     data-testid="streamfeed-article-0"
                 >
                     <div className={`w-full ${bgColors[0]} aspect-video`}>
                         <StreamPlayer
                             channel={filteredStreamData.data[0].user_login}
                         />
                     </div>
-                    <section className="flex items-center gap-x-2 bg-zinc-800 p-4 rounded-xl">
+                    <section className="flex items-center gap-x-2 bg-zinc-800 shadow-zinc-800/75 shadow-md p-4 rounded-xl">
                         <StreamProfilePicture
                             isHeroPicture
                             user_id={filteredStreamData.data[0].user_id}

src/components/streamFeed/StreamPlayer.tsx

@@ -64,7 +64,7 @@ const StreamPlayer: React.FC<StreamPlayerProps> = ({ channel }) => {
         }
     }, [height])
 
-    return <div ref={containerRef}></div>
+    return <div ref={containerRef} className="shadow-zinc-900 shadow-lg"></div>
 }
 
 export default StreamPlayer