feat(connect-kit/x-settings): tweak styles

Crossbell-Box · Mar 10, 2023 · 78552e1 · 78552e1
1 parent a2d87b9
commit 78552e1
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 25 deletions.
diff --git a/...ages/connect-kit/src/modals/x-settings-modal/components/character-widget/index.module.css b/...ages/connect-kit/src/modals/x-settings-modal/components/character-widget/index.module.css
@@ -1,5 +1,5 @@
 .container {
-	background: #3e4052;
+	background: #687792;
 	color: #fff;
 	padding: 16px 24px;
 	border-radius: 12px;
@@ -19,7 +19,7 @@
 	align-items: center;
 	gap: 8px;
 	overflow: hidden;
-	background: rgba(62, 64, 82, 0.5);
+	background: rgba(104, 119, 146, 0.5);
 	backdrop-filter: blur(3px);
 }
 

diff --git a/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/item.tsx b/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/item.tsx
@@ -126,7 +126,7 @@ export function useOperatorAvatar(
 	characterOperator: CharacterOperatorEntity
 ): string | undefined {
 	const administratorUrl = useWeb2Url(
-		"ipfs://bafkreibqpox3lhci37urb6vrcleicaedscqwlyeuqxawtkfc5vavldtziy"
+		"ipfs://bafkreib3yzt66fwyeegrinj6ljtjjwpjugcdscepu2iw6kopiaoqsbidtm"
 	);
 
 	if (

diff --git a/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.module.css b/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.module.css
@@ -1,5 +1,8 @@
 .container {
 	padding: 0 0 24px;
+	max-height: 70vh;
+	max-height: min(70vh, 475px);
+	overflow: auto;
 }
 
 .list {

diff --git a/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.tsx b/packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { ScrollArea } from "@mantine/core";
 import { LoadMore, Loading } from "@crossbell/ui";
 import { isAddressEqual } from "@crossbell/util-ethers";
 import { CharacterOperatorEntity } from "crossbell.js";
@@ -41,7 +40,7 @@ export function List({ characterId }: ListProps) {
 	);
 
 	return (
-		<ScrollArea.Autosize mah="70vh" className={styles.container}>
+		<div className={styles.container}>
 			{list.length === 0 && (
 				<div className={styles.emptyTips}>
 					{isLoading ? <Loading className={styles.loading} /> : "No operators"}
@@ -65,7 +64,7 @@ export function List({ characterId }: ListProps) {
 				isLoading={isFetchingNextPage}
 				hasMore={!!hasNextPage}
 			/>
-		</ScrollArea.Autosize>
+		</div>
 	);
 }
 
@@ -78,7 +77,7 @@ function getTags(characterOperator: CharacterOperatorEntity): ItemTag[] | null {
 
 	if (isAddressEqual(characterOperator.operator, OP_SIGN_OPERATOR_ADDRESS)) {
 		return [
-			{ title: "OP Sign", style: { background: "#6AD991", color: "#fff" } },
+			{ title: "Op Sign", style: { background: "#6AD991", color: "#fff" } },
 		];
 	}
 

diff --git a/packages/connect-kit/src/scenes/for-dynamic-modal/operator-detail/index.module.css b/packages/connect-kit/src/scenes/for-dynamic-modal/operator-detail/index.module.css
@@ -1,3 +1,10 @@
 .mainBtn {
 	margin-top: 48px;
 }
+
+.container {
+	padding: 0 24px;
+	max-height: 70vh;
+	max-height: min(70vh, 475px);
+	overflow: auto;
+}
diff --git a/packages/connect-kit/src/scenes/for-dynamic-modal/operator-detail/index.tsx b/packages/connect-kit/src/scenes/for-dynamic-modal/operator-detail/index.tsx
@@ -43,7 +43,7 @@ export function OperatorDetail({
 	});
 	return (
 		<DynamicScenesContainer
-			padding="10px 24px 24px"
+			padding="10px 0 24px"
 			header={
 				<DynamicScenesHeader
 					title={truncateAddress(characterOperator.operator, {
@@ -53,25 +53,27 @@ export function OperatorDetail({
 				/>
 			}
 		>
-			<OperatorCard
-				tags={tags}
-				characterOperator={characterOperator}
-				description={description}
-				characterId={characterId}
-			/>
+			<div className={styles.container}>
+				<OperatorCard
+					tags={tags}
+					characterOperator={characterOperator}
+					description={description}
+					characterId={characterId}
+				/>
 
-			<PermissionList
-				characterId={characterId}
-				characterOperator={characterOperator}
-			/>
+				<PermissionList
+					characterId={characterId}
+					characterOperator={characterOperator}
+				/>
 
-			<MainBtn
-				onClick={goToRemoveOperator}
-				color="red"
-				className={styles.mainBtn}
-			>
-				Remove Operator
-			</MainBtn>
+				<MainBtn
+					onClick={goToRemoveOperator}
+					color="red"
+					className={styles.mainBtn}
+				>
+					Remove Operator
+				</MainBtn>
+			</div>
 		</DynamicScenesContainer>
 	);
 }