UI Rebrand (#1)

* Rebrand UI and increase responsiveness * Fix typo in PipelineViews and SettingsViews directory name * Inset FPS indicator in stream preview * Rebrand favicon
2026-07-06 03:31:41 +00:00 · 2020-06-28 03:11:09 -07:00
parent 3e8f3736af
commit 895edb988a
26 changed files with 101 additions and 429 deletions
--- a/photon-client/README.md
+++ b/photon-client/README.md
@@ -1,8 +1,8 @@
-# Chameleon Client UI
+# PhotonVision Client UI

 ## Install Node.js

-Follow [this](https://nodejs.org/en/) link
+Follow [this](https://nodejs.org/en/) link.

 ## Project setup
 Run this one time, this command downloades the packages the UI uses and it might take a short while
@@ -12,7 +12,8 @@ npm install
 ```

 ### Compiles and hot-reloads for development
-Run this every developing session, this command auto-build the UI after every change your make
+Run this every development session, this command auto-builds the UI after every change you make
+
 ```
 npm run serve
 ```
@@ -33,4 +34,4 @@ npm run lint
 ```

 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+See Node.js' [Configuration Reference](https://cli.vuejs.org/config/).
--- a/photon-client/package-lock.json
+++ b/photon-client/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "chameleon-client",
+  "name": "photon-client",
  "version": "3.0.0",
  "lockfileVersion": 1,
  "requires": true,
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "chameleon-client",
+  "name": "photon-client",
  "version": "3.0.0",
  "private": true,
  "scripts": {
--- a/photon-client/public/Roboto.css
+++ b/photon-client/public/Roboto.css
@@ -1,336 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
--- a/photon-client/public/favicon.png
+++ b/photon-client/public/favicon.png
--- a/photon-client/public/index.html
+++ b/photon-client/public/index.html
@@ -5,12 +5,16 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
-    <title>Chameleon Vision</title>
-    <link rel="stylesheet" href="<%= BASE_URL %>Roboto.css">
+    <title>PhotonVision</title>
+    <style>
+      body {
+        font-family: "Lato", sans-serif;
+      }
+    </style>
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but Chameleon Vision doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but PhotonVision doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -4,22 +4,20 @@
      app
      dense
      clipped-left
+      color="#006492"
      dark
    >
      <img
        class="imgClass"
        src="./assets/logo.png"
      >
-      <v-toolbar-title id="title">
-        Chameleon Vision
-      </v-toolbar-title>
      <div class="flex-grow-1" />
      <v-toolbar-items>
        <v-tabs
-          background-color="#272727"
+          background-color="#006492"
          dark
          height="48"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
        >
          <v-tab to="vision">
            Vision
@@ -42,7 +40,7 @@
              v-model="saveSnackbar"
              :timeout="1000"
              top
-              color="#4baf62"
+              color="#ffd843"
            >
              <div style="text-align: center;width: 100%;">
                <h4>Saved All changes</h4>
@@ -153,10 +151,6 @@
 </script>

 <style>
-    html {
-        overflow-y: hidden !important;
-    }
-
    .imgClass {
        width: auto;
        height: 45px;
@@ -186,17 +180,17 @@


    ::-webkit-scrollbar-thumb {
-        background-color: #4baf62;
+        background-color: #ffd843;
        border-radius: 10px;
    }

    .container {
-        background-color: #212121;
+        background-color: #232c37;
        padding: 0 !important;
    }

    #title {
-        color: #4baf62;
+        color: #ffd843;
    }

    span {
--- a/photon-client/src/assets/logo.png
+++ b/photon-client/src/assets/logo.png
--- a/photon-client/src/components/common/cv-radio.vue
+++ b/photon-client/src/components/common/cv-radio.vue
@@ -9,7 +9,7 @@
      <v-radio
        v-for="(name,index) in list"
        :key="index"
-        color="#4baf62"
+        color="#ffd843"
        :label="name"
        :value="index"
      />
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -15,7 +15,7 @@
          hide-details
          class="align-center"
          dark
-          color="#4baf62"
+          color="#ffd843"
          :step="step"
          @input="handleInput"
          @mousedown="$emit('rollback', localValue)"
--- a/photon-client/src/components/common/cv-select.vue
+++ b/photon-client/src/components/common/cv-select.vue
@@ -14,8 +14,8 @@
          item-text="name"
          item-value="index"
          dark
-          color="#4baf62"
-          item-color="green"
+          color="#fcf6de"
+          item-color="blue"
          :disabled="disabled"
          @change="$emit('rollback', localValue)"
        />
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/cv-slider.vue
@@ -15,7 +15,7 @@
          :max="max"
          :min="min"
          hide-details
-          color="#4baf62"
+          color="#ffd843"
          :step="step"
          @start="isClicked = true"
          @end="isClicked = false"
--- a/photon-client/src/components/common/cv-switch.vue
+++ b/photon-client/src/components/common/cv-switch.vue
@@ -12,7 +12,7 @@
          v-model="localValue"
          dark
          :disabled="disabled"
-          color="#4baf62"
+          color="#ffd843"
          @change="$emit('rollback', localValue)"
        />
      </v-col>
--- a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
+++ b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
@@ -128,7 +128,7 @@
      <v-btn
        style="position: absolute; top:5px;right: 0;"
        tile
-        color="#4baf62"
+        color="#ffd843"
        @click="handleInput('command','save')"
      >
        <v-icon>save</v-icon>
@@ -172,7 +172,7 @@
        <v-card-actions>
          <v-spacer />
          <v-btn
-            color="#4baf62"
+            color="#ffd843"
            @click="duplicatePipeline"
          >
            Duplicate
@@ -212,7 +212,7 @@
        <v-card-actions>
          <v-spacer />
          <v-btn
-            color="#4baf62"
+            color="#ffd843"
            :disabled="checkPipelineName !==''"
            @click="savePipelineNameChange"
          >
--- a/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
@@ -10,7 +10,7 @@
      >
        <v-btn
          small
-          color="#4baf62"
+          color="#ffd843"
          @click="takePointA"
        >
          Take Point A
@@ -22,7 +22,7 @@
      >
        <v-btn
          small
-          color="#4baf62"
+          color="#ffd843"
          @click="takePointB"
        >
          Take Point B
--- a/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
@@ -10,7 +10,7 @@
      >
        <v-btn
          small
-          color="#4baf62"
+          color="#ffd843"
          @click="takePoint"
        >
          Take Point
--- a/photon-client/src/store/modules/generalSettings.js
+++ b/photon-client/src/store/modules/generalSettings.js
@@ -1,10 +1,10 @@
 export default {
    state:{
-        teamNumber: 1577,
+        teamNumber: 0,
        connectionType: 0,
        ip: "",
        gateway: "",
        netmask: "",
-        hostname: "chameleon-vision"
+        hostname: "photon-vision"
    }
 }
--- a/photon-client/src/views/PipelineView.vue
+++ b/photon-client/src/views/PipelineView.vue
@@ -1,20 +1,23 @@
 <template>
  <div>
    <camera-and-pipeline-select />
-    <v-row>
+    <v-row no-gutters>
      <!-- vision tabs -->
      <v-col
-        cols="6"
-        class="colsClass"
+        cols="12"
+        sm="12"
+        md="7"
+        xl="6"
+        class="colsClass pr-8"
      >
        <v-tabs
          v-if="($store.getters.currentPipelineIndex + 1) !== 0"
          v-model="selectedTab"
          fixed-tabs
-          background-color="#212121"
+          background-color="#232c37"
          dark
          height="48"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
        >
          <v-tab>Input</v-tab>
          <v-tab>Threshold</v-tab>
@@ -39,7 +42,10 @@
        </div>
      </v-col>
      <v-col
-        cols="6"
+        cols="12"
+        sm="12"
+        md="5"
+        xl="6"
        class="colsClass"
      >
        <div>
@@ -47,10 +53,10 @@
          <v-tabs
            v-if="($store.getters.currentPipelineIndex + 1) !== 0"
            v-model="isBinaryNumber"
-            background-color="#212121"
+            background-color="#232c37"
            dark
            height="48"
-            slider-color="#4baf62"
+            slider-color="#ffd843"
            centered
            style="padding-bottom:10px"
            @change="handleInput('isBinary',$store.getters.pipeline.isBinary)"
@@ -65,15 +71,16 @@
          <!-- camera image stream -->
          <div class="videoClass">
            <v-row align="center">
-              <cvImage
-                :address="$store.getters.streamAddress"
-                :scale="75"
-                @click="onImageClick"
-              />
-            </v-row>
-            <v-row justify="end">
-              <span style="margin-right: 45px">FPS:{{ parseFloat(fps).toFixed(2) }}</span>
+              <div style="position: relative; width: 100%; height: 100%;">
+                <cvImage
+                  :address="$store.getters.streamAddress"
+                  :scale="75"
+                  @click="onImageClick"
+                />
+                <span style=" position: absolute; top: 0.2%; left: 13%;">FPS:{{ parseFloat(fps).toFixed(2) }}</span>
+              </div>
            </v-row>
+
            <v-row align="center">
              <v-simple-table
                style="text-align: center;background-color: transparent; display: block;margin: auto"
@@ -137,11 +144,11 @@
 <script>
    import CameraAndPipelineSelect from "../components/pipeline/CameraAndPipelineSelect";
    import cvImage from '../components/common/cv-image'
-    import InputTab from './PipelineViewes/InputTab'
-    import ThresholdTab from './PipelineViewes/ThresholdTab'
-    import ContoursTab from './PipelineViewes/ContoursTab'
-    import OutputTab from './PipelineViewes/OutputTab'
-    import pnpTab from './PipelineViewes/3D'
+    import InputTab from './PipelineViews/InputTab'
+    import ThresholdTab from './PipelineViews/ThresholdTab'
+    import ContoursTab from './PipelineViews/ContoursTab'
+    import OutputTab from './PipelineViews/OutputTab'
+    import pnpTab from './PipelineViews/3D'

    export default {
        name: 'CameraTab',
--- a/photon-client/src/views/PipelineViewes/3D.vue
+++ b/photon-client/src/views/PipelineViewes/3D.vue
@@ -54,7 +54,7 @@
          item-text="name"
          item-value="data"
          dark
-          color="#4baf62"
+          color="#ffd843"
          item-color="green"
        />
        <v-btn
--- a/photon-client/src/views/PipelineViewes/ContoursTab.vue
+++ b/photon-client/src/views/PipelineViewes/ContoursTab.vue
--- a/photon-client/src/views/PipelineViewes/InputTab.vue
+++ b/photon-client/src/views/PipelineViewes/InputTab.vue
--- a/photon-client/src/views/PipelineViewes/OutputTab.vue
+++ b/photon-client/src/views/PipelineViewes/OutputTab.vue
--- a/photon-client/src/views/PipelineViewes/ThresholdTab.vue
+++ b/photon-client/src/views/PipelineViewes/ThresholdTab.vue
@@ -25,37 +25,39 @@
      @rollback="e => rollback('value',e)"
    />
    <v-divider
-      color="darkgray "
+      color="black"
      style="margin-top: 5px"
    />
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(1)"
-    >
-      <v-icon>colorize</v-icon>
-      Eye drop
-    </v-btn>
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(2)"
-    >
-      <v-icon>add</v-icon>
-      Expand Selection
-    </v-btn>
-    <v-btn
-      style="margin: 20px;"
-      color="#4baf62"
-      small
-      @click="setFunction(3)"
-    >
-      <v-icon>remove</v-icon>
-      Shrink Selection
-    </v-btn>
-    <v-divider color="darkgray " />
+    <v-row justify="center">
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(1)"
+      >
+        <v-icon>colorize</v-icon>
+        Eye drop
+      </v-btn>
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(2)"
+      >
+        <v-icon>add</v-icon>
+        Expand Selection
+      </v-btn>
+      <v-btn
+        style="margin: 20px;"
+        color="#ffd843"
+        small
+        @click="setFunction(3)"
+      >
+        <v-icon>remove</v-icon>
+        Shrink Selection
+      </v-btn>
+    </v-row>
+    <v-divider color="black" />
    <CVswitch
      v-model="value.erode"
      name="Erode"
--- a/photon-client/src/views/SettingsView.vue
+++ b/photon-client/src/views/SettingsView.vue
@@ -7,11 +7,11 @@
      >
        <v-tabs
          v-model="selectedTab"
-          background-color="#212121"
+          background-color="#232c37"
          dark
          fixed-tabs
          height="50"
-          slider-color="#4baf62"
+          slider-color="#ffd843"
        >
          <v-tab to="">
            General
@@ -43,8 +43,8 @@
 </template>

 <script>
-    import General from './SettingsViewes/General'
-    import Cameras from './SettingsViewes/Cameras'
+    import General from './SettingsViews/General'
+    import Cameras from './SettingsViews/Cameras'
    import cvImage from '../components/common/cv-image'


--- a/photon-client/src/views/SettingsViewes/Cameras.vue
+++ b/photon-client/src/views/SettingsViewes/Cameras.vue
@@ -21,7 +21,7 @@
      <v-btn
        style="margin-top:10px"
        small
-        color="#4baf62"
+        color="#ffd843"
        @click="sendCameraSettings"
      >
        Save Camera Settings
--- a/photon-client/src/views/SettingsViewes/General.vue
+++ b/photon-client/src/views/SettingsViewes/General.vue
@@ -36,7 +36,7 @@
    <v-btn
      style="margin-top:10px"
      small
-      color="#4baf62"
+      color="#ffd843"
      @click="sendGeneralSettings"
    >
      Save General Settings