Merge pull request #79 from supertokens/fix/78-ui-fixes

fix: Fix UI disparities with the designs
supertokens · Mar 8, 2023 · 4a88cf4 · 4a88cf4
2 parents 47e2b92 + f61d919
commit 4a88cf4
Show file tree

Hide file tree

Showing 26 changed files with 117 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.4.4] - 2023-03-08
+
+-   General aesthetic fixes for the dashboard UI
+
 ## [0.4.3] - 2023-03-06
 
 -   Fixes an issue where entering an incorrect API key would refresh the page

diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -39,11 +39,12 @@
     "static/media/people-opened.svg": "/static/media/people-opened.svg",
     "static/media/left-arrow-dark.svg": "/static/media/left-arrow-dark.svg",
     "static/media/help-icon.png": "/static/media/help-icon.png",
+    "static/media/chevron-down.svg": "/static/media/chevron-down.svg",
+    "static/media/chevron-up-selected.svg": "/static/media/chevron-up-selected.svg",
     "static/media/people.svg": "/static/media/people.svg",
     "static/media/chevron-left.svg": "/static/media/chevron-left.svg",
     "static/media/provider-facebook.svg": "/static/media/provider-facebook.svg",
     "static/media/chevron-right.svg": "/static/media/chevron-right.svg",
-    "static/media/chevron-down.svg": "/static/media/chevron-down.svg",
     "static/media/triangle-down.svg": "/static/media/triangle-down.svg",
     "main.css.map": "/static/css/main.css.map",
     "bundle.js.map": "/static/js/bundle.js.map",

diff --git a/build/static/css/main.css b/build/static/css/main.css
diff --git a/build/static/css/main.css.map b/build/static/css/main.css.map
diff --git a/build/static/js/bundle.js b/build/static/js/bundle.js
diff --git a/build/static/js/bundle.js.map b/build/static/js/bundle.js.map
diff --git a/build/static/media/chevron-down.svg b/build/static/media/chevron-down.svg
diff --git a/build/static/media/chevron-up-selected.svg b/build/static/media/chevron-up-selected.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.4.3",
+	"version": "0.4.4",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

diff --git a/src/assets/chevron-down.svg b/src/assets/chevron-down.svg
diff --git a/src/assets/chevron-up-selected.svg b/src/assets/chevron-up-selected.svg
diff --git a/src/images.ts b/src/images.ts
@@ -25,6 +25,7 @@ import "./assets/checkmark.svg";
 import "./assets/chevron-down.svg";
 import "./assets/chevron-left.svg";
 import "./assets/chevron-right.svg";
+import "./assets/chevron-up-selected.svg";
 import "./assets/close.svg";
 import "./assets/copy.svg";
 import "./assets/delete.svg";

