Grade home works

src/components/Form/Select.svelte

@@ -7,6 +7,7 @@
   export let labelKey = 'label';
   export let isRequired = false;
   export let className = '';
+  export let selectClassName = '';
   export let color = 'default'; // primary
   export let onChange = () => {}; // This is to know if element is 'dirty'
 
@@ -19,10 +20,10 @@
   {#if label} <span class="text-gray-700 mr-2">{label}</span> {/if}
   <select
     bind:value
-    class="form-select block w-auto mt-1"
+    class="form-select block w-auto mt-1 {selectClassName}"
     required={isRequired}
     on:change={onChange}
-    class:primary={color === 'primary'}
+    class:customColor={!!selectClassName}
   >
     {#each options as option}
       <option class="bg-white text-black" value={option}>
@@ -33,18 +34,14 @@
 </label>
 
 <style>
-  select.primary {
+  select.customColor {
     font-weight: 700;
     cursor: pointer;
-    border-radius: 0.375rem;
-    --tw-text-opacity: 1;
-    color: rgba(255, 255, 255, var(--tw-text-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+    border-radius: 4px;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' class='text-white' viewBox='0 0 20 20'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   }
 
-  select.primary option {
+  select.customColor option {
     background-color: #fff;
     color: #000;
   }