Edit Profile modal

packages/client/global.d.ts

@@ -2,6 +2,6 @@
 import { PrismaClient } from '@prisma/client';
 
 export declare global {
-    var handleSignInWithGoogle: ({ credential }: { credential: string }) => Promise<void>;
+    var signInWithGitHub: ({ credential }: { credential: string }) => Promise<void>;
     var prisma: PrismaClient | undefined;
 }

packages/client/lib/database.types.ts

@@ -165,7 +165,6 @@ export interface Database {
           image: string | null
           location: string | null
           updatedAt: string
-          userId: string
           username: string
           website: string | null
         }
@@ -176,7 +175,6 @@ export interface Database {
           image?: string | null
           location?: string | null
           updatedAt?: string
-          userId: string
           username: string
           website?: string | null
         }
@@ -187,7 +185,6 @@ export interface Database {
           image?: string | null
           location?: string | null
           updatedAt?: string
-          userId?: string
           username?: string
           website?: string | null
         }
@@ -201,7 +198,7 @@ export interface Database {
           layerOrder: string[] | null
           name: string
           originId: string | null
-          ownerId: string
+          profileId: string
           updatedAt: string
           visibility: Database["public"]["Enums"]["ProjectVisibility"]
         }
@@ -212,7 +209,7 @@ export interface Database {
           layerOrder?: string[] | null
           name: string
           originId?: string | null
-          ownerId: string
+          profileId: string
           updatedAt?: string
           visibility?: Database["public"]["Enums"]["ProjectVisibility"]
         }
@@ -223,7 +220,7 @@ export interface Database {
           layerOrder?: string[] | null
           name?: string
           originId?: string | null
-          ownerId?: string
+          profileId?: string
           updatedAt?: string
           visibility?: Database["public"]["Enums"]["ProjectVisibility"]
         }
@@ -235,8 +232,8 @@ export interface Database {
             referencedColumns: ["id"]
           },
           {
-            foreignKeyName: "Project_ownerId_fkey"
-            columns: ["ownerId"]
+            foreignKeyName: "Project_profileId_fkey"
+            columns: ["profileId"]
             referencedRelation: "Profile"
             referencedColumns: ["id"]
           }

packages/client/prisma/schema.prisma

