feat: updating styling for the watcher-card and queue-card components (#106)

* feat: adding title property to ButtonInputs

* feat: updating preset card styling

* feat: updating watcher card styling

* feat: display 'N/A' if there are no rules on a watcher

Author: TheNickOfTime

client/src/components/base/inputs/button/button-input.tsx

@@ -4,13 +4,26 @@ type Params = {
 	label?: string;
 	icon?: string;
 	color?: string;
+	title?: string;
 	disabled?: boolean;
 	onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
-export default function ButtonInput({ label, icon, color, disabled = false, onClick }: Params) {
+export default function ButtonInput({
+	label,
+	icon,
+	color,
+	title,
+	disabled = false,
+	onClick,
+}: Params) {
 	return (
-		<button className={`controlled-button ${color}`} onClick={onClick} disabled={disabled}>
+		<button
+			className={`controlled-button ${color}`}
+			onClick={onClick}
+			disabled={disabled}
+			title={title}
+		>
 			{icon && <i className={`button-icon bi ${icon}`} />}
 			{label && <span className='button-label'>{label}</span>}
 		</button>

client/src/components/cards/preset-card/preset-card.scss

@@ -1,5 +1,6 @@
 @use 'src/style/modules/colors';
 @use 'src/style/modules/font';
+@use 'src/style/modules/sizing';
 
 .preset-card {
 	padding: 1rem;
@@ -19,7 +20,6 @@
 			flex-grow: 1;
 			margin: 0;
 			padding: 0.5rem 0;
-			// border-bottom: 0.2rem solid hsla(0, 0%, 100%, 0.1);
 		}
 
 		.preset-buttons {
@@ -36,29 +36,58 @@
 
 	.preset-body {
 		.preset-tabs {
-			button {
-				padding: 0.5rem 1rem;
-				border: none;
-				border-radius: 0;
-				font-family: font.$font-family-primary;
-				font-size: 1.25rem;
-				background-color: colors.$transparent-light-tertiary;
-				color: colors.$text-color-tertiary;
-
-				&.current {
-					background-color: colors.$transparent-light-primary;
-					color: colors.$text-color-secondary;
+			display: flex;
+			flex-flow: row wrap;
+
+			.tab-button-container {
+				max-height: 2.75rem;
+
+				button {
+					height: 200%;
+					padding: 0.5rem 1rem;
+					border: none;
+					border-radius: 0;
+					font-family: font.$font-family-primary;
+					font-size: 1.25rem;
+					border-right: 0.2rem solid colors.$background-five;
+					border-radius: 1rem 1rem 0 0;
+					background-color: colors.$background-four;
+					color: colors.$text-color-tertiary;
+					display: inline-flex;
+
+					&.current {
+						background-color: colors.$background-five;
+						color: colors.$text-color-secondary;
+					}
+
+					&:hover {
+						background-color: colors.$background-five;
+						border-right: 0.2rem solid colors.$background-six;
+					}
+
+					.tab-button-label {
+						// max-height: 2.75rem;
+					}
 				}
+			}
 
-				&:hover {
-					background-color: colors.$transparent-light-secondary;
+			@media screen and (max-width: sizing.$small-max-width) {
+				.tab-button-container {
+					flex-grow: 1;
+					button {
+						width: 100%;
+						border-top: 0.2rem solid colors.$background-five;
+					}
 				}
 			}
 		}
 
 		.current-tab {
-			background-color: colors.$transparent-light-primary;
+			background-color: colors.$background-five;
 			padding: 1rem;
+			border-radius: 1rem;
+			position: relative;
+			z-index: 1;
 
 			.preset-card-section {
 				max-width: 100%;

client/src/components/cards/preset-card/preset-card.tsx

@@ -50,13 +50,14 @@ export default function PresetCard({ preset, handleRemovePreset }: Params) {
 			<div className='preset-body'>
 				<div className='preset-tabs'>
 					{tabs.map((tab, index) => (
-						<button
-							className={index == currentTab ? 'current' : undefined}
-							key={tab}
-							onClick={() => setCurrentTab(index)}
-						>
-							{tab}
-						</button>
+						<div className='tab-button-container' key={tab}>
+							<button
+								className={index == currentTab ? 'current' : undefined}
+								onClick={() => setCurrentTab(index)}
+							>
+								<span className='tab-button-label'>{tab}</span>
+							</button>
+						</div>
 					))}
 				</div>
 				<div className='current-tab'>

client/src/components/cards/watcher-card/components/watcher-card-rule.tsx

@@ -113,7 +113,11 @@ export default function WatcherCardRule({
 						<i className='bi bi-floppy2-fill' />
 					</button>
 				)}
-				<button className='remove-button' onClick={() => handleRemoveRule(id)}>
+				<button
+					className='remove-button'
+					onClick={() => handleRemoveRule(id)}
+					title='Remove Watcher Rule'
+				>
 					<i className='bi bi-trash-fill' />
 				</button>
 			</div>