Select arrow added

src/__docz__/forms/FormFields.mdx

@@ -37,7 +37,6 @@ Form components used to link internally
 ***disabled***
 <InputField placeholder="Disabled field" disabled />
 
-
 <!-- Select field -->
 ## Select Field
 <Props of={ SelectField } />
@@ -55,8 +54,8 @@ Form components used to link internally
 ***label***
 <SelectField data={ ['one', 'two', 'three'] } label="Label copy" />
 
-***information***
-<SelectField data={ ['one', 'two', 'three'] } message="Information copy" />
+***message***
+<SelectField data={ ['one', 'two', 'three'] } message="Message copy" />
 
 ***error***
 <SelectField data={ ['one', 'two', 'three'] } message="Error message" error />

src/components/forms/SelectField.js

@@ -25,15 +25,20 @@ function SelectField({
     return (
         <>
             <FieldLabel text={ label } />
-            <select
-                type="text"
-                class={ selectClasses }
-                placeholder={ placeholder }
-                disabled={ disabled }
-                onChange={ onChange }
-            >
-                { data.map(option => <option>{ option }</option>) }
-            </select>
+            <div class="inline-block relative w-64">
+                <select
+                    type="text"
+                    class={ selectClasses }
+                    placeholder={ placeholder }
+                    disabled={ disabled }
+                    onChange={ onChange }
+                >
+                    { data.map(option => <option>{ option }</option>) }
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="7" viewBox="0 0 13 7"><path d="M 12 1 L 1 1 L 6.5 6.5 L 12 1 L 6.5 6.5" fill="rgb(25, 25, 26)" stroke="rgb(25, 25, 26)" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                </div>
+            </div>
             <FieldInformation text={ message } error={ error } />
         </>
     );

src/styles/custom/typography.css

@@ -1,31 +1,31 @@
 /* typography */
 h1 {
-    @apply text-2xl;
+    @apply text-xl text-green-primary;
 }
 
 @screen md {
     h1 {
-        @apply text-xl;
+        @apply text-2xl;
     }
 }
 
 h2 {
-    @apply text-xl;
+    @apply text-lg;
 }
 
 @screen md {
     h2 {
-        @apply text-lg;
+        @apply text-xl;
     }
 }
 
 h3 {
-    @apply text-lg;
+    @apply text-base;
 }
 
 @screen md {
     h3 {
-        @apply text-base;
+        @apply text-lg;
     }
 }
 

src/styles/output.css

@@ -4866,32 +4866,33 @@ body {
 /* typography */
 
 h1 {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  color: #8FC043;
 }
 
 @media (min-width: 768px) {
   h1 {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
   }
 }
 
 h2 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 @media (min-width: 768px) {
   h2 {
-    font-size: 1.125rem;
+    font-size: 1.25rem;
   }
 }
 
 h3 {
-  font-size: 1.125rem;
+  font-size: 1rem;
 }
 
 @media (min-width: 768px) {
   h3 {
-    font-size: 1rem;
+    font-size: 1.125rem;
   }
 }