style: convert a lot of style tags to class tags with tailwind

frontend/src/lib/components/chart/ChartHomeBlock.svelte

@@ -50,7 +50,7 @@
 >
 	<div class="flex w-full items-center justify-between">
 		<div class="mr-3 min-w-[24px]">
-			<Icon style="outline:none" tag="svg" viewBox="0 0 24 24">
+			<Icon tag="svg" viewBox="0 0 24 24">
 				<path fill="black" d={iconMap[chart.type]} />
 			</Icon>
 		</div>

frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/encoding-components/MetricsEncodingMultiChoice.svelte

@@ -36,7 +36,7 @@
 			outerDivClass="!w-full !border-grey-light !py-1 !bg-white"
 			liActiveOptionClass="!bg-primary-light"
 		>
-			<p style="text-wrap: pretty;" slot="selected" let:option>{option.label}</p>
+			<p class="text-pretty" slot="selected" let:option>{option.label}</p>
 		</MultiSelect>
 	{/if}
 	<div class="ml-auto flex items-center">

frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/encoding-components/ModelsEncodingMultiChoice.svelte

@@ -22,7 +22,7 @@
 			outerDivClass="!w-full !border-grey-light !py-1 !bg-white"
 			liActiveOptionClass="!bg-primary-light"
 		>
-			<p style="text-wrap: pretty;" slot="selected" let:option>{option}</p>
+			<p class="text-pretty" slot="selected" let:option>{option}</p>
 		</MultiSelect>
 	{/if}
 	<div class="ml-auto flex items-center">

frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/encoding-components/SlicesEncodingMultiChoice.svelte

@@ -37,7 +37,7 @@
 			outerDivClass="!w-full !border-grey-light !py-1 !bg-white"
 			liActiveOptionClass="!bg-primary-light"
 		>
-			<p style="text-wrap: pretty;" slot="selected" let:option>{option.label}</p>
+			<p class="text-pretty;" slot="selected" let:option>{option.label}</p>
 		</MultiSelect>
 	{/if}
 	<div class="ml-auto flex items-center">

frontend/src/lib/components/chart/chart-types/table/TableRow.svelte

@@ -13,7 +13,7 @@
 	export let slices: Slice[];
 </script>
 
-<Row style="overflow: visible">
+<Row class="overflow-visible">
 	<!-- y cell -->
 	<Cell>
 		{#if parameters.yChannel === SlicesOrModels.SLICES}

frontend/src/lib/components/general/HeaderIcon.svelte

@@ -18,7 +18,7 @@
 	use:tooltip={{ text: tooltipContent }}
 >
 	<div class="h-6 w-6 fill-grey">
-		<Icon style="outline:none" tag="svg" viewBox="0 0 24 24">
+		<Icon tag="svg" viewBox="0 0 24 24">
 			<path
 				class={`${$page.url.href.includes(pageName) ? 'fill-primary' : 'fill-grey'}`}
 				d={icon}

frontend/src/lib/components/instances/ComparisonViewTableHeader.svelte

@@ -6,7 +6,7 @@
 	export let sortModel: string;
 </script>
 
-<div style="display: flex; align-items:center;">
+<div class="flex items-center">
 	<div>
 		<div>{header ? header : 'difference'}</div>
 		<div class="font-normal text-grey-dark">{$comparisonColumn?.name}</div>

frontend/src/lib/components/metadata/HistogramsHeader.svelte

@@ -16,7 +16,7 @@
 				text: 'Interactive distributions for metadata columns. Click or drag on the histograms to filter the data'
 			}}
 		>
-			<Icon style="outline:none" tag="svg" viewBox="-6 -6 36 36">
+			<Icon tag="svg" viewBox="-6 -6 36 36">
 				<path d={mdiInformationOutline} />
 			</Icon>
 		</div>

frontend/src/lib/components/metadata/SliceHeader.svelte

@@ -42,7 +42,7 @@
 				text: 'Slices are named combinations of filters'
 			}}
 		>
-			<Icon style="outline:none" tag="svg" viewBox="-6 -6 36 36">
+			<Icon tag="svg" viewBox="-6 -6 36 36">
 				<path d={mdiInformationOutline} />
 			</Icon>
 		</div>

frontend/src/lib/components/metadata/cells/FolderCell.svelte

