Fix

CommonUI/src/Components/Dashboard/Account/Account.scss

@@ -0,0 +1,31 @@
+$primaryColor: rgb(246, 248, 250);
+
+.account {
+    position: relative;
+    user-select: none;
+
+    .preview {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        cursor: pointer;
+
+        svg {
+            color: rgb(52, 52, 52);
+            font-size: 1.2rem;
+        }
+    }
+
+    .details {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        padding-top: 3px;
+        width: 200px;
+        height: 100px;
+        background-color: white;
+        border-radius: 5px;
+        box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
+        color: darken($primaryColor, 70%);
+    }
+}

CommonUI/src/Components/Dashboard/Account/Account.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import './Account.scss';
+
+const Account = (): ReactElement => {
+    return (
+        <div className="account">
+            <div className="preview">
+                <FontAwesomeIcon icon={faUser} />
+            </div>
+            <div className="details"></div>
+        </div>
+    );
+};
+
+export default Account;

CommonUI/src/Components/Dashboard/Project/Project.tsx

@@ -1,16 +0,0 @@
-import React, { ReactElement, FC } from 'react';
-import Project from '../../../Types/Project';
-
-const SingleProject: FC<Project> = ({ name, isEditable }): ReactElement => {
-    return (
-        <div>
-            <div>
-                <img src="img/placeholder.png" alt="Project Image" />
-                <p>{name}</p>
-            </div>
-            {isEditable && <span>Edit</span>}
-        </div>
-    );
-};
-
-export default SingleProject;

CommonUI/src/Components/Dashboard/ProjectPicker/CurrentProject.tsx

@@ -1,25 +1,22 @@
 import React, { ReactElement, useState } from 'react';
-import ProjectLists from './ProjectLists';
+import ProjectList from './ProjectList';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './Project.scss';
 
-const ProjectView = (): ReactElement => {
-    const [showProjects, setShowProjects] = useState(false);
+const CurrentProject = (): ReactElement => {
+    const [showList, setShowList] = useState(false);
 
     return (
         <div className="projectPreview">
-            <div
-                className="preview"
-                onClick={() => setShowProjects(!showProjects)}
-            >
+            <div className="preview" onClick={() => setShowList(!showList)}>
                 <img src="img/placeholder.png" alt="Project Image" />
                 <p>Flow</p>
                 <FontAwesomeIcon icon={faCaretDown} />
             </div>
-            {showProjects && <ProjectLists />}
+            {showList && <ProjectList />}
         </div>
     );
 };
 
-export default ProjectView;
+export default CurrentProject;

CommonUI/src/Components/Dashboard/ProjectPicker/ProjectItem.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+
+const SingleProject = (): ReactElement => {
+    return (
+        <div>
+            <div>
+                <img src="img/placeholder.png" alt="Project Image" />
+                <p>Project name</p>
+            </div>
+            <span>Edit</span>
+        </div>
+    );
+};
+
+export default SingleProject;

CommonUI/src/Components/Dashboard/ProjectPicker/ProjectList.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react';
-import SingleProject from './Project';
+import ProjectItem from './ProjectItem';
 
 const ProjectLists = (): ReactElement => {
     return (
         <div className="lists">
-            <SingleProject name="Flow" isEditable={true} />
-            <SingleProject name="Test" isEditable={false} />
+            <ProjectItem />
+            <ProjectItem />
         </div>
     );
 };

CommonUI/src/Components/Dashboard/TopBar/TopBar.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
-import ProjectView from '../Project/ProjectView';
+import Account from '../Account/Account';
+import CurrentProject from '../ProjectPicker/CurrentProject';
 import SearchBar from './SearchBar/SearchBar';
 import './TopBar.scss';
 
@@ -7,9 +8,11 @@ const TopBar = (): ReactElement => {
     return (
         <div className="root">
             <header>
-                <ProjectView />
+                <CurrentProject />
                 <SearchBar />
-                <div>3</div>
+                <div>
+                    <Account />
+                </div>
             </header>
             <nav></nav>
         </div>

CommonUI/src/Types/Project.ts

@@ -1,7 +0,0 @@
-type Project = {
-    name: string;
-    image?: string;
-    isEditable: boolean;
-};
-
-export default Project;

Dashboard/.dockerignore

@@ -0,0 +1,55 @@
+.git
+
+node_modules
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+.idea
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+
+env.js
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+yarn.lock
+Untitled-1
+*.local.sh
+*.local.yaml
+run
+stop
+
+nohup.out*
+
+encrypted-credentials.tar
+encrypted-credentials/
+
+_README.md
+
+# Important Add production values to gitignore.
+values-saas-production.yaml
+kubernetes/values-saas-production.yaml
+
+/private
+
+/tls_cert.pem
+/tls_key.pem
+/keys
+
+temp_readme.md
+
+tests/coverage
+
+settings.json
+
+GoSDK/tester/

Dashboard/.gitattributes

@@ -0,0 +1 @@
+*.js text eol=lf

Dashboard/.gitignore

@@ -0,0 +1,55 @@
+.git
+
+node_modules
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+.idea
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+
+env.js
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+yarn.lock
+Untitled-1
+*.local.sh
+*.local.yaml
+run
+stop
+
+nohup.out*
+
+encrypted-credentials.tar
+encrypted-credentials/
+
+_README.md
+
+# Important Add production values to gitignore.
+values-saas-production.yaml
+kubernetes/values-saas-production.yaml
+
+/private
+
+/tls_cert.pem
+/tls_key.pem
+/keys
+
+temp_readme.md
+
+tests/coverage
+
+settings.json
+
+GoSDK/tester/

Dashboard/src/App.tsx

@@ -1,13 +1,13 @@
-import React, { ReactElement } from 'react';
+import React, { FunctionComponent } from 'react';
 import TopBar from 'CommonUI/src/Components/Dashboard/TopBar/TopBar';
 import './App.scss';
 
-function App(): ReactElement {
+const App: FunctionComponent = () => {
     return (
         <div className="App">
             <TopBar />
         </div>
     );
-}
+};
 
 export default App;

Dashboard/src/Footer.tsx

@@ -1,20 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { Link } from 'react-router-dom';
-
-const Footer: FunctionComponent = () => {
-    return (
-        <div className="footer">
-            <p>
-                <Link to="/">&copy; OneUptime</Link>
-            </p>
-            <p>
-                <Link to="/">Contact</Link>
-            </p>
-            <p>
-                <Link to="/">Privacy &amp; terms</Link>
-            </p>
-        </div>
-    );
-};
-
-export default Footer;