diff --git a/packages/frontend/index.html b/packages/frontend/index.html index 799bd444..7da6d07b 100644 --- a/packages/frontend/index.html +++ b/packages/frontend/index.html @@ -1,19 +1,15 @@ - + - - - - - Snowball + Laconic
diff --git a/packages/frontend/public/android-chrome-192x192.png b/packages/frontend/public/android-chrome-192x192.png deleted file mode 100644 index eed80a70..00000000 Binary files a/packages/frontend/public/android-chrome-192x192.png and /dev/null differ diff --git a/packages/frontend/public/android-chrome-512x512.png b/packages/frontend/public/android-chrome-512x512.png deleted file mode 100644 index 72537543..00000000 Binary files a/packages/frontend/public/android-chrome-512x512.png and /dev/null differ diff --git a/packages/frontend/public/apple-touch-icon.png b/packages/frontend/public/apple-touch-icon.png deleted file mode 100644 index ac30fad2..00000000 Binary files a/packages/frontend/public/apple-touch-icon.png and /dev/null differ diff --git a/packages/frontend/public/favicon-16x16.png b/packages/frontend/public/favicon-16x16.png deleted file mode 100644 index 5e9d7cf8..00000000 Binary files a/packages/frontend/public/favicon-16x16.png and /dev/null differ diff --git a/packages/frontend/public/favicon-32x32.png b/packages/frontend/public/favicon-32x32.png deleted file mode 100644 index 33a57714..00000000 Binary files a/packages/frontend/public/favicon-32x32.png and /dev/null differ diff --git a/packages/frontend/public/favicon.ico b/packages/frontend/public/favicon.ico index 154390ed..ebae81e9 100644 Binary files a/packages/frontend/public/favicon.ico and b/packages/frontend/public/favicon.ico differ diff --git a/packages/frontend/public/laconic-logo.svg b/packages/frontend/public/laconic-logo.svg new file mode 100644 index 00000000..526d9b28 --- /dev/null +++ b/packages/frontend/public/laconic-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/frontend/public/logo.svg b/packages/frontend/public/logo.svg index 3781af8a..2efbd79f 100644 --- a/packages/frontend/public/logo.svg +++ b/packages/frontend/public/logo.svg @@ -1 +1,10 @@ - + + + + + + + + + + diff --git a/packages/frontend/public/mstile-144x144.png b/packages/frontend/public/mstile-144x144.png deleted file mode 100644 index a71f14e2..00000000 Binary files a/packages/frontend/public/mstile-144x144.png and /dev/null differ diff --git a/packages/frontend/public/mstile-150x150.png b/packages/frontend/public/mstile-150x150.png deleted file mode 100644 index 44adb555..00000000 Binary files a/packages/frontend/public/mstile-150x150.png and /dev/null differ diff --git a/packages/frontend/public/mstile-310x150.png b/packages/frontend/public/mstile-310x150.png deleted file mode 100644 index 771feff6..00000000 Binary files a/packages/frontend/public/mstile-310x150.png and /dev/null differ diff --git a/packages/frontend/public/mstile-310x310.png b/packages/frontend/public/mstile-310x310.png deleted file mode 100644 index deab4f4e..00000000 Binary files a/packages/frontend/public/mstile-310x310.png and /dev/null differ diff --git a/packages/frontend/public/mstile-70x70.png b/packages/frontend/public/mstile-70x70.png deleted file mode 100644 index e9681f32..00000000 Binary files a/packages/frontend/public/mstile-70x70.png and /dev/null differ diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx index 6b6d8131..4f1dbec8 100644 --- a/packages/frontend/src/components/Logo.tsx +++ b/packages/frontend/src/components/Logo.tsx @@ -9,14 +9,7 @@ export const Logo = ({ orgSlug }: LogoProps) => { return (
- Snowball Logo - - Snowball - + Snowball Logo
); diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index d9435d7b..8738e775 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx @@ -6,7 +6,6 @@ import { Button } from '../../shared/Button'; import { GitIcon, EllipsesIcon, - SnowballIcon, GithubIcon, GitTeaIcon, } from '../../shared/CustomIcon'; @@ -15,6 +14,7 @@ import { IconWithFrame } from '../../shared/IconWithFrame'; import { Heading } from '../../shared/Heading'; import { MockConnectGitCard } from './MockConnectGitCard'; import { VITE_GITHUB_CLIENT_ID } from 'utils/constants'; +import { LaconicIcon } from 'components/shared/CustomIcon/LaconicIcon'; const SCOPES = 'repo user'; const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`; @@ -46,20 +46,24 @@ const ConnectAccount: React.FC = ({ // TODO: Use correct height return ( -
+
{/** Icons */}
- } /> + } hasHighlight={false} /> - } /> + } + hasHighlight={false} + />
{/** Text */}
- + Connect to your Git account -

+

Once connected, you can import a repository from your account or start with one of our templates.

@@ -70,14 +74,14 @@ const ConnectAccount: React.FC = ({ url={GITHUB_OAUTH_URL} onCode={handleCode} onClose={() => {}} - title="Snowball" + title="Laconic" width={1000} height={1000} > @@ -85,7 +89,7 @@ const ConnectAccount: React.FC = ({ diff --git a/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx b/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx index abc49ab6..02478060 100644 --- a/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx +++ b/packages/frontend/src/components/projects/create/MockConnectGitCard.tsx @@ -94,7 +94,7 @@ export const MockConnectGitCard = () => { }, [segmentedControlsValue]); return ( -
+
{/* Content */} { {renderContent} {/* Shade */} -
+
); }; @@ -121,18 +121,18 @@ const MockProjectCard = ({ visibility?: string; }) => { return ( -
+
{/* Icon container */} -
+
{/* Content */}
-

+

{full_name}

-

+

{updated_at && relativeTimeISO(updated_at)}

@@ -149,13 +149,13 @@ const MockProjectCard = ({ const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => { return ( -
+
{/* Icon */} -
+
{/* Name */} -

+

{name}

diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts index eedb9b24..c6ffd5b6 100644 --- a/packages/frontend/src/components/shared/Button/Button.theme.ts +++ b/packages/frontend/src/components/shared/Button/Button.theme.ts @@ -39,10 +39,10 @@ export const buttonTheme = tv( 'text-elements-on-primary', 'border', 'border-transparent', - 'bg-controls-primary', + 'bg-primary', 'shadow-button', - 'hover:bg-controls-primary-hovered', - 'focus-visible:bg-controls-primary-hovered', + 'hover:bg-primary-hovered', + 'focus-visible:bg-primary-hovered', 'disabled:text-elements-on-disabled', 'disabled:bg-controls-disabled', 'disabled:border-transparent', @@ -52,7 +52,7 @@ export const buttonTheme = tv( 'text-elements-on-secondary', 'border', 'border-transparent', - 'bg-controls-secondary', + 'bg-secondary', 'hover:bg-controls-secondary-hovered', 'focus-visible:bg-controls-secondary-hovered', 'disabled:text-elements-on-disabled', diff --git a/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx index e048198f..5419f6bf 100644 --- a/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx @@ -11,7 +11,7 @@ export const GitIcon: React.FC = (props) => { > ); diff --git a/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx index 01db4b9f..f6a3c227 100644 --- a/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx @@ -13,7 +13,7 @@ export const GithubIcon: React.FC = (props) => { fillRule="evenodd" clipRule="evenodd" d="M9.9702 0.206024C4.45694 0.206024 0 4.69582 0 10.2503C0 14.6903 2.85571 18.4487 6.81735 19.7789C7.31265 19.8789 7.49408 19.5628 7.49408 19.2968C7.49408 19.064 7.47776 18.2658 7.47776 17.4342C4.70429 18.033 4.12674 16.2368 4.12674 16.2368C3.68102 15.0728 3.02061 14.7736 3.02061 14.7736C2.11286 14.1583 3.08673 14.1583 3.08673 14.1583C4.09367 14.2248 4.62204 15.1893 4.62204 15.1893C5.51327 16.7191 6.94939 16.2868 7.52714 16.0207C7.60959 15.3721 7.87388 14.9232 8.15449 14.6738C5.94245 14.4409 3.6151 13.5762 3.6151 9.71807C3.6151 8.62051 4.01102 7.72256 4.63837 7.02419C4.53939 6.7748 4.19265 5.74358 4.73755 4.36337C4.73755 4.36337 5.57939 4.09725 7.47755 5.39439C8.29022 5.17453 9.12832 5.06268 9.9702 5.06174C10.812 5.06174 11.6702 5.17827 12.4627 5.39439C14.361 4.09725 15.2029 4.36337 15.2029 4.36337C15.7478 5.74358 15.4008 6.7748 15.3018 7.02419C15.9457 7.72256 16.3253 8.62051 16.3253 9.71807C16.3253 13.5762 13.998 14.4242 11.7694 14.6738C12.1327 14.9897 12.4461 15.5883 12.4461 16.5362C12.4461 17.8832 12.4298 18.9642 12.4298 19.2966C12.4298 19.5628 12.6114 19.8789 13.1065 19.7791C17.0682 18.4485 19.9239 14.6903 19.9239 10.2503C19.9402 4.69582 15.4669 0.206024 9.9702 0.206024Z" - fill="#0B1D2E" + fill="#FBFBFB" /> ); diff --git a/packages/frontend/src/components/shared/CustomIcon/LaconicIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/LaconicIcon.tsx new file mode 100644 index 00000000..c87b62f2 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/LaconicIcon.tsx @@ -0,0 +1,21 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const LaconicIcon: React.FC = (props) => { + return ( + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx index 8ede3c0d..f35e69f5 100644 --- a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx +++ b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx @@ -18,7 +18,7 @@ export const IconWithFrame = ({ 'relative justify-center items-center gap-2.5 inline-flex', 'w-16 h-16 rounded-2xl shadow-inner', 'border border-b-[3px] border-border-interactive border-opacity-10', - 'bg-controls-secondary', + 'bg-background', className, )} {...props} diff --git a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts index ed54a072..8d153c9a 100644 --- a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts +++ b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts @@ -9,6 +9,7 @@ export const segmentedControlsTheme = tv({ 'flex', 'items-center', 'bg-base-bg-emphasized', + 'dark:bg-background', 'gap-0.5', 'rounded-lg', ], @@ -18,6 +19,7 @@ export const segmentedControlsTheme = tv({ 'justify-center', 'gap-2', 'text-elements-mid-em', + 'dark:text-foreground', 'bg-transparent', 'border', 'border-transparent', @@ -26,6 +28,7 @@ export const segmentedControlsTheme = tv({ 'rounded-lg', 'focus-ring', 'hover:bg-controls-tertiary-hovered', + 'dark:hover:bg-overlay2', 'focus-visible:z-20', 'focus-visible:bg-controls-tertiary-hovered', 'disabled:text-controls-disabled', @@ -33,6 +36,7 @@ export const segmentedControlsTheme = tv({ 'disabled:cursor-not-allowed', 'disabled:border-transparent', 'data-[active=true]:bg-controls-tertiary', + 'dark:data-[active=true]:bg-overlay2', 'data-[active=true]:text-elements-high-em', 'data-[active=true]:border-border-interactive/10', 'data-[active=true]:shadow-field', diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx index a9360c17..b04db295 100644 --- a/packages/frontend/src/layouts/ProjectSearch.tsx +++ b/packages/frontend/src/layouts/ProjectSearch.tsx @@ -69,7 +69,7 @@ const ProjectSearch = () => {
{/* Content */} -
+
diff --git a/packages/frontend/src/logo.svg b/packages/frontend/src/logo.svg deleted file mode 100644 index 3781af8a..00000000 --- a/packages/frontend/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/frontend/src/pages/AuthPage.tsx b/packages/frontend/src/pages/AuthPage.tsx index b72c0af6..d942962b 100644 --- a/packages/frontend/src/pages/AuthPage.tsx +++ b/packages/frontend/src/pages/AuthPage.tsx @@ -3,7 +3,7 @@ import { Login } from './auth/Login'; const AuthPage = () => { return ( - +
{ alt="snowball logo" className="h-10 rounded-xl" /> -
- Snowball -
-
+
- +
); }; diff --git a/packages/frontend/src/pages/auth/CreatePasskey.tsx b/packages/frontend/src/pages/auth/CreatePasskey.tsx index b976f973..d715e19d 100644 --- a/packages/frontend/src/pages/auth/CreatePasskey.tsx +++ b/packages/frontend/src/pages/auth/CreatePasskey.tsx @@ -24,16 +24,16 @@ export const CreatePasskey = ({}: Props) => { } return ( -
+
-
+
-
+
Create a passkey
-
+
Passkeys allow you to sign in securely without using passwords.
@@ -43,7 +43,7 @@ export const CreatePasskey = ({}: Props) => {
-
+
Give it a name
diff --git a/packages/frontend/src/pages/auth/Done.tsx b/packages/frontend/src/pages/auth/Done.tsx index f29f89a2..a60b91fe 100644 --- a/packages/frontend/src/pages/auth/Done.tsx +++ b/packages/frontend/src/pages/auth/Done.tsx @@ -10,16 +10,16 @@ type Props = { }; export const Done = ({ continueTo }: Props) => { return ( -
+
-
+
-
+
You're in!
-
+
It's time to get your project rolling 😎
@@ -33,7 +33,7 @@ export const Done = ({ continueTo }: Props) => { href={continueTo} variant={'primary'} > - Enter Snowball + Enter Laconic
diff --git a/packages/frontend/src/pages/auth/Login.tsx b/packages/frontend/src/pages/auth/Login.tsx index a1acc1c5..2c4682aa 100644 --- a/packages/frontend/src/pages/auth/Login.tsx +++ b/packages/frontend/src/pages/auth/Login.tsx @@ -4,8 +4,8 @@ export const Login = () => { return (
-
- Sign in to Snowball +
+ Sign in to Laconic
diff --git a/packages/frontend/src/pages/index.tsx b/packages/frontend/src/pages/index.tsx index a300e873..17db31b3 100644 --- a/packages/frontend/src/pages/index.tsx +++ b/packages/frontend/src/pages/index.tsx @@ -3,28 +3,105 @@ import { Navigate } from 'react-router-dom'; import { useGQLClient } from '../context/GQLClientContext'; import { Organization } from 'gql-client'; +const owner = { + id: 'user', + name: 'Cody', + email: 'cody@cfb.dev', + isVerified: true, + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', + gitHubToken: 'token', +}; + +const domain = { + id: 'domain', + branch: 'idk', + name: 'Domain', + status: 'Live', + redirectTo: null, + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; +const deployment = { + id: 'deployment', + domain, + branch: 'branch', + commitHash: 'beefb0d', + commitMessage: 'beef', + deployerLrn: 'deployer', + environment: 'Development', + isCurrent: true, + status: 'Ready', + createdBy: owner, + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; +const member = { + id: 'member_id', + member: owner, + permissions: ['Edit'], + isPending: false, + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; + +const environmentVariable = { + id: 'env_var_id', + environment: 'Development', + key: 'key', + value: 'value', + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; +const project = { + id: 'project', + owner, + deployments: [deployment], + name: 'Project', + repository: 'snowball', + prodBranch: 'main', + description: 'description', + template: 'template', + framework: 'framework', + webhooks: ['webhook'], + members: [member], + environmentVariables: [environmentVariable], + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; + +const organizationMember = { + id: 'member_id', + member: owner, + role: 'Owner', + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', +}; +const testOrg = { + id: 'org_id', + name: 'Test Org', + slug: 'test', + projects: [project], + createdAt: '2024-10-22-12:00:00Z', + updatedAt: '2024-10-22-12:00:00Z', + members: [organizationMember], +}; const Index = () => { const client = useGQLClient(); - const [organization, setOrganization] = useState(); + // const [organization, setOrganization] = useState(testOrg); - const fetchUserOrganizations = useCallback(async () => { - const { organizations } = await client.getOrganizations(); - // By default information of first organization displayed - setOrganization(organizations[0]); - }, []); - - useEffect(() => { - fetchUserOrganizations(); - }, []); + // const fetchUserOrganizations = useCallback(async () => { + // const { organizations } = await client.getOrganizations(); + // // By default information of first organization displayed + // setOrganization(organizations[0]); + // }, []); + // + // useEffect(() => { + // fetchUserOrganizations(); + // }, []); return ( - <> - {Boolean(organization) ? ( - - ) : ( - <>Loading - )} - + <>{Boolean(testOrg) ? : <>Loading} ); }; diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx index e12cbd27..cc5c6084 100644 --- a/packages/frontend/src/pages/org-slug/index.tsx +++ b/packages/frontend/src/pages/org-slug/index.tsx @@ -30,7 +30,7 @@ const Projects = () => {
- + Projects diff --git a/packages/frontend/src/pages/org-slug/layout.tsx b/packages/frontend/src/pages/org-slug/layout.tsx index b1bf2226..fce893c6 100644 --- a/packages/frontend/src/pages/org-slug/layout.tsx +++ b/packages/frontend/src/pages/org-slug/layout.tsx @@ -39,7 +39,7 @@ export const DashboardLayout = ({
@@ -112,7 +112,7 @@ export const DashboardLayout = ({ }} transition={{ ease: 'easeInOut', duration: 0.3 }} > -
+
diff --git a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx index abdfa8c5..32c13b78 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/layout.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/layout.tsx @@ -20,7 +20,10 @@ export const CreateProjectLayout = ({ const closeBtnLink = `/${orgSlug}`; const heading = ( - + Create new project ); @@ -30,17 +33,20 @@ export const CreateProjectLayout = ({ {/* Desktop */}