@@ -7,11 +7,11 @@ datasource db {
   provider  = "postgresql"
   url       = env("DATABASE_URL")
   directUrl = env("DIRECT_URL")
+  schemas   = ["public", "auth", "storage"]
 }
 
 model Profile {
-  id              String          @id @default(uuid())
-  userId          String          @unique
+  id              String          @unique @id
   username        String          @unique
   image           String?
   location        String?
@@ -25,6 +25,8 @@ model Profile {
   subscription    Subscription?   @relation("subscription")
   createdAt       DateTime        @default(now())
   updatedAt       DateTime        @updatedAt @default(now())
+
+  @@schema("public")
 }
 
 model Relationship {
@@ -37,6 +39,7 @@ model Relationship {
   updatedAt         DateTime    @updatedAt @default(now())
 
   @@unique([profileId, targetProfileId])
+  @@schema("public")
 }
 
 model Subscription {
@@ -49,11 +52,14 @@ model Subscription {
   updatedAt             DateTime          @updatedAt @default(now())
 
   @@unique([stripeCustomerId, stripeSubscriptionId])
+  @@schema("public")
 }
 
 enum LayerType {
   FRAGMENT
   CIRCUIT
+
+  @@schema("public")
 }
 
 enum BlendingMode {
@@ -63,6 +69,8 @@ enum BlendingMode {
   SCREEN
   MULTIPLY
   OVERLAY
+
+  @@schema("public")
 }
 
 model Layer {
@@ -77,10 +85,16 @@ model Layer {
   project       Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
   createdAt     DateTime      @default(now())
   updatedAt     DateTime      @updatedAt @default(now())
+
+
+  @@schema("public")
 }
 
 enum UniformType {
   TEXTURE
+
+
+  @@schema("public")
 }
 
 model Uniform {
@@ -92,11 +106,17 @@ model Uniform {
   project       Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
   createdAt     DateTime      @default(now())
   updatedAt     DateTime      @updatedAt @default(now())
+
+
+  @@schema("public")
 }
 
 enum ProjectVisibility {
   PUBLIC
   PRIVATE
+
+
+  @@schema("public")
 }
 
 model Project {
@@ -105,8 +125,8 @@ model Project {
   description   String?
   layers        Layer[]
   layerOrder    String[]            @default([])
-  ownerId       String    
-  owner         Profile             @relation(fields: [ownerId], references: [id], onDelete: Cascade)
+  profileId       String    
+  owner         Profile             @relation(fields: [profileId], references: [id], onDelete: Cascade)
   uniforms      Uniform[]
   likes         Like[]
   comments      Comment[]
@@ -116,6 +136,8 @@ model Project {
   forks         Project[]           @relation("origin")
   createdAt     DateTime            @default(now())
   updatedAt     DateTime            @updatedAt @default(now())
+
+  @@schema("public")
 }
 
 model Like {
@@ -128,6 +150,7 @@ model Like {
   updatedAt   DateTime  @updatedAt @default(now())
 
   @@unique([projectId, profileId])
+  @@schema("public")
 }
 
 model Comment {
@@ -139,4 +162,6 @@ model Comment {
   text        String
   createdAt   DateTime  @default(now())
   updatedAt   DateTime  @updatedAt @default(now())
+
+  @@schema("public")
 }

packages/client/src/apollo/generated/graphql.ts

@@ -168,7 +168,6 @@ export type Profile = {
   projects: Array<Maybe<Project>>;
   subscription?: Maybe<Subscription>;
   updatedAt: Scalars['Date']['output'];
-  userId: Scalars['String']['output'];
   username: Scalars['String']['output'];
   website?: Maybe<Scalars['String']['output']>;
 };

packages/client/src/components/Avatar/Avatar.tsx

@@ -3,14 +3,16 @@ import { clsx } from 'clsx';
 import { AvatarProps } from './Avatar.types';
 import { Size } from '../../types';
 
-export const Avatar = ({ size = Size.SM, source = '' }: AvatarProps) => {
-    const classNames = clsx('shrink-0 rounded-full bg-cover bg-center', {
-        'w-10 h-10': size === Size.SM,
-        'w-24 h-24': size === Size.MD,
-        'w-48 h-48': size === Size.LG
-    });
+export const Avatar = ({ size = Size.SM, source = '', className, ...props }: AvatarProps) => {
+    const classNames = clsx(
+        'shrink-0 rounded-full bg-cover bg-center',
+        {
+            'w-10 h-10': size === Size.SM,
+            'w-24 h-24': size === Size.MD,
+            'w-48 h-48': size === Size.LG
+        },
+        className
+    );
 
-    const croppedSource = source.replace('s96-c', 's256-c');
-
-    return <div className={classNames} style={{ backgroundImage: `url(${croppedSource})` }} />;
+    return <div className={classNames} style={{ backgroundImage: `url(${source})` }} {...props} />;
 };

packages/client/src/components/Avatar/Avatar.types.ts

@@ -1,8 +1,10 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
 import { Size } from '../../types';
 
 export type AvatarSize = Extract<Size, Size.SM | Size.MD | Size.LG>;
 
-export type AvatarProps = {
+export type AvatarProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     source?: string;
     size?: AvatarSize;
 };

packages/client/src/components/Header/Header.tsx

@@ -4,52 +4,30 @@ import { clsx } from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import Script from 'next/script';
 
 import { HeaderNavigationLinkProps } from './Header.types';
 import { Avatar } from '../Avatar/Avatar';
-
 import { Database } from '@/lib/database.types';
 import { Size } from '~/types';
 
 const supabase = createClientComponentClient<Database>();
-async function handleSignInWithGoogle({ credential }: { credential: string }) {
-    await supabase.auth.signInWithIdToken({
-        provider: 'google',
-        token: credential
+
+async function signInWithGitHub() {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+        provider: 'github'
     });
 }
 
-global.handleSignInWithGoogle = handleSignInWithGoogle;
+global.signInWithGitHub = signInWithGitHub;
 
 export default function Header() {
     const session = useSession();
     const authSection = session ? (
         <Link href="/profile">
-            <Avatar size={Size.SM} source={session.user.user_metadata.picture} />
+            <Avatar size={Size.SM} source={session.user.user_metadata.avatar_url} />
         </Link>
     ) : (
-        <>
-            <Script src="https://accounts.google.com/gsi/client" async defer></Script>
-            <div
-                id="g_id_onload"
-                data-client_id="86219534501-b0qri9b7168frrlispegvsarkmt5gmm6.apps.googleusercontent.com"
-                data-context="signin"
-                data-ux_mode="popup"
-                data-callback="handleSignInWithGoogle"
-                data-auto_select="true"
-                data-itp_support="true"
-            ></div>
-            <div
-                className="g_id_signin"
-                data-type="standard"
-                data-shape="pill"
-                data-theme="outline"
-                data-text="signin_with"
-                data-size="large"
-                data-logo_alignment="left"
-            ></div>
-        </>
+        <button onClick={signInWithGitHub}>Login</button>
     );
 
     return (

packages/client/src/components/Input/Input.tsx

@@ -7,8 +7,8 @@ export const Input = ({ icon: Icon, className, ...props }: InputProps) => {
         'flex items-center px-3 py-2 bg-neutral-600 rounded-lg text-sm text-accent border border-neutral-500',
         className
     );
-    const inputClassNames = clsx('w-full text-xs bg-transparent outline-none text-text-dark', {
-        'ml-2': !!Icon
+    const inputClassNames = clsx('w-full text-xs bg-transparent outline-none text-slate-300 placeholder-slate-500', {
+        'ml-3': !!Icon
     });
 
     return (

packages/client/src/components/Modal/Modal.tsx

@@ -44,9 +44,9 @@ export const Modal = ({ modal: { title, children, actions, id }, onClose }: Moda
                             <CloseOutlined />
                         </div>
                     </div>
-                    <div className="relative flex flex-col pt-14 pb-4 max-h-96 overflow-y-auto">{children}</div>
+                    <div className="relative flex flex-col pt-14 pb-4 max-h-112 overflow-y-auto">{children}</div>
                     {actions && (
-                        <div className="flex flex-row justify-center items-center py-8 px-12 border-t border-neutral-500 [&>*]:mr-4 [&>*:last-child]:mr-0">
+                        <div className="flex flex-row justify-center items-center py-8 px-12 [&>*]:mr-4 [&>*:last-child]:mr-0">
                             {actions.map((action, index) => (
                                 <Button key={index} {...action} />
                             ))}

packages/client/src/constants/modals.ts

@@ -1,2 +1,3 @@
 export const NEW_LAYER_MODAL_ID = 'new-layer-modal';
 export const GLSL_EDITOR_MODAL_ID = 'glsl-editor-modal';
+export const EDIT_PROFILE_MODAL_ID = 'edit-profile-modal';

packages/client/src/containers/EditorHeader/EditorHeader.tsx

@@ -32,11 +32,13 @@ export const EditorHeader = () => {
     if (!project) return null;
 
     return (
-        <header className="absolute top-0 left-0 right-0 flex flex-row items-center justify-between p-12 pb-0">
-            <Link className="z-10" href="/">
-                <Image src="/alma_outline.png" alt="logo" width={40} height={40} quality={100} />
-            </Link>
-            <div className="absolute w-full flex flex-col items-center mx-auto">
+        <header className="absolute top-0 left-0 right-0 flex flex-row items-center justify-between p-12">
+            <div className="z-10">
+                <Link href="/abc">
+                    <Image src="/alma_outline.png" alt="logo" width={40} height={40} quality={100} />
+                </Link>
+            </div>
+            <div className="flex flex-col text-center z-10">
                 <h2 className="text-lg font-medium">{project.name}</h2>
                 <span className="text-sm mt-1 opacity-50">
                     {project.visibility === ProjectVisibility.Private ? 'Private' : 'Public'}
@@ -45,7 +47,7 @@ export const EditorHeader = () => {
             {session && (
                 <div className="z-10">
                     <Link href="/profile">
-                        <Avatar size={Size.SM} source={session.user.user_metadata.picture} />
+                        <Avatar size={Size.SM} source={session.user.user_metadata.avatar_url} />
                     </Link>
                 </div>
             )}

packages/client/src/containers/ProfileContainer/ProfileContainer.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 
 import { ProfileContainerProps } from './ProfileContainer.types';
-
 import { Avatar } from '~/components/Avatar/Avatar';
 import { Button } from '~/components/Button/Button';
 import { Spinner } from '~/components/Spinner/Spinner';
-import { useRelationshipAction } from '~/hooks/useRelationshipAction/useRelationshipAction';
+import { useProfileAction } from '~/hooks/useProfileAction/useProfileAction';
 import { Size } from '~/types';
 import { prettifyURL } from '~/utils/urls/urls';
 
@@ -18,7 +17,7 @@ export const ProfileContainer = ({
     website,
     loading
 }: ProfileContainerProps) => {
-    const relationshipAction = useRelationshipAction(profileId);
+    const profileAction = useProfileAction(profileId);
 
     return (
         <div className="relative">
@@ -37,7 +36,7 @@ export const ProfileContainer = ({
                             {prettifyURL(website)}
                         </a>
                     )}
-                    {relationshipAction && <Button className="w-full justify-center mt-12" {...relationshipAction} />}
+                    {profileAction && <Button className="w-full justify-center mt-12" {...profileAction} />}
                 </div>
             )}
         </div>