[dashboard] addition workspaces list features

Author: svenefftinge

components/dashboard/public/manifest.json

@@ -4,16 +4,16 @@
   "icons": [
     {
       "src": "favicon256.png",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "256x256 64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "favicon192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "favicon512.png",
       "type": "image/png",
       "sizes": "512x512"
     }

components/dashboard/src/components/ContextMenu.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 export interface ContextMenuProps {
     children: React.ReactChild[] | React.ReactChild;
     menuEntries: ContextMenuEntry[];
+    width?: string;
 }
 
 export interface ContextMenuEntry {
@@ -49,7 +50,7 @@ function ContextMenu(props: ContextMenuProps) {
                 {props.children}
             </div>
             {expanded?
-                <div className={`z-50 w-40 bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}>
+                <div className={`z-50 ${props.width || 'w-40'} bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}>
                     {enhancedEntries.map(e => {
                         const entry = <div key={e.title} className={`px-4 flex py-2 text-gray-600 hover:bg-gray-200 text-sm leading-1 ${e.customFontStyle || font} ${e.separator? ' border-b border-gray-200':''}`} >
                             <div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div>: null}

components/dashboard/src/components/DropDown.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import ContextMenu from './ContextMenu';
 
 export interface DropDownProps {
+    prefix?: string;
+    contextMenuWidth?: string;
     entries: { 
         title: string,
         onClick: ()=>void
@@ -26,8 +28,8 @@ function DropDown(props: DropDownProps) {
     })
     const font = "text-gray-400 text-sm leading-1"
     return (
-        <ContextMenu menuEntries={enhancedEntries}>
-            <span className={`py-2 cursor-pointer ${font}`}>{current}<Arrow up={false}/></span>
+        <ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>
+            <span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
         </ContextMenu>
     );
 }

components/dashboard/src/components/Modal.tsx

@@ -2,20 +2,29 @@ export default function Modal(props: {
     children: React.ReactChild[] | React.ReactChild,
     visible: boolean,
     closeable?: boolean,
+    className?: string,
     onClose: () => void
 }) {
     if (!props.visible) {
         return null;
     }
-    setTimeout(() => window.addEventListener('click', props.onClose, {once: true}), 0);
+    setTimeout(() => window.addEventListener('click', props.onClose, { once: true }), 0);
     return (
-        <div className="fixed top-0 -left-2 bg-black bg-opacity-70 z-50 w-screen h-screen" >
-            <div className="bg-transparent h-1/3" />
-            <div className="bg-white border rounded-xl p-6 max-w-lg mx-auto">
-                {props.closeable !== false && (
-                    <div className="float-right cursor-pointer" onClick={props.onClose}>&#10006;</div>
-                )}
-                {props.children}
+        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" >
+            <div className="w-screen h-screen align-middle" style={{display: 'table-cell'}}>
+                <div className={"relative bg-white border rounded-xl p-6 max-w-lg mx-auto text-gray-600" + props.className}>
+                    {props.closeable !== false && (
+                        <div className="absolute right-9 top-8 cursor-pointer" onClick={props.onClose}>
+                            <svg version="1.1" width="14px" height="14px"
+                                viewBox="0 0 100 100">
+                                <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="10px" />
+                                <line x1="0" y1="100" x2="100" y2="0" stroke="currentColor" strokeWidth="10px" />
+                            </svg>
+                        </div>
+
+                    )}
+                    {props.children}
+                </div>
             </div>
         </div>
     );

components/dashboard/src/index.css

@@ -9,7 +9,7 @@
         font-size: 48px;
     }
     h2 {
-        @apply text-base text-gray-400;
+        @apply text-base text-gray-500;
     }
     h3 {
         @apply text-2xl text-gray-900 leading-9 font-semibold;
@@ -29,7 +29,7 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-3 py-2 text-white text-sm rounded-md border-2 border-gray-900 bg-gray-500 hover:bg-gray-100;
+        @apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md;
     }
 
     input[type=text] {

components/dashboard/src/start/CreateWorkspace.tsx

@@ -93,14 +93,14 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
                   <p>{w.workspace.contextURL}</p>
                 </div>
                 <div className="flex">
-                  <button className="px-3 py-1 my-auto opacity-0 group-hover:opacity-100 bg-green-600 hover:bg-green-700 border-green-800">Open</button>
+                  <button>Open</button>
                 </div>
               </a>
             )}
           </>
         </div>
         <div className="flex justify-end mt-4">
-          <button className="bg-green-600 hover:bg-green-700 border-green-800" onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
+          <button onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
         </div>
       </Modal>;
     }