chore: add ui improvements

unconditionalday · Oct 16, 2023 · b1a280e · b1a280e
1 parent 5033a01
commit b1a280e
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 27 deletions.
diff --git a/components/Feeds.tsx b/components/Feeds.tsx
@@ -6,21 +6,21 @@ export interface FeedsProps {
 
 export const Feeds = (props: FeedsProps) => {
   return (
-    <div className="md:columns-2 lg:columns-3 columns-1 gap-8 px-8 mt-10 container ">
+    <div className="md:columns-2 lg:columns-3 columns-1 gap-8 px-8 mb-10 container">
       {props.feeds.map((feed) => (
         <div
           key={feed.link}
           className="break-inside-avoid-column article w-full bg-white p-0 md:p-6 block mb-8 md:mb-4 rounded-lg border border-black  hover:shadow-xl dark:bg-black dark:border-black dark:hover:bg-black"
         >
           <a href={feed.link} target={"blank"}>
-            <h6 className="font-extralight text-xs md:text-sm py-2">
+            <h6 className="font-extralight text-sm md:text-sm py-2">
               {feed.source}
             </h6>
-            <h5 className="p-2 md:p-2 mb-2 text-xl md:text-2xl text-start font-bold tracking-tight text-gray-900 dark:text-white">
+            <h5 className="p-2 md:p-2 text-2xl text-start font-bold tracking-tight text-gray-900 dark:text-white">
               {feed.title}
             </h5>
             <hr />
-            <p className="m-2 text-base py-4 leading-relaxed text-gray-700 dark:text-gray-400">
+            <p className="m-2 text-base py-2 text-summarize leading-relaxed text-gray-700 dark:text-gray-400">
               {feed.summary}
             </p>
           </a>

diff --git a/components/SearchContextDetails.tsx b/components/SearchContextDetails.tsx
@@ -16,10 +16,10 @@ export const SearchContext = (props: SearchContextProps) => {
           />
         </div>
         <div className="prose text-justify md:text-start p-3 md:p-6">
-          <div className="prose-xl md:prose-2xl prose-headings font-bold text-gray-900">
+          <div className="prose-2xl prose-headings font-bold text-gray-900">
             {props.contextDetails.title}
           </div>
-          <p className="mt-2 text-black prose-sm md:prose-base">
+          <p className="mt-2 text-black prose-base md:prose-base text-summarize">
             {props.contextDetails.summary}
           </p>
           <div className="text-center md:text-start">

diff --git a/components/SearchForm.tsx b/components/SearchForm.tsx
@@ -13,7 +13,7 @@ const SearchForm: FunctionComponent<SearchFormProps> = ({ onSubmitted }) => {
 
   return (
     <form
-      className="w-80 mx-auto md:p-0 mb-10"
+      className="w-50 md:w-80 text-sm mx-auto md:p-0 mb-10"
       onSubmit={handleQuerySubmitRequest}
     >
       <label
@@ -46,13 +46,13 @@ const SearchForm: FunctionComponent<SearchFormProps> = ({ onSubmitted }) => {
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             id="default-search"
-            className="outline outline-0 md:p-4 md:pl-10 text-center md:text-start bg-gray-50 w-full h-14 md:h-auto text-md md:text-sm"
+            className="outline outline-0 md:p-4 md:pl-10 pl-10 text-start bg-gray-50 w-full h-14 md:h-auto text-md md:text-sm"
             placeholder="Start search..."
             required
           ></input>
           <button
             type="submit"
-            className="text-white mr-2 md:h-auto w-2/4 md:w-1/2 bg-black hover:bg-black focus:ring-4 focus:outline-none focus:ring-black font-medium rounded-lg text-sm md:text-sm p-2 md:px-4 md:py-2 dark:bg-black dark:hover:bg-black dark:focus:ring-black "
+            className="text-white mr-2 md:h-auto w-2/4 md:w-1/2 bg-black hover:bg-black focus:ring-4 focus:outline-none font-medium rounded-lg text-sm md:text-sm p-2 md:px-4 md:py-2 dark:bg-black dark:hover:bg-black dark:focus:ring-black "
           >
             Search
           </button>

diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
@@ -4,12 +4,16 @@ import { FunctionComponent } from "react";
 interface HeaderProps {
   hideTagline?: boolean;
 }
-export const Header: FunctionComponent<HeaderProps> = ({ hideTagline }) => {
+export const Header: FunctionComponent<HeaderProps> = ({
+  hideTagline = true,
+}) => {
   return (
     <header className="header text-center flex flex-col p-0 md:p-10">
-      <h1 className="title p-5 md:p-0 text-5xl md:text-8xl font-black">
-        Unconditional.
-      </h1>
+      <Link href="/">
+        <h1 className="title p-10 md:p-0 text-4xl md:text-8xl font-black">
+          Unconditional.
+        </h1>
+      </Link>
       {!hideTagline && (
         <div className="flex flex-row justify-center items-center p-0 md:p-3 pb-10 md:pb-0">
           <h2 className="subtitle text-md md:text-xl">

diff --git a/components/layouts/Layout.tsx b/components/layouts/Layout.tsx
@@ -50,7 +50,7 @@ const Layout: FunctionComponent<LayoutProps> = ({
         <Header hideTagline={hideSearchBar} />
         {!hideSearchBar && <SearchForm onSubmitted={onSubmitted} />}
         <hr />
-        <main className="m-auto md:overflow-y-visible md:mb-0 md:pb-10">
+        <main className="m-auto overflow-y-scroll md:overflow-y-visible">
           {children}
         </main>
         <Footer />

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,12 +9,10 @@ interface PageProps {
 }
 function MyApp({ Component, pageProps }: AppProps<PageProps>) {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
-      <Layout hideSearchBar={pageProps.hideSearchBar}>
-        <Component {...pageProps} />
-        <Analytics />
-      </Layout>
-    </SWRConfig>
+    <Layout hideSearchBar={pageProps.hideSearchBar}>
+      <Component {...pageProps} />
+      <Analytics />
+    </Layout>
   );
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,6 @@
 import type { NextPage } from "next";
 const Home: NextPage = () => {
-  return (
-    <div
-      className={"w-full h-full flex flex-col items-center justify-center"}
-    ></div>
-  );
+  return <></>;
 };
 
 export default Home;
diff --git a/pages/search/[searchTerm].tsx b/pages/search/[searchTerm].tsx
@@ -26,7 +26,9 @@ const SearchPage: NextPage = () => {
         </div>
       )}
       {searchContextDetails && !isEmpty && (
-        <SearchContext contextDetails={searchContextDetails} />
+        <div className="mt-10 mb-10 md:mt-0 md:mb-0">
+          <SearchContext contextDetails={searchContextDetails} />
+        </div>
       )}
       {isLoading && <Loading />}
       {feeds && <Feeds feeds={feeds} />}

diff --git a/styles/globals.css b/styles/globals.css
@@ -78,7 +78,7 @@ input:-webkit-autofill:active {
   animation: animateGlow 10s ease infinite;
 }
 
-.feed {
+.text-summarize {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;