Redesign authorize contributor page

[hmacr]

Related task: https://linear.app/appwrite/issue/SER-213/forked-prs-autorization-page-broken

Summary by CodeRabbit

• Style

  • Updated authenticated Git layout to a full-screen background with a footer and theme-aware “Powered by” Appwrite logo.
  • Refreshed authorize-contributor page with a centered, component-based design; clearer title; status messages displayed as badges; primary action as a styled button.

• Refactor

  • Replaced custom layout and inline elements with standardized components for improved consistency and responsiveness.
  • Simplified styling by removing legacy grids and classes, relying on design system components.

[appwrite]

Console

Project ID: 688b7bf400350cbd60e9

Sites (2)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL
console-cloud 688b7c18002b9b871a8f	Ready	View Logs	Preview URL

Note

Cursor pagination performs better than offset pagination when loading further pages.

[coderabbitai]

Walkthrough

The git route layout replaces the Container with a full-viewport .auth-bg wrapper containing a section for the console slot and a footer showing “POWERED BY” with a theme-dependent Appwrite logo. It imports base from $app/paths, app store, and Typography, and removes the Container import. Image sources now prefix with base and switch by theme. New SCSS styles fix positioning and responsive layout. The authorize-contributor page refactors UI to @appwrite.io/pink-svelte components (Layout, Typography, Badge, Button), centralizes content, removes logos/footer, and keeps approveDeployment logic with updated message rendering and button handling.

Possibly related PRs

• fix: base paths #2386: Similar base path import and use of ${base} for Appwrite logo/image URLs in layout components.
• Misc fixes. #2310: Updates the @appwrite.io/pink-svelte package used by this PR’s new Typography/Layout/Button components.
• Cleanup #2288: Also modifies src/routes/(authenticated)/git/authorize-contributor/+page.svelte, affecting its initialization/data handling.

Suggested reviewers

• ItzNotABug
• eldadfux

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Redesign authorize contributor page” succinctly captures the primary user-facing change introduced by this PR, namely the complete UI overhaul of the authorize-contributor route, without including unnecessary detail or noise. It directly relates to the main modification and is phrased clearly so that reviewers immediately understand the core intent of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch hmacr/ser-213

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/routes/(authenticated)/git/authorize-contributor/+page.svelte (1)

1-68: Fix Prettier formatting.

The pipeline reports that this file fails the Prettier formatting check. Run prettier --write to fix formatting issues before merging.

#!/bin/bash
# Fix Prettier formatting for this file
prettier --write "src/routes/(authenticated)/git/authorize-contributor/+page.svelte"

🧹 Nitpick comments (1)

src/routes/(authenticated)/git/+layout.svelte (1)

18-30: Consider consolidating the theme-based image logic.

The conditional blocks for dark/light logos are nearly identical. Consider extracting the image path to a reactive statement for cleaner code.

Example refactor:

+    $: logoSrc = `${base}/images/appwrite-logo-${$app.themeInUse === 'dark' ? 'dark' : 'light'}.svg`;
+
     <footer>
         <Typography.Eyebrow color="--fgcolor-neutral-secondary">POWERED BY</Typography.Eyebrow>
-        {#if $app.themeInUse === 'dark'}
-            <img
-                src="{base}/images/appwrite-logo-dark.svg"
-                width="120"
-                height="22"
-                alt="Appwrite Logo" />
-        {:else}
-            <img
-                src="{base}/images/appwrite-logo-light.svg"
-                width="120"
-                height="22"
-                alt="Appwrite Logo" />
-        {/if}
+        <img
+            src={logoSrc}
+            width="120"
+            height="22"
+            alt="Appwrite Logo" />
     </footer>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5804804 and 55344f2.

📒 Files selected for processing (2)

• src/routes/(authenticated)/git/+layout.svelte (1 hunks)
• src/routes/(authenticated)/git/authorize-contributor/+page.svelte (2 hunks)

🧰 Additional context used

🪛 GitHub Actions: Tests

src/routes/(authenticated)/git/+layout.svelte

[error] 1-1: Prettier formatting check failed for this file. Run 'prettier --write' to fix code style issues.

src/routes/(authenticated)/git/authorize-contributor/+page.svelte

[error] 1-1: Prettier formatting check failed for this file. Run 'prettier --write' to fix code style issues.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: e2e

🔇 Additional comments (2)

src/routes/(authenticated)/git/authorize-contributor/+page.svelte (2)

30-51: LGTM! Deployment approval logic is solid.

The approveDeployment function correctly:

• Prevents concurrent calls via the loading guard
• Clears previous messages before each attempt
• Handles success and error cases appropriately
• Maintains proper loading state in finally block

---

54-68: Confirm style prop forwarding in Layout.Stack
Please verify that the Layout.Stack component from pink-svelte forwards the style attribute to its rendered DOM element; if it doesn’t, wrap it in a container or update the component to accept and apply the style prop.