Create color variables

src/capps/core/templates/core/partials/user-dropdown.html

@@ -34,7 +34,7 @@
       <li>
         <a
           href="{% url 'socialaccount_connections' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-user"></i>
           My profile
@@ -45,7 +45,7 @@
       <li>
         <a
           href="{% url 'admin:index' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
             <i class="fas fa-cog "></i>
             {% trans 'Admin' %}
@@ -55,7 +55,7 @@
       <li>
         <a
           href="{% url 'account_logout' %}"
-          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-right-from-bracket"></i>
           {% trans 'Log Out' %}

src/frontend/src/analysis_samples/components/Filters.jsx

@@ -235,7 +235,7 @@ export default function Filters({ onSearch, submitBtn }) {
         <Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
           {([canSubmit, isSubmitting]) => (
             <Button
-              className="btn bg-primary block disabled:opacity-50"
+              className="btn bg-brand-primary block disabled:opacity-50"
               disabled={!canSubmit}
               onClick={handleSubmit}
             >

src/frontend/src/analysis_samples/components/SearchApplyMarker.jsx

@@ -66,7 +66,7 @@ export default function SearchApplyMarker() {
         {([canSubmit, isSubmitting, samples, markers]) => (
           <Button
             onClick={handleSubmit}
-            className="btn bg-primary block disabled:opacity-50"
+            className="btn bg-brand-primary block disabled:opacity-50"
             disabled={
               !canSubmit ||
               !Object.values(samples).some((_) => _) ||

src/frontend/src/helpers/PastableArrayInput.jsx

@@ -10,7 +10,7 @@ import {
 import { useState } from "react";
 
 export default function PastableArrayInput({ state, handleChange }) {
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   let [isOpen, setIsOpen] = useState(false);
 
   const arrayFromInput = () => {
@@ -21,9 +21,9 @@ export default function PastableArrayInput({ state, handleChange }) {
   };
 
   const open = () => {
-    setInput(state.value.join('\n'));
+    setInput(state.value.join("\n"));
     setIsOpen(true);
-  }
+  };
 
   const invalid = input.indexOf("\t") > -1;
 
@@ -38,7 +38,7 @@ export default function PastableArrayInput({ state, handleChange }) {
       </div>
 
       <div className="flex gap-2 mt-2">
-        <Button className="btn bg-primary" onClick={open}>
+        <Button className="btn bg-brand-primary" onClick={open}>
           Paste from excel
         </Button>
         {state.value.length > 0 && (
@@ -77,7 +77,7 @@ export default function PastableArrayInput({ state, handleChange }) {
             )}
             <div className="flex justify-start gap-4">
               <Button
-                className="btn block bg-primary disabled:opacity-70"
+                className="btn block bg-brand-primary disabled:opacity-70"
                 onClick={arrayFromInput}
                 disabled={invalid || !input}
               >

src/frontend/src/samples/components/Cell/MultiSelectCell.jsx

@@ -2,15 +2,15 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async";
 
-const datePortal = document.getElementById('date-portal');
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: (state) => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto focus:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: (state) => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto focus:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function MultiSelectCell({
   getValue,
@@ -19,8 +19,8 @@ export default function MultiSelectCell({
   table,
   loadOptions,
   queryKey,
-  idField = 'id',
-  labelField = 'name',
+  idField = "id",
+  labelField = "name",
 }) {
   const queryClient = useQueryClient();
   const initialValue = getValue();
@@ -29,8 +29,11 @@ export default function MultiSelectCell({
   // When the input is blurred, we'll call our table meta's updateData function
   const handleBlur = () => {
     if (value !== initialValue) {
-      console.log(value)
-      table.options.meta?.updateData({ id: original.id, [id]: value.map(v => v[idField]) });
+      console.log(value);
+      table.options.meta?.updateData({
+        id: original.id,
+        [id]: value.map((v) => v[idField]),
+      });
     }
   };
 
@@ -39,7 +42,11 @@ export default function MultiSelectCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect

src/frontend/src/samples/components/Cell/SelectCell.jsx

@@ -2,16 +2,15 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async";
 
-const datePortal = document.getElementById('date-portal');
-
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: (state) => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto hover:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: (state) => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto hover:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function SelectCell({
   getValue,
@@ -37,7 +36,11 @@ export default function SelectCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect

src/frontend/src/samples/components/Cell/SelectCreateCell.jsx

@@ -2,16 +2,15 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async-creatable";
 
-const datePortal = document.getElementById('date-portal');
-
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: () => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto hover:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: () => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto hover:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function SelectCreateCell({
   getValue,
@@ -37,8 +36,8 @@ export default function SelectCreateCell({
   const create = useMutation({
     mutationFn: onCreate,
     onSuccess: (data) => {
-      setValue(data.data)
-      queryClient.invalidateQueries({ queryKey: [queryKey] })
+      setValue(data.data);
+      queryClient.invalidateQueries({ queryKey: [queryKey] });
       setKey(key + 1);
     },
   });
@@ -48,7 +47,11 @@ export default function SelectCreateCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect
@@ -64,7 +67,10 @@ export default function SelectCreateCell({
       onChange={setValue}
       menuPortalTarget={datePortal}
       unstyled
-      getNewOptionData={(inputValue, optionLabel) => ({ id: inputValue, name: optionLabel })}
+      getNewOptionData={(inputValue, optionLabel) => ({
+        id: inputValue,
+        name: optionLabel,
+      })}
       onCreateOption={create.mutate}
     />
   );

src/frontend/src/samples/components/SampleForm.jsx

@@ -348,7 +348,7 @@ export default function SampleForm() {
             {([canSubmit, isSubmitting, ...rows]) => (
               <Button
                 type="submit"
-                className="btn bg-primary block disabled:opacity-50"
+                className="btn bg-brand-primary block disabled:opacity-50"
                 disabled={!canSubmit}
               >
                 {isSubmitting ? (

src/frontend/src/samples/components/Table.jsx

@@ -423,7 +423,7 @@ export default function Table() {
           )}
         </button>
         <button
-          className="btn bg-secondary disabled:opacity-70 text-white"
+          className="btn bg-brand-secondary disabled:opacity-70 text-white"
           onClick={mutateConfirm.mutate}
           disabled={pendingState}
         >

src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html

@@ -33,7 +33,7 @@ <h5 class="text-2xl my-5">Contacts for Analysis Results</h5>
         {% for contact in results_contacts %}
             <li>
             {{ contact.contact_person_results }} —
-            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-primary">
+            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-brand-primary">
                 {{ contact.contact_email_results }}
             </a>
             </li>
@@ -54,22 +54,22 @@ <h5 class="text-2xl my-5">Samples to analyze</h5>
     </div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
         {% if object.status == 'draft' %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
         {% if not object.from_order %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
         {% endif %}
-        <a class="ml-auto btn custom_order_button" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Summary Samples</a>
+        <a class="ml-auto btn btn-tertiary" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Summary Samples</a>
         {% url 'genrequest-order-confirm' genrequest_id=object.genrequest_id pk=object.id as confirm_order_url %}
         {% url 'genrequest-order-clone' genrequest_id=object.genrequest_id pk=object.id as clone_order_url %}
-        {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
-        {% action-button action=clone_order_url class="btn custom_order_button" submit_text="Clone Order" csrf_token=csrf_token %}
+        {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
+        {% action-button action=clone_order_url class="btn btn-tertiary" submit_text="Clone Order" csrf_token=csrf_token %}
         {% if all_samples_have_no_genlab_id %}
-        <a class="btn custom_order_button_red" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
+        <a class="btn btn-danger" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
         {% endif %}
         {% elif object.status == object.OrderStatus.DELIVERED %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
         {% endif %}
     </div>
 {% endblock %}

src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html

@@ -6,8 +6,8 @@
 {% block page-inner %}
 <div class="flex gap-5 mb-5">
     {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
     {% endif %}
 </div>
 {% endblock page-inner %}

src/genlab_bestilling/templates/genlab_bestilling/analysisorder_form.html

@@ -1,16 +1,21 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% endif %}
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form=form %}
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
 
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% endif %}
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form=form %}
 {% endblock %}

src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_detail.html

@@ -12,7 +12,7 @@
 
     <h3 class="text-4xl mb-5">Order {{ object }}</h3>
     <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
 
     {% object-detail object=object %}
@@ -35,13 +35,13 @@ <h5 class="text-2xl my-5">Requested Equipment</h5>
 
     <div class="flex gap-5 my-5">
         {% if object.status == 'draft' %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit</a>
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-quantity-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit requested equipment</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-quantity-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit requested equipment</a>
         {% url 'genrequest-order-confirm' genrequest_id=object.genrequest_id pk=object.id as confirm_order_url %}
-        {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
-        <a class="btn custom_order_button_red" href="{% url 'genrequest-equipment-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
+        {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
+        <a class="btn btn-danger" href="{% url 'genrequest-equipment-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
         {% endif %}
         {% url 'genrequest-order-clone' genrequest_id=object.genrequest_id pk=object.id as clone_order_url %}
-        {% action-button action=clone_order_url class="btn custom_order_button" submit_text="Clone Order" csrf_token=csrf_token %}
+        {% action-button action=clone_order_url class="btn btn-tertiary" submit_text="Clone Order" csrf_token=csrf_token %}
     </div>
 {% endblock %}

src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html

@@ -6,8 +6,8 @@
 {% block page-inner %}
 <div class="flex gap-5 mb-5">
     {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-success" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
     {% endif %}
 </div>
 {% endblock page-inner %}