Fix all frontend formatting warnings + expand testing directions

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,6 +7,7 @@ Thank you for your pull request! 🚀
 <!-- Please replace the empty checkboxes [] below with checked ones [x] accordingly. -->
 
 - [] This pull request is on a [separate branch](https://docs.github.com/en/get-started/quickstart/github-flow) and not the main branch
+- [] I have run the tests for the backend and frontend depending on what's needed for my changes as described in the [testing section of the contributing guide](https://github.com/activist-org/activist/blob/main/CONTRIBUTING.md#testing)
 
 ---
 

CONTRIBUTING.md

@@ -326,10 +326,23 @@ exit
 
 ### Frontend
 
-Running frontend tests locally is currently WIP.
+Please check the formatting of your code using Prettier before pull requests with the following command:
+
+```bash
+# Within ./frontend:
+yarn prettier . --check --config ../.prettierrc --ignore-path ../.prettierignore
+```
+
+You can further run the following commands for TypeScript type checks on the frontend:
+
+```bash
+# Within ./frontend:
+yarn run postinstall
+yarn nuxi typecheck
+```
 
 > [!NOTE]
-> When working on the frontend, activist recommends manual typechecking. From within the `frontend` directory run `yarn run postinstall` followed by `yarn nuxi typecheck` to confirm your changes are type-safe. Existing TS errors may be ignored. PRs to fix these are always welcome!
+> Pre-existing TS errors may be ignored. If you need assistance then feel free to open a PR and we'll support!
 
 <a id="linting"></a>
 

frontend/assets/css/tailwind.css

@@ -136,19 +136,19 @@
   }
 
   .style-cta {
-    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text  text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
+    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
   }
 
   .style-cta-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50  fill-light-text/50 text-light-text/50 shadow-none   dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
   }
 
   .style-cta-secondary {
     @apply focus-brand border border-light-text bg-light-layer-2 fill-light-text text-light-text hover:bg-light-highlight-darker active:bg-light-layer-2 dark:border-dark-text dark:bg-dark-layer-2 dark:fill-dark-text dark:text-dark-text dark:hover:bg-dark-highlight-lighter dark:active:bg-dark-layer-2;
   }
 
   .style-cta-secondary-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none  dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
   }
 
   .style-learn {

frontend/components/btn/action/BtnActionDropdown.vue

@@ -40,7 +40,7 @@
             @keypress.enter="dropdownOptionsCallback(o)"
             tabindex="0"
             :class="{
-              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40  dark:text-dark-cta-orange':
+              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40 dark:text-dark-cta-orange':
                 active,
               'text-light-text dark:text-dark-text': !active,
             }"

frontend/components/media/image-carousel/MediaImageCarousel.vue

@@ -69,7 +69,7 @@ const handleCloseModal = () => {
 
 <style>
 swiper-container::part(bullet) {
-  @apply focus-brand  bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
+  @apply focus-brand bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
 }
 
 swiper-container::part(bullet-active) {

frontend/forms/schemas/organizationSchema.ts

@@ -1,13 +1,13 @@
-import { z } from "zod";
-
-export const organizationSchema = z.object({
-  name: z
-    .string()
-    .min(1, "Name must have at least 1 character")
-    .max(55, "Name must be less than 55 characters"),
-  location: z.string().min(1).max(100),
-  description: z.string().min(1).max(1000),
-  tagline: z.string().max(100).optional(),
-  social_accounts: z.array(z.string()).optional(),
-  topics: z.array(z.string()).min(1).optional(),
-});
+import { z } from "zod";
+
+export const organizationSchema = z.object({
+  name: z
+    .string()
+    .min(1, "Name must have at least 1 character")
+    .max(55, "Name must be less than 55 characters"),
+  location: z.string().min(1).max(100),
+  description: z.string().min(1).max(1000),
+  tagline: z.string().max(100).optional(),
+  social_accounts: z.array(z.string()).optional(),
+  topics: z.array(z.string()).min(1).optional(),
+});