jams-react-client: Revamp UI/UX
Fixed general text alignements and margins
Set all icons with wired styles
Fixed responsive styles
Fix form errors display
Ticket: https://redmine.savoirfairelinux.com/issues/7437
Change-Id: I04b84ed40a24579c4d1d3dbf1e9ba2ba1e60c2a3
diff --git a/README.md b/README.md
index 1d7ca0e..8b83256 100644
--- a/README.md
+++ b/README.md
@@ -28,67 +28,18 @@
Where the `pem` and `key` files are a pem encoded certificate and key.
-## How to generate server.pem and server.key pair
+## How to generate a trusted server.pem and server.key pair
-In order to generate a pair of pem and key use the following command using openssl.
+In order to test JAMS with the Jami client, you need to generate a locally-trusted development certificate. Here is how to do it using `mkcert`:
-`openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout server.key -out server.pem`
+First follow the mkcert [installation guide](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation).
-Note that a self signed certificate will be rejected from opendht,
-QNetworkAccessManager and other curl-like program by default. The following
-changes should disable those checks.
-
-```diff
-src/http.cpp | 7 ++++---
- 1 file changed, 4 insertions(+), 3 deletions(-)
-
-diff --git a/src/http.cpp b/src/http.cpp
-index 6b7d4aad..f10a4138 100644
---- a/src/http.cpp
-+++ b/src/http.cpp
-@@ -111,7 +111,7 @@ std::shared_ptr<asio::ssl::context>
- newTlsClientContext(const std::shared_ptr<dht::Logger>& logger)
- {
- auto ctx = std::make_shared<asio::ssl::context>(asio::ssl::context::tls_client);
-- ctx->set_verify_mode(asio::ssl::verify_peer | asio::ssl::verify_fail_if_no_peer_cert);
-+ ctx->set_verify_mode(asio::ssl::verify_peer);
-
- if (char* path = getenv("CA_ROOT_FILE")) {
- if (logger)
-@@ -160,7 +160,7 @@ Connection::Connection(asio::io_context& ctx, std::shared_ptr<dht::crypto::Certi
- asio::error_code ec;
- if (server_ca) {
- ssl_ctx_ = std::make_shared<asio::ssl::context>(asio::ssl::context::tls_client);
-- ssl_ctx_->set_verify_mode(asio::ssl::verify_peer | asio::ssl::verify_fail_if_no_peer_cert);
-+ ssl_ctx_->set_verify_mode(asio::ssl::verify_peer);
- auto ca = server_ca->toString(false/*chain*/);
- ssl_ctx_->add_certificate_authority(asio::const_buffer{ca.data(), ca.size()}, ec);
- if (ec)
-@@ -488,6 +488,7 @@ Connection::set_ssl_verification(const std::string& hostname, const asio::ssl::v
- ssl_socket_->asio_ssl_stream().set_verify_callback([
- id = id_, logger = logger_, hostname, checkOcsp = checkOcsp_
- ] (bool preverified, asio::ssl::verify_context& ctx) -> bool {
-+ return true;
- X509* cert = X509_STORE_CTX_get_current_cert(ctx.native_handle());
- if (logger) {
- char subject_name[1024];
-@@ -1218,7 +1219,7 @@ Request::connect(std::vector<asio::ip::tcp::endpoint>&& endpoints, HandlerCb cb)
- conn_ = std::make_shared<Connection>(ctx_, server_ca_, client_identity_, logger_);
- else
- conn_ = std::make_shared<Connection>(ctx_, true/*ssl*/, logger_);
-- conn_->set_ssl_verification(get_url().host, asio::ssl::verify_peer | asio::ssl::verify_fail_if_no_peer_cert);
-+ conn_->set_ssl_verification(get_url().host, asio::ssl::verify_peer);
- }
- else
- conn_ = std::make_shared<Connection>(ctx_, false/*ssl*/, logger_);
+Then run the following commands:
```
-
-```cpp
-// jami-client-qt/src/app/networkmanager.cpp NetworkManager::NetworkManager
-QSslConfiguration sslConfig = QSslConfiguration::defaultConfiguration();
-sslConfig.setPeerVerifyMode(QSslSocket::VerifyNone);
-QSslConfiguration::setDefaultConfiguration(sslConfig);
+mkcert -install # Creates a local certificate authority (CA). This step is required only once.
+mkcert -key-file server.key -cert-file server.pem localhost 127.0.0.1 ::1
+cp server.key server.pem /path/to/jami-jams/jams/
```
## Run with the debugger enabled
diff --git a/jams-react-client/documentation/assets/css/material-dashboard.css b/jams-react-client/documentation/assets/css/material-dashboard.css
index 1e30549..3123b5c 100644
--- a/jams-react-client/documentation/assets/css/material-dashboard.css
+++ b/jams-react-client/documentation/assets/css/material-dashboard.css
@@ -2502,7 +2502,7 @@
.h2,
.h3,
.h4 {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: "Ubuntu", sans-serif;
font-weight: 300;
line-height: 1.5em;
}
diff --git a/jams-react-client/package-lock.json b/jams-react-client/package-lock.json
index 4877585..9ff5641 100644
--- a/jams-react-client/package-lock.json
+++ b/jams-react-client/package-lock.json
@@ -38,6 +38,7 @@
"react-i18next": "^11.7.3",
"react-image-file-resizer": "^0.3.8",
"react-router-dom": "5.2.0",
+ "ubuntu-fontface": "^0.1.13",
"yup": "^1.2.0"
},
"devDependencies": {
@@ -26886,6 +26887,11 @@
"node": ">=4.2.0"
}
},
+ "node_modules/ubuntu-fontface": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/ubuntu-fontface/-/ubuntu-fontface-0.1.13.tgz",
+ "integrity": "sha512-4gJ4uL5mzpWJ1F0xO+FWsB0r7FvDSxdo2771xrXT1s+gKN3d/EPzb2Bybu3shNPF3/Bd6QPX0z9szZlq6p2+EA=="
+ },
"node_modules/unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index dc9e5ab..9c5f975 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -34,6 +34,7 @@
"react-i18next": "^11.7.3",
"react-image-file-resizer": "^0.3.8",
"react-router-dom": "5.2.0",
+ "ubuntu-fontface": "^0.1.13",
"yup": "^1.2.0"
},
"scripts": {
diff --git a/jams-react-client/public/index.html b/jams-react-client/public/index.html
index 8ff5b32..025cfe1 100644
--- a/jams-react-client/public/index.html
+++ b/jams-react-client/public/index.html
@@ -20,44 +20,26 @@
-->
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1, shrink-to-fit=no"
- />
- <meta name="theme-color" content="#000000" />
- <!--
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+ <meta name="theme-color" content="#000000" />
+ <!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
- <link
- rel="apple-touch-icon"
- sizes="76x76"
- href="%PUBLIC_URL%/apple-icon.png"
- />
- <link
- rel="stylesheet"
- href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
- />
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
+ <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
- <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
- <link
- rel="stylesheet"
- href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
- />
- <link
- href="https://fonts.googleapis.com/icon?family=Material+Icons"
- rel="stylesheet"
- />
- <link
- rel="stylesheet"
- href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
- />
+ <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
- <!--
+ <!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@@ -66,12 +48,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>JAMS - Jami Account Management Server</title>
- </head>
- <body>
- <noscript> You need to enable JavaScript to run this app. </noscript>
- <div id="root"></div>
- <!--
+ <title>JAMS - Jami Account Management Server</title>
+</head>
+
+<body>
+ <noscript> You need to enable JavaScript to run this app. </noscript>
+ <div id="root"></div>
+ <!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -81,5 +64,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
- </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/jams-react-client/src/assets/css/material-dashboard-react.css b/jams-react-client/src/assets/css/material-dashboard-react.css
index 3a7ad4b..42ef9b3 100644
--- a/jams-react-client/src/assets/css/material-dashboard-react.css
+++ b/jams-react-client/src/assets/css/material-dashboard-react.css
@@ -65,7 +65,7 @@
background-color: #eeeeee;
color: #3c4858;
margin: 0;
- font-family: Roboto, Helvetica, Arial, sans-serif;
+ font-family: "Ubuntu", sans-serif;
font-weight: 300;
line-height: 1.5em;
}
@@ -127,9 +127,9 @@
h4,
h5,
h6 {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: "Ubuntu", sans-serif;
font-weight: 300;
- line-height: 1.5em;
+ line-height: 1em;
}
a {
@@ -246,7 +246,7 @@
}
}
.fixed-plugin {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-family: "Ubuntu", sans-serif;
font-weight: 300;
line-height: 1.5em;
position: fixed;
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react.js b/jams-react-client/src/assets/jss/material-dashboard-react.js
index e426263..534f582 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react.js
@@ -65,7 +65,7 @@
};
const defaultFont = {
- fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+ fontFamily: '"Ubuntu"',
fontWeight: "300",
lineHeight: "1.5em",
};
@@ -74,7 +74,7 @@
const warningColor = ["#ff9800", "#ffa726", "#fb8c00", "#ffa21a"];
const dangerColor = ["#f44336", "#ef5350", "#e53935", "#f55a4e"];
const successColor = ["#4caf50", "#66bb6a", "#43a047", "#5cb860"];
-const infoColor = ["#005699", "#005699", "#005699", "#00d3ee"];
+const infoColor = ["#005699", "#005699", "#005699", "#003c6b"];
const roseColor = ["#e91e63", "#ec407a", "#d81b60", "#eb3573"];
const grayColor = [
"#999",
@@ -231,7 +231,7 @@
marginTop: "30px",
marginBottom: "25px",
minHeight: "32px",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
"& small": {
color: grayColor[1],
fontWeight: "400",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/buttonStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/buttonStyle.js
index 2737b63..b0aa08a 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/buttonStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/buttonStyle.js
@@ -140,6 +140,7 @@
},
info: {
backgroundColor: infoColor[0],
+ color: whiteColor,
boxShadow:
"0 2px 2px 0 rgba(" +
hexToRgb(infoColor[0]) +
@@ -149,7 +150,8 @@
hexToRgb(infoColor[0]) +
", 0.12)",
"&:hover,&:focus": {
- backgroundColor: infoColor[0],
+ backgroundColor: infoColor[3],
+ color: whiteColor,
boxShadow:
"0 14px 26px -12px rgba(" +
hexToRgb(infoColor[0]) +
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardBodyStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardBodyStyle.js
index 38f4856..cea3ad5 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardBodyStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardBodyStyle.js
@@ -1,6 +1,6 @@
const cardBodyStyle = {
cardBody: {
- padding: "0.9375rem 20px",
+ padding: "10px",
flex: "1 1 auto",
WebkitBoxFlex: "1",
position: "relative",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
index b3554ac..9b3facb 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardFooterStyle.js
@@ -3,10 +3,9 @@
const cardFooterStyle = (theme) => ({
cardFooter: {
padding: "0",
- paddingTop: "10px",
- margin: "0 15px 10px",
+ margin: "0 10px 10px 10px",
borderRadius: "0",
- justifyContent: "space-between",
+ justifyContent: "end",
// alignItems: "center",
display: "flex",
backgroundColor: "transparent",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
index 8331478..31ffd64 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardStyle.js
@@ -20,6 +20,7 @@
minWidth: "0",
wordWrap: "break-word",
fontSize: ".875rem",
+ justifyContent: "space-between",
"& ul": {
"list-style": "none",
padding: 0,
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/devicesStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/devicesStyle.js
index e3ef2f6..424d3ac 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/devicesStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/devicesStyle.js
@@ -18,10 +18,7 @@
borderBottom: "1px solid " + grayColor[5],
},
tableActions: {
- display: "flex",
- border: "none",
padding: "12px 8px !important",
- verticalAlign: "middle",
},
tableCell: {
...defaultFont,
@@ -30,6 +27,7 @@
lineHeight: "1.42857143",
fontSize: "14px",
textAlign: "left",
+ wordBreak: "break-all",
},
tableCellRTL: {
textAlign: "right",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/footerStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/footerStyle.js
index b666398..b4730f4 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/footerStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/footerStyle.js
@@ -23,15 +23,15 @@
display: "block",
},
right: {
- paddingTop: "15px",
+ paddingTop: "10px",
margin: "0",
- fontSize: "14px",
+ fontSize: "12px",
float: "right!important",
},
footer: {
bottom: "0",
borderTop: "1px solid " + grayColor[11],
- padding: "15px 0",
+ padding: "10px 0",
...defaultFont,
},
container,
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
index 8b241a8..63ae9ee 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/headerStyle.js
@@ -20,7 +20,7 @@
position: "absolute",
width: "50%",
[theme.breakpoints.down("lg")]: {
- width: "130px",
+ width: "auto",
},
[theme.breakpoints.up("md")]: {
display: "none",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
index c2202b6..a7466c7 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/sidebarStyle.js
@@ -137,8 +137,10 @@
listStyle: "none",
position: "fixed",
bottom: "0",
- left: "0",
width: drawerWidth,
+ [theme.breakpoints.up("md")]: {
+ left: "0",
+ },
},
item: {
position: "relative",
diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/views/dashboardStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/views/dashboardStyle.js
index 42eb7a0..9b31e73 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/views/dashboardStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/views/dashboardStyle.js
@@ -54,7 +54,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
"& small": {
@@ -68,7 +68,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
"& small": {
diff --git a/jams-react-client/src/components/CustomPopupState/CustomPopupState.tsx b/jams-react-client/src/components/CustomPopupState/CustomPopupState.tsx
index 6098d2d..c0e723b 100644
--- a/jams-react-client/src/components/CustomPopupState/CustomPopupState.tsx
+++ b/jams-react-client/src/components/CustomPopupState/CustomPopupState.tsx
@@ -15,12 +15,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
-import InfoIcon from "@mui/icons-material/Info";
import Popover from "@mui/material/Popover";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
import IconButton from "@mui/material/IconButton";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
+import { InfoOutlined } from "@mui/icons-material";
interface CustomPopupStateProps {
message: string;
@@ -32,7 +32,7 @@
<PopupState variant="popover" popupId="demo-popup-popover">
{(popupState) => (
<div>
- <InfoIcon
+ <InfoOutlined
color="disabled"
fontSize="small"
{...bindTrigger(popupState)}
diff --git a/jams-react-client/src/components/FormikField/FormikField.tsx b/jams-react-client/src/components/FormikField/FormikField.tsx
index e1e7728..901f447 100644
--- a/jams-react-client/src/components/FormikField/FormikField.tsx
+++ b/jams-react-client/src/components/FormikField/FormikField.tsx
@@ -41,7 +41,7 @@
return (
<div className="FormikField">
<FormControl size="medium" error={props.onKeyUpError} fullWidth>
- <InputLabel htmlFor={props.name}>
+ <InputLabel htmlFor={props.name} style={{ marginTop: "10px" }}>
{props.onKeyUpError ? (
props.onKeyUpErrorMessage
) : (
diff --git a/jams-react-client/src/components/Navbars/Navbar.tsx b/jams-react-client/src/components/Navbars/Navbar.tsx
index 5fc8d15..aac1b46 100644
--- a/jams-react-client/src/components/Navbars/Navbar.tsx
+++ b/jams-react-client/src/components/Navbars/Navbar.tsx
@@ -45,9 +45,6 @@
return (
<AppBar className={classes.appBar}>
<Toolbar className={classes.container}>
- <div className={classes.flex}>
- <Button color="info" className={classes.title}></Button>
- </div>
<Hidden mdUp implementation="css">
<IconButton
color="default"
diff --git a/jams-react-client/src/components/PasswordDialog/PasswordDialog.tsx b/jams-react-client/src/components/PasswordDialog/PasswordDialog.tsx
index e3a3659..74cb4e4 100644
--- a/jams-react-client/src/components/PasswordDialog/PasswordDialog.tsx
+++ b/jams-react-client/src/components/PasswordDialog/PasswordDialog.tsx
@@ -62,9 +62,6 @@
display: "flex",
justifyContent: "space-between",
},
- whiteButtonText: {
- color: "white",
- },
});
const useStyles = makeStyles(styles as any);
@@ -291,7 +288,6 @@
type="submit"
disabled={!isValid && !dirty}
color="info"
- className={classes.whiteButtonText}
autoFocus
>
Update password
diff --git a/jams-react-client/src/components/Sidebar/Sidebar.tsx b/jams-react-client/src/components/Sidebar/Sidebar.tsx
index b744a11..c18b334 100644
--- a/jams-react-client/src/components/Sidebar/Sidebar.tsx
+++ b/jams-react-client/src/components/Sidebar/Sidebar.tsx
@@ -29,7 +29,7 @@
import Icon from "@mui/material/Icon";
import Snackbar from "@mui/material/Snackbar/Snackbar";
-import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import ExitToAppOutlinedIcon from "@mui/icons-material/ExitToAppOutlined";
import UpdateIcon from "@mui/icons-material/Update";
import styles from "assets/jss/material-dashboard-react/components/sidebarStyle";
@@ -182,7 +182,7 @@
[classes.itemIconRTL]: false,
})}
>
- <ExitToAppIcon />
+ <ExitToAppOutlinedIcon />
</Icon>
<ListItemText
primary={i18next.t("Logout", "Logout") as string}
diff --git a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.tsx b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.tsx
index dd228de..44d89fe 100644
--- a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.tsx
+++ b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.tsx
@@ -59,6 +59,7 @@
TransitionComponent={SlideTransition}
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
open={snackbar.open}
+ autoHideDuration={5000}
onClose={handleClose}
message={snackbar.message}
key={"bottomright"}
diff --git a/jams-react-client/src/index.tsx b/jams-react-client/src/index.tsx
index 0ffb974..7723e08 100644
--- a/jams-react-client/src/index.tsx
+++ b/jams-react-client/src/index.tsx
@@ -59,6 +59,7 @@
import SignIn from "layouts/SignIn";
import "assets/css/material-dashboard-react.css?v=1.9.0";
+import "../node_modules/ubuntu-fontface/ubuntu.min.css";
import "./i18n";
import { grayColor } from "assets/jss/material-dashboard-react";
@@ -78,6 +79,7 @@
allVariants: {
color: grayColor[2],
},
+ fontFamily: ["Ubuntu", "sans-serif"].join(","),
},
});
diff --git a/jams-react-client/src/layouts/BaseLayout.tsx b/jams-react-client/src/layouts/BaseLayout.tsx
index 06ea9bb..5f12945 100644
--- a/jams-react-client/src/layouts/BaseLayout.tsx
+++ b/jams-react-client/src/layouts/BaseLayout.tsx
@@ -27,10 +27,13 @@
import Sidebar from "components/Sidebar/Sidebar";
// @mui/icons-material
-import Person from "@mui/icons-material/Person";
-import Group from "@mui/icons-material/Group";
-import AllInbox from "@mui/icons-material/AllInbox";
-import SettingsIcon from "@mui/icons-material/Settings";
+import {
+ AccountCircleOutlined,
+ AllInboxOutlined,
+ GroupOutlined,
+ PersonOutlineOutlined,
+ SettingsOutlined,
+} from "@mui/icons-material";
// core components/views for Admin layout
import Users from "views/Users/Users";
import Groups from "views/Groups/Groups";
@@ -57,7 +60,6 @@
import Button from "@mui/material/Button";
import i18next from "i18next";
-import { AccountCircle as AccountCircleIcon } from "@mui/icons-material";
let ps: PerfectScrollbar;
@@ -97,21 +99,21 @@
{
path: `/user/${auth.getUsername()}`,
name: i18next.t("myprofile", "My profile") as string,
- icon: AccountCircleIcon,
+ icon: AccountCircleOutlined,
component: Users,
layout: "/admin",
},
{
path: "/users",
name: i18next.t("users", "Users") as string,
- icon: Person,
+ icon: PersonOutlineOutlined,
component: Users,
layout: "/admin",
},
{
path: "/groups",
name: i18next.t("groups", "Groups") as string,
- icon: Group,
+ icon: GroupOutlined,
component: Groups,
layout: "/admin",
admin: true,
@@ -119,7 +121,7 @@
{
path: "/blueprints",
name: i18next.t("blueprints", "Blueprints") as string,
- icon: AllInbox,
+ icon: AllInboxOutlined,
component: Blueprints,
layout: "/admin",
admin: true,
@@ -127,7 +129,7 @@
{
path: "/settings",
name: i18next.t("settings", "Settings") as string,
- icon: SettingsIcon,
+ icon: SettingsOutlined,
component: Settings,
layout: "/admin",
admin: true,
diff --git a/jams-react-client/src/layouts/ListLayout.tsx b/jams-react-client/src/layouts/ListLayout.tsx
index 113f80d..1ffc6b9 100644
--- a/jams-react-client/src/layouts/ListLayout.tsx
+++ b/jams-react-client/src/layouts/ListLayout.tsx
@@ -26,12 +26,6 @@
import Footer from "components/Footer/Footer";
import Sidebar from "components/Sidebar/Sidebar";
-// @mui/icons-material
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import Person from "@mui/icons-material/Person";
-import Group from "@mui/icons-material/Group";
-import AllInbox from "@mui/icons-material/AllInbox";
-import SettingsIcon from "@mui/icons-material/Settings";
// core components/views for Admin layout
import Users from "views/Users/Users";
import Groups from "views/Groups/Groups";
@@ -59,6 +53,13 @@
import i18next from "i18next";
import { Route } from "./BaseLayout";
+import {
+ AccountCircleOutlined,
+ AllInboxOutlined,
+ GroupOutlined,
+ PersonOutline,
+ SettingsOutlined,
+} from "@mui/icons-material";
let ps: PerfectScrollbar;
@@ -89,7 +90,7 @@
{
path: `/user/${auth.getUsername()}`,
name: i18next.t("myprofile", "My profile") as string,
- icon: AccountCircleIcon,
+ icon: AccountCircleOutlined,
component: Users,
layout: "/admin",
admin: false,
@@ -97,7 +98,7 @@
{
path: "/users",
name: i18next.t("users", "Users") as string,
- icon: Person,
+ icon: PersonOutline,
component: Users,
layout: "/admin",
admin: false,
@@ -105,7 +106,7 @@
{
path: "/groups",
name: i18next.t("groups", "Groups") as string,
- icon: Group,
+ icon: GroupOutlined,
component: Groups,
layout: "/admin",
admin: true,
@@ -113,7 +114,7 @@
{
path: "/blueprints",
name: i18next.t("blueprints", "Blueprints") as string,
- icon: AllInbox,
+ icon: AllInboxOutlined,
component: Blueprints,
layout: "/admin",
admin: true,
@@ -121,7 +122,7 @@
{
path: "/settings",
name: i18next.t("settings", "Settings") as string,
- icon: SettingsIcon,
+ icon: SettingsOutlined,
component: Settings,
layout: "/admin",
admin: true,
diff --git a/jams-react-client/src/layouts/SignIn.tsx b/jams-react-client/src/layouts/SignIn.tsx
index 8358b22..17db2a3 100644
--- a/jams-react-client/src/layouts/SignIn.tsx
+++ b/jams-react-client/src/layouts/SignIn.tsx
@@ -144,7 +144,7 @@
<div className={classes.paper}>
<img
src={logo}
- style={{ width: "25em", paddingBottom: "20px" }}
+ style={{ maxWidth: "25em", paddingBottom: "20px" }}
alt="logo"
/>
<Typography component="h1" variant="h5">
diff --git a/jams-react-client/src/views/Blueprint/ColorPickerPopup.tsx b/jams-react-client/src/views/Blueprint/ColorPickerPopup.tsx
index e953b3b..8f2b58c 100644
--- a/jams-react-client/src/views/Blueprint/ColorPickerPopup.tsx
+++ b/jams-react-client/src/views/Blueprint/ColorPickerPopup.tsx
@@ -22,7 +22,6 @@
const styles = {
root: {
position: "relative",
- padding: "0 20px",
},
colorButtonStyle: {
borderRadius: "50%",
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.tsx b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.tsx
index d8951af..bc4fb4e 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.tsx
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.tsx
@@ -118,7 +118,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -154,6 +154,9 @@
minWidth: "80vh",
maxWidth: "80vh",
},
+ marginTop: {
+ marginTop: "15px",
+ },
});
const useStyles = makeStyles(styles as any);
@@ -308,7 +311,7 @@
: "none",
}}
>
- <FormControl className={classes.margin}>
+ <FormControl className={classes.marginTop}>
<InputLabel htmlFor="turnServer">
{
i18next.t(
@@ -340,7 +343,7 @@
: "none",
}}
>
- <FormControl className={classes.margin}>
+ <FormControl className={classes.marginTop}>
<InputLabel htmlFor="turnServerUserName">
{
i18next.t(
@@ -375,7 +378,7 @@
: "none",
}}
>
- <FormControl className={classes.margin}>
+ <FormControl className={classes.marginTop}>
<InputLabel htmlFor="turnServerPassword">
{
i18next.t(
@@ -469,7 +472,7 @@
/>
<FormGroup row>
<FormControl
- className={classes.margin}
+ className={classes.marginTop}
style={{
display:
selectedDHTProxyOption === "customDHTProxy"
@@ -501,7 +504,7 @@
</FormGroup>
<FormGroup row>
<FormControl
- className={classes.margin}
+ className={classes.marginTop}
style={{
display:
selectedDHTProxyOption === "customDHTProxy"
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
index 4b6a3e8..eea2bc9 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.tsx
@@ -78,7 +78,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -465,9 +465,6 @@
<TableCell align="left">
{i18next.t("last_name", "Last name") as string}
</TableCell>
- <TableCell align="right">
- {i18next.t("action", "Action") as string}
- </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.tsx b/jams-react-client/src/views/Blueprint/EditBlueprintUi.tsx
index 54c9c12..807ac46 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.tsx
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.tsx
@@ -47,9 +47,6 @@
const styles = {
...dashboardStyle,
- card: {
- minWidth: "600px",
- },
cardBody: {
flexGrow: 1,
},
@@ -65,7 +62,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -202,7 +199,7 @@
<BlueprintSnackbar snackbar={snackbar} setSnackbar={setSnackbar} />
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
- <Card profile className={classes.card}>
+ <Card profile>
<CardHeader color="info" stats icon>
<CardIcon color="info">
<SettingsIcon />
diff --git a/jams-react-client/src/views/Blueprints/Blueprints.tsx b/jams-react-client/src/views/Blueprints/Blueprints.tsx
index 1db7593..9b1e803 100644
--- a/jams-react-client/src/views/Blueprints/Blueprints.tsx
+++ b/jams-react-client/src/views/Blueprints/Blueprints.tsx
@@ -15,7 +15,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
// @mui/material components
import { makeStyles } from "@mui/styles";
@@ -29,11 +29,8 @@
import CardBody from "components/Card/CardBody";
import CardFooter from "components/Card/CardFooter";
-import GroupIcon from "@mui/icons-material/Group";
-import PersonIcon from "@mui/icons-material/Person";
import Search from "@mui/icons-material/Search";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import InfoIcon from "@mui/icons-material/Info";
import axios from "axios";
import configApiCall from "api";
@@ -54,6 +51,11 @@
import i18next from "i18next";
import CreateBlueprintDialog from "./CreateBlueprintDialog";
+import {
+ GroupOutlined,
+ InfoOutlined,
+ PersonOutline,
+} from "@mui/icons-material";
export interface Blueprint {
name: string;
@@ -74,15 +76,20 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
+ cardTitle: {
+ marginTop: "0px",
+ height: "2em",
+ },
deleteIcon: {
float: "right",
},
search: {
width: "90%",
+ maxWidth: "500px",
},
loading: {
width: "100%",
@@ -100,9 +107,8 @@
const classes = useStyles();
const history = useHistory();
const [blueprints, setBlueprints] = useState<Blueprint[]>([]);
- const [loading, setLoading] = useState(false);
const [zeroBlueprint, setZeroBlueprint] = useState(false);
- const [progress, setProgress] = useState(0);
+ const [searchValue, setSearchValue] = useState<string>("");
const [open, setOpen] = useState(false);
@@ -110,23 +116,12 @@
const [openRemoveDialog, setOpenRemoveDialog] = useState(false);
useEffect(() => {
- setLoading(true);
- const timer = setInterval(() => {
- setProgress((oldProgress) => {
- if (oldProgress === 100) {
- return 0;
- }
- const diff = Math.random() * 10;
- return Math.min(oldProgress + diff, 100);
- });
- }, 500);
axios(configApiCall(api_path_blueprints + "?name=*", "GET", null, null))
.then((response) => {
const allBluePrints = response.data;
if (allBluePrints.length === 0) setZeroBlueprint(true);
else setZeroBlueprint(false);
setBlueprints(allBluePrints);
- setLoading(false);
})
.catch((error) => {
setBlueprints([]);
@@ -137,9 +132,7 @@
console.log("Error getting blueprints: " + error);
}
});
- return () => {
- clearInterval(timer);
- };
+ return;
}, [history, open, openRemoveDialog]);
const handleRemoveBlueprint = (blueprintRemovedName: string) => {
@@ -187,7 +180,7 @@
"Are you sure you want to delete"
) as string
}
- <strong>{removedBlueprint}</strong> ?
+ <strong> {removedBlueprint}</strong> ?
</DialogContentText>
</DialogContent>
<DialogActions>
@@ -218,8 +211,8 @@
}}
inputProps={{
placeholder: i18next.t(
- "search_blueprints_placeholder",
- "Search blueprints…"
+ "search_blueprints",
+ "Search blueprints"
),
inputProps: {
"aria-label": i18next.t(
@@ -227,20 +220,17 @@
"Search blueprints"
),
},
+ onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) =>
+ setSearchValue((e.target as HTMLInputElement).value),
}}
/>
)}
{!zeroBlueprint && <Search />}
- <div className={classes.loading}>
- {loading && (
- <LinearProgress variant="determinate" value={progress} />
- )}
- </div>
</div>
</GridItem>
{zeroBlueprint ? (
<div className={classes.blueprintsNotFound}>
- <InfoIcon />
+ <InfoOutlined />
<p style={{ marginLeft: "10px" }}>
{
i18next.t(
@@ -251,57 +241,68 @@
</p>
</div>
) : (
- blueprints.map((blueprint: Blueprint) => (
- <GridItem xs={12} sm={6} md={3} lg={2} xl={2} key={blueprint.name}>
- <Card profile>
- <Link to={`/blueprint/${blueprint.name}`}>
- <CardBody profile>
- <h3 className={classes.cardTitle}>
- {blueprint.name
- ? blueprint.name
- : (i18next.t(
- "no_blueprint_name",
- "No blueprint name"
- ) as string)}
- </h3>
- <ul>
- <li>
- {JSON.parse(blueprint.policyData).rendezVous ===
- true ? (
- <p>
- <GroupIcon
- fontSize="small"
- style={{ marginRight: "10px" }}
- />
- {i18next.t("rendezvous", "Rendezvous") as string}
- </p>
- ) : (
- <p>
- <PersonIcon
- fontSize="small"
- style={{ marginRight: "10px" }}
- />
- {i18next.t("standalone", "Standalone") as string}
- </p>
- )}
- </li>
- </ul>
- </CardBody>
- </Link>
- <CardFooter>
- <IconButton
- color="primary"
- onClick={() => {
- handleRemoveBlueprint(blueprint.name);
- }}
- size="large"
- >
- <DeleteOutlineIcon />
- </IconButton>
- </CardFooter>
- </Card>
- </GridItem>
- ))
+ blueprints
+ .filter((blueprint: Blueprint) => {
+ if (searchValue === "") {
+ return blueprint;
+ } else {
+ return blueprint.name
+ .toLowerCase()
+ .includes(searchValue.toLowerCase());
+ }
+ })
+ .map((blueprint: Blueprint) => (
+ <GridItem
+ xs={12}
+ sm={6}
+ md={3}
+ lg={2}
+ xl={2}
+ key={blueprint.name}
+ >
+ <Card profile>
+ <Link to={`/blueprint/${blueprint.name}`}>
+ <CardBody profile>
+ <h3 className={classes.cardTitle}>
+ {blueprint.name
+ ? blueprint.name
+ : (i18next.t(
+ "no_blueprint_name",
+ "No blueprint name"
+ ) as string)}
+ </h3>
+ <ul style={{ fontSize: "12px" }}>
+ <li>
+ {JSON.parse(blueprint.policyData).rendezVous ===
+ true ? (
+ <React.Fragment>
+ <GroupOutlined style={{ marginRight: "10px" }} />
+ {i18next.t("rendezvous", "Rendezvous") as string}
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ <PersonOutline style={{ marginRight: "10px" }} />
+ {i18next.t("standalone", "Standalone") as string}
+ </React.Fragment>
+ )}
+ </li>
+ </ul>
+ </CardBody>
+ </Link>
+ <CardFooter>
+ <IconButton
+ color="primary"
+ onClick={() => {
+ handleRemoveBlueprint(blueprint.name);
+ }}
+ size="large"
+ >
+ <DeleteOutlineIcon />
+ </IconButton>
+ </CardFooter>
+ </Card>
+ </GridItem>
+ ))
)}
</GridContainer>
</div>
diff --git a/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.tsx b/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.tsx
index ba206a7..261d700 100644
--- a/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.tsx
+++ b/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.tsx
@@ -85,6 +85,11 @@
const handleCheckBlueprintNameExists = (searchBlueprintNameValue: string) => {
setDisableCreate(true);
+ if (searchBlueprintNameValue.length === 0) {
+ setDisableCreate(true);
+ setBlueprintNameExists(false);
+ return;
+ }
axios(
configApiCall(
api_path_blueprints + "?name=" + searchBlueprintNameValue,
@@ -163,7 +168,7 @@
<DialogContent>
<TextField
autoFocus
- error={blueprintNameExists}
+ error={blueprintNameExists || disableCreate}
margin="dense"
id="blueprintName"
label={i18next.t("blueprint_name", "Blueprint name") as string}
diff --git a/jams-react-client/src/views/Contacts/Contacts.tsx b/jams-react-client/src/views/Contacts/Contacts.tsx
index a28bc0c..0e7bcd7 100644
--- a/jams-react-client/src/views/Contacts/Contacts.tsx
+++ b/jams-react-client/src/views/Contacts/Contacts.tsx
@@ -54,7 +54,6 @@
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle";
import TemporaryDrawer from "components/Drawer/Drawer";
@@ -67,6 +66,7 @@
import i18next from "i18next";
import { Contact, ServerContact } from "../../types/Contact";
import { UserProfile } from "views/UserProfile/DisplayUserProfile";
+import { InfoOutlined } from "@mui/icons-material";
const styles = {
...headerLinksStyle,
@@ -77,12 +77,15 @@
marginTop: "0",
marginBottom: "0",
},
+ cardBody: {
+ marginTop: "0",
+ },
cardTitleWhite: {
color: "#FFFFFF",
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -91,6 +94,7 @@
},
search: {
width: "90%",
+ maxWidth: "500px",
},
loading: {
width: "100%",
@@ -98,6 +102,20 @@
actionButtons: {
height: "3em",
},
+ cardBodyContent: {
+ wordWrap: "break-word",
+ fontSize: "12px",
+ },
+ link: {
+ position: "absolute",
+ top: "10px",
+ right: "10px",
+ },
+ contactsNotFound: {
+ marginLeft: "10px",
+ display: "flex",
+ alignItems: "center",
+ },
};
const useStyles = makeStyles(styles as any);
@@ -113,7 +131,6 @@
const [contacts, setContacts] = useState<Contact[]>([]);
const [users, setUsers] = useState<UserProfile[]>([]);
const [searchValue, setSearchValue] = useState<string>("");
- const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(0);
const [openDrawer, setOpenDrawer] = useState(false);
const [removedContact, setRemovedContact] = useState("");
@@ -222,7 +239,6 @@
});
}
setContacts(originalContacts);
- setLoading(false);
})
.catch((error) => {
if (error.response && error.response.status === 401) {
@@ -276,8 +292,7 @@
};
useEffect(() => {
- setLoading(true);
- const timer = setInterval(() => {
+ setInterval(() => {
setProgress((oldProgress) => {
if (oldProgress === 100) {
return 0;
@@ -288,9 +303,7 @@
}, 500);
getAllContacts();
searchContacts();
- return () => {
- clearInterval(timer);
- };
+ return;
}, [openDrawer]);
const removeContact = () => {
@@ -409,10 +422,7 @@
className: classes.margin + " " + classes.search,
}}
inputProps={{
- placeholder: i18next.t(
- "search_contacts_using",
- "Search contact fields (URI, firstname, lastname)"
- ),
+ placeholder: i18next.t("search_contacts", "Search contacts"),
inputProps: {
"aria-label": i18next.t(
"search_contacts",
@@ -424,17 +434,13 @@
}}
/>
<Search />
- <div className={classes.loading}>
- {loading && (
- <LinearProgress variant="determinate" value={progress} />
- )}
- </div>
</div>
</GridItem>
{contacts
.filter((data: Contact) => {
- if (searchValue.length === 0) return data;
- else {
+ if (searchValue.length === 0) {
+ return true;
+ } else {
if (
typeof data.username !== "undefined" &&
typeof data.firstName !== "undefined" &&
@@ -454,21 +460,23 @@
data.uri.toLowerCase() === searchValue.toLowerCase()
);
} else {
- return data;
+ return false;
}
}
})
.map((contact) => (
<GridItem
xs={12}
- sm={12}
- md={2}
+ sm={6}
+ md={3}
+ lg={2}
+ xl={2}
key={contact.uri}
style={{ display: contact.display }}
>
{contact.username && (
<Card profile>
- <CardBody profile>
+ <CardBody profile className={classes.cardBody}>
<CardAvatar profile>
<img
src={
@@ -480,22 +488,23 @@
/>
</CardAvatar>
<a
- style={{ float: "right", top: 0 }}
+ className={classes.link}
href={`/user/${contact.username}`}
>
- <LaunchIcon
- fontSize="small"
- style={{
- marginRight: "10px",
- color: "black",
- }}
- ></LaunchIcon>
+ <IconButton color="primary" size="medium">
+ <LaunchIcon
+ fontSize="small"
+ style={{
+ color: "black",
+ }}
+ ></LaunchIcon>
+ </IconButton>
</a>
<h4 className={classes.cardTitle}>
{(contact.firstName || contact.lastName) &&
`${contact.firstName} ${contact.lastName}`}
</h4>
- <ul>
+ <ul className={classes.cardBodyContent}>
<li style={{ display: "block" }}>
{contact.username && (
<img
@@ -540,7 +549,7 @@
onClick={() => {
handleRemoveContact(contact.uri, contact.username);
}}
- size="large"
+ size="medium"
>
<DeleteOutlineIcon />
</IconButton>
@@ -549,9 +558,18 @@
)}
</GridItem>
))}
- {contacts.length === 0 &&
- ((props.username +
- i18next.t("has_no_contacts", " has no contacts")) as string)}
+ {contacts.length === 0 && (
+ <div className={classes.contactsNotFound}>
+ <InfoOutlined />
+
+ <p style={{ marginLeft: "10px" }}>
+ {
+ (props.username +
+ i18next.t("has_no_contacts", " has no contacts")) as string
+ }
+ </p>
+ </div>
+ )}
</GridContainer>
</div>
);
diff --git a/jams-react-client/src/views/Groups/CreateGroupDialog.tsx b/jams-react-client/src/views/Groups/CreateGroupDialog.tsx
index e2529bc..9910f97 100644
--- a/jams-react-client/src/views/Groups/CreateGroupDialog.tsx
+++ b/jams-react-client/src/views/Groups/CreateGroupDialog.tsx
@@ -239,7 +239,6 @@
<Button
onClick={handleCreateGroup}
color="info"
- className={classes.whiteButtonText}
disabled={disableCreate}
autoFocus
>
diff --git a/jams-react-client/src/views/Groups/EditGroup.tsx b/jams-react-client/src/views/Groups/EditGroup.tsx
index 96d656b..8ce674b 100644
--- a/jams-react-client/src/views/Groups/EditGroup.tsx
+++ b/jams-react-client/src/views/Groups/EditGroup.tsx
@@ -104,7 +104,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -514,9 +514,6 @@
<TableCell align="left">
{i18next.t("last_name", "Last name") as string}
</TableCell>
- <TableCell align="right">
- {i18next.t("action", "Action") as string}
- </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/Groups/Groups.tsx b/jams-react-client/src/views/Groups/Groups.tsx
index dcfc2ee..11a6c5e 100644
--- a/jams-react-client/src/views/Groups/Groups.tsx
+++ b/jams-react-client/src/views/Groups/Groups.tsx
@@ -31,9 +31,6 @@
import IconButton from "@mui/material/IconButton";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import Search from "@mui/icons-material/Search";
-import MailOutlineIcon from "@mui/icons-material/MailOutline";
-import PersonIcon from "@mui/icons-material/Person";
-import InfoIcon from "@mui/icons-material/Info";
import axios from "axios";
import configApiCall from "api";
@@ -52,11 +49,14 @@
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
-import LinearProgress from "@mui/material/LinearProgress";
-
import i18next from "i18next";
import CreateGroupDialog from "./CreateGroupDialog";
+import {
+ AllInboxOutlined,
+ InfoOutlined,
+ PersonOutline,
+} from "@mui/icons-material";
const styles = {
cardCategoryWhite: {
@@ -71,15 +71,20 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
+ cardTitle: {
+ marginTop: "0px",
+ height: "2em",
+ },
deleteIcon: {
float: "right",
},
search: {
width: "90%",
+ maxWidth: "500px",
},
loading: {
width: "100%",
@@ -89,9 +94,6 @@
display: "flex",
alignItems: "center",
},
- whiteButtonText: {
- color: "white",
- },
inputBottomMargin: {
marginBottom: "1rem",
},
@@ -110,9 +112,7 @@
const classes = useStyles();
const history = useHistory();
const [groups, setGroups] = useState([]);
- const [loading, setLoading] = useState(false);
const [zeroGroup, setZeroGroup] = useState(false);
- const [progress, setProgress] = useState(0);
const [searchValue, setSearchValue] = useState<string>("");
const [openCreate, setOpenCreate] = useState(false);
@@ -150,17 +150,6 @@
};
useEffect(() => {
- setLoading(true);
- const timer = setInterval(() => {
- setProgress((oldProgress) => {
- if (oldProgress === 100) {
- return 0;
- }
- const diff = Math.random() * 10;
- return Math.min(oldProgress + diff, 100);
- });
- }, 500);
-
axios(configApiCall(api_path_get_list_group, "GET", null, null))
.then((response) => {
const allGroups = response.data;
@@ -187,7 +176,6 @@
});
});
setGroups(allGroups);
- setLoading(false);
})
.catch((error) => {
if (error.response && error.response.status === 401) {
@@ -199,9 +187,7 @@
console.error("Error getting groups: " + error);
}
});
- return () => {
- clearInterval(timer);
- };
+ return;
}, [openCreate, openRemoveDialog, history]);
if (!auth.hasAdminScope()) {
@@ -242,7 +228,7 @@
"Are you sure you want to delete"
) as string
}{" "}
- <strong>{removedGroup.name}</strong> ?
+ <strong> {removedGroup.name}</strong> ?
</DialogContentText>
</DialogContent>
<DialogActions>
@@ -274,10 +260,7 @@
className: classes.margin + " " + classes.search,
}}
inputProps={{
- placeholder: i18next.t(
- "search_groups_placeholder",
- "Search groups…"
- ),
+ placeholder: i18next.t("search_groups", "Search groups"),
inputProps: {
"aria-label": i18next.t(
"search_groups",
@@ -290,27 +273,22 @@
/>
)}
{!zeroGroup && <Search />}
- <div className={classes.loading}>
- {!zeroGroup && loading && (
- <LinearProgress variant="determinate" value={progress} />
- )}
- </div>
</div>
</GridItem>
{zeroGroup ? (
<div className={classes.groupsNotFound}>
- <InfoIcon />{" "}
+ <InfoOutlined />{" "}
<p style={{ marginLeft: "10px" }}>
{i18next.t("no_groups_found", "No groups Found") as string}
</p>
</div>
) : (
groups
- .filter((data: Group) => {
+ .filter((group: Group) => {
if (searchValue === "") {
- return data;
+ return group;
} else {
- return data.name
+ return group.name
.toLowerCase()
.includes(searchValue.toLowerCase());
}
@@ -321,26 +299,27 @@
<Link to={`/group/${group.id}`}>
<CardBody profile>
<h3 className={classes.cardTitle}>{group.name}</h3>
- <ul>
+ <ul style={{ fontSize: "12px" }}>
<li>
- <PersonIcon
- fontSize="small"
- style={{ marginRight: "10px" }}
- />
+ <PersonOutline style={{ marginRight: "10px" }} />
<strong style={{ marginRight: "5px" }}>
{group.groupMembersLength}
</strong>
{i18next.t("users", "Users") as string}
</li>
<li>
- <MailOutlineIcon
- fontSize="small"
- style={{ marginRight: "10px" }}
- />
- <strong style={{ marginRight: "5px" }}>
- {i18next.t("blueprint", "Blueprint") as string}
- </strong>
- {group.blueprint}
+ <AllInboxOutlined style={{ marginRight: "10px" }} />
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ }}
+ >
+ <strong style={{ marginRight: "5px" }}>
+ {i18next.t("blueprint", "Blueprint") as string}
+ </strong>
+ {group.blueprint}
+ </div>
</li>
</ul>
</CardBody>
diff --git a/jams-react-client/src/views/Settings/General.tsx b/jams-react-client/src/views/Settings/General.tsx
index 811571f..9351ecd 100644
--- a/jams-react-client/src/views/Settings/General.tsx
+++ b/jams-react-client/src/views/Settings/General.tsx
@@ -25,11 +25,7 @@
import { makeStyles } from "@mui/styles";
import RefreshIcon from "@mui/icons-material/Refresh";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import IconButton from "@mui/material/IconButton";
-import VpnKeyIcon from "@mui/icons-material/VpnKey";
import InputAdornment from "@mui/material/InputAdornment";
import GridContainer from "components/Grid/GridContainer";
@@ -50,6 +46,12 @@
import pjson from "../../../package.json";
import generator from "generate-password-browser";
import { Theme } from "@mui/material";
+import {
+ FileCopyOutlined,
+ VisibilityOffOutlined,
+ VisibilityOutlined,
+ VpnKeyOutlined,
+} from "@mui/icons-material";
const useStyles = makeStyles((theme: Theme) => ({
paper: {
@@ -209,7 +211,7 @@
type={passwordVisible ? "text" : "password"}
startAdornment={
<InputAdornment position="start">
- <VpnKeyIcon />
+ <VpnKeyOutlined />
</InputAdornment>
}
endAdornment={
@@ -220,9 +222,9 @@
size="large"
>
{passwordVisible ? (
- <VisibilityIcon />
+ <VisibilityOutlined />
) : (
- <VisibilityOffIcon />
+ <VisibilityOffOutlined />
)}
</IconButton>
}
@@ -230,9 +232,6 @@
onKeyUpError={false}
onKeyUpErrorMessage=""
/>
- {touched.password && errors.password ? (
- <span>{errors.password.toString()}</span>
- ) : null}
<FormikField
name="confirmPassword"
@@ -247,7 +246,7 @@
type={passwordVisible ? "text" : "password"}
startAdornment={
<InputAdornment position="start">
- <VpnKeyIcon />
+ <VpnKeyOutlined />
</InputAdornment>
}
endAdornment={
@@ -258,9 +257,9 @@
size="large"
>
{passwordVisible ? (
- <VisibilityIcon />
+ <VisibilityOutlined />
) : (
- <VisibilityOffIcon />
+ <VisibilityOffOutlined />
)}
</IconButton>
}
@@ -268,9 +267,6 @@
onKeyUpError={false}
onKeyUpErrorMessage=""
/>
- {touched.confirmPassword && errors.confirmPassword ? (
- <span>{errors.confirmPassword.toString()}</span>
- ) : null}
<Button
variant="contained"
@@ -306,7 +302,7 @@
variant="contained"
size="large"
className={classes.button}
- startIcon={<FileCopyIcon />}
+ startIcon={<FileCopyOutlined />}
>
{
i18next.t(
diff --git a/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx b/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
index 83c419e..c9c3d01 100644
--- a/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
+++ b/jams-react-client/src/views/UserProfile/AdminAddUserToGroup.tsx
@@ -26,6 +26,7 @@
TableRow,
TableCell,
TableBody,
+ ClassNameMap,
} from "@mui/material";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
@@ -48,7 +49,7 @@
username: string;
openDrawer: boolean;
setOpenDrawer: (open: boolean) => void;
- classes: any;
+ classes: ClassNameMap<string>;
groupMemberships: GroupMembership[];
setGroupMemberships: (groupMemberships: GroupMembership[]) => void;
removeUserFromGroup: (group: GroupMembership) => void;
@@ -152,9 +153,6 @@
<TableCell align="left">
{i18next.t("group_name", "Group name") as string}
</TableCell>
- <TableCell align="right">
- {i18next.t("action", "Action") as string}
- </TableCell>
</TableRow>
</TableHead>
<TableBody>
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx b/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
index 125ffca..64c57cb 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.tsx
@@ -30,15 +30,9 @@
DialogTitle,
Grid,
Chip,
- LinearProgress,
Theme,
} from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
-
-import VpnKeyIcon from "@mui/icons-material/VpnKey";
-
import auth from "auth";
import configApiCall from "api";
import {
@@ -64,6 +58,11 @@
import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react";
import UserProfileFieldsList from "./UserProfileFieldsList";
import AdminAddUserToGroup from "./AdminAddUserToGroup";
+import {
+ DeleteOutlineOutlined,
+ EditOutlined,
+ VpnKeyOutlined,
+} from "@mui/icons-material";
const styles = (theme: Theme) => ({
...dashboardStyle,
@@ -82,7 +81,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -179,9 +178,6 @@
loading: {
width: "100%",
},
- whiteButtonText: {
- color: "white",
- },
});
const useStyles = makeStyles(styles as any);
@@ -248,7 +244,6 @@
const [revokedUser, setRevokedUser] = useState("");
const [changePasswordOpen, setChangePasswordOpen] = useState(false);
const [loading, setLoading] = useState(false);
- const [progress, setProgress] = useState(0);
const [openDrawer, setOpenDrawer] = useState(false);
const removeUserFromGroup = (group: GroupMembership) => {
@@ -272,19 +267,6 @@
useEffect(() => {
setLoading(true);
- const timer = setInterval(() => {
- setProgress((oldProgress) => {
- if (oldProgress === 100) {
- return 0;
- }
- const diff = Math.random() * 10;
- return Math.min(oldProgress + diff, 100);
- });
- }, 500);
-
- return () => {
- clearInterval(timer);
- };
}, [history, username]);
const getAdminUserGroups = () => {
@@ -435,12 +417,7 @@
<Button onClick={handleClose} color="primary">
{i18next.t("cancel", "Cancel") as string}
</Button>
- <Button
- onClick={revokeUser}
- color="info"
- className={classes.whiteButtonText}
- autoFocus
- >
+ <Button onClick={revokeUser} color="info" autoFocus>
{i18next.t("revoke", "Revoke") as string}
</Button>
</DialogActions>
@@ -450,9 +427,6 @@
open={changePasswordOpen}
onClose={() => setChangePasswordOpen(false)}
/>
- <div className={classes.loading}>
- {loading && <LinearProgress variant="determinate" value={progress} />}
- </div>
{!loading && (
<GridContainer>
<Grid item xs={12} sm={12} md={6}>
@@ -484,7 +458,9 @@
</div>
</div>
</Grid>
- <UserProfileFieldsList user={user} />
+ <Grid item xs={12}>
+ <UserProfileFieldsList user={user} />
+ </Grid>
</Grid>
</div>
</CardBody>
@@ -494,10 +470,9 @@
{canEdit() && (
<Button
color="info"
- className={classes.whiteButtonText}
onClick={() => setDisplayUser(false)}
>
- <EditIcon />{" "}
+ <EditOutlined />{" "}
{i18next.t("edit_profile", "Edit profile") as string}
</Button>
)}
@@ -506,12 +481,11 @@
{auth.isLocalDirectory() && auth.hasAdminScope() && (
<Button
color="info"
- className={classes.whiteButtonText}
onClick={() => {
setChangePasswordOpen(true);
}}
>
- <VpnKeyIcon />{" "}
+ <VpnKeyOutlined />{" "}
{
i18next.t(
"change_password",
@@ -528,10 +502,9 @@
{auth.hasAdminScope() && revoked === false && (
<Button
color="info"
- className={classes.whiteButtonText}
onClick={() => handleClickOpen(user.username)}
>
- <DeleteIcon fontSize="small" />{" "}
+ <DeleteOutlineOutlined fontSize="small" />{" "}
{i18next.t("revoke_user", "Revoke user") as string}
</Button>
)}
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.tsx b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.tsx
index d25fcb5..b10f517 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.tsx
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.tsx
@@ -112,7 +112,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -231,9 +231,6 @@
alignItems: "center",
},
},
- whiteButtonText: {
- color: "white",
- },
});
const useStyles = makeStyles(styles as any);
@@ -648,12 +645,7 @@
</div>
</DialogContent>
<DialogActions>
- <Button
- onClick={cropProfilePicture}
- color="info"
- className={classes.whiteButtonText}
- autoFocus
- >
+ <Button onClick={cropProfilePicture} color="info" autoFocus>
{i18next.t("validate", "Validate") as string}
</Button>
</DialogActions>
@@ -1108,11 +1100,7 @@
</CardBody>
<CardFooter className={classes.alignRight}>
{!props.createUser && (
- <Button
- color="info"
- className={classes.whiteButtonText}
- onClick={handleCancelUpdate}
- >
+ <Button color="info" onClick={handleCancelUpdate}>
{i18next.t("cancel", "Cancel") as string}
</Button>
)}
@@ -1121,7 +1109,6 @@
type="submit"
disabled={!isValid || !dirty || userExists}
color="info"
- className={classes.whiteButtonText}
>
{
i18next.t(
@@ -1131,12 +1118,7 @@
}
</Button>
) : (
- <Button
- type="submit"
- disabled={!isValid}
- color="info"
- className={classes.whiteButtonText}
- >
+ <Button type="submit" disabled={!isValid} color="info">
{i18next.t("save_profile", "Save Profile") as string}
</Button>
)}
diff --git a/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx b/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
index a316095..0df0f7c 100644
--- a/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
+++ b/jams-react-client/src/views/UserProfile/UserProfileFieldsList.tsx
@@ -32,8 +32,8 @@
import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
-import PersonIcon from "@mui/icons-material/Person";
import { UserProfile } from "./DisplayUserProfile";
+import { PersonOutlineOutlined } from "@mui/icons-material";
interface UserProfileFieldsListProps {
user: UserProfile;
@@ -47,7 +47,7 @@
<ListItem>
<ListItemAvatar>
<Avatar>
- <PersonIcon />
+ <PersonOutlineOutlined />
</Avatar>
</ListItemAvatar>
<ListItemText primary={`${user.firstName} ${user.lastName}`} />
diff --git a/jams-react-client/src/views/Users/Users.tsx b/jams-react-client/src/views/Users/Users.tsx
index 633aaaf..a6bcee1 100644
--- a/jams-react-client/src/views/Users/Users.tsx
+++ b/jams-react-client/src/views/Users/Users.tsx
@@ -37,8 +37,6 @@
import CardAvatar from "components/Card/CardAvatar";
import CardBody from "components/Card/CardBody";
-import InfoIcon from "@mui/icons-material/Info";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import Search from "@mui/icons-material/Search";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
@@ -49,12 +47,12 @@
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle";
import { debounce } from "lodash";
import i18next from "i18next";
import { UserProfile } from "views/UserProfile/DisplayUserProfile";
+import { BusinessCenterOutlined, InfoOutlined } from "@mui/icons-material";
const styles = {
...headerLinksStyle,
@@ -70,7 +68,7 @@
marginTop: "0px",
minHeight: "auto",
fontWeight: "300",
- fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ fontFamily: "'Ubuntu'",
marginBottom: "3px",
textDecoration: "none",
},
@@ -79,6 +77,7 @@
},
search: {
width: "90%",
+ maxWidth: "500px",
},
loading: {
width: "100%",
@@ -90,6 +89,12 @@
},
cardBodyContent: {
wordWrap: "break-word",
+ fontSize: "12px",
+ },
+ link: {
+ "&:hover": {
+ color: "unset",
+ },
},
};
const useStyles = makeStyles(styles as any);
@@ -97,10 +102,8 @@
const classes = useStyles();
const history = useHistory();
const [users, setUsers] = useState<UserProfile[]>([]);
- const noUsersFound = users.length === 0;
+ const [noUsersFound, setNoUsersFound] = useState(false);
const [noMatchFound, setNoMatchFound] = useState(false);
- const [loading, setLoading] = useState(false);
- const [progress, setProgress] = useState(0);
const [showRevokedUsers, setShowRevokedUsers] = useState(false);
const [searchValue, setSearchValue] = useState("");
@@ -109,16 +112,6 @@
const [numberPages, setNumberPages] = useState(1);
useEffect(() => {
- setLoading(true);
- const timer = setInterval(() => {
- setProgress((oldProgress) => {
- if (oldProgress === 100) {
- return 0;
- }
- const diff = Math.random() * 10;
- return Math.min(oldProgress + diff, 100);
- });
- }, 500);
axios(
configApiCall(
api_path_get_user_directory_search,
@@ -130,10 +123,13 @@
.then((response) => {
setUsers(response.data.profiles);
setNumberPages(response.data.numPages);
- setLoading(false);
+ if (response.data.profiles.length === 0) {
+ setNoUsersFound(true);
+ } else {
+ setNoUsersFound(false);
+ }
})
.catch((error) => {
- setLoading(false);
if (error.response && error.response.status === 401) {
auth.authenticated = false;
history.push("/signin");
@@ -141,16 +137,10 @@
console.error("Error getting users: " + error);
}
});
- return () => {
- clearInterval(timer);
- };
}, [history]);
const searchUsers = (value: string, page = 1) => {
setSelectedPage(page);
- setLoading(true);
- setNoMatchFound(false);
- setUsers([]);
axios(
configApiCall(
api_path_get_user_directory_search,
@@ -160,14 +150,20 @@
)
)
.then((response) => {
- setLoading(false);
setUsers(response.data.profiles);
setNumberPages(response.data.numPages);
setNoMatchFound(response.data.profiles.length === 0);
+ setNoUsersFound(false);
+ if (value.length === 0) {
+ setNoMatchFound(false);
+ // This is the case were the search value is empty but there is still no users found
+ if (response.data.profiles.length === 0) {
+ setNoUsersFound(true);
+ }
+ }
})
.catch((error) => {
setUsers([]);
- setLoading(false);
if (error.response && error.response.status === 401) {
auth.authenticated = false;
history.push("/signin");
@@ -194,7 +190,7 @@
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
{auth.isLocalDirectory() && auth.hasAdminScope() && (
- <Link to={"/createuser"}>
+ <Link to={"/createuser"} className={classes.link}>
<Button variant="contained" color="primary">
<AddCircleOutlineIcon />{" "}
{i18next.t("create_user", "Create user") as string}
@@ -210,7 +206,11 @@
color="primary"
/>
}
- style={{ marginLeft: "1rem" }}
+ style={
+ auth.isLocalDirectory() && auth.hasAdminScope()
+ ? { marginLeft: "1rem" }
+ : { marginLeft: "-8px" }
+ }
label="Display revoked users"
/>
@@ -221,10 +221,7 @@
className: classes.margin + " " + classes.search,
}}
inputProps={{
- placeholder: i18next.t(
- "search_users_using",
- "Search users using (username, first name, last name)"
- ),
+ placeholder: i18next.t("search_users", "Search users"),
inputProps: {
"aria-label": i18next.t(
"search_users",
@@ -237,7 +234,7 @@
<Search />
</GridItem>
<GridItem xs={12} sm={12} md={6}>
- {!noUsersFound && (
+ {numberPages > 1 && !noMatchFound && (
<Pagination
count={numberPages}
page={selectedPage}
@@ -247,15 +244,9 @@
</GridItem>
</GridContainer>
- <div className={classes.loading}>
- {loading && (
- <LinearProgress variant="determinate" value={progress} />
- )}
- </div>
-
{noUsersFound && (
<div className={classes.usersNotFound}>
- <InfoIcon />
+ <InfoOutlined />
<p style={{ marginLeft: "10px" }}>
{i18next.t("no_users_found", "No users found") as string}
@@ -263,7 +254,7 @@
</div>
)}
</GridItem>
- {(!noUsersFound || !noMatchFound) &&
+ {!noMatchFound &&
users
.sort(function (a, b) {
if (a.username < b.username) {
@@ -277,7 +268,10 @@
.map((user) => (
<GridItem xs={12} sm={6} md={3} lg={2} xl={2} key={user.username}>
<Card profile>
- <Link to={`/user/${user.username}`}>
+ <Link
+ to={`/user/${user.username}`}
+ style={{ height: "100%" }}
+ >
<CardBody profile>
<CardAvatar profile>
<img
@@ -317,7 +311,7 @@
</li>
<li>
{user.organization && (
- <BusinessOutlinedIcon
+ <BusinessCenterOutlined
fontSize="small"
style={{ marginRight: "10px" }}
/>
@@ -334,7 +328,7 @@
))}
{noMatchFound && (
<div className={classes.usersNotFound}>
- <InfoIcon />
+ <InfoOutlined />
<p style={{ marginLeft: "10px" }}>
{