@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/src/screens/ListingScreen.module.css

@@ -0,0 +1,333 @@
+/* ListingScreen CSS Module */
+
+/* Block - centered container similar to SidebarLayout */
+.root {
+	background-color: var(--bg-white);
+	min-height: 400px;
+	width: 100%;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 32px 32px;
+}
+
+/* Header Styles */
+.header {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 24px;
+}
+
+.headerText {
+	flex: 1;
+	margin-bottom: 16px;
+}
+
+.headerText h1.text-h1 {
+	letter-spacing: -0.02em;
+	margin-bottom: 0.5rem;
+}
+
+.headerText p.text-h2 {
+	/* Override global h2 styles for this specific use case */
+	font-size: var(--font-size-base);
+	font-weight: normal;
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.message {
+	padding: 8px 12px;
+	border-radius: 4px;
+	margin-bottom: 16px;
+}
+
+.message--success {
+	background-color: #d4edda;
+	color: #155724;
+	border: 1px solid #c3e6cb;
+}
+
+.message--error {
+	background-color: #f8d7da;
+	color: #721c24;
+	border: 1px solid #f5c6cb;
+}
+
+.empty {
+	padding: 20px;
+	display: flex;
+	align-items: center;
+	flex-flow: column nowrap;
+	gap: 2rem;
+	margin: 20px 0;
+}
+
+.emptyActions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	width: 100%;
+	max-width: 300px;
+}
+
+.emptyPrimaryButton {
+	justify-content: center;
+}
+
+.emptySecondaryButton {
+	justify-content: center;
+}
+
+.empty p {
+	font-style: italic;
+	color: gray;
+}
+
+.emptyStateContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 80px 20px;
+	min-height: 400px;
+	background-color: #ffffff;
+	border-radius: 8px;
+	border: 2px dashed var(--linegrey, #e0e0e0);
+	margin-top: 16px;
+}
+
+.emptyStateImage {
+	width: 120px;
+	height: 120px;
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c757d"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H8v-2h4v2zm3-4H8v-2h7v2zm0-4H8V7h7v2z"/></svg>');
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	margin-bottom: 24px;
+	opacity: 0.6;
+}
+
+.emptyStateTitle {
+	color: #181c4a;
+	margin-bottom: 12px;
+	font-weight: 600;
+}
+
+.emptyStateDescription {
+	color: #6c757d;
+	margin-bottom: 32px;
+	max-width: 480px;
+	line-height: 1.6;
+}
+
+.emptyStateButton {
+	min-width: 200px;
+	padding: 12px 24px;
+	font-weight: 600;
+}
+
+.emptyState {
+	text-align: center;
+	padding: 40px 20px;
+}
+
+.emptyText {
+	color: #6c757d;
+	margin-top: 16px;
+	font-size: var(--font-size-base);
+	line-height: 1.5;
+}
+
+/* Table specific styles */
+.root :global(.table-id) {
+	font-family: "Source Sans Pro", sans-serif;
+	font-weight: 500;
+	color: #5a5a6e;
+	font-size: var(--font-size-xs);
+}
+
+.root :global(.table-TitleColumn) span {
+	color: #181c4a;
+	text-decoration: none;
+	transition: color 0.2s ease-in-out;
+}
+
+.root :global(.table-TitleColumn) span:hover {
+	color: #5c90df;
+}
+
+.root :global(.table-options) {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.root :global(.table-options) span {
+	opacity: 0.8;
+	transition:
+		opacity 0.2s ease-in-out,
+		color 0.2s ease-in-out;
+}
+
+.root :global(.table-options) span:hover {
+	opacity: 1;
+}
+
+/* Search container */
+.searchContainer {
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+
+/* Title link styling */
+.titleContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.titleLink {
+	cursor: pointer;
+	color: #181c4a;
+	text-decoration: none;
+	transition: color 0.2s ease-in-out;
+}
+
+.titleLink:hover {
+	color: #5c90df;
+}
+
+/* Deleted tag styling */
+.deletedTag {
+	background-color: #6c757d;
+	color: white;
+	font-size: var(--font-size-xs);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+/* Actions container and icons */
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.actionIcon {
+	font-size: var(--font-size-xl);
+	padding: 5px;
+	cursor: pointer;
+	color: #5c90df;
+	opacity: 0.8;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.actionIcon:hover {
+	opacity: 1;
+}
+
+/* Sort section */
+.sortSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Toggle container */
+.toggleContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Loading container */
+.loadingContainer {
+	padding: 2rem;
+	text-align: center;
+}
+
+/* Table column widths */
+.dateColumn {
+	width: 120px;
+}
+
+.actionsColumn {
+	width: 0;
+}
+
+/* Deleted item styling */
+.row--deleted {
+	opacity: 0.6;
+	background-color: #f8f9fa;
+}
+
+.title--deleted {
+	text-decoration: line-through;
+	color: #6c757d;
+}
+
+.restoreButton {
+	background-color: #28a745;
+	color: white;
+	padding: 6px 12px;
+	border-radius: 4px;
+	font-weight: bold;
+	border: none;
+	cursor: pointer;
+	font-size: var(--font-size-sm);
+	transition: background-color 0.2s ease-in-out;
+}
+
+.restoreButton:hover {
+	background-color: #218838;
+}
+
+.restoreButtonSecondary {
+	background-color: transparent;
+	color: #5c90df;
+	padding: 6px 12px;
+	border-radius: 4px;
+	font-weight: 500;
+	border: 1px solid #5c90df;
+	cursor: pointer;
+	font-size: var(--font-size-sm);
+	transition: all 0.2s ease-in-out;
+}
+
+.restoreButtonSecondary:hover {
+	background-color: #5c90df;
+	color: white;
+}
+
+/* Ensure proper table spacing */
+.root :global(.plussTable) {
+	margin-top: 16px;
+	min-width: 100%;
+}
+
+/* Responsive adjustments for centered layout */
+@media (max-width: 768px) {
+	.root {
+		padding: 1.5rem 1.5rem 2.5rem 1.5rem; /* Slightly reduced but still adequate */
+	}
+}
+
+@media (max-width: 480px) {
+	.root {
+		padding: 1rem 1rem 2rem 1rem; /* Maintain padding on small screens */
+	}
+}