Merge pull request #130 from OneUptime/127-style-layout-for-topnav

Activate styling

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/ProjectPicker/CurrentProject.tsx

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

CommonUI/src/Components/Dashboard/ProjectPicker/Project.scss

@@ -0,0 +1,78 @@
+$primaryColor: rgb(246, 248, 250);
+
+.projectPreview {
+    position: relative;
+    user-select: none;
+
+    .preview {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        cursor: pointer;
+
+        img {
+            width: 30px;
+            border-radius: 50%;
+            margin: 10px;
+        }
+
+        p {
+            padding: 0;
+            margin: 0;
+            font-size: 1.3rem;
+            color: rgb(77, 75, 75);
+            font-weight: 400;
+            margin-right: 7px;
+        }
+
+        svg {
+            color: rgb(144, 139, 139);
+            font-size: 1.2rem;
+        }
+    }
+
+    .lists {
+        position: absolute;
+        top: 90%;
+        left: 0;
+        padding-top: 3px;
+        width: 200px;
+        height: fit-content;
+        background-color: white;
+        border-radius: 5px;
+        box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
+        color: darken($primaryColor, 70%);
+
+        div {
+            padding-bottom: 3px;
+            font-size: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+
+            img {
+                width: 30px;
+                border-radius: 50%;
+                margin: 5px;
+            }
+
+            p {
+                padding: 0;
+                font-size: 1.5rem;
+                font-weight: 500;
+                margin: 4px;
+            }
+
+            span {
+                font-size: 1.2rem;
+                margin-right: 10px;
+            }
+
+            &:hover {
+                color: $primaryColor !important;
+                background-color: #333;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+import ProjectItem from './ProjectItem';
+
+const ProjectLists = (): ReactElement => {
+    return (
+        <div className="lists">
+            <ProjectItem />
+            <ProjectItem />
+        </div>
+    );
+};
+
+export default ProjectLists;

CommonUI/src/Components/Dashboard/TopBar/SearchBar/SearchBar.scss

@@ -0,0 +1,61 @@
+$primaryColor: rgb(246, 248, 250);
+
+$transition: all 0.2s linear;
+
+.top-search {
+    background-color: white;
+    flex: 0 0 35% !important;
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    border: 1px solid darken($primaryColor, 4%);
+    border-radius: 100px;
+
+    & > * {
+        flex: 0 0 5%;
+        color: darken($primaryColor, 50%);
+    }
+
+    svg {
+        font-size: 1.2rem;
+        color: darken($primaryColor, 60%);
+        cursor: text;
+    }
+
+    .aside {
+        padding: 5px;
+        background-color: darken($primaryColor, 1%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        visibility: hidden;
+        transition: $transition;
+    }
+
+    svg:last-child {
+        font-size: 0.8rem;
+        color: darken($primaryColor, 25%);
+        transform: rotate(80deg);
+    }
+
+    &:hover > .aside {
+        visibility: visible;
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        outline: none;
+        padding: 5px;
+        font-size: 1.2rem;
+
+        &::placeholder {
+            color: darken($primaryColor, 30%);
+        }
+
+        &:focus + .aside {
+            visibility: hidden !important;
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import './SearchBar.scss';
+import { faSearch, faSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const SearchBar = (): ReactElement => {
+    return (
+        <div className="top-search">
+            <FontAwesomeIcon icon={faSearch} />
+            <input type="text" placeholder="Search..." />
+            <i className="aside">
+                <FontAwesomeIcon icon={faSlash} />
+            </i>
+        </div>
+    );
+};
+
+export default SearchBar;

CommonUI/src/Components/Dashboard/TopBar/TopBar.scss

@@ -0,0 +1,22 @@
+$primaryColor: rgb(246, 248, 250);
+
+.root {
+    width: 100vw;
+    height: 90px;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+
+    header {
+        height: 45px;
+        background-color: $primaryColor;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 40px;
+
+        & > * {
+            flex: 0 0 15%;
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import Account from '../Account/Account';
+import CurrentProject from '../ProjectPicker/CurrentProject';
+import SearchBar from './SearchBar/SearchBar';
+import './TopBar.scss';
+
+const TopBar = (): ReactElement => {
+    return (
+        <div className="root">
+            <header>
+                <CurrentProject />
+                <SearchBar />
+                <div>
+                    <Account />
+                </div>
+            </header>
+            <nav></nav>
+        </div>
+    );
+};
+
+export default TopBar;

Dashboard/.gitignore

@@ -1,22 +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
-/dist
 
 # misc
 .DS_Store
 
+env.js
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 yarn.lock
 Untitled-1
-.eslintcache
+*.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/package.json

@@ -1,8 +1,19 @@
 {
     "name": "dashboard",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "Common": "file:../Common",
+        "CommonServer": "file:../CommonServer",
+        "CommonUI": "file:../CommonUI",
+        "formik": "^2.2.9",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "react-router": "^6.3.0",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "5.0.1",
+        "typescript": "^4.6.4"
+    },
     "scripts": {
         "dev": "webpack-dev-server --port=3003 --mode=development",
         "build": "react-app-rewired build",
@@ -14,20 +25,6 @@
         "preinstall": "npm link ../CommonUI/node_modules/react && npx npm-force-resolutions || echo 'No package-lock.json file. Skipping force resolutions'",
         "dep-check": "depcheck ./ --skip-missing=true'"
     },
-    "dependencies": {
-        "Common": "file:../Common",
-        "CommonServer": "file:../CommonServer",
-        "CommonUI": "file:../CommonUI",
-        "formik": "^2.2.9",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
-        "react-router": "^6.3.0",
-        "react-router-dom": "^6.3.0",
-        "react-scripts": "^2.1.3",
-        "typescript": "^4.6.4"
-    },
-    "author": "",
-    "license": "MIT",
     "browserslist": {
         "production": [
             ">0.2%",

Dashboard/src/App.scss

@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+$xl: 87.5em;
+$lg: 60em;
+$med: 40em;
+$sm: 28em;
+$xs: 18em;
+
+$bglight: #fff;
+$bgDark: #000;
+$colorGrey: #808080;
+$lightBlue: rgb(23, 38, 176);
+$colorLightGrey: rgb(202, 202, 202);
+
+$transition: all 0.2s ease-in-out;
+
+@mixin responsive($query) {
+    @media (min-width: $query) {
+        @content;
+    }
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-family: 'Poppins', sans-serif;
+    color: lighten($bgDark, 25%);
+    font-size: 10px;
+}
+
+body {
+    background-color: $bglight;
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+
+    a {
+        text-decoration: none;
+
+        &:visited {
+            color: $lightBlue;
+        }
+    }
+}

Dashboard/src/App.tsx

@@ -1,11 +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">
-            <h1>This is my app</h1>
+            <TopBar />
         </div>
     );
-}
+};
 
 export default App;

Dashboard/webpack.config.js

@@ -1,38 +1,39 @@
-const path = require('path');
-const webpack = require('webpack');
+const path = require("path");
+const webpack = require("webpack");
 
 module.exports = {
-    entry: './src/Index.tsx',
-    mode: 'development',
+    entry: "./src/Index.tsx",
+    mode: "development",
     output: {
-        filename: 'bundle.js',
-        path: path.resolve('dist'),
-        publicPath: '/',
+        filename: "bundle.js",
+        path: path.resolve("dist"),
+        publicPath: "/",
     },
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss'],
+        extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss']
     },
     externals: {
-        'react-native-sqlite-storage': 'react-native-sqlite-storage',
+        'react-native-sqlite-storage': 'react-native-sqlite-storage'
     },
     module: {
         rules: [
             {
                 test: /\.(ts|tsx)$/,
-                use: 'ts-loader',
+                use: 'ts-loader'
             },
             {
                 test: /\.s[ac]ss$/i,
-                use: ['style-loader', 'css-loader', 'sass-loader'],
+                use: ['style-loader', 'css-loader', "sass-loader"]
             },
             {
                 test: /\.(png|j?g|svg|gif)?$/,
-                use: 'file-loader',
-            },
+                use: 'file-loader'
+            }
         ],
     },
     devServer: {
         historyApiFallback: true,
     },
     devtool: 'inline-source-map',
-};
+
+}