Browse Source

Better styling for count info

Alex Tran 2 years ago
parent
commit
836b174d33

+ 6 - 6
web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -66,12 +66,12 @@
 			on:mouseenter={() => (showAssetCount = true)}
 			on:mouseenter={() => (showAssetCount = true)}
 			on:mouseleave={() => (showAssetCount = false)}
 			on:mouseleave={() => (showAssetCount = false)}
 		>
 		>
-			<InformationOutline size={18} color="#4250af" />
+			<InformationOutline size={18} color="#989a9f" />
 			{#if showAssetCount}
 			{#if showAssetCount}
 				<div
 				<div
 					transition:fade={{ duration: 200 }}
 					transition:fade={{ duration: 200 }}
 					id="asset-count-info-detail"
 					id="asset-count-info-detail"
-					class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
+					class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
 				>
 				>
 					{#await getAssetCount()}
 					{#await getAssetCount()}
 						<LoadingSpinner />
 						<LoadingSpinner />
@@ -99,12 +99,12 @@
 			on:mouseenter={() => (showSharingCount = true)}
 			on:mouseenter={() => (showSharingCount = true)}
 			on:mouseleave={() => (showSharingCount = false)}
 			on:mouseleave={() => (showSharingCount = false)}
 		>
 		>
-			<InformationOutline size={18} color="#4250af" />
+			<InformationOutline size={18} color="#989a9f" />
 			{#if showSharingCount}
 			{#if showSharingCount}
 				<div
 				<div
 					transition:fade={{ duration: 200 }}
 					transition:fade={{ duration: 200 }}
 					id="asset-count-info-detail"
 					id="asset-count-info-detail"
-					class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
+					class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
 				>
 				>
 					{#await getAlbumCount()}
 					{#await getAlbumCount()}
 						<LoadingSpinner />
 						<LoadingSpinner />
@@ -134,12 +134,12 @@
 			on:mouseenter={() => (showAlbumsCount = true)}
 			on:mouseenter={() => (showAlbumsCount = true)}
 			on:mouseleave={() => (showAlbumsCount = false)}
 			on:mouseleave={() => (showAlbumsCount = false)}
 		>
 		>
-			<InformationOutline size={18} color="#4250af" />
+			<InformationOutline size={18} color="#989a9f" />
 			{#if showAlbumsCount}
 			{#if showAlbumsCount}
 				<div
 				<div
 					transition:fade={{ duration: 200 }}
 					transition:fade={{ duration: 200 }}
 					id="asset-count-info-detail"
 					id="asset-count-info-detail"
-					class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
+					class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
 				>
 				>
 					{#await getAlbumCount()}
 					{#await getAlbumCount()}
 						<LoadingSpinner />
 						<LoadingSpinner />