cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

Merge branch 'designsystem' of github.com:snowball-tools/snowballtools-base into designsystem

Browse Source
This commit is contained in:
Vivian Phung 2024-02-26 17:46:28 -05:00
commit 5eff273abb
No known key found for this signature in database
5 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/public/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="500" height="500" fill="#0F86F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M191.873 125.126C224.893 126.765 250.458 150.121 274.042 172.995C297.925 196.158 323.089 221.108 324.868 254.114C326.718 288.42 308.902 321.108 283.281 344.355C258.67 366.687 225.288 373.859 191.873 374.788C157.228 375.752 119.038 374.394 95.1648 349.588C71.6207 325.125 74.6696 287.843 75.7341 254.114C76.7518 221.865 79.2961 188.525 101.009 164.41C123.845 139.047 157.543 123.423 191.873 125.126Z" fill="#4BA4F7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.373 125.126C262.393 126.765 287.958 150.121 311.542 172.995C335.425 196.158 360.589 221.108 362.368 254.114C364.218 288.42 346.402 321.108 320.781 344.355C296.17 366.687 262.788 373.859 229.373 374.788C194.728 375.752 156.538 374.394 132.665 349.588C109.121 325.125 112.17 287.843 113.234 254.114C114.252 221.865 116.796 188.525 138.509 164.41C161.345 139.047 195.043 123.423 229.373 125.126Z" fill="#8AC4FA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M266.873 125.126C299.893 126.765 325.458 150.121 349.042 172.995C372.925 196.158 398.089 221.108 399.868 254.114C401.718 288.42 383.902 321.108 358.281 344.355C333.67 366.687 300.288 373.859 266.873 374.788C232.228 375.752 194.038 374.394 170.165 349.588C146.621 325.125 149.67 287.843 150.734 254.114C151.752 221.865 154.296 188.525 176.009 164.41C198.845 139.047 232.543 123.423 266.873 125.126Z" fill="#CAE4FD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M304.373 125.126C337.393 126.765 362.958 150.121 386.542 172.995C410.425 196.158 435.589 221.108 437.368 254.114C439.218 288.42 421.402 321.108 395.781 344.355C371.17 366.687 337.788 373.859 304.373 374.788C269.728 375.752 231.538 374.394 207.665 349.588C184.121 325.125 187.17 287.843 188.234 254.114C189.252 221.865 191.796 188.525 213.509 164.41C236.345 139.047 270.043 123.423 304.373 125.126Z" fill="white"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

103
packages/frontend/src/components/Sidebar.tsx
View File

