Improve UI

Author: MartinBraquet

web/components/home/home.tsx

@@ -65,7 +65,7 @@ export function LoggedOutHome() {
         className="text-2xl font-bold text-center">
         Find people who share your values, not just your photos.
       </h3>
-      <div className="w-full bg-gray-50 dark:bg-gray-950 py-8 mt-20">
+      <div className="w-full py-8 mt-20">
         <div className="max-w-6xl mx-auto px-4">
           <div className="grid md:grid-cols-3 gap-8 text-center">
             <AboutBox title="Radically Transparent" text="No algorithms. Every profile searchable."/>
@@ -74,6 +74,7 @@ export function LoggedOutHome() {
           </div>
         </div>
       </div>
+      <div className="block lg:hidden h-12"></div>
     </>
   );
 }

web/components/love-page.tsx

@@ -62,7 +62,7 @@ export function LovePage(props: {
       <Col
         className={clsx(
           'pb-[58px] lg:pb-0', // bottom bar padding
-          'text-ink-1000 mx-auto min-h-screen w-full max-w-[1440px] lg:grid lg:grid-cols-12'
+          'text-ink-1000 mx-auto min-h-screen w-full lg:grid lg:grid-cols-12'
         )}
       >
         <Toaster
@@ -74,13 +74,13 @@ export function LovePage(props: {
         ) : (
           <Sidebar
             navigationOptions={desktopSidebarOptions}
-            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav"
-          />
+            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-25"
+            />
         )}
         <main
           className={clsx(
             'flex flex-1 flex-col lg:mt-6 xl:px-2',
-            'col-span-10',
+            'col-span-8',
             className
           )}
         >
@@ -100,8 +100,7 @@ export function LovePage(props: {
 const Profiles = { name: 'Profiles', href: '/', icon: SolidHomeIcon };
 const ProfilesHome = { name: 'Profiles', href: '/', icon: HomeIcon };
 const faq = { name: 'FAQ', href: '/faq', icon: SolidQuestionIcon };
-const About = { name: 'About', href: '/about', icon: SolidQuestionIcon };
-const AboutQuestionMark = { name: 'About', href: '/about', icon: QuestionMarkCircleIcon };
+const About = { name: 'About', href: '/about', icon: QuestionMarkCircleIcon };
 const Signin = { name: 'Sign in', href: '/signin', icon: UserCircleIcon };
 const Notifs = {name: 'Notifs', href: `/notifications`, icon: NotificationsIcon};
 const NotifsSolid = {name: 'Notifs', href: `/notifications`, icon: SolidNotificationsIcon};
@@ -138,21 +137,21 @@ const getDesktopNav = (user: User | null | undefined) => {
       ProfilesHome,
       Notifs,
       Messages,
-      AboutQuestionMark,
+      About,
       faq
     )
 
   return buildArray(
     // { name: 'Profiles', href: '/', icon: HomeIcon },
-    AboutQuestionMark,
+    About,
     faq
   )
 }
 
 // No sidebar when signed out
 const getSidebarNavigation = (_toggleModal: () => void) => {
   return buildArray(
-    AboutQuestionMark,
+    About,
     faq
   )
 }

web/components/markdown.tsx

@@ -29,10 +29,10 @@ export default function MarkdownPage({content, filename}: Props) {
   return (
     <LovePage trackPageView={filename} className={'col-span-8'}>
       <Col className="items-center">
-        <Col className='bg-canvas-0 w-full rounded px-3 py-4 sm:px-6 space-y-4 customlink'>
+        <Col className='w-full rounded px-3 py-4 sm:px-6 space-y-4 customlink'>
           <ReactMarkdown
             components={{
-              a: ({node, ...props}) => <MarkdownLink {...props} />
+              a: ({node, children, ...props}) => <MarkdownLink {...props}>{children}</MarkdownLink>
             }}
           >{content}
           </ReactMarkdown>

web/components/nav/love-bottom-nav-bar.tsx

@@ -38,7 +38,7 @@ export function BottomNavBar(props: {
   }
 
   return (
-    <nav className="border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-0 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav">
+    <nav className="border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav">
       {navigationOptions.map((item) => (
         <NavBarItem
           key={item.name}
@@ -206,7 +206,7 @@ export function MobileSidebar(props: {
             leaveFrom="translate-x-0"
             leaveTo="-translate-x-full"
           >
-            <div className="bg-canvas-0 relative flex w-full max-w-xs flex-1 flex-col">
+            <div className="bg-canvas-25 relative flex w-full max-w-xs flex-1 flex-col">
               <div className="mx-2 h-0 flex-1 overflow-y-auto">
                 <Sidebar
                   navigationOptions={sidebarNavigationOptions}

web/components/profile-grid.tsx

@@ -84,10 +84,10 @@ function ProfilePreview(props: {
     <Link
       onClick={() => track('click love profile preview')}
       href={`/${user.username}`}
-      className="cursor-pointer group block dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-200 h-full"
+      className="cursor-pointer group block bg-canvas-100 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-200 h-full"
     >
       <Col
-        className="relative h-40 w-full overflow-hidden rounded text-white transition-all hover:scale-y-105 hover:drop-shadow">
+        className="relative h-40 w-full overflow-hidden rounded transition-all hover:scale-y-105 hover:drop-shadow">
         {/*{pinned_url ? (*/}
         {/*  <Image*/}
         {/*    src={pinned_url}*/}

web/pages/_document.tsx

@@ -9,7 +9,7 @@ export default function Document() {
         <link rel="icon" href={ENV_CONFIG.faviconPath} />
         <Script src="/init-theme.js" strategy="beforeInteractive" />
       </Head>
-      <body className="bg-canvas-50 text-ink-1000">
+      <body className="bg-canvas-0 text-ink-1000">
         <Main />
         <NextScript />
       </body>

web/pages/about.tsx

@@ -17,7 +17,7 @@ export const AboutBlock = (props: {
 export default function About() {
   return (
     <LovePage trackPageView={'about'}>
-      <div className="bg-canvas-0 text-gray-600 dark:text-white min-h-screen p-6">
+      <div className="text-gray-600 dark:text-white min-h-screen p-6">
         <div className="w-full">
           <div className="relative py-8 mb-8 overflow-hidden">
             <div className="relative z-10 max-w-3xl mx-auto px-4">

web/pages/index.tsx

@@ -12,7 +12,7 @@ export default function ProfilesPage() {
   return (
     <LovePage trackPageView={'user profiles'}>
       <Col className="items-center">
-        <Col className={'bg-canvas-0 w-full rounded px-3 py-4 sm:px-6'}>
+        <Col className={'w-full rounded px-3 py-4 sm:px-6'}>
           {user ? <ProfilesHome/> : <LoggedOutHome/>}
         </Col>
       </Col>

web/styles/globals.css

@@ -37,8 +37,9 @@
 
         /* Background / Canvas Grey Scale */
         --color-canvas-0: 255 255 255; /* white */
+        --color-canvas-25: 245 245 245;
         --color-canvas-50: 245 245 245;
-        --color-canvas-100: 230 230 230;
+        --color-canvas-100: 245 245 245;
         --color-canvas-200: 210 210 210;
         --color-canvas-300: 190 190 190;
         --color-canvas-400: 160 160 160;
@@ -109,9 +110,10 @@
         --color-ink-50: 17 17 17; /* #111111 */
         --color-ink-0: 0 0 0; /* black */
 
-        --color-canvas-0: 32 30 37;
-        --color-canvas-50: 22 20 25;
-        --color-canvas-100: 46 41 51;
+        --color-canvas-25: 0 0 0;
+        --color-canvas-0: 20 20 20;
+        --color-canvas-50: 20 20 20;
+        --color-canvas-100: 40 40 40;
 
         --color-primary-950: 239 246 255; /* very light blue */
         --color-primary-900: 219 234 254; /* light blue */

web/tailwind.config.js

@@ -310,6 +310,7 @@ module.exports = {
         },
         canvas: {
           0: 'rgb(var(--color-canvas-0) / <alpha-value>)',
+          25: 'rgb(var(--color-canvas-25) / <alpha-value>)',
           50: 'rgb(var(--color-canvas-50) / <alpha-value>)',
           100: 'rgb(var(--color-canvas-100) / <alpha-value>)',
         },
@@ -328,17 +329,17 @@ module.exports = {
           950: 'rgb(var(--color-primary-950) / <alpha-value>)',
         },
         gray: {
-          50: 'hsl(240, 40%, 98%)',
-          100: 'hsl(235, 46%, 95%)',
-          200: 'hsl(236, 33%, 90%)',
-          300: 'hsl(238, 26%, 81%)',
-          400: 'hsl(238, 19%, 68%)',
-          500: 'hsl(240, 12%, 52%)',
-          600: 'hsl(240, 16%, 40%)',
-          700: 'hsl(240, 20%, 30%)',
-          800: 'hsl(240, 30%, 22%)',
-          900: 'hsl(242, 45%, 15%)',
-          950: 'hsl(264,11%,9%)',
+          50: 'hsl(0, 0%, 95%)',
+          100: 'hsl(0, 0%, 90%)',
+          200: 'hsl(0, 0%, 80%)',
+          300: 'hsl(0, 0%, 70%)',
+          400: 'hsl(0, 0%, 60%)',
+          500: 'hsl(0, 0%, 50%)',
+          600: 'hsl(0, 0%, 40%)',
+          700: 'hsl(0, 0%, 30%)',
+          800: 'hsl(0, 0%, 20%)',
+          900: 'hsl(0,0%,10%)',
+          950: 'hsl(0,0%,5%)',
         },
         warning: '#F0D630',
         error: '#E70D3D',