mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-04-04 06:51:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
MartinBraquet
2025-09-10 18:24:44 +02:00
parent 3c5407dd51
commit 53123eb0ee
10 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/home/home.tsx
View File

@@ -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>
</>
);
}

17
web/components/love-page.tsx
View File

@@ -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,13 +137,13 @@ const getDesktopNav = (user: User | null | undefined) => {
ProfilesHome,
Notifs,
Messages,
AboutQuestionMark,
About,
faq
)
return buildArray(
// { name: 'Profiles', href: '/', icon: HomeIcon },
AboutQuestionMark,
About,
faq
)
}
@@ -152,7 +151,7 @@ const getDesktopNav = (user: User | null | undefined) => {
// No sidebar when signed out
const getSidebarNavigation = (_toggleModal: () => void) => {
return buildArray(
AboutQuestionMark,
About,
faq
)
}

4
web/components/markdown.tsx
View File

@@ -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>

4
web/components/nav/love-bottom-nav-bar.tsx
View File

@@ -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}

4
web/components/profile-grid.tsx
View File

@@ -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}*/}

2
web/pages/_document.tsx
View File

@@ -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>

2
web/pages/about.tsx
View File

@@ -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">

2
web/pages/index.tsx
View File

@@ -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>

10
web/styles/globals.css
View File

@@ -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 */

23
web/tailwind.config.js
View File

@@ -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',