From 31809d952c8bafde3f63e2c1d952cc013149940e Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Thu, 17 Sep 2020 00:19:01 +0000
Subject: [PATCH] feat(frontend): design updates for responsive titlecards

---
 src/components/Discover/index.tsx       | 67 +++++++++++++++++++++----
 src/components/Layout/Sidebar/index.tsx | 48 ++++++++++++++++++
 src/components/MovieDetails/index.tsx   | 10 ++--
 src/components/Search/index.tsx         |  2 +-
 src/components/Slider/index.tsx         |  5 +-
 src/components/TitleCard/index.tsx      |  7 +--
 6 files changed, 114 insertions(+), 25 deletions(-)

diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index da81d8b60..eebe5d491 100644
--- a/src/components/Discover/index.tsx
+++ b/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">
-            Recent Requests
-          </h2>
+          <Link href="/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">
+              <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">
-            Popular Movies
-          </h2>
+          <Link href="/discover/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">
+              <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">
-            Popular TV Shows
-          </h2>
+          <Link href="/discover/tv">
+            <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">
+              <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
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index cec9e1394..c9f291f6e 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/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 }) => {
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index c27d9e0e2..edd4f4604 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/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="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
+          <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-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}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 1385e7949..f9b1a2b53 100644
--- a/src/components/Search/index.tsx
+++ b/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;
 
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 456ee8e8e..3cd5dba99 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -15,10 +15,7 @@ const Slider: React.FC<SliderProps> = ({
   isEmpty,
 }) => {
   return (
-    <div
-      className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
-      style={{ height: 295 }}
-    >
+    <div className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4">
       {items?.map((item, index) => (
         <div
           key={`${sliderKey}-${index}`}
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 62ebe3400..ea07286e4 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -83,12 +83,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
   }
 
   return (
-    <div
-      style={{
-        width: 180,
-        height: 270,
-      }}
-    >
+    <div className="w-36 sm:w-36 md:w-44">
       <MovieRequestModal
         type="request"
         visible={showRequestModal}