From 8e78305dee971ab2b6ed06aa7d33a5595e8837ce Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 25 Sep 2024 12:03:16 +0200
Subject: [PATCH] fix: design review

---
 src/lib/components/bottomModalAlert.svelte    | 22 ++-----
 src/lib/components/roles/default.svelte       | 17 +++--
 src/lib/components/roles/roles.svelte         | 23 ++++---
 src/lib/components/roles/upgrade.svelte       | 64 +++++++++++--------
 src/lib/elements/table/table.svelte           |  6 ++
 src/lib/stores/bottom-alerts.ts               |  1 +
 .../members/+page.svelte                      |  4 +-
 .../project-[project]/bottomAlerts.ts         |  4 +-
 8 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/bottomModalAlert.svelte b/src/lib/components/bottomModalAlert.svelte
index 9c693b30c..88693c3e4 100644
--- a/src/lib/components/bottomModalAlert.svelte
+++ b/src/lib/components/bottomModalAlert.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { isCloud } from '$lib/system';
     import { Button } from '$lib/elements/forms/index';
     import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
     import { app } from '$lib/stores/app';
@@ -146,9 +145,8 @@
                                           organization: $organization,
                                           project: $project
                                       })}
-                                external={!isCloud}
-                                fullWidthMobile
-                                on:click={() => handleClose()}>
+                                external={!!currentModalAlert.cta.external}
+                                fullWidthMobile>
                                 {shouldShowUpgrade ? 'Upgrade plan' : currentModalAlert.cta.text}
                             </Button>
 
@@ -252,9 +250,8 @@
                                               organization: $organization,
                                               project: $project
                                           })}
-                                    external={!isCloud}
-                                    fullWidthMobile
-                                    on:click={() => handleClose()}>
+                                    external={!!currentModalAlert.cta.external}
+                                    fullWidthMobile>
                                     {shouldShowUpgrade
                                         ? 'Upgrade plan'
                                         : currentModalAlert.cta.text}
@@ -285,14 +282,14 @@
                 on:click={() => (openModalOnMobile = true)}>
                 <div class="u-flex-vertical u-gap-4">
                     <div class="u-flex u-cross-center u-main-space-between">
-                        <h3 class="body-text-2 u-bold">Early access</h3>
+                        <h3 class="body-text-2 u-bold">New features available</h3>
                         <button on:click={hideAllModalAlerts}>
                             <span class="icon-x" />
                         </button>
                     </div>
 
                     <span class="u-width-fit-content">
-                        Opt-in to experiments, new features, and more.
+                        Explore new features to enhance your projects and improve security.
                     </span>
                 </div>
             </button>
@@ -313,11 +310,6 @@
         max-width: 289px;
     }
 
-    .showcase-image {
-        height: 132px;
-        min-width: 273px;
-    }
-
     .feature-count-tag {
         font-size: 12px;
         font-weight: 400;
@@ -389,7 +381,7 @@
         }
 
         .alert-container {
-            max-width: 289px;
+            max-width: 90vw;
         }
     }
 </style>
diff --git a/src/lib/components/roles/default.svelte b/src/lib/components/roles/default.svelte
index 1346bb933..7dec8905b 100644
--- a/src/lib/components/roles/default.svelte
+++ b/src/lib/components/roles/default.svelte
@@ -3,8 +3,17 @@
 </script>
 
 <Base>
-    By default, all members are assigned a <span class="u-bold">Developer</span> role. You can
-    change this at any time from your organization settings.
-    <a class="link" target="_blank" rel="noopener noreferrer" href="https://appwrite.io/docs/roles"
-        >Learn more.</a>
+    <div class="u-flex-vertical u-gap-8">
+        <p>
+            By default, all members are assigned a <span class="u-bold">Developer</span> role. You can
+            change this at any time from your organization settings.
+        </p>
+        <p>
+            <a
+                class="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://appwrite.io/docs/roles">Learn more</a> about roles.
+        </p>
+    </div>
 </Base>
diff --git a/src/lib/components/roles/roles.svelte b/src/lib/components/roles/roles.svelte
index 5e8de8601..dd5f74411 100644
--- a/src/lib/components/roles/roles.svelte
+++ b/src/lib/components/roles/roles.svelte
@@ -3,16 +3,15 @@
 </script>
 
 <Base>
-    <p class="u-bold">Roles</p>
-    <p>
-        Owner, Developer <span class="inline-tag u-normal u-x-small">Default</span>, Editor,
-        Analyst, Billing.
-    </p>
-    <p>
-        <a
-            class="link"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://appwrite.io/docs/roles">Learn more</a> about roles.
-    </p>
+    <div class="u-flex-vertical u-gap-8">
+        <p class="u-bold">Roles</p>
+        <p>Owner, Developer, Editor, Analyst and Billing.</p>
+        <p>
+            <a
+                class="link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://appwrite.io/docs/roles">Learn more</a> about roles.
+        </p>
+    </div>
 </Base>
