Adds badge & call to action

Author: JWittmeyer

src/app/base/components/header/header.component.html

@@ -1,8 +1,21 @@
 <header class="sticky top-0 z-10 w-full">
     <div
         class="relative z-10 flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm flex justify-between items-center">
-        <div *ngIf="hideLogout" class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
-            <div class="font-bold text-red-500">Demo - Everything will be reset on the hour</div>
+        <div *ngIf="hideLogout"
+            class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center pointer-events-none">
+            <span class="inline-flex items-center px-2 py-0.5 rounded font-medium bg-red-100 text-red-800">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-play-card mr-2" width="24"
+                    height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                    <rect transform="rotate(90 12 12)" x="3" y="5" width="18" height="14" rx="2"></rect>
+                    <line x1="8" y1="6" x2="8.01" y2="6"></line>
+                    <line x1="16" y1="18" x2="16.01" y2="18"></line>
+                    <path d="M12 16l-3 -4l3 -4l3 4z"></path>
+                </svg>
+                Demo Playground - Everything will be reset on the hour
+            </span>
+            <!-- <div class="font-bold text-red-500">Demo - Everything will be reset on the hour</div> -->
         </div>
         <div class="flex items-center">
             <ng-container [ngSwitch]="page">
@@ -61,6 +74,20 @@
                     </svg>
                 </a>
             </div>
+            <div class="flex items-center justify-center">
+                <a href="https://github.com/code-kern-ai/refinery" target="_blank" data-tip="Star us on GitHub"
+                    rel="noopener noreferrer" class="flex mr-6 tooltip tooltip-left">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24"
+                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path
+                            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
+                        </path>
+                    </svg>
+                </a>
+
+            </div>
             <div class="flex justify-center overflow-visible">
                 <div *ngIf="user && !hideLogout" class="dropdown dropdown-right dropdown-end mr-4">
                     <a tabindex="0" class="w-full cursor-pointer">

src/app/base/interceptors/DemoError.ts

@@ -10,6 +10,6 @@ export class DemoError extends Error {
 
     errorMessage(): string {
         if (this.message) return this.message
-        return "This function isn't part of the demo application";
+        return "This function isn't part of the demo application.\nIf you want to test this function, don't hesitate to check out our open-source or hosted versions!";
     }
 }