bunch more fixes lol

apps/frontend/src/pages/organization/[organization].vue

@@ -146,9 +146,8 @@
 			<div class="normal-page__sidebar">
 				<AdPlaceholder v-if="!auth.user" />
 
-				<div class="card flex-card">
-					<h2>Members</h2>
-					<div class="details-list">
+				<SidebarCard title="Members">
+					<div class="flex flex-col gap-3 font-semibold">
 						<nuxt-link
 							v-for="member in acceptedMembers"
 							:key="`member-${member?.user?.id}`"
@@ -163,22 +162,20 @@
 							/>
 							<div class="flex flex-col">
 								<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
-									<span class="min-w-0 overflow-hidden truncate font-normal text-contrast">{{
-										member.user.username
-									}}</span>
+									<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
 									<CrownIcon
 										v-if="member.is_owner"
 										v-tooltip="'Organization owner'"
 										class="text-brand-orange"
 									/>
 								</span>
-								<span class="text-sm font-normal">
+								<span class="text-sm font-normal text-secondary">
 									{{ member?.role ? member.role : 'Member' }}
 								</span>
 							</div>
 						</nuxt-link>
 					</div>
-				</div>
+				</SidebarCard>
 			</div>
 			<div class="normal-page__content">
 				<div v-if="isInvited" class="universal-card information invited">
@@ -317,6 +314,7 @@ import {
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
+	SidebarCard,
 	useCompactNumber,
 	useFormatNumber,
 	useVIntl,
@@ -774,4 +772,8 @@ async function copyPermalink() {
 .popout-checkbox {
 	padding: var(--gap-sm) var(--gap-md);
 }
+
+.new-page {
+	column-gap: 1.5rem;
+}
 </style>