diff --git a/src/ui/components/copyText/CopyText.scss b/src/ui/components/copyText/CopyText.scss
@@ -24,6 +24,7 @@
 		padding-right: 4px;
 	}
 	.copy-text-action {
+		cursor: pointer;
 		border-radius: 50%;
 		transition: 0.3s;
 		&:hover {

diff --git a/src/ui/components/inputField/InputField.css b/src/ui/components/inputField/InputField.css
@@ -46,6 +46,11 @@
 	border-radius: 6px;
 	border: none;
 	outline: none;
+	background-color: rgb(250, 250, 250);
+}
+
+.input-field:focus {
+	background-color: white;
 }
 
 .input-field-inset-focused,

diff --git a/src/ui/components/userDetail/userDetail.scss b/src/ui/components/userDetail/userDetail.scss
@@ -96,7 +96,9 @@ $container-width: 829;
 				display: inline-flex;
 				overflow: hidden;
 				max-width: 290px;
-				font-size: 13px;
+				font-size: 14px;
+				font-family: "Source Code Pro";
+				font-weight: 500;
 			}
 		}
 		&__action {
@@ -133,6 +135,7 @@ $container-width: 829;
 				overflow: visible;
 			}
 			&__guide {
+				cursor: pointer;
 				display: inline-flex;
 				align-items: center;
 				justify-content: center;

diff --git a/src/ui/components/userDetail/userDetailHeader.tsx b/src/ui/components/userDetail/userDetailHeader.tsx
@@ -111,7 +111,6 @@ export const UserDetailHeader: React.FC<UserDetailHeaderProps> = ({
 			<div className="user-detail__header__action">
 				<button
 					className="button button-error"
-					style={{ fontWeight: "normal" }}
 					onClick={openDeleteConfirmation}>
 					Delete
 				</button>

diff --git a/src/ui/components/userDetail/userDetailSessionList.scss b/src/ui/components/userDetail/userDetailSessionList.scss
@@ -179,6 +179,11 @@ $container-width: 829;
 						.button-error-outline {
 							display: block;
 						}
+
+						&.session-id {
+							font-family: "Source Code Pro";
+							font-weight: 500;
+						}
 					}
 
 					td:last-child {

diff --git a/src/ui/components/userDetail/userDetailSessionList.tsx b/src/ui/components/userDetail/userDetailSessionList.tsx
@@ -135,7 +135,7 @@ const UserDetailsSessionListItem: React.FC<UserDetailsSessionListItemProps> = ({
 
 	return (
 		<tr className="session-row with-data">
-			<td className="w30">
+			<td className="w30 session-id">
 				<span>{_sessionhandle}</span>
 			</td>
 			<td>{createdDate}</td>

diff --git a/src/ui/components/usersListTable/UserRowMenu.tsx b/src/ui/components/usersListTable/UserRowMenu.tsx
@@ -59,6 +59,13 @@ export const UserRowMenu: FC<UserRowMenuProps> = ({ user, menuItems }) => {
 					<img
 						src={getImageUrl("chevron-down.svg")}
 						alt="Open user detail"
+						className="img-normal"
+					/>
+
+					<img
+						src={getImageUrl("chevron-up-selected.svg")}
+						alt="Open user detail"
+						className="img-hover"
 					/>
 				</button>
 				<div className="user-row-select-popup">

diff --git a/src/ui/components/usersListTable/UsersListTable.scss b/src/ui/components/usersListTable/UsersListTable.scss
@@ -110,6 +110,7 @@ $container-padding-v: 24px;
 	}
 
 	.user-row-select-button {
+		background-color: white;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -120,11 +121,17 @@ $container-padding-v: 24px;
 		transition: 0.3s;
 		img {
 			width: 12px;
-			transition: 0.3s;
+			transition: transform 0.3s;
+		}
+
+		.img-hover {
+			display: none;
 		}
 	}
 
 	.user-row-select-menu {
+		cursor: pointer;
+
 		.user-row-select-popup {
 			display: none;
 			z-index: var(--z-index-inline-popup);
@@ -143,10 +150,11 @@ $container-padding-v: 24px;
 			display: inline-flex;
 			align-items: center;
 			height: 28px;
-			padding: 4px 8px;
+			padding: 8px;
 			font-weight: normal;
 			width: 100%;
 			transition: 0.3s;
+			border-radius: 4px;
 
 			span {
 				white-space: nowrap;
@@ -160,14 +168,22 @@ $container-padding-v: 24px;
 				display: none;
 			}
 
+			&.delete {
+				color: var(--color-button-error-border);
+			}
+
 			&:hover {
-				background-color: var(--color-copy-box-bg);
+				background-color: var(--color-popup-item-hover);
 				.img-hover {
 					display: initial;
 				}
 				.img-normal {
 					display: none;
 				}
+
+				&.delete {
+					background-color: var(--color-popup-item-delete-hover);
+				}
 			}
 		}
 
@@ -176,10 +192,15 @@ $container-padding-v: 24px;
 				display: block;
 			}
 			.user-row-select-button {
+				border: 1px solid var(--color-primary);
 				box-shadow: 0px 0px 5px var(--color-primary);
 				img {
+					display: none;
+				}
+
+				.img-hover {
+					display: initial;
 					transform: rotateZ(180deg);
-					box-shadow: 0px 0px 3px var(--color-shadow);
 				}
 			}
 		}

diff --git a/src/ui/components/usersListTable/UsersListTable.tsx b/src/ui/components/usersListTable/UsersListTable.tsx
@@ -245,6 +245,7 @@ const UserTableRow: React.FC<
 			text: "Delete user",
 			imageUrl: "trash.svg",
 			hoverImageUrl: "trash-opened.svg",
+			className: "delete",
 		});
 
 		return menuItems;

diff --git a/src/ui/styles/index.css b/src/ui/styles/index.css
@@ -14,6 +14,7 @@
  */
 
 @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap");
 
 body {
 	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
@@ -24,7 +25,7 @@ body {
 }
 
 code {
-	font-family: Menlo, source-code-pro, Monaco, Consolas, "Courier New", monospace;
+	font-family: Menlo, "Source Code Pro", Monaco, Consolas, "Courier New", monospace;
 }
 
 * {

diff --git a/src/ui/styles/uikit.scss b/src/ui/styles/uikit.scss
@@ -21,9 +21,9 @@
 
 /* classes for layout panel */
 .panel {
-	padding: 0px 34px;
+	padding: 0px 40px;
 	background-color: var(--color-white);
-	border-radius: 6px;
+	border-radius: 12px;
 	box-shadow: 0 0 6px var(--color-shadow);
 	display: block;
 	max-width: 100%;
@@ -52,6 +52,7 @@
 	}
 	&__body {
 		padding: 24px 0px;
+		padding-bottom: 18px;
 	}
 }
 
@@ -249,6 +250,15 @@ button.button-error {
 	@include gap-horizontal(8px);
 	border: none;
 	font-size: inherit;
+	transition: background-color 0.3s;
+
+	&:disabled {
+		background-color: var(--color-button-error-disabled);
+	}
+
+	&:hover {
+		background-color: var(--color-button-error-hover);
+	}
 }
 
 .button.button-error-outline,
@@ -263,6 +273,15 @@ button.button-error-outline {
 	@include gap-horizontal(8px);
 	font-size: inherit;
 	box-shadow: none;
+	transition: background-color 0.3s;
+
+	&:disabled {
+		border-color: var(--color-button-error-disabled);
+	}
+
+	&:hover {
+		background-color: var(--color-button-outline-hover);
+	}
 }
 
 .button.outline,
@@ -271,10 +290,11 @@ button.outline {
 	box-shadow: none;
 	color: var(--color-secondary-text);
 	border-color: var(--color-secondary-text);
+	transition: background-color 0.3s;
+	font-weight: 500 !important;
 	&:hover {
-		background-color: var(--color-secondary-text);
+		background-color: var(--color-button-outline-hover);
 		box-shadow: inherit;
-		color: var(--color-white);
 	}
 }
 
@@ -285,7 +305,15 @@ button.link,
 	&:not(.flat) {
 		border-color: var(--color-link);
 		&:hover {
-			background-color: var(--color-link);
+			background-color: var(--color-button-outline-hover);
+		}
+	}
+}
+
+.footer {
+	a {
+		&:hover {
+			background-color: transparent;
 		}
 	}
 }

diff --git a/src/ui/styles/variables.css b/src/ui/styles/variables.css
@@ -25,7 +25,7 @@ body {
 
 	/* Background Colors */
 	--color-loader-placeholder-bg: rgba(110, 106, 101, 0.4);
-	--color-shadow: rgba(158, 37, 38, 0.16);
+	--color-shadow: rgba(0, 0, 0, 0.16);
 	--color-container-shadow: rgba(0, 0, 0, 0.16);
 	--color-error-shadow: rgba(158, 37, 38, 0.16);
 	--color-error-bg: rgb(253, 240, 241);
@@ -79,10 +79,16 @@ body {
 	/* Button color */
 	--color-button-error: rgb(237, 52, 78);
 	--color-button-error-border: rgb(222, 35, 61);
+	--color-button-error-disabled: rgb(221, 221, 221);
+	--color-button-error-hover: rgb(222, 35, 61);
 
 	/* Z-index value for different of popup element */
 	--z-index-inline-popup: 1;
 	--z-index-modal-popup: 10;
+
+	--color-popup-item-hover: rgb(240, 240, 240);
+	--color-popup-item-delete-hover: rgba(222, 35, 61, 0.12);
+	--color-button-outline-hover: rgb(250, 250, 250);
 }
 
 *[data-theme="dark"] {

diff --git a/src/version.ts b/src/version.ts
@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.4.3";
+export const package_version = "0.4.4";