tactile - init

polarsource · Jan 18, 2025 · fbb62c5 · fbb62c5
1 parent 7a2b2bb
commit fbb62c5
Show file tree

Hide file tree

Showing 18 changed files with 32 additions and 86 deletions.
diff --git a/clients/apps/web/src/app/(main)/layout.tsx b/clients/apps/web/src/app/(main)/layout.tsx
@@ -5,7 +5,7 @@ import { PolarThemeProvider } from '../providers'
 export default async function Layout({ children }: PropsWithChildren) {
   return (
     <PolarThemeProvider>
-      <div className="dark:bg-polar-950 h-full bg-white dark:text-white">
+      <div className="dark:bg-polar-900 h-full bg-white dark:text-white">
         {children}
         <CookieConsent />
       </div>

diff --git a/clients/apps/web/src/app/layout.tsx b/clients/apps/web/src/app/layout.tsx
@@ -6,7 +6,7 @@ import { getServerSideAPI } from '@/utils/api/serverside'
 import { getAuthenticatedUser, getUserOrganizations } from '@/utils/user'
 import { GoogleTagManager } from '@next/third-parties/google'
 import { Organization, UserRead } from '@polar-sh/api'
-import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
 import { PHASE_PRODUCTION_BUILD } from 'next/constants'
 import { Metadata } from 'next/types'
 import { twMerge } from 'tailwind-merge'
@@ -81,8 +81,8 @@ export default async function RootLayout({
       <GoogleTagManager gtmId="AW-16748688797" />
       <body
         className={twMerge(
-          `antialiased [font-feature-settings:'ss03','zero']`,
-          GeistSans.className,
+          `text-sm antialiased [font-feature-settings:'ss03','zero']`,
+          GeistMono.className,
         )}
       >
         <UserContextProvider

diff --git a/clients/apps/web/src/components/Dashboard/NavigationContainer.tsx b/clients/apps/web/src/components/Dashboard/NavigationContainer.tsx
@@ -32,31 +32,19 @@ export const NavigationContainer = ({
         </span>
       )}
       <div className="flex flex-col gap-y-3">
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-y-1">
           {routes.map((route) => {
             return (
               <Link
                 key={route.link}
                 className={twMerge(
-                  'flex flex-row items-center gap-x-4 rounded-xl border border-transparent px-3 py-2 transition-colors dark:border-transparent',
+                  'flex flex-row items-center gap-x-4 border border-transparent px-1 transition-colors dark:border-transparent',
                   route.isActive
-                    ? 'dark:bg-polar-900 dark:border-polar-800 border-gray-200 bg-white text-black shadow-sm dark:text-white'
+                    ? 'dark:bg-polar-200 border-gray-200 bg-white text-black dark:text-black'
                     : 'dark:text-polar-500 dark:hover:text-polar-200 text-gray-500 hover:text-black',
                 )}
                 href={route.link}
               >
-                {'icon' in route && route.icon ? (
-                  <span
-                    className={twMerge(
-                      'flex flex-col items-center justify-center rounded-full bg-transparent text-[18px]',
-                      route.isActive
-                        ? 'text-blue-500 dark:text-white'
-                        : 'bg-transparent',
-                    )}
-                  >
-                    {route.icon}
-                  </span>
-                ) : undefined}
                 <span className="text-sm font-medium">{route.title}</span>
               </Link>
             )

diff --git a/clients/apps/web/src/components/Layout/DashboardLayout.tsx b/clients/apps/web/src/components/Layout/DashboardLayout.tsx
@@ -229,7 +229,6 @@ export const DashboardBody = ({
   contextViewClassName,
   header = true,
   wide = false,
-  transparent = false,
 }: {
   children?: React.ReactNode
   wrapperClassName?: string
@@ -239,18 +238,8 @@ export const DashboardBody = ({
   contextViewClassName?: string
   header?: JSX.Element | boolean
   wide?: boolean
-  transparent?: boolean
 }) => {
   const currentRoute = useRoute()
-  const [scrolled, setScrolled] = useState(false)
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const hasScrolled = e.currentTarget.scrollTop > 1
-
-    if (hasScrolled !== scrolled) {
-      setScrolled(hasScrolled)
-    }
-  }
 
   const hasCurrent = (currentRoute?.subs as SubRouteWithActive[])?.some(
     (i) => i.isActive,
@@ -259,15 +248,8 @@ export const DashboardBody = ({
   return (
     <div className={twMerge('flex h-full w-full flex-row gap-x-3')}>
       <div
-        onScroll={handleScroll}
         className={twMerge(
-          'relative flex w-full flex-col items-center px-4 md:overflow-y-auto',
-          transparent
-            ? 'bg-transparent dark:bg-transparent'
-            : 'dark:md:bg-polar-900 dark:border-polar-700 rounded-2xl border-gray-200 md:border md:bg-white md:px-12 md:shadow-sm',
-          transparent && scrolled
-            ? 'dark:border-polar-700 border-t border-gray-200'
-            : '',
+          'relative flex w-full flex-col items-center md:overflow-y-auto',
         )}
       >
         <div
@@ -281,7 +263,6 @@ export const DashboardBody = ({
             <div
               className={twMerge(
                 'flex w-full flex-col gap-y-4 py-8 md:flex-row md:items-center md:justify-between',
-                transparent ? '' : 'md:py-12',
               )}
             >
               <h4 className="whitespace-nowrap text-2xl font-medium dark:text-white">

diff --git a/clients/apps/web/src/components/Layout/Public/BrandingMenu.tsx b/clients/apps/web/src/components/Layout/Public/BrandingMenu.tsx
@@ -60,14 +60,17 @@ export const BrandingMenu = ({
             {logoVariant === 'logotype' ? (
               <LogoType
                 className={twMerge(
-                  '-ml-2 text-black md:ml-0 dark:text-white',
+                  'dark:text-polar-200 -ml-2 text-black md:ml-0',
                   logoClassName,
                 )}
                 width={size ?? 100}
               />
             ) : (
               <LogoIcon
-                className={twMerge('text-black dark:text-white', logoClassName)}
+                className={twMerge(
+                  'dark:text-polar-200 text-black',
+                  logoClassName,
+                )}
                 size={size ?? 42}
               />
             )}

diff --git a/clients/apps/web/src/components/Navigation/DashboardProfileDropdown.tsx b/clients/apps/web/src/components/Navigation/DashboardProfileDropdown.tsx
@@ -3,22 +3,14 @@
 import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import { CONFIG } from '@/utils/config'
 import { useOutsideClick } from '@/utils/useOutsideClick'
-import {
-  AddOutlined,
-  BiotechOutlined,
-  KeyboardArrowDownOutlined,
-} from '@mui/icons-material'
+import { AddOutlined, BiotechOutlined } from '@mui/icons-material'
 import Link from 'next/link'
 import { useContext, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useAuth } from '../../hooks'
 import { LinkItem, ListItem, Profile } from './Navigation'
 
 const DashboardProfileDropdown = ({ className = '' }) => {
-  const classNames = twMerge(
-    'relative flex w-full flex-col rounded-full bg-white hover:bg-white dark:hover:bg-polar-800 dark:bg-polar-900 transition-colors z-40 border border-gray-200 dark:border-polar-800',
-    className,
-  )
   const { currentUser: loggedUser } = useAuth()
 
   const [isOpen, setOpen] = useState<boolean>(false)
@@ -48,15 +40,14 @@ const DashboardProfileDropdown = ({ className = '' }) => {
       } as const)
 
   return (
-    <div className={classNames}>
+    <div className={twMerge('relative flex w-full flex-col', className)}>
       <div
         className={twMerge(
-          'relative flex cursor-pointer flex-row items-center justify-between gap-x-2 py-2 pl-2 pr-4 transition-colors',
+          'relative flex cursor-pointer flex-row items-center justify-between gap-x-2 transition-colors',
         )}
         onClick={() => setOpen(true)}
       >
         <Profile name={current.name} avatar_url={current.avatar_url} />
-        <KeyboardArrowDownOutlined className="dark:text-polar-50 h-5 w-5 flex-shrink-0 text-gray-400" />
       </div>
 
       {isOpen && (

diff --git a/clients/apps/web/src/components/Navigation/Navigation.tsx b/clients/apps/web/src/components/Navigation/Navigation.tsx
@@ -1,4 +1,3 @@
-import Avatar from 'polarkit/components/ui/atoms/avatar'
 import { twMerge } from 'tailwind-merge'
 
 export const ListItem = (props: {
@@ -22,12 +21,7 @@ export const Profile = (props: { name: string; avatar_url: string | null }) => {
     <>
       <div className="flex w-full min-w-0 shrink grow-0 items-center justify-between text-sm">
         <div className="flex w-full min-w-0 shrink grow-0 items-center">
-          <Avatar
-            name={props.name}
-            avatar_url={props.avatar_url}
-            className="h-8 w-8 rounded-full"
-          />
-          <p className="ml-4 truncate">{props.name}</p>
+          <span>[+] {props.name}</span>
         </div>
       </div>
     </>

diff --git a/clients/apps/web/src/components/Widgets/ActivityWidget.tsx b/clients/apps/web/src/components/Widgets/ActivityWidget.tsx
@@ -44,16 +44,6 @@ export const ActivityWidget = ({ className }: ActivityWidgetProps) => {
       </CardHeader>
       <TooltipProvider>
         <CardFooter className="flex flex-row gap-x-4">
-          <div className="hidden flex-col items-center font-mono xl:flex">
-            {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((day, i) => (
-              <span
-                key={i}
-                className="dark:text-polar-500 text-xs text-gray-300"
-              >
-                {day}
-              </span>
-            ))}
-          </div>
           <div className="grid grid-flow-col grid-cols-[repeat(52,minmax(0,1fr))] grid-rows-[repeat(7,minmax(0,1fr))] gap-1 xl:gap-2">
             {orderMetrics.data?.periods.map((period, i) => {
               const activeClass =
@@ -73,7 +63,7 @@ export const ActivityWidget = ({ className }: ActivityWidgetProps) => {
                 <Tooltip key={i} delayDuration={0}>
                   <TooltipTrigger
                     className={twMerge(
-                      'dark:bg-polar-600 h-1 w-1 rounded-full bg-gray-300 xl:h-2 xl:w-2',
+                      'dark:bg-polar-700 h-1.5 w-1.5 bg-gray-300',
                       activeClass,
                     )}
                   />

diff --git a/clients/apps/web/src/components/Widgets/OrdersWidget.tsx b/clients/apps/web/src/components/Widgets/OrdersWidget.tsx
@@ -90,7 +90,7 @@ export const OrdersWidget = ({ className }: OrdersWidgetProps) => {
                 href={`/dashboard/${org.slug}/sales/${order.id}`}
                 className={twMerge(
                   stackingClassNames[index],
-                  'rounded-4xl dark:bg-polar-900 dark:border-polar-700 peer absolute w-full border border-white transition-all duration-300 will-change-transform hover:z-10 hover:scale-100 peer-hover:opacity-0',
+                  'dark:bg-polar-900 peer absolute w-full transition-all duration-300 will-change-transform hover:z-10 hover:scale-100 peer-hover:opacity-0',
                 )}
               >
                 <OrderCard order={order} />

diff --git a/clients/apps/web/src/components/Widgets/RevenueWidget.tsx b/clients/apps/web/src/components/Widgets/RevenueWidget.tsx
@@ -77,11 +77,11 @@ export const RevenueWidget = ({ className }: RevenueWidgetProps) => {
                   style={{
                     height: `${Math.max(
                       (period.revenue / maxPeriod) * 100 || 0,
-                      8,
+                      2,
                     )}%`,
                   }}
                   className={twMerge(
-                    'dark:bg-polar-600 w-3 flex-shrink rounded-full bg-gray-300',
+                    'dark:bg-polar-700 w-3 flex-shrink bg-gray-300',
                     activeClass,
                   )}
                 />

diff --git a/clients/apps/web/src/components/Widgets/SubscribersWidget.tsx b/clients/apps/web/src/components/Widgets/SubscribersWidget.tsx
@@ -77,11 +77,11 @@ export const SubscribersWidget = ({ className }: SubscribersWidgetProps) => {
                   style={{
                     height: `${Math.max(
                       (period.active_subscriptions / maxPeriod) * 100 || 0,
-                      8,
+                      2,
                     )}%`,
                   }}
                   className={twMerge(
-                    'dark:bg-polar-600 w-3 flex-shrink rounded-full bg-gray-300',
+                    'dark:bg-polar-700 w-3 flex-shrink bg-gray-300',
                     activeClass,
                   )}
                 />

diff --git a/clients/packages/polarkit/src/components/ui/atoms/Button.tsx b/clients/packages/polarkit/src/components/ui/atoms/Button.tsx
@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'
 import { ButtonProps, Button as ShadcnButton } from '../button'
 
 const buttonVariants = cva(
-  'relative font-normal inline-flex items-center select-none justify-center rounded-full text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 whitespace-nowrap',
+  'relative font-normal inline-flex items-center select-none justify-center rounded-none text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 whitespace-nowrap',
   {
     variants: {
       variant: {
@@ -23,9 +23,9 @@ const buttonVariants = cva(
           'bg-transparent hover:bg-gray-200 dark:hover:bg-polar-700 dark:bg-transparent text-black dark:text-white',
       },
       size: {
-        default: 'h-8 px-4 py-1.5 rounded-full text-sm',
-        sm: 'h-7 rounded-full px-3 py-1.5 text-xs',
-        lg: 'h-10 rounded-full px-5 py-4 text-sm',
+        default: 'h-8 px-4 py-1.5 text-sm',
+        sm: 'h-7 px-3 py-1.5 text-xs',
+        lg: 'h-10 px-5 py-4 text-sm',
         icon: 'flex items-center justify-center h-8 w-8 p-2 text-sm',
       },
     },

diff --git a/clients/packages/polarkit/src/components/ui/atoms/Card.tsx b/clients/packages/polarkit/src/components/ui/atoms/Card.tsx
@@ -17,7 +17,7 @@ const Card = React.forwardRef<
   <CardPrimitive
     ref={ref}
     className={twMerge(
-      'dark:bg-polar-800 rounded-4xl border-transparent bg-gray-50 text-gray-950 shadow-none dark:border-transparent dark:text-white',
+      'dark:border-polar-700 rounded-none border border-gray-200 bg-transparent text-gray-950 shadow-none dark:text-white',
       className,
     )}
     {...props}

diff --git a/clients/packages/polarkit/src/components/ui/atoms/Input.tsx b/clients/packages/polarkit/src/components/ui/atoms/Input.tsx
@@ -14,7 +14,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <div className="relative flex flex-1 flex-row rounded-full">
         <ShadInput
           className={twMerge(
-            'dark:placeholder:text-polar-500 dark:border-polar-700 dark:bg-polar-800 h-10 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-950 shadow-sm outline-none placeholder:text-gray-400 focus:z-10 focus:border-blue-300 focus:ring-[3px] focus:ring-blue-100 focus-visible:ring-blue-100 dark:text-white dark:ring-offset-transparent dark:focus:border-blue-600 dark:focus:ring-blue-700/40',
+            'dark:placeholder:text-polar-500 dark:border-polar-700 h-10 rounded-none border border-gray-200 bg-white px-4 py-2 text-sm text-gray-950 shadow-sm outline-none placeholder:text-gray-400 focus:z-10 focus:border-blue-300 focus:ring-[3px] focus:ring-blue-100 focus-visible:ring-blue-100 dark:bg-transparent dark:text-white dark:ring-offset-transparent dark:focus:border-blue-600 dark:focus:ring-blue-700/40',
             preSlot ? 'pl-10' : '',
             postSlot ? 'pr-10' : '',
             className,

diff --git a/clients/packages/polarkit/src/components/ui/atoms/List.tsx b/clients/packages/polarkit/src/components/ui/atoms/List.tsx
@@ -11,7 +11,6 @@ export const List = ({ children, className, size = 'default' }: ListProps) => {
     <div
       className={twMerge(
         'dark:divide-polar-700 dark:border-polar-700 flex flex-col divide-y divide-gray-200 overflow-hidden border border-gray-200',
-        size === 'default' ? 'rounded-4xl' : 'rounded-2xl',
         className,
       )}
     >

diff --git a/clients/packages/polarkit/src/components/ui/atoms/ShadowBox.tsx b/clients/packages/polarkit/src/components/ui/atoms/ShadowBox.tsx
@@ -5,7 +5,7 @@ import ShadowBoxOnMd from './ShadowBoxOnMd'
 const ShadowBox = (props: PropsWithChildren<{ className?: string }>) => (
   <div
     className={twMerge(
-      'dark:bg-polar-900 lg:rounded-4xl dark:border-polar-700 w-full rounded-xl border border-transparent bg-gray-50 p-8',
+      'dark:bg-polar-800 dark:border-polar-700 w-full border border-transparent bg-gray-50 p-8',
       props.className,
     )}
   >

diff --git a/clients/packages/polarkit/src/components/ui/atoms/ShadowBoxOnMd.tsx b/clients/packages/polarkit/src/components/ui/atoms/ShadowBoxOnMd.tsx
@@ -8,7 +8,7 @@ const ShadowBoxOnMd = ({
 }: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => (
   <div
     className={twMerge(
-      'md:dark:bg-polar-900 lg:rounded-4xl dark:border-polar-700 w-full md:rounded-xl md:border md:border-transparent md:bg-gray-50 md:p-8',
+      'md:dark:bg-polar-800 dark:border-polar-700 w-full border border-transparent bg-gray-50 p-8',
       className,
     )}
     {...props}

diff --git a/clients/packages/polarkit/src/components/ui/atoms/Tabs.tsx b/clients/packages/polarkit/src/components/ui/atoms/Tabs.tsx
@@ -38,7 +38,7 @@ const TabsTrigger = React.forwardRef<
   <TabsTriggerPrimitive
     ref={ref}
     className={twMerge(
-      'dark:data-[state=active]:bg-polar-700 dark:hover:text-polar-50 dark:text-polar-500 px-4 text-gray-400 hover:text-black data-[state=active]:rounded-full data-[state=active]:bg-gray-100 data-[state=active]:text-black data-[state=active]:shadow-none dark:data-[state=active]:text-white',
+      'dark:data-[state=active]:bg-polar-200 dark:hover:text-polar-50 dark:text-polar-500 rounded-none px-0 text-gray-400 hover:text-black data-[state=active]:bg-gray-100 data-[state=active]:text-black data-[state=active]:shadow-none dark:data-[state=active]:text-black',
       size === 'default' ? 'text-sm' : 'text-xs',
       className,
     )}