feat(frontend): design updates for responsive titlecards

src/components/Discover/index.tsx

@@ -5,6 +5,7 @@ import TitleCard from '../TitleCard';
 import { MediaRequest } from '../../../server/entity/MediaRequest';
 import RequestCard from '../TitleCard/RequestCard';
 import Slider from '../Slider';
+import Link from 'next/link';
 
 interface MovieDiscoverResult {
   page: number;
@@ -36,9 +37,25 @@ const Discover: React.FC = () => {
     <>
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+          <Link href="/requests">
-            Recent Requests
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
-          </h2>
+              <span>Recent Requests</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
         </div>
       </div>
       <Slider
@@ -55,9 +72,25 @@ const Discover: React.FC = () => {
       />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+          <Link href="/discover/movies">
-            Popular Movies
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
-          </h2>
+              <span>Popular Movies</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
         </div>
       </div>
       <Slider
@@ -81,9 +114,25 @@ const Discover: React.FC = () => {
       />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
         <div className="flex-1 min-w-0">
-          <h2 className="text-xl leading-7 text-white sm:text-2xl sm:leading-9 sm:truncate">
+          <Link href="/discover/tv">
-            Popular TV Shows
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
-          </h2>
+              <span>Popular TV Shows</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
         </div>
       </div>
       <Slider

src/components/Layout/Sidebar/index.tsx

@@ -38,6 +38,54 @@ const SidebarLinks: SidebarLinkProps[] = [
     ),
     activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
   },
+  {
+    href: '/requests',
+    name: 'Requests',
+    svgIcon: (
+      <svg
+        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    ),
+    activeRegExp: /^\/requests/,
+  },
+  {
+    href: '/settings',
+    name: 'Settings',
+    svgIcon: (
+      <svg
+        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+      </svg>
+    ),
+    activeRegExp: /^\/settings/,
+  },
 ];
 
 const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {

src/components/MovieDetails/index.tsx

@@ -235,26 +235,26 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           <p className="pt-2 text-sm md:text-base">{data.overview}</p>
         </div>
         <div className="w-full md:w-80 mt-8 md:mt-0">
-          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-700">
+          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-800">
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
               <span className="text-sm">Status</span>
               <span className="flex-1 text-right text-cool-gray-400 text-sm">
                 {data.status}
               </span>
             </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
               <span className="text-sm">Revenue</span>
               <span className="flex-1 text-right text-cool-gray-400 text-sm">
                 {data.revenue}
               </span>
             </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
               <span className="text-sm">Budget</span>
               <span className="flex-1 text-right text-cool-gray-400 text-sm">
                 {data.budget}
               </span>
             </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
               <span className="text-sm">Original Language</span>
               <span className="flex-1 text-right text-cool-gray-400 text-sm">
                 {data.originalLanguage}

src/components/Search/index.tsx

@@ -81,7 +81,7 @@ const Search: React.FC = () => {
           No Results
         </div>
       )}
-      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
         {titles?.map((title) => {
           let titleCard: React.ReactNode;
 

src/components/Slider/index.tsx

@@ -15,10 +15,7 @@ const Slider: React.FC<SliderProps> = ({
   isEmpty,
 }) => {
   return (
-    <div
+    <div className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4">
-      className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-      style={{ height: 295 }}
-    >
       {items?.map((item, index) => (
         <div
           key={`${sliderKey}-${index}`}

src/components/TitleCard/index.tsx

@@ -83,12 +83,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
   }
 
   return (
-    <div
+    <div className="w-36 sm:w-36 md:w-44">
-      style={{
-        width: 180,
-        height: 270,
-      }}
-    >
       <MovieRequestModal
         type="request"
         visible={showRequestModal}