polish projects page

Author: techpixel

lark-ui/src/lib/Button.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    const { label, disabled, icon = undefined }: {
+        label: string;
+        disabled: boolean;
+        icon?: string;
+    } = $props();
+</script>
+
+<button class="submit-button" disabled={disabled}>
+    <p>{label}</p>
+    {#if icon}
+        <img src="/icons/{icon}.svg" alt="icon" />
+    {/if}
+</button>
+
+<style>
+    .submit-button {
+        position: relative;
+        font-family: "Moga", sans-serif;
+        font-size: 48px;
+        color: white;
+
+        background: #F24B4B;
+        padding: 0 24px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+
+        cursor: pointer;
+        transition: background 0.2s;
+
+        height: 60px;
+    }
+
+    .submit-button p {
+        letter-spacing: -0.5px;
+        line-height: 60px;
+        text-align: center;
+
+        margin: 0;
+
+        translate: 0 3px;
+    }
+
+    .submit-button:not(:disabled):hover {
+        background: #f07575;
+    }
+
+    .submit-button:disabled:hover {
+        background: #b0b0b0;
+    }    
+
+    .submit-button:disabled {
+        cursor: not-allowed;
+    }
+</style>

lark-ui/src/lib/auth.ts

@@ -49,9 +49,10 @@ export type Project = {
   userId: string;
   projectTitle: string;
   projectType: 'personal_website' | 'platformer_game' | 'wildcard';
-  projectDescription: string;
+  description: string;
   createdAt: Date;
   updatedAt: Date;
+  nowHackatimeHours: number | null;
 };
 
 export async function createProject(data: {

lark-ui/src/routes/app/projects/+page.svelte

@@ -49,7 +49,7 @@
             href={'/app/projects/' + project.projectId}
           />
           {#if !user?.onboardComplete}
-            <img alt="this is your project!" src="/your_project.png" style="width: 140px; margin-top: 0px" />
+            <img alt="this is your project!" src="/handdrawn_text/your_project.png" style="width: 140px; margin-top: 0px" />
           {/if}
         </div>
       {/each}

lark-ui/src/routes/app/projects/[id]/+page.svelte

@@ -5,6 +5,7 @@
   import { goto } from '$app/navigation';
   import { getProject } from '$lib/auth';
   import type { Project } from '$lib/auth';
+    import Button from '$lib/Button.svelte';
   
   let project = $state<Project | null>(null);
   let loading = $state(true);
@@ -51,31 +52,29 @@
   {:else if error}
     <div class="error">Error: {error}</div>
   {:else if project}
-    <div class="project-content">
+    <div class="project-overview">
       <div class="project-card-preview">
         <img src="/card-blah.svg" alt={project.projectTitle} />
       </div>
 
-      <div class="project-details">
-        <h1 class="project-title">{project.projectTitle}</h1>
-        
-        <p class="project-time">time spent: 2 hours</p>
-        
-        <p class="project-description">
-          {project.projectDescription}
-        </p>
-        
-        <div class="submit-section">
-          <button class="submit-button" disabled={locked}>
-            SUBMIT →
-            {#if locked}
-              <div class="lock-indicator">
-                <img src="/lock-circle.svg" alt="Locked" class="lock-circle" />
-                <img src="/lock-icon.svg" alt="Locked" class="lock-icon" />
-              </div>
+      <div class="project-content">
+        <div class="project-details">
+          <div class="project-heading">
+            <h1 class="project-title">{project.projectTitle}</h1>
+            {#if project.nowHackatimeHours}
+              <h2 class="project-time">2 hours</h2>
             {/if}
-          </button>
+          </div>
+          
+          <p class="project-description">
+            {project.description}
+          </p>          
         </div>
+
+          <div class="submit-section">
+            <Button label="LINK HACKATIME" disabled={false} icon="link" />
+            <img alt="required!" src="/handdrawn_text/required.png" style="width: 140px;" />
+          </div>       
       </div>
     </div>
   {/if}
@@ -122,7 +121,7 @@
     color: #f24b4b;
   }
 
-  .project-content {
+  .project-overview {
     display: flex;
     gap: 47px;
   }
@@ -138,27 +137,40 @@
     height: 100%;
   }
 
+  .project-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
   .project-details {
     flex: 1;
-    padding-top: 33px;
+  }
+
+  .project-heading {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 8px;
   }
 
   .project-title {
     font-family: 'Moga', sans-serif;
     font-size: 90px;
     color: white;
     letter-spacing: -0.99px;
-    margin: 0 0 10px 0;
-    line-height: 1.5;
+    margin: 0;
+    line-height: 1;
   }
 
   .project-time {
-    font-family: 'PT Serif', serif;
-    font-size: 32px;
+    font-family: 'Moga', serif;
+    font-size: 40px;
     color: white;
     letter-spacing: -0.352px;
-    margin: 0 0 16px 0;
-    line-height: 1.5;
+    margin: 0;
+    line-height: 1;
+    padding-bottom: 2px;
   }
 
   .project-description {
@@ -173,62 +185,15 @@
 
   .submit-section {
     position: relative;
-  }
-
-  .submit-button {
-    position: relative;
-    font-family: 'Moga', sans-serif;
-    font-size: 48px;
-    color: white;
-    background: #9a9a9a;
-    border: none;
-    padding: 0;
-    width: 227px;
-    height: 67px;
+    
     display: flex;
-    align-items: center;
-    justify-content: center;
-    letter-spacing: -0.528px;
-    line-height: 1.5;
-    cursor: pointer;
-    transition: background 0.2s;
-  }
-
-  .submit-button:not(:disabled):hover {
-    background: #b0b0b0;
-  }
-
-  .submit-button:disabled {
-    cursor: not-allowed;
-  }
-
-  .lock-indicator {
-    position: absolute;
-    top: -12px;
-    right: -12px;
-    width: 48px;
-    height: 48px;
-    z-index: 1;
-  }
-
-  .lock-circle {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .lock-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 24px;
-    height: 24px;
+    flex-direction: row;
+    align-items: end;
+    gap: 4px;
   }
 
   @media (max-width: 1024px) {
-    .project-content {
+    .project-overview {
       flex-direction: column;
     }
 
@@ -261,12 +226,6 @@
     .project-description {
       font-size: 14px;
     }
-
-    .submit-button {
-      font-size: 36px;
-      width: 180px;
-      height: 56px;
-    }
   }
 
   @media (max-width: 480px) {
@@ -277,11 +236,5 @@
     .project-time {
       font-size: 20px;
     }
-
-    .submit-button {
-      font-size: 28px;
-      width: 150px;
-      height: 48px;
-    }
   }
 </style>