@@ -166,7 +166,6 @@
 					{#if hovering}
 						<IconButton
 							size="button"
-							style="padding: 0px"
 							on:click={(e) => {
 								e.stopPropagation();
 								showOptions = !showOptions;

frontend/src/lib/components/metadata/cells/SliceFinderCell.svelte

@@ -60,10 +60,10 @@
 <svelte:window on:keydown={submit} />
 
 <div class="mb-2.5 ml-5 mt-2.5 flex items-center justify-between">
-	<span style="display: inline-block;">
+	<span class="inline-block">
 		<SliceDetails predicateGroup={slice.filterPredicates} />
 	</span>
-	<div style="display: flex; align-items: center;">
+	<div class="flex items-center">
 		<span style="margin-right: 10px; margin-left: 10px">
 			{metric}
 		</span>
@@ -95,7 +95,7 @@
 			on:keydown={submit}
 		>
 			<Paper elevation={7}>
-				<Content style="display:flex; flex-direction:column">
+				<Content class="flex flex-col">
 					<Textfield bind:value={newSliceName} label="Slice Name" bind:this={input} />
 					<div class="mt-2.5">
 						<Button

frontend/src/lib/components/popups/CopyProjectPopup.svelte

@@ -57,7 +57,7 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content style="display: flex; flex-direction: column; width: 800px;">
+	<Content class="flex w-[800px] flex-col">
 		<h2 class="mb-4 text-xl">Copy Project</h2>
 		<div class="mb-12 flex flex-col">
 			{#if step === 1}
@@ -92,11 +92,9 @@
 					</div>
 				{/if}
 				<div class="flex items-center self-end">
-					<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}
-						>Cancel</Button
-					>
+					<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
 					<Button
-						style="margin-left: 5px;"
+						class="ml-2"
 						variant="outlined"
 						disabled={invalidName}
 						on:click={() => copyProject()}>{'Copy'}</Button

frontend/src/lib/components/popups/FeatureFlagsPopup.svelte

@@ -32,7 +32,7 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content style="display: flex; flex-direction: column; width: 400px;">
+	<Content class="flex w-[400px] flex-col">
 		<h2 class="mb-4 text-xl">Feature Flags</h2>
 		{#each Object.keys($featureFlags).filter( (key) => Object.keys(zenoFeatureFlags).includes(key) ) as flag}
 			<div class="flex items-center">

frontend/src/lib/components/popups/FilterGroupEntry.svelte

@@ -43,7 +43,7 @@
 			/>
 		{/if}
 		{#if index > -1}
-			<IconButton on:click={deletePredicate} style="min-width: 60px; color: var(--G2)">
+			<IconButton on:click={deletePredicate} class="min-w-[60px] text-grey-dark">
 				<Icon tag="svg" viewBox="0 0 24 24">
 					<path fill="currentColor" d={mdiTrashCanOutline} />
 				</Icon>

frontend/src/lib/components/popups/FolderPopup.svelte

@@ -68,13 +68,11 @@
 <svelte:window on:keydown={submit} />
 
 <Popup on:close>
-	<Content style="display: flex; align-items: center;">
+	<Content class="flex items-end">
 		<Textfield bind:value={folderName} label="Folder Name" bind:this={input} />
-		<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}>
-			Cancel
-		</Button>
+		<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
 		<Button
-			style="margin-left: 5px;"
+			class="ml-2"
 			variant="outlined"
 			disabled={invalidName}
 			on:click={() => (folderToEdit ? editFolder() : createFolder())}

frontend/src/lib/components/popups/NewOrganizationPopup.svelte

@@ -28,13 +28,11 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content style="display: flex; align-items: center;">
+	<Content class="flex items-center">
 		<Textfield bind:value={organizationName} label="Organization Name" bind:this={input} />
-		<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}>
-			Cancel
-		</Button>
+		<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
 		<Button
-			style="margin-left: 5px;"
+			class="ml-2"
 			variant="outlined"
 			on:click={() =>
 				zenoClient

frontend/src/lib/components/popups/NewReportPopup.svelte

@@ -43,17 +43,10 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content style="display: flex; align-items: center;">
+	<Content class="flex items-center">
 		<Textfield bind:value={reportName} label="Report Name" bind:this={input} />
-		<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}>
-			Cancel
-		</Button>
-		<Button
-			style="margin-left: 5px;"
-			variant="outlined"
-			disabled={invalidName}
-			on:click={addReport}
-		>
+		<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
+		<Button class="ml-2" variant="outlined" disabled={invalidName} on:click={addReport}>
 			Create
 		</Button>
 	</Content>

frontend/src/lib/components/popups/OrganizationPopup.svelte

@@ -54,7 +54,7 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content style="display: flex; flex-direction: column;">
+	<Content class="flex flex-col">
 		<h2>Organization Settings</h2>
 		<div class="mb-5 flex flex-col">
 			<Textfield bind:value={organizationToEdit.name} label="Name" bind:this={input} />
@@ -66,9 +66,9 @@
 					<thead
 						class="sticky left-0 top-0 border-b border-grey-lighter bg-background pb-1 font-semibold"
 					>
-						<th style="width: 200px;">Email</th>
+						<th class="w-[200px]">Email</th>
 						<th>Admin</th>
-						<th style="width: auto;" />
+						<th class="w-auto" />
 					</thead>
 					<tbody>
 						{#each members as member}
@@ -128,11 +128,9 @@
 			{/await}
 		</div>
 		<div class="flex items-center self-end">
-			<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}
-				>Cancel</Button
-			>
+			<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
 			<Button
-				style="margin-left: 5px;"
+				class="ml-2"
 				variant="outlined"
 				disabled={invalidName}
 				on:click={() => updateOrganization()}>{'Update'}</Button

frontend/src/lib/components/popups/ProjectPopup.svelte

@@ -74,30 +74,23 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content
-		style="display: flex; flex-direction: column; width: 800px; max-height: 80vh; overflow-y: scroll"
-	>
+	<Content class="flex max-h-[80vh] w-[800px] flex-col overflow-y-auto">
 		<h2 class="mb-4 text-xl">Project Settings</h2>
 		<!--Project Settings-->
 		<h3 class="text-lg">Settings</h3>
 		<div class="mb-12 flex flex-col">
 			<div class="mb-6 flex">
 				<div class="mr-8 flex w-1/2 flex-col">
 					<div>
-						<Textfield
-							bind:value={config.name}
-							label="Name"
-							bind:this={input}
-							style="width: 100%;"
-						/>
+						<Textfield bind:value={config.name} label="Name" bind:this={input} class="w-full" />
 					</div>
 					<div>
 						<Textfield
 							bind:value={config.samplesPerPage}
 							label="Number of displayed items"
 							bind:this={input}
 							type="number"
-							style="width: 100%;"
+							class="w-full"
 						/>
 					</div>
 				</div>
@@ -111,12 +104,7 @@
 				</div>
 			</div>
 			<div>
-				<Textfield
-					textarea
-					bind:value={config.description}
-					label="Description"
-					style="width: 100%"
-				/>
+				<Textfield textarea bind:value={config.description} label="Description" class="w-full" />
 			</div>
 			<!--Visibility Settings-->
 			<div class="mb-5 mt-12 flex flex-col" transition:fade>
@@ -159,7 +147,7 @@
 											disabled={member.id === user.id}
 										/>
 									</td>
-									<td style="text-align: end;">
+									<td class="text-end">
 										{#if member.id !== user.id}
 											<IconButton
 												on:click={() =>
@@ -233,7 +221,7 @@
 															)}
 												/>
 											</td>
-											<td style="text-align: end;">
+											<td class="text-end">
 												<IconButton
 													on:click={() =>
 														zenoClient
@@ -268,11 +256,9 @@
 				{/if}
 			{/await}
 			<div class="flex items-center self-end">
-				<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}
-					>Cancel</Button
-				>
+				<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
 				<Button
-					style="margin-left: 5px;"
+					class="ml-2"
 					variant="outlined"
 					disabled={invalidName}
 					on:click={() => updateProject()}>{'Update'}</Button

frontend/src/lib/components/popups/ReportPopup.svelte

@@ -81,9 +81,7 @@
 
 <svelte:window on:keydown={submit} />
 <Popup on:close>
-	<Content
-		style="display: flex; flex-direction: column; width: 800px; max-height: 80vh; overflow-y: scroll"
-	>
+	<Content class="flex max-h-[80vh] w-[800px] flex-col overflow-y-auto">
 		<h2 class="mb-4 text-xl">Report Settings</h2>
 		<h3 class="text-lg">Settings</h3>
 		<div class="mb-12 flex flex-col">
@@ -102,7 +100,7 @@
 					<span>Updated: {new Date(report.updatedAt ?? '').toLocaleString()}</span>
 				</div>
 			</div>
-			<Textfield textarea bind:value={report.description} label="Description" style="width: 100%" />
+			<Textfield textarea bind:value={report.description} label="Description" class="w-full" />
 		</div>
 		<div class="mb-5 flex flex-col" transition:fade>
 			<h3 class="mb-2 text-lg">Collaborators</h3>
@@ -142,7 +140,7 @@
 										disabled={member.id === user.id}
 									/>
 								</td>
-								<td style="text-align: end;">
+								<td class="text-end">
 									{#if member.id !== user.id}
 										<IconButton
 											on:click={() =>
@@ -209,7 +207,7 @@
 												)}
 									/>
 								</td>
-								<td style="text-align: end;">
+								<td class="text-end">
 									<IconButton
 										on:click={() =>
 											zenoClient
@@ -240,14 +238,9 @@
 			{/if}
 		</div>
 		<div class="flex items-center self-end">
-			<Button style="margin-left: 10px;" variant="outlined" on:click={() => dispatch('close')}
-				>Cancel</Button
-			>
-			<Button
-				style="margin-left: 5px;"
-				variant="outlined"
-				disabled={invalidName}
-				on:click={() => updateReport()}>{'Update'}</Button
+			<Button class="ml-4" variant="outlined" on:click={() => dispatch('close')}>Cancel</Button>
+			<Button class="ml-2" variant="outlined" disabled={invalidName} on:click={() => updateReport()}
+				>{'Update'}</Button
 			>
 		</div>
 	</Content>