solidify styling

src/App.tsx

@@ -61,9 +61,10 @@ function App() {
     tmdb.getSimilar(config, chosenMovie, setMoviesHandler, setSimilarMoviesAvailable)
   }, [config])
   const crossfadeImageStyles = {
-    width: "2560px",
-    minHeight: "100%",
-    aspectRatio: "16/9"
+    width: "100vw",
+    height: "100vh",
+    aspectRatio: "16/9",
+    objectFit: "clip"
   }
 
   const { width } = useWindowDimensions()
@@ -84,22 +85,27 @@ function App() {
 
   return (
     <>
-      <div id="background" className="-z-10 absolute">
-        <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
+
+      <div className="w-screen h-screen flex flex-col absolute overflow-hidden">
+        <div className="-z-10 absolute h-full blur-xl">
+          <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
+        </div>
+        <header className="bg-black py-2">
+          <HamburgerMenu setConfig={setConfig} />
+        </header>
+        <main className="flex flex-col sm:flex-row justify-center items-center gap-8 grow">
+          <Sidebar className="flex flex-col justify-between items-center max-w-sm bg-black/80 text-white w-96 h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+          <MovieWall
+            className="flex flex-wrap gap-2 max-w-5xl justify-center"
+            movies={movies}
+            setMovies={setMoviesHandler}
+            config={config}
+            setChosenMovie={setChosenMovie}
+            setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+          />
+        </main>
+        <footer className="bg-black min-h-10"></footer>
       </div>
-      <HamburgerMenu setConfig={setConfig} />
-      <main className="flex justify-center items-center gap-8">
-        WIDTH: {width}
-        <Sidebar className="flex flex-col max-w-sm" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-        <MovieWall
-          className="flex flex-wrap gap-2 max-w-5xl justify-center"
-          movies={movies}
-          setMovies={setMoviesHandler}
-          config={config}
-          setChosenMovie={setChosenMovie}
-          setSimilarMoviesAvailable={setSimilarMoviesAvailable}
-        />
-      </main>
     </>
   )
 }

src/objects/HamburgerMenu.tsx

@@ -3,7 +3,7 @@ export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
   setConfig: Function;
 }
 
-export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
+export function HamburgerMenu({ setConfig, className }: HamburgerMenuProps) {
   const languages = [
     {
       value: "es",
@@ -41,7 +41,7 @@ export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
   //     }
   //   })
   // }
-  return <div id="hamburger">
+  return <div id="hamburger" className={className}>
     <select onChange={handleLangChange}>
       {languages.map((language) => <option value={language.value} key={language.value}>{language.label}</option>)}
     </select>

src/objects/movie-wall.tsx

@@ -45,7 +45,7 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
     posters.push(
-      <Poster className="w-36 h-58 rounded-xl overflow-hidden flex justify-center relative" isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster className=" w-24 sm:w-36 aspect-poster rounded-xl overflow-hidden flex justify-center relative" isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}

src/objects/sidebar.tsx

@@ -19,17 +19,20 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
       "Summary unavailable." :
       ""
   return <div id="sidebar" className={className}>
-    <h1>{movie?.title ?? "loading"}</h1>
-    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
-      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
+    <h1 className="font-bold text-lg my-4 h-14 overflow-hidden">{movie?.title ?? "loading"}</h1>
+    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-72 aspect-poster flex justify-center">
+      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
+        objectFit: "clip",
+        height: "100%"
+      }} />
     </a>
     {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-    <p id="summary" className="">{movie.overview === null ? "Loading"
+    <p id="summary" className="h-44 overflow-scroll mt-4 p-2">{movie.overview === null ? "Loading"
       : movie.overview === "" ? apology
         : movie.overview}
     </p>
-    <WhereToWatch watchProviders={watchProviders} config={config} />
-  </div>
+    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-32 flex flex-col justify-end mb-4" />
+  </div >
 
 
 }

src/objects/whereToWatch.tsx

@@ -63,12 +63,12 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
 }
 function ProviderIcons({ providerList, link }: ProviderIconsProps) {
   const list = providerList.map((e: any, i: number) => {
-    return <div className="watch-logo">
+    return <div className="w-6 aspect-square">
       <a href={link}>
         <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
     </div>
   })
-  return <div className="watch-logos-container">
+  return <div id="logos-container" className="w-full flex">
     {list}
   </div>
 }
@@ -76,17 +76,19 @@ function watchProvidersExist(watchProviders: any) {
   return watchProviders?.link
 
 }
-export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
-  if (!watchProvidersExist(watchProviders)) {
-    return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
-  }
-  return <><footer id="sidebar-footer">
-    <div id="watch-providers-container">
-      {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
-    </div>
-    <p>Powered by Just Watch.</p>
-  </footer>
+export function WhereToWatch({ watchProviders, config, className }: WhereToWatchProps) {
+  return <><footer id="sidebar-footer" className={className}>
+    {watchProvidersExist(watchProviders) ?
+      <>
+        <div className="flex w-full justify-around">
+          {watchProviders?.flatrate?.length > 0 ? <div className=""><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.rent?.length > 0 ? <div className=""><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+        </div>
+        <p className="w-fit mx-auto mt-4">Powered by Just Watch.</p>
+      </> :
+      <p className="w-fit mx-auto">{config.language == " es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
+    }
+  </footer >
   </>
 }

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      aspectRatio: {
+        poster: "2 / 3",
+      },
+    },
   },
   plugins: [],
 };