Resource card UI update

Former-commit-id: 20539cd

Author: kulpreets

ui/src/components/ComponentInjector/ListSearchResults/ListSearchResults.module.scss

@@ -4,9 +4,8 @@
 	max-width: var(--bt-list-card-container);
 	gap: var(--bt-size-16);
 	margin: var(--bt-size-0) auto;
-	overflow-x: hidden;
 
 	&__tag {
 		cursor: pointer;
 	}
-}
+}

ui/src/components/ComponentInjector/ListSearchResults/index.tsx

@@ -1,4 +1,5 @@
 import style from "./ListSearchResults.module.scss";
+import { Row } from "antd";
 import { Search, Text, getCategories } from "components/General";
 import { List, ListProps } from "components/ComponentInjector";
 import { API_ERROR, API_NO_DATA } from "data/constants";
@@ -58,11 +59,13 @@ const ListSearchResults = <T,>({
 				categoryQuery={categoryQuery}
 				onSearchCriteriaChange={onSearchCriteriaChange}
 			/>
-			<List
-				items={list}
-				itemComponent={itemComponent}
-				isLoading={isLoading}
-			/>
+			<Row gutter={[24, 24]}>
+				<List
+					items={list}
+					itemComponent={itemComponent}
+					isLoading={isLoading}
+				/>
+			</Row>
 		</div>
 	);
 };

ui/src/components/InjectedComponent/ListItems/Resource/Resource.module.scss

@@ -1,11 +1,21 @@
 .resource {
-	display: grid;
+	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
+	transition: all .3s;
+	min-height: 160px;
+    border: 1px solid rgba(0,0,0,.05);
+    border-radius: 8px;
+    background-color: #fff;
+
+	&:hover {
+		box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.18);
+		transform: translate3d(0px, -4px, 0px);
+	}
 
 	&_space {
 		display: grid;
-		grid-template-columns: var(--bt-grid-template-1) var(
-				--bt-grid-template-1
-			) var(--bt-grid-template-1) auto;
+		grid-template-columns:
+			var(--bt-grid-template-1) var(--bt-grid-template-1)
+			var(--bt-grid-template-1) auto;
 	}
 
 	&__avatar {
@@ -16,11 +26,6 @@
 		width: var(--bt-size-50);
 	}
 
-	&__container {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
 
 	@media screen and (max-width: 550px) {
 		width: var(--bt-size-percent-100);

ui/src/components/InjectedComponent/ListItems/Resource/index.tsx

@@ -1,7 +1,5 @@
-import { Avatar, Card, Skeleton, Space, Tag, Typography } from "antd";
+import { Avatar, Card, Skeleton, Space, Tag, Typography,Col } from "antd";
 import style from "./Resource.module.scss";
-import { Clipboard } from "components/ComponentInjector";
-import { ClipboardButton } from "components/InjectedComponent";
 import { ListItemProps } from "components/ComponentInjector";
 
 const { Title } = Typography;
@@ -29,6 +27,7 @@ const Resource: React.FC<ListItemProps<ResourceType>> = ({
 	const { name, category, url } = resource || {};
 
 	return (
+		<Col className="gutter-row" xs={24} md={12} xl={8}>
 		<Card
 			className={style.resource}
 			key={name}
@@ -47,13 +46,14 @@ const Resource: React.FC<ListItemProps<ResourceType>> = ({
 						</Space>
 					</Space>
 
-					<Clipboard
+					{/* <Clipboard
 						text={url}
 						clipboardComponent={ClipboardButton}
-					/>
+					/> */}
 				</Space>
 			</Skeleton>
 		</Card>
+		</Col>
 	);
 };
 

ui/src/styles/antd-overrides.css

@@ -13,16 +13,10 @@ h5 {
 	border-inline-end: none !important;
 }
 
-.ant-menu-submenu {
-	/* can we do better? */
-	padding-left: 20px !important;
-	padding-right: 20px !important;
+.ant-layout{
+	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
 }
 
-.ant-menu-item {
-	/* can we do better? */
-	padding-left: 32px !important;
-}
 
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper > textarea.ant-input,
 .ant-layout-content,

ui/src/styles/sizes.css

@@ -1,5 +1,5 @@
 :where(html) {
-	--bt-list-card-container: 600px;
+	--bt-list-card-container: 1024px;
 	--bt-converter-width: 800px;
 	--bt-card-height: 279px;