Highlight open source jobs

Closes #166

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

gitjobs-server/static/styles/index.css

@@ -1,5 +1,6 @@
 :root {
   --primary-color: #fd4d12;
+  --secondary-color: #2a71ff;
 }
 
 .bg-jobboard {
@@ -445,6 +446,10 @@
   box-shadow: 0 0 0 var(--primary-color);
 }
 
+.box-animated-secondary {
+  box-shadow: 0 0 0 var(--secondary-color);
+}
+
 @-webkit-keyframes pulse-shadow {
   0% {
     -webkit-box-shadow: 0 0 0 0 inherit;

gitjobs-server/templates/base.html

@@ -136,6 +136,19 @@
                 '900': '#7e1b10',
                 '950': '#440906',
               },
+              secondary: {
+                '50': '#eef5ff',
+                '100': '#d8e8ff',
+                '200': '#b9d6ff',
+                '300': '#89bdff',
+                '400': '#5299ff',
+                '500': '#2a71ff',
+                '600': '#124dfd',
+                '700': '#0c38e9',
+                '800': '#112ebc',
+                '900': '#142d94',
+                '950': '#111d5a',
+              },
             },
             fontSize: {
               filterTitle: '0.8rem',

gitjobs-server/templates/jobboard/jobs/results_section.html

@@ -25,14 +25,15 @@
   {% else %}
     {# Cards -#}
     {% for job in jobs %}
+      {% let open_source = job.open_source.unwrap_or_default() %}
       <button id="job-preview-{{ job.job_id }}"
               data-preview-job="true"
               data-job-id="{{ job.job_id }}"
               hx-get="/section/jobs/{{ job.job_id }}"
               hx-target="#preview-content"
               hx-trigger="click,open-modal"
               hx-indicator="#spinner-{{ job.job_id }}"
-              class="relative mx-5 md:mx-7 text-start enabled:cursor-pointer border rounded-lg enabled:hover:outline enabled:hover:-outline-offset-1 p-5 md:p-7 {%- if let Some(member) = job.employer.member %} border-primary-400 bg-primary-50/20 enabled:hover:outline-primary-500{%- else %} enabled:hover:outline-gray-400{%- endif -%}"
+              class="relative mx-5 md:mx-7 text-start enabled:cursor-pointer border border-2 rounded-lg enabled:hover:outline enabled:hover:-outline-offset-1 p-5 md:p-7 {%- if open_source > 0 %} border-primary-400 bg-primary-50/20 enabled:hover:outline-primary-500{%- else if let Some(member) = job.employer.member %} border-secondary-400 bg-secondary-50/20 enabled:hover:outline-secondary-500{%- else %} enabled:hover:outline-gray-400{%- endif -%}"
               hx-disabled-elt="[data-preview-job]"
               hx-boost="true">
         {# Job title #}
@@ -148,12 +149,8 @@
 
             {# Open source #}
             <div class="flex space-x-1 items-center justify-center">
-              {% if let Some(open_source) = job.open_source %}
-                {% if open_source + 0 > 0 %}
-                  <div class="svg-icon size-3 icon-check bg-green-500"></div>
-                {% else %}
-                  <div class="svg-icon size-3.5 icon-close bg-red-500"></div>
-                {% endif %}
+              {% if open_source > 0 %}
+                <div class="svg-icon size-3 icon-check bg-green-500"></div>
               {% else %}
                 <div class="svg-icon size-3.5 icon-close bg-red-500"></div>
               {% endif %}
@@ -197,7 +194,7 @@
 
         {# Spinner #}
         <div id="spinner-{{ job.job_id }}"
-             class="hx-spinner absolute rounded-lg top-0 left-0 h-full w-full rounded-lg box-animated {%- if let Some(member) = job.employer.member %} box-animated-primary{%- endif -%}">
+             class="hx-spinner absolute rounded-lg top-0 left-0 h-full w-full rounded-lg box-animated {%- if open_source > 0 %} box-animated-primary{%- else if let Some(member) = job.employer.member %} box-animated-secondary{%- endif -%}">
         </div>
         {# End spinner #}
       </button>