diff --git a/src/lib/components/roles/upgrade.svelte b/src/lib/components/roles/upgrade.svelte
index 8953c3af0..aef66c12d 100644
--- a/src/lib/components/roles/upgrade.svelte
+++ b/src/lib/components/roles/upgrade.svelte
@@ -9,42 +9,52 @@
 
 <Base>
     {#if isCloud}
-        <p>
-            <span class="u-bold">Roles</span>
-            {#if $organization?.billingPlan === BillingPlan.FREE}
-                <span class="inline-tag u-normal u-x-small">Pro plan</span>
-            {/if}
-        </p>
         {#if $organization?.billingPlan !== BillingPlan.FREE}
-            <p>
-                Owner, Developer <span class="inline-tag u-normal u-x-small">Default</span>, Editor,
-                Analyst, Billing.
-            </p>
+            <div class="u-flex-vertical u-gap-8">
+                <p>
+                    <span class="u-bold">Roles</span>
+                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                        <span class="inline-tag u-normal u-x-small">Pro plan</span>
+                    {/if}
+                </p>
+                <p>Owner, Developer, Editor, Analyst and Billing.</p>
+            </div>
             <p>
                 <Button link external href="https://appwrite.io/docs/roles">Learn more</Button> about
                 roles.
             </p>
         {:else}
-            <p>
-                Owner, <span class="u-color-text-disabled">Developer, Editor, Analyst.</span>
-            </p>
-            <p class="u-flex u-main-end u-cross-center u-gap-12">
-                <Button text link external href="https://appwrite.io/docs/roles">Learn more</Button>
-                <a class="button is-secondary" href={$upgradeURL}>Upgrade plan</a>
+            <div class="u-flex-vertical u-gap-8">
+                <p>
+                    <span class="u-bold">Roles</span>
+                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                        <span class="inline-tag u-normal u-x-small">Pro plan</span>
+                    {/if}
+                </p>
+                <p>
+                    Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor
+                    or Analyst.
+                </p>
+            </div>
+            <p class="u-flex u-main-end u-cross-center u-gap-4">
+                <Button text external href="https://appwrite.io/docs/roles">Learn more</Button>
+                <Button secondary external href={$upgradeURL}>Upgrade plan</Button>
             </p>
         {/if}
     {:else}
-        <p>
-            <span class="u-bold">Roles</span>
-            <span class="inline-tag u-normal u-x-small">Appwrite Cloud</span>
-        </p>
-        <p>
-            Upgrade to Cloud to assign new roles to members or ask us about our entriprise self
-            hosted offering.
-        </p>
-        <p class="u-flex u-main-end u-cross-center u-gap-12">
-            <Button text link external href="https://appwrite.io/docs/roles">Learn more</Button>
-            <Button secondary link external href={$upgradeURL}>Upgrade to Cloud</Button>
+        <div class="u-flex-vertical u-gap-8">
+            <p>
+                <span class="u-bold">Roles</span>
+                <span class="inline-tag u-normal u-x-small">Appwrite Cloud</span>
+            </p>
+            <p>
+                Upgrade to Cloud to assign new roles to members or ask us about our entriprise self
+                hosted offering.
+            </p>
+        </div>
+        <p class="u-flex u-main-end u-cross-center u-gap-4">
+            <Button text external href="https://appwrite.io/docs/roles">Learn more</Button>
+            <Button secondary external href={$upgradeURL}>Upgrade to Cloud</Button>
         </p>
     {/if}
 </Base>
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index c758b7c82..179d411ce 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -21,3 +21,9 @@
     data-private>
     <slot />
 </svelte:element>
+
+<style>
+    :global(.table .button.is-text) {
+        --p-text-color-default: initial !important;
+    }
+</style>
diff --git a/src/lib/stores/bottom-alerts.ts b/src/lib/stores/bottom-alerts.ts
index e2ca2c108..2a5c7d85e 100644
--- a/src/lib/stores/bottom-alerts.ts
+++ b/src/lib/stores/bottom-alerts.ts
@@ -6,6 +6,7 @@ import type { Models } from '@appwrite.io/console';
 type BottomModalAlertAction = {
     text: string;
     link: (ctx: { organization: Organization; project: Models.Project }) => string;
+    external?: boolean;
 };
 
 export type BottomModalAlertItem = {
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index 17a0a6b85..63d0f393c 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -74,7 +74,7 @@
                 <TableCellHead width={160}>Name</TableCellHead>
                 <TableCellHead width={120}>Email</TableCellHead>
                 <div style:--p-col-width={120} class="table-thead-col" role="columnheader">
-                    <span class="u-flex u-gap-8 u-cross-baseline">
+                    <span class="u-flex u-cross-baseline">
                         <span class="eyebrow-heading-3"> Role </span>
                         <Drop isPopover bind:show={showPopover} display="inline-block">
                             &nbsp;<button
@@ -89,7 +89,7 @@
                             </button>
                             <svelte:fragment slot="list">
                                 <div
-                                    class="dropped card u-max-width-250 u-break-word"
+                                    class="dropped card u-max-width-300 u-break-word"
                                     style:--card-border-radius="var(--border-radius-small)"
                                     style:--p-card-padding=".75rem"
                                     style:box-shadow="var(--shadow-large)">
diff --git a/src/routes/(console)/project-[project]/bottomAlerts.ts b/src/routes/(console)/project-[project]/bottomAlerts.ts
index 93e96394d..80f73f969 100644
--- a/src/routes/(console)/project-[project]/bottomAlerts.ts
+++ b/src/routes/(console)/project-[project]/bottomAlerts.ts
@@ -1,11 +1,11 @@
 import { base } from '$app/paths';
 import RolesDark from '$lib/images/roles-dark.png';
-import RolesLight from '$lib/images/roles-dark.png';
+import RolesLight from '$lib/images/roles-light.png';
 import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
 
 const listOfPromotions: BottomModalAlertItem[] = [
     {
-        id: 'memberRoles',
+        id: 'memberRolesssssss',
         src: {
             dark: RolesDark,
             light: RolesLight