@ -2,11 +2,13 @@ import React, { useCallback, useEffect, useState } from 'react';
import { Link, NavLink, useNavigate, useParams } from 'react-router-dom'; import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
import { Organization } from 'gql-client'; import { Organization } from 'gql-client';
import { Typography, Option } from '@material-tailwind/react'; import { Option } from '@material-tailwind/react';
import { useDisconnect } from 'wagmi'; import { useDisconnect } from 'wagmi';
import { useGQLClient } from '../context/GQLClientContext'; import { useGQLClient } from '../context/GQLClientContext';
import AsyncSelect from './shared/AsyncSelect'; import AsyncSelect from './shared/AsyncSelect';
import { ChevronGrabberHorizontal, GlobeIcon } from './shared/CustomIcon';
import { Tabs } from 'components/shared/Tabs';
const Sidebar = () => { const Sidebar = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
@ -33,61 +35,90 @@ const Sidebar = () => {
}, [disconnect, navigate]); }, [disconnect, navigate]);
return ( return (
<div className="flex flex-col h-full p-4"> <div className="flex flex-col h-full p-4 mt-5">
<div className="grow"> <div className="grow">
<div> <Link to={`/${orgSlug}`}>
<Link to={`/${orgSlug}`}> <div className="flex items-center space-x-3 mb-10 ml-2">
<h3 className="text-black text-2xl">Snowball</h3> <img
</Link> src="/logo.svg"
</div> alt="Snowball Logo"
className="h-8 w-8 rounded-lg"
/>
<span className="text-2xl font-bold text-snowball-900">
Snowball
</span>
</div>
</Link>
<AsyncSelect <AsyncSelect
className="bg-white py-2" className="bg-white rounded-lg shadow"
value={selectedOrgSlug} value={selectedOrgSlug}
onChange={(value) => { onChange={(value) => {
setSelectedOrgSlug(value!); setSelectedOrgSlug(value!);
navigate(`/${value}`); navigate(`/${value}`);
}} }}
selected={(_, index) => ( selected={(_, index) => (
<div className="flex gap-2"> <div className="flex items-center space-x-3">
<div>^</div> <img
src="/logo.svg"
alt="Application Logo"
className="h-8 w-8 rounded-lg"
/>
<div> <div>
<span>{organizations[index!]?.name}</span> <div className="text-sm font-semibold">
<Typography placeholder={''}>Organization</Typography> {organizations[index!]?.name}
</div>
<div className="text-xs text-gray-500">Organization</div>
</div> </div>
</div> </div>
)} )}
arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
> >
{/* TODO: Show label organization and manage in option */} {/* TODO: Show label organization and manage in option */}
{organizations.map((org) => ( {organizations.map((org) => (
<Option key={org.id} value={org.slug}> <Option key={org.id} value={org.slug}>
^ {org.name} <div className="flex items-center space-x-3">
{org.slug === selectedOrgSlug && <p className="float-right">^</p>} <img
src="/logo.svg"
alt="Application Logo"
className="h-8 w-8 rounded-lg"
/>
<div>
<div className="text-sm font-semibold">{org.name}</div>
<div className="text-xs text-gray-500">Organization</div>
</div>
</div>
</Option> </Option>
))} ))}
</AsyncSelect> </AsyncSelect>
<div> <Tabs defaultValue="Projects" orientation="vertical" className="mt-5">
<NavLink <Tabs.List>
to={`/${orgSlug}`} {['Projects', 'Settings'].slice(0, 2).map((title, index) => (
className={({ isActive }) => (isActive ? 'text-blue-500' : '')} <NavLink to={`/${orgSlug}/${title}`} key={index}>
> <Tabs.Trigger icon={<GlobeIcon />} value={title}>
<Typography placeholder={''}>Projects</Typography> {title}
</NavLink> </Tabs.Trigger>
</div> </NavLink>
<div> ))}
<NavLink </Tabs.List>
to={`/${orgSlug}/settings`} </Tabs>
className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
>
<Typography placeholder={''}>Settings</Typography>
</NavLink>
</div>
</div> </div>
<div className="grow flex flex-col justify-end"> <div className="grow flex flex-col justify-end mb-10">
<a className="cursor-pointer" onClick={handleLogOut}> <Tabs defaultValue="Projects" orientation="vertical">
Log Out {/* TODO: use proper link buttons */}
</a> <Tabs.List>
<a className="cursor-pointer">Documentation</a> <Tabs.Trigger icon={<GlobeIcon />} value="">
<a className="cursor-pointer">Support</a> <a className="cursor-pointer" onClick={handleLogOut}>
Log Out
</a>
</Tabs.Trigger>
<Tabs.Trigger icon={<GlobeIcon />} value="">
<a className="cursor-pointer">Documentation</a>
</Tabs.Trigger>
<Tabs.Trigger icon={<GlobeIcon />} value="">
<a className="cursor-pointer">Support</a>
</Tabs.Trigger>
</Tabs.List>
</Tabs>
</div> </div>
</div> </div>
); );

6
packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
View File

@ -38,6 +38,12 @@ export const tabsTheme = tv({
'data-[orientation=vertical]:data-[state=active]:border-transparent', 'data-[orientation=vertical]:data-[state=active]:border-transparent',
'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em', 'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em', 'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
// TODO: demo additions
'data-[orientation=vertical]:data-[state=active]:bg-snowball-200',
'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200',
'data-[orientation=vertical]:data-[state=active]:text-snowball-800',
'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800',
'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]',
], ],
trigger: [ trigger: [
'flex', 'flex',

2
packages/frontend/src/pages/OrgSlug.tsx
View File

@ -6,7 +6,7 @@ import { OctokitProvider } from '../context/OctokitContext';
const OrgSlug = () => { const OrgSlug = () => {
return ( return (
<div className="grid grid-cols-5 h-screen bg-light-blue-50"> <div className="grid grid-cols-5 h-screen bg-snowball-50">
<> <>
<div className="h-full"> <div className="h-full">
<Sidebar /> <Sidebar />

8
packages/frontend/src/pages/org-slug/index.tsx
View File

@ -1,11 +1,13 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { Button } from 'components/shared/Button';
import { Button, Typography, Chip } from '@material-tailwind/react'; import { Typography, Chip } from '@material-tailwind/react';
import ProjectCard from '../../components/projects/ProjectCard'; import ProjectCard from '../../components/projects/ProjectCard';
import { useGQLClient } from '../../context/GQLClientContext'; import { useGQLClient } from '../../context/GQLClientContext';
import { PlusIcon } from 'components/shared/CustomIcon';
const Projects = () => { const Projects = () => {
const client = useGQLClient(); const client = useGQLClient();
@ -40,9 +42,7 @@ const Projects = () => {
</div> </div>
<div> <div>
<Link to="projects/create"> <Link to="projects/create">
<Button className="rounded-full" color="blue" placeholder={''}> <Button leftIcon={<PlusIcon />}>Create project</Button>
Create project
</Button>
</Link> </Link>
</div> </div>
</div> </div>