fixed styling of all pages

packages/ui/src/pages/AdminPage/AdminPage.vue

@@ -16,10 +16,10 @@ if (!authStore.hasAdminPower(Role.StudyManager)) {
 </script>
 <template>
   <div class="flex h-screen items-stretch">
-    <AdminTaskLibrary class="flex-none" />
+    <AdminTaskLibrary class="flex-none border border-neutral-100" />
     <div
       v-if="batteryEditingStore.editingBatteryId !== undefined"
-      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden"
+      class="flex-1 mx-6 my-8 p-8 rounded-2xl min-w-[600px] bg-white shadow-xl overflow-y-hidden border border-neutral-100"
     >
       <BatteryEditForm />
     </div>

packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue

@@ -204,8 +204,8 @@ const switchTab = (tab: string) => {
               :class="[
                 'flex gap-5 p-4 border rounded-2xl cursor-pointer',
                 batteryEditingStore.editingBatteryId === task._id.toString()
-                  ? 'bg-neutral-100 border-neutral-400'
-                  : 'bg-neutral-10 border-neutral-300',
+                  ? 'bg-neutral-50 border-neutral-200'
+                  : 'bg-neutral-10 border-neutral-100',
               ]"
               @click="batteryEditingStore.select(task._id.toString())"
             >

packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue

@@ -115,8 +115,8 @@ const editingName = ref(false);
             <textarea
               id="description"
               v-model="batteryData.description"
-              class="mt-3 border border-neutral-300 rounded-2xl resize-none py-2.5 px-4 w-full"
-              rows="10"
+              class="mt-3 border border-neutral-200 rounded-2xl resize-none py-2.5 px-4 w-full"
+              rows="5"
             ></textarea>
           </div>
         </div>

packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue

@@ -5,7 +5,7 @@ defineProps<{ group: DTO<IBattery>["stages"][0]["options"] }>();
 </script>
 
 <template>
-  <div class="border border-gray-400 rounded-xl p-5">
+  <div class="bg-neutral-50 border border-neutral-200 rounded-xl p-5">
     <h2 class="text-base font-bold">
       {{ group.name }}
     </h2>

packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue

@@ -48,7 +48,7 @@ const handleStudyDeleted = async () => {
 <template>
   <div
     v-loading="isLoading"
-    class="mt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10"
+    class="pt-14 mx-auto w-full min-w-[600px] px-4 sm:px-6 lg:px-10 bg-neutral-50"
   >
     <div class="flex items-center">
       <h1 class="text-3xl font-bold mb-4 -mt-4">My Studies</h1>

packages/ui/src/pages/StudyBuilderPage/StudyBuilderPage.vue

@@ -23,7 +23,7 @@ const taskEditingStore = useTaskEditingStore();
 </script>
 
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <Draggable
       v-loading="studyBuilderStore.isStudySaving"

packages/ui/src/pages/StudyBuilderPage/components/SessionCard.vue

@@ -29,7 +29,7 @@ const draggableProps = {
 
 <template>
   <div
-    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-300 overflow-y-hidden"
+    class="flex flex-col px-6 pb-5 border rounded-3xl border-neutral-200 overflow-y-hidden"
   >
     <ElImage
       v-if="draggable"

packages/ui/src/pages/StudyBuilderPage/components/StudyPanel.vue

@@ -100,16 +100,16 @@ watch(
             <ElSkeletonItem variant="text" class="h-8 mt-2 mb-1 w-3/4" />
           </template>
           <template #default>
-            <div class="flex gap-3 flex-col">
+            <div class="flex gap-1 flex-col">
               <input
                 v-model="studyBuilderStore.name"
-                class="w-full bg-transparent text-neutral-600 font-bold text-4xl"
+                class="w-full bg-transparent text-neutral-600 font-bold text-2xl"
                 type="text"
                 placeholder="Untitled Study"
               />
               <input
                 v-model="studyBuilderStore.description"
-                class="w-full bg-transparent text-neutral-600 font-medium text-lg"
+                class="w-full bg-transparent text-neutral-600 font-medium text-md"
                 type="text"
                 placeholder="Add a description"
               />
@@ -120,6 +120,7 @@ watch(
     </div>
     <div class="flex items-center justify-center w-3/6 p-2 mx-auto">
       <el-button
+        class="rounded-lg px-2"
         :icon="ArrowLeft"
         :disabled="currentVariantIndex <= 0"
         @click="switchVariant('prev')"
@@ -132,22 +133,27 @@ watch(
       />
       <el-button
         v-if="currentVariantIndex < studyBuilderStore.variants.length - 1"
+        class="rounded-lg px-2"
         :icon="ArrowRight"
         :disabled="currentVariantIndex >= studyBuilderStore.variants.length - 1"
         @click="switchVariant('next')"
       />
       <el-button v-else :icon="Plus" @click="addVariant()" />
-      <el-button class="ml-8" :icon="Delete" @click="deleteVariant()" />
+      <el-button
+        class="ml-8 rounded-lg px-3"
+        :icon="Delete"
+        @click="deleteVariant()"
+      />
     </div>
 
     <div
       v-loading="studyBuilderStore.isStudyLoading"
-      class="grow p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+      class="grow p-6 bg-neutral-10 border border-neutral-200 rounded-3xl overflow-x-hidden"
     >
       <div class="flex-2 items-center justify-between gap-4 pb-5">
         <input
           v-model="studyBuilderStore.variantDescription"
-          class="text-center w-full bg-transparent text-neutral-600 font-medium text-lg"
+          class="text-center w-full bg-transparent text-neutral-600 font-medium text-md"
           type="text"
           placeholder="Untitled Variant Description"
         />

packages/ui/src/pages/StudyBuilderPage/components/StudyServerCode.vue

@@ -17,7 +17,7 @@ function copyCode() {
 </script>
 
 <template>
-  <el-button class="border rounded-lg px-5 py-1" @click="copyCode">
+  <el-button class="border rounded-lg px-3 py-1" @click="copyCode">
     <FontAwesomeIcon :icon="['far', 'copy']" />
   </el-button>
 
@@ -28,13 +28,15 @@ function copyCode() {
     <div
       :class="[
         'border rounded-lg px-5 py-1 flex items-center justify-center gap-1 w-40',
-        copied ? 'bg-gray-300 border-gray-500' : 'bg-gray-200 border-gray-300',
+        copied
+          ? 'bg-neutral-0 border-gray-500'
+          : 'bg-neutral-0 border-gray-300',
       ]"
     >
       <input
         v-model="studyBuilderStore.serverCode"
         type="text"
-        class="truncate text-center border-none bg-transparent w-full focus:outline-none"
+        class="truncate text-center border-none bg-neutral-0 w-full focus:outline-none"
       />
     </div>
   </div>

packages/ui/src/pages/StudyBuilderPage/components/TaskBank.vue

@@ -19,14 +19,14 @@ const libraryVisible = ref(false);
 
 <template>
   <div
-    class="bg-neutral-10 fixed flex items-stretch h-full border border-neutral-300 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
+    class="top-0 bg-neutral-10 fixed flex items-stretch h-full border border-neutral-200 rounded-l-2xl px-6 py-8 shadow-2xl right-0"
   >
     <div class="flex flex-col w-[216px]">
       <div class="flex mb-5 items-center">
         <h1 class="text-2xl font-bold">Task Bank</h1>
         <div class="grow"></div>
         <AppButton v-if="!libraryVisible" @click="libraryVisible = true">
-          Add
+          + Add
         </AppButton>
       </div>
       <ElSkeleton animated :loading="studyBuilderStore.isStudyLoading">

packages/ui/src/pages/StudyBuilderPage/components/TaskCard.vue

@@ -17,7 +17,7 @@ const taskEditingStore = useTaskEditingStore();
 <template>
   <div
     :class="[
-      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-300 bg-neutral-10',
+      'group flex items-center pl-1.5 pr-3 py-2.5 gap-2 rounded-xl border border-neutral-200 bg-neutral-50',
       { 'cursor-pointer': draggable },
     ]"
     @click="taskEditingStore.select(taskId)"

packages/ui/src/pages/StudyConditions/components/StudyConditions.vue

@@ -21,7 +21,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div>
+  <div class="bg-neutral-50">
     <AppBreadcrumb />
     <div class="flex flex-row">
       <div
@@ -32,6 +32,7 @@ onMounted(() => {
       </div>
 
       <ConditionsSidebar
+        class="top-0"
         :collapsed="isCollapsed"
         @collapse-change="(v: boolean) => (collapsePressed = v)"
       />

packages/ui/src/pages/StudyConditions/components/components/ConditionCard.vue

@@ -7,7 +7,11 @@ import AppButton from "@/components/ui/AppButton.vue";
 import { defineProps } from "vue";
 
 // Define props for this component
-const props = defineProps<{ variantId: string; draggable: boolean }>();
+const props = defineProps<{
+  variantId: string;
+  draggable: boolean;
+  isSelected?: boolean;
+}>();
 
 // Use the study builder store to get your data
 const studyBuilderStore = useStudyBuilderStore();
@@ -60,7 +64,10 @@ function setVariantId() {
       <div
         v-if="isOpen === true"
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-200 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-3">
@@ -99,7 +106,7 @@ function setVariantId() {
           {{ variantData.description || "No description" }}
         </div>
 
-        <div class="w-full h-5/6 flex gap-6 overflow-x-auto bg-white pr-5">
+        <div class="w-full h-5/6 flex gap-6 overflow-x-auto pr-5">
           <TransitionGroup>
             <Draggable
               key="draggable"
@@ -126,7 +133,10 @@ function setVariantId() {
       <div
         v-else
         v-loading="studyBuilderStore.isStudyLoading"
-        class="w-full p-6 bg-neutral-10 border border-neutral-300 rounded-3xl overflow-x-hidden"
+        :class="[
+          'w-full p-6 border border-neutral-300 rounded-3xl overflow-x-hidden',
+          isSelected ? 'bg-neutral-100' : 'bg-neutral-10',
+        ]"
         @click="setVariantId"
       >
         <div class="flex items-start justify-between gap-4 pb-5">

packages/ui/src/pages/StudyConditions/components/components/ConditionPanel.vue

@@ -16,20 +16,20 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
         </template>
 
         <template #default>
-          <div class="flex flex-col">
+          <div class="flex gap-1 flex-col">
             <input
               v-model="studyBuilderStore.name"
-              @change="studyBuilderStore.saveStudyStore"
               class="w-full bg-transparent text-neutral-600 font-bold text-2xl"
               type="text"
               placeholder="Untitled Study"
+              @change="studyBuilderStore.saveStudyStore"
             />
             <input
               v-model="studyBuilderStore.description"
-              @change="studyBuilderStore.saveStudyStore"
               class="w-full bg-transparent text-neutral-600 font-medium text-md"
               type="text"
               placeholder="Add a description"
+              @change="studyBuilderStore.saveStudyStore"
             />
           </div>
         </template>
@@ -42,7 +42,13 @@ const emit = defineEmits<(e: "open-sidebar") => void>();
       :key="variant._id"
       :variant-id="variant._id"
       :draggable="true"
-      @click="emit('open-sidebar')"
+      :is-selected="variant._id === studyBuilderStore.currentVariantId"
+      @click="
+        () => {
+          studyBuilderStore.switchVariant(variant._id);
+          emit('open-sidebar');
+        }
+      "
     />
   </div>
 </template>

packages/ui/src/pages/StudyConditions/components/components/ConditionsSidebar.vue

@@ -79,11 +79,11 @@ function updateVariantName() {
 <template>
   <div
     :class="[
-      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-300 rounded-l-2xl pt-8 shadow-2xl right-0 transition-all duration-200',
+      'bg-neutral-10 fixed flex flex-row items-stretch h-full border border-neutral-200 rounded-l-xl pt-8 shadow-2xl right-0 transition-all duration-200',
       isCollapsed ? 'w-16 px-3' : 'w-[300px] px-4',
     ]"
   >
-    <div class="justify-center flex flex-col pr-4">
+    <div class="align-start flex flex-col pr-4">
       <ElImage
         v-if="!isCollapsed"
         src="/icons/fa6-solid_angles-right-gray.svg"

packages/ui/src/pages/StudyConditions/components/components/SessionCard.vue

@@ -42,7 +42,7 @@ const taskCounts = computed(() => {
 
 <template>
   <div
-    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-300 overflow-hidden p-3 bg-stone-50 outline-stone-300"
+    class="w-52 h-52 flex flex-col items-center border rounded-3xl border-neutral-200 overflow-hidden p-3 bg-neutral-50 outline-stone-300"
   >
     <!-- grip icon for dragging -->
     <ElImage