Merge branch 'master' into mobile-responsive

Common/UI/Components/Header/Header.tsx

@@ -14,20 +14,20 @@ const Header: FunctionComponent<ComponentProps> = (
     <React.Fragment>
       <div
         className={
-          props.className || "relative flex h-16 justify-between bg-white"
+          props.className || "relative flex h-16 justify-between items-center bg-white px-4 sm:px-6 lg:px-8"
         }
       >
-        <div className="relative z-20 flex px-2 lg:px-0">
+        <div className="flex items-center">
           {props.leftComponents}
         </div>
 
         {props.centerComponents && (
-          <div className="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0">
+          <div className="hidden sm:flex flex-1 items-center justify-center px-2">
             {props.centerComponents}
           </div>
         )}
 
-        <div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center">
+        <div className="flex items-center space-x-4">
           {props.rightComponents}
         </div>
       </div>

Common/UI/Components/Header/ProjectPicker/ProjectPicker.tsx

@@ -36,7 +36,7 @@ const ProjectPicker: FunctionComponent<ComponentProps> = (
   }, [isComponentVisible]);
 
   return (
-    <div className="w-64 mr-3">
+    <div className="w-full max-w-xs sm:max-w-sm md:max-w-md lg:w-64 mr-3">
       <div className="relative mt-3 w-full">
         <button
           onClick={() => {
@@ -54,7 +54,7 @@ const ProjectPicker: FunctionComponent<ComponentProps> = (
               className="h-6 w-6 flex-shrink-0 rounded-full"
             />
 
-            <span className="ml-3 block truncate">
+            <span className="ml-3 block truncate text-sm sm:text-base">
               {props.selectedProjectName}
             </span>
           </span>

Common/UI/Components/MasterPage/MasterPage.tsx

@@ -41,9 +41,9 @@ const MasterPage: FunctionComponent<ComponentProps> = (
   return (
     <React.Fragment>
       {isOnline && (
-        <div className={props.className}>
+        <div className={props.className || "min-h-screen bg-gray-50"}>
           <div
-            className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
+            className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-40"}
           >
             <TopSection
               hideHeader={props.hideHeader}
@@ -53,9 +53,15 @@ const MasterPage: FunctionComponent<ComponentProps> = (
             />
           </div>
 
-          {props.children}
+          <main className="flex-1 overflow-y-auto">
+            {props.children}
+          </main>
 
-          {props.footer && props.footer}
+          {props.footer && (
+            <footer className="mt-auto">
+              {props.footer}
+            </footer>
+          )}
         </div>
       )}
       <OfflineIndicator

Common/UI/Components/Navbar/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export interface ComponentProps {
   children: ReactElement | Array<ReactElement>;
@@ -9,16 +9,96 @@ export interface ComponentProps {
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
+  
   const className: string =
     props.className || "flex text-center lg:space-x-8 lg:py-2 bg-white ";
 
   return (
     <nav className={props.rightElement ? `flex justify-between` : ""}>
-      <div data-testid="nav-children" className={className}>
-        {props.children}
+      {/* Mobile menu button */}
+      <div className="lg:hidden">
+        <button
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+          aria-expanded="false"
+        >
+          <span className="sr-only">Open main menu</span>
+          {!isMobileMenuOpen ? (
+            <svg
+              className="block h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          ) : (
+            <svg
+              className="block h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          )}
+        </button>
       </div>
-      {props.rightElement && (
-        <div className={className}>{props.rightElement}</div>
+
+      {/* Desktop menu */}
+      <div className="hidden lg:flex lg:items-center lg:space-x-8">
+        <div data-testid="nav-children" className={className}>
+          {props.children}
+        </div>
+        {props.rightElement && (
+          <div className={className}>{props.rightElement}</div>
+        )}
+      </div>
+
+      {/* Mobile menu */}
+      {isMobileMenuOpen && (
+        <div className="lg:hidden">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
+            <div className="flex flex-col space-y-1">
+              {React.Children.map(props.children, (child, index) => {
+                if (React.isValidElement(child)) {
+                  return React.cloneElement(child, {
+                    key: index,
+                    isRenderedOnMobile: true,
+                    onClick: () => setIsMobileMenuOpen(false),
+                  } as any);
+                }
+                return child;
+              })}
+            </div>
+            {props.rightElement && (
+              <div className="pt-3 border-t border-gray-200">
+                {React.isValidElement(props.rightElement) ? 
+                  React.cloneElement(props.rightElement, {
+                    isRenderedOnMobile: true,
+                    onClick: () => setIsMobileMenuOpen(false),
+                  } as any) : 
+                  props.rightElement
+                }
+              </div>
+            )}
+          </div>
+        </div>
       )}
     </nav>
   );

Common/UI/Components/Page/Page.tsx

@@ -54,7 +54,7 @@ const Page: FunctionComponent<ComponentProps> = (
           {props.title && (
             <div className="mt-2 md:flex md:items-center md:justify-between">
               <div className="min-w-0">
-                <h2 className="text-xl leading-7  text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
+                <h2 className="text-xl leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
                   {props.title}
                 </h2>
               </div>
@@ -64,12 +64,12 @@ const Page: FunctionComponent<ComponentProps> = (
       )}
 
       {props.sideMenu && (
-        <main className="mx-auto max-w-full pb-10 mr-5">
+        <main className="mx-auto max-w-full pb-10 mr-0 lg:mr-5">
           <div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 sm:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
+              <div className="space-y-6 px-0 sm:px-6 lg:col-span-10 md:col-span-9 lg:px-0 mt-6 lg:mt-0">
                 {props.children}
               </div>
             )}

Common/UI/Components/TopSection/TopSection.tsx

@@ -13,8 +13,14 @@ const TopSection: FunctionComponent<ComponentProps> = (
   return (
     <header className={props.className || "bg-white shadow"}>
       <div className="w-full px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
-        {!props.hideHeader && props.header}
-        {props.navbar}
+        {!props.hideHeader && (
+          <div className="flex items-center justify-between">
+            {props.header}
+          </div>
+        )}
+        <div className="w-full">
+          {props.navbar}
+        </div>
       </div>
     </header>
   );

Dashboard/src/Components/MasterPage/MasterPage.tsx

@@ -116,9 +116,11 @@ const DashboardMasterPage: FunctionComponent<ComponentProps> = (
         }
         isLoading={props.isLoading}
         error={error}
-        className="flex flex-col h-screen justify-between"
+        className="flex flex-col min-h-screen"
       >
-        {props.children}
+        <div className="flex-1">
+          {props.children}
+        </div>
       </MasterPage>
     </div>
   );