verify/ui: add logout button (#248)

* verify/ui: add logout button * add new line
pomerium · Nov 10, 2023 · b7c525c · b7c525c
1 parent e9d5c60
commit b7c525c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/ui/dist/index.css b/ui/dist/index.css
@@ -217,23 +217,20 @@ a:hover {
 /******* Header *******/
 
 .header {
-  padding: 30px 0;
-  height: 41px;
-  position: relative;
+  box-sizing: border-box;
+  padding: 37px 8px 34px 15px;
 }
 
 .header span {
   color: #6e43e8;
   font-size: 16px;
-  line-height: 31px;
-  position: absolute;
-  left: 255px;
-  top: 42px;
 }
 
 .heading {
-  float: left;
-  margin: 7px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .statuses {
@@ -244,9 +241,10 @@ a:hover {
   display: inline-block;
   position: relative;
   background: url(/img/logo-long.svg) no-repeat;
-  width: 663px;
+  width: 230px;
   height: 26px;
   cursor: pointer;
+  margin-right: 8px;
 }
 
 .logo:hover {

diff --git a/ui/package.json b/ui/package.json
@@ -16,6 +16,7 @@
     "@borderless/base64": "^1.0.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.7",
     "base64-arraybuffer": "^1.0.2",
     "prettier": "^2.8.8",

diff --git a/ui/src/components/Verify.tsx b/ui/src/components/Verify.tsx
@@ -1,3 +1,4 @@
+import LogoutIcon from '@mui/icons-material/Logout';
 import React, { FC, useEffect, useState } from 'react';
 
 import { fetchVerifyInfo, VerifyInfo } from '../api';
@@ -19,7 +20,15 @@ const Verify: FC = () => {
     <div className="inner">
       <div className="header clearfix">
         <div className="heading">
-          <a href="/" className="logo"></a> <span>{info?.request?.host}</span>
+          <div>
+            <a href="/" className="logo"></a>
+            <span>{info?.request?.host}</span>
+          </div>
+          <div>
+            <a href="/.pomerium/sign_out" title={'Logout'}>
+              <LogoutIcon />
+            </a>
+          </div>
         </div>
       </div>
 

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -119,6 +119,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -518,6 +525,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.7.tgz#95bed2487bf59632125a13b8eb8f4c21e460afec"
   integrity sha512-sCWTUNElBPgB30iLvWe3PU7SIlTKZNf6/E/sko85iHVeHCM6WPkDw+y89CrZYjhFNmPqt2fIQM/pZu+rP2lFLA==
 
+"@mui/icons-material@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.16.tgz#bd394183b0cfb068d4fa48292cd8d329be8d6b16"
+  integrity sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 "@mui/material@^5.14.7":
   version "5.14.7"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.7.tgz#6c2c0de8a625562f789e1bb33cb4cfc8cf20bdb0"