Update canary design (#41)

enjin · Oct 20, 2023 · 50803e0 · 50803e0
1 parent 0c5441c
commit 50803e0
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Platform</title>
+        <title>Enjin Platform</title>
     </head>
     <body class="h-full">
         <div id="app" class="h-full"></div>

diff --git a/resources/js/components/CanaryEnjinLogo.vue b/resources/js/components/CanaryEnjinLogo.vue
@@ -0,0 +1,22 @@
+<template>
+    <svg viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M0 240C0 107.452 107.452 0 240 0C372.548 0 480 107.452 480 240C480 372.548 372.548 480 240 480C107.452 480 0 372.548 0 240Z"
+            :fill="`url(#${uniqueId})`"
+        />
+        <path
+            d="M217.496 108.748C127.496 108.748 89.9961 147.201 89.9961 198.748L89.996 281.248C89.996 332.795 127.496 371.248 217.496 371.248L304.684 371.248C386.246 371.248 389.996 361.405 389.996 344.998C389.996 326.249 382.496 318.748 363.746 318.748L217.496 318.748C172.496 318.748 149.996 296.3 149.996 273.748L149.996 266.248L363.746 266.248C378.746 266.248 389.996 256.404 389.996 239.998C389.996 223.592 378.746 213.748 363.746 213.748L149.996 213.748L149.996 206.248C149.996 183.696 172.496 161.248 217.496 161.248L363.746 161.248C382.496 161.248 389.996 153.747 389.996 134.998C389.996 118.591 386.246 108.748 304.684 108.748L217.496 108.748Z"
+            fill="white"
+        />
+        <defs>
+            <linearGradient :id="uniqueId" x1="240" y1="97.5" x2="240" y2="480" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#7866D5" />
+                <stop offset="1" stop-color="#FFD964" />
+            </linearGradient>
+        </defs>
+    </svg>
+</template>
+
+<script setup lang="ts">
+const uniqueId = `enjin-logo-${Math.random().toString(36).substr(2, 9)}`;
+</script>
diff --git a/resources/js/components/SideNavbar.vue b/resources/js/components/SideNavbar.vue
@@ -1,9 +1,10 @@
 <template>
     <div class="w-64 flex-col hidden md:flex animate-slide-in">
-        <div class="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 pb-4">
+        <div class="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-4 pb-4">
             <div class="flex flex-shrink-0 items-center px-4">
-                <EnjinLogo class="h-8 w-auto" />
-                <span class="text-lg font-semibold ml-2">Platform</span>
+                <CanaryEnjinLogo v-if="canaryHost" class="h-8 w-auto" />
+                <EnjinLogo v-else class="h-8 w-auto" />
+                <span class="text-lg font-semibold ml-2">{{ pageTitle() }}</span>
             </div>
             <div class="mt-5 flex flex-grow flex-col">
                 <nav class="flex-1 bg-white" aria-label="Sidebar">
@@ -41,8 +42,32 @@
 import { computed } from 'vue';
 import { useAppStore } from '~/store';
 import EnjinLogo from '~/components/EnjinLogo.vue';
+import CanaryEnjinLogo from '~/components/CanaryEnjinLogo.vue';
 
 const navigations = computed(() => useAppStore().navigations);
+
+const canaryHost = computed(
+    () =>
+        window.location.origin.includes('canary') ||
+        window.location.origin.includes('staging') ||
+        useAppStore().config.network === 'canary'
+);
+
+(() => {
+    if (!canaryHost.value) {
+        document.title = 'Canary Enjin Platform';
+    } else {
+        document.title = 'Enjin Platform';
+    }
+})();
+
+const pageTitle = () => {
+    if (canaryHost.value) {
+        return 'Canary Platform';
+    } else {
+        return 'Platform';
+    }
+};
 </script>
 
 <style lang="scss" scoped>

diff --git a/resources/js/components/UserNavbar.vue b/resources/js/components/UserNavbar.vue
@@ -12,12 +12,14 @@
                             <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
                         </DisclosureButton>
 
-                        <EnjinLogo class="h-8 w-auto" />
-                        <span class="text-lg font-semibold ml-2">Platform</span>
+                        <CanaryEnjinLogo v-if="canaryHost" class="h-8 w-auto" />
+                        <EnjinLogo v-else class="h-8 w-auto" />
+                        <span class="text-lg font-semibold ml-2">{{ pageTitle() }}</span>
                     </div>
-                    <div class="hidden md:flex items-center" v-if="appStore.isMultiTenant && !appStore.hasValidConfig">
-                        <EnjinLogo class="h-8 w-auto" />
-                        <span class="text-lg font-semibold ml-2">Platform</span>
+                    <div v-if="appStore.isMultiTenant && !appStore.hasValidConfig" class="hidden md:flex items-center">
+                        <CanaryEnjinLogo v-if="canaryHost" class="h-8 w-auto" />
+                        <EnjinLogo v-else class="h-8 w-auto" />
+                        <span class="text-lg font-semibold ml-2">{{ pageTitle() }}</span>
                     </div>
                 </div>
                 <div class="flex items-center space-x-4" v-if="appStore.loggedIn">
@@ -54,13 +56,28 @@ import DisclosureMenu from '~/components/DisclosureMenu.vue';
 import NotificationsList from '~/components/NotificationsList.vue';
 import Handbook from '~/components/Handbook.vue';
 import WalletConnectButton from '~/components/WalletConnectButton.vue';
+import CanaryEnjinLogo from './CanaryEnjinLogo.vue';
 
 const open = ref(false);
 const help = ref(false);
 
 const appStore = useAppStore();
 
 const navigations = computed(() => appStore.navigations);
+const canaryHost = computed(
+    () =>
+        window.location.origin.includes('canary') ||
+        window.location.origin.includes('staging') ||
+        useAppStore().config.network === 'canary'
+);
+
+const pageTitle = () => {
+    if (canaryHost.value) {
+        return 'Canary Platform';
+    } else {
+        return 'Platform';
+    }
+};
 
 const openHelp = () => {
     help.value = true;

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
@@ -5,15 +5,12 @@
             <template v-else>
                 <div
                     v-if="!appStore.hasValidConfig && appStore.isMultiTenant"
-                    class="flex flex-col mb-6 space-y-2 w-full md:w-1/2 transition-all"
+                    class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
                 >
-                    <p class="col-span-2">Please complete these steps in order to use the platform:</p>
-                    <div v-if="!walletAccount" class="bg-primary-light p-2 text-white rounded-md">
-                        1. Add a wallet account
-                    </div>
-                    <div v-if="!tokens?.length" class="bg-primary-light p-2 text-white rounded-md">
-                        {{ walletAccount ? '1.' : '2.' }} Create an API token
-                    </div>
+                    <p class="font-bold">Initialization Guide</p>
+                    <p>Please complete these steps in order to use the platform:</p>
+                    <div v-if="!appStore.user?.account">1. Add a wallet account</div>
+                    <div v-if="!tokens?.length">{{ appStore.user?.account ? '1.' : '2.' }} Create an API token</div>
                 </div>
                 <div class="flex flex-col space-y-8">
                     <div class="">
@@ -164,7 +161,7 @@ const advancedMode = ref(appStore.advanced);
 const tokenName = ref();
 const walletAccount = ref(publicKeyToAddress(appStore.user?.account));
 const enableTokenCreate = ref(false);
-const enableAccountModify = ref(false);
+const enableAccountModify = ref(true);
 const loading = ref(appStore.user ? false : true);
 const creating = ref(false);
 const updating = ref(false);
@@ -248,6 +245,15 @@ const resetSettings = () => {
     router.push({ name: 'platform.setup' });
 };
 
+(() => {
+    if (appStore.user?.account) {
+        walletAccount.value = publicKeyToAddress(appStore.user.account);
+        enableAccountModify.value = false;
+    } else if (!appStore.isMultiTenant) {
+        enableAccountModify.value = false;
+    }
+})();
+
 watch(
     () => advancedMode.value,
     () => {
@@ -262,9 +268,8 @@ watch(
 watch(
     () => appStore.user?.account,
     (newAccount) => {
-        if (!newAccount) {
-            enableAccountModify.value = true;
-        } else {
+        if (newAccount) {
+            enableAccountModify.value = false;
             walletAccount.value = publicKeyToAddress(appStore.user?.account);
         }
 

diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -3,7 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>Platform</title>
+	<title>Enjin Platform</title>
+    <link href="/vendor/platform-ui/favicon.png" rel="shortcut icon" type="image/x-icon" />
 
 	@vite('resources/css/app.css', 'vendor/platform-ui/build')
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -49,11 +49,11 @@ module.exports = {
                 },
             },
             animation: {
-                'fade-in': 'fade-in 0.15s ease-in',
-                'fade-out': 'fade-out 0.15s ease-out',
-                'slide-in': 'slide-in 0.15s ease-in',
-                'slide-in-left': 'slide-in-left 0.15s ease-in',
-                'slide-out': 'slide-out 0.15s ease-out',
+                'fade-in': 'fade-in 0.2s ease-in',
+                'fade-out': 'fade-out 0.2s ease-out',
+                'slide-in': 'slide-in 0.2s ease-in',
+                'slide-in-left': 'slide-in-left 0.2s ease-in',
+                'slide-out': 'slide-out 0.2s ease-out',
             },
         },
     },