From 5ac30fa8253cfa75c0ae58ab6c33c9f4fc892059 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 16 Sep 2023 22:22:24 +0100
Subject: [PATCH] Add visit landing page site button

---
 .../components/Buttons/VisitOrgSite.svelte    | 18 +++++++++
 src/lib/components/Form/TextArea.svelte       |  2 +
 src/lib/components/Icons/ArrowTopRight.svelte | 17 +++++++++
 .../components/Org/Settings/Domains.svelte    | 38 +++++++++----------
 src/lib/components/Org/SideBar.svelte         |  5 ++-
 src/routes/org/[slug]/+page.svelte            | 22 +++++++----
 6 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/components/Buttons/VisitOrgSite.svelte
 create mode 100644 src/lib/components/Icons/ArrowTopRight.svelte

diff --git a/src/lib/components/Buttons/VisitOrgSite.svelte b/src/lib/components/Buttons/VisitOrgSite.svelte
new file mode 100644
index 00000000..dd676b79
--- /dev/null
+++ b/src/lib/components/Buttons/VisitOrgSite.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import ArrowUpRightIcon from '$lib/components/Icons/ArrowTopRight.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+
+  export let className = '';
+</script>
+
+<a
+  href={`https://${$currentOrg.siteName}.classroomio.com`}
+  target="_blank"
+  class="{className} ml-2 hover:no-underline"
+>
+  <PrimaryButton>
+    View site
+    <ArrowUpRightIcon />
+  </PrimaryButton>
+</a>
diff --git a/src/lib/components/Form/TextArea.svelte b/src/lib/components/Form/TextArea.svelte
index 8a1f47c9..eaea58fd 100644
--- a/src/lib/components/Form/TextArea.svelte
+++ b/src/lib/components/Form/TextArea.svelte
@@ -12,6 +12,7 @@
   export let errorMessage = '';
   export let isRequired = false;
   export let onChange = () => {}; // This is to know if element is 'dirty'
+  export let ref;
 
   $: minHeight = `${1 + parseInt(rows, 10) * 1.2}em`;
   $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -39,6 +40,7 @@
     {rows}
     {placeholder}
     bind:value
+    bind:this={ref}
     required={isRequired}
     class="form-textarea dark:bg-gray-500 dark:text-gray-800 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
     {bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
diff --git a/src/lib/components/Icons/ArrowTopRight.svelte b/src/lib/components/Icons/ArrowTopRight.svelte
new file mode 100644
index 00000000..8f0131be
--- /dev/null
+++ b/src/lib/components/Icons/ArrowTopRight.svelte
@@ -0,0 +1,17 @@
+<span class="button-trailing">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-arrow-up-right"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <line x1="17" y1="7" x2="7" y2="17" /><polyline points="8 7 17 7 17 16" />
+  </svg>
+</span>
diff --git a/src/lib/components/Org/Settings/Domains.svelte b/src/lib/components/Org/Settings/Domains.svelte
index 17413479..531386a3 100644
--- a/src/lib/components/Org/Settings/Domains.svelte
+++ b/src/lib/components/Org/Settings/Domains.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
@@ -11,8 +11,9 @@
   import { snackbarStore } from '$lib/components/Snackbar/store';
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
   import SectionTitle from '../SectionTitle.svelte';
+  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
 
-  let siteName;
+  let siteName = '';
   let errors = '';
   let isLoading = false;
 
@@ -44,13 +45,13 @@
     isLoading = false;
   }
 
-  function setSiteName(_siteName) {
+  function setSiteName(_siteName: string) {
     if (!siteName) {
       siteName = _siteName;
     }
   }
 
-  function resetErrors(_siteName) {
+  function resetErrors(_siteName: string) {
     if (errors) {
       errors = '';
     }
@@ -62,13 +63,10 @@
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4} class="text-lg"
-      ><SectionTitle>Add</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4} class="text-lg"><SectionTitle>Add</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       <p class="text-md text-gray-500 dark:text-white mb-5">
-        Add your team mates or collaborators to your organization. Start working
-        together
+        Add your team mates or collaborators to your organization. Start working together
       </p>
 
       <div>
@@ -83,21 +81,23 @@
           labelClassName=""
           errorMessage={errors}
         />
-        <PrimaryButton
-          label="Change Domain"
-          className="mb-6 py-4"
-          variant={VARIANTS.CONTAINED}
-          onClick={handleChangeDomain}
-          isDisabled={isLoading}
-        />
+        <div class="flex items-center mb-6">
+          <PrimaryButton
+            label="Update Domain"
+            className="py-4"
+            variant={VARIANTS.OUTLINED}
+            onClick={handleChangeDomain}
+            isDisabled={isLoading}
+          />
+
+          <VisitOrgSiteButton />
+        </div>
       </div>
     </Column>
   </Row>
 
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4} class="text-lg"
-      ><SectionTitle>Custom domain</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4} class="text-lg"><SectionTitle>Custom domain</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       <div class="flex items-center">
         <p class="dark:text-white mr-3">Add your own domain name</p>
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index c497b403..ac831f3e 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -76,7 +76,10 @@
           height="h-7"
         />
       {:else if $currentOrg.shortName}
-        <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
+        <TextChip
+          value={$currentOrg.shortName}
+          className="bg-primary-200 dark:text-black font-bold"
+        />
       {/if}
 
       <OrgSelector />
diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte
index b4de8525..2d561854 100644
--- a/src/routes/org/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/+page.svelte
@@ -15,6 +15,8 @@
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
   import { Add } from 'carbon-icons-svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
+  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
 
   export let data;
   const { orgName } = data;
@@ -173,6 +175,8 @@
     return dateLessonData;
   }
 
+  function goToSite() {}
+
   onMount(() => {
     // Remove default shouldEnlargeDay=true when <DatePicker /> on mobile
     if ($store && $store.shouldEnlargeDay) {
@@ -196,13 +200,17 @@
 <div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
     <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
-    {#if $isMobile}
-      <PrimaryButton onClick={createCourse}>
-        <Add size={24} />
-      </PrimaryButton>
-    {:else}
-      <PrimaryButton label="Create Course" onClick={createCourse} />
-    {/if}
+    <div class="flex items-center">
+      {#if $isMobile}
+        <PrimaryButton onClick={createCourse}>
+          <Add size={24} />
+        </PrimaryButton>
+      {:else}
+        <PrimaryButton variant={VARIANTS.OUTLINED} label="Create Course" onClick={createCourse} />
+      {/if}
+
+      <VisitOrgSiteButton />
+    </div>
   </div>
 
   <div class="flex items-start flex-wrap">