Remove -moz classes from Uppy CSS

Author: webstackdev

src/components/Consent/Checkbox/index.astro

@@ -16,10 +16,10 @@
 import type { ConsentCheckboxProps } from './@types'
 export type Props = ConsentCheckboxProps
 
-import DefaultCheckbox from './default.astro'
-import DownloadCheckbox from './download.astro'
-import NewsletterCtaArticleCheckbox from './newsletter-cta-article.astro'
-import NewsletterCtaHomeCheckbox from './newsletter-cta-home.astro'
+import DefaultCheckbox from './layouts/default.astro'
+import DownloadCheckbox from './layouts/download.astro'
+import NewsletterCtaArticleCheckbox from './layouts/newsletter-cta-article.astro'
+import NewsletterCtaHomeCheckbox from './layouts/newsletter-cta-home.astro'
 
 const {
   purpose,

…omponents/Consent/Checkbox/default.astro …s/Consent/Checkbox/layouts/default.astrosrc/components/Consent/Checkbox/default.astro renamed to src/components/Consent/Checkbox/layouts/default.astro src/components/Consent/Checkbox/default.astro renamed to src/components/Consent/Checkbox/layouts/default.astro

@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
@@ -34,7 +34,7 @@ const {
       aria-labelledby={`${id}-label`}
       aria-describedby={`${id}-description`}
       aria-invalid="false"
-      class="border-2 border-trim rounded mt-0.5 h-5 w-5 shrink-0 cursor-pointer focus:outline-2 focus:outline-offset-2 focus:outline-primary checked:bg-spotlight checked:border-primary"
+      class="relative mt-1 h-5 w-5 shrink-0 appearance-none rounded border-2 border-content-active bg-transparent outline-none hover:border-primary hover:bg-primary-offset/10 focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 checked:border-primary checked:bg-spotlight checked:after:content-[''] checked:after:absolute checked:after:inset-1 checked:after:rounded-xs checked:after:bg-content-inverse after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight cursor-pointer"
     />
     <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
     <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed">
@@ -46,7 +46,7 @@ const {
             I consent to Webstack Builders processing my personal data for {purpose}. See our{' '}
             <a
               href={privacyPolicyUrl}
-              class="text-primary underline hover:text-primary-hover"
+              class="text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -55,7 +55,7 @@ const {
             and{' '}
             <a
               href={cookiePolicyUrl}
-              class="text-primary underline hover:text-primary-hover"
+              class="text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >

…mponents/Consent/Checkbox/download.astro …/Consent/Checkbox/layouts/download.astrosrc/components/Consent/Checkbox/download.astro renamed to src/components/Consent/Checkbox/layouts/download.astro src/components/Consent/Checkbox/download.astro renamed to src/components/Consent/Checkbox/layouts/download.astro

@@ -3,7 +3,7 @@
  * GDPR Consent Component Download Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 

…nt/Checkbox/newsletter-cta-article.astro …box/layouts/newsletter-cta-article.astrosrc/components/Consent/Checkbox/newsletter-cta-article.astro renamed to src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro src/components/Consent/Checkbox/newsletter-cta-article.astro renamed to src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro

@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 

…nsent/Checkbox/newsletter-cta-home.astro …eckbox/layouts/newsletter-cta-home.astrosrc/components/Consent/Checkbox/newsletter-cta-home.astro renamed to src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro src/components/Consent/Checkbox/newsletter-cta-home.astro renamed to src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro

@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 

src/components/Layout/SubHeader/index.astro

@@ -10,12 +10,12 @@ export type Props = {
 const { title, description, icon, subtitle } = Astro.props
 ---
 
-<header class="text-center max-w-2xl mx-auto mb-8">
+<header class="text-center max-w-2xl mx-auto mt-6 mb-8">
   <div class="inline-flex items-center justify-center w-18 h-18 rounded-full bg-primary/10 mb-5">
     <Icon
       icon={icon}
       color="page-inverse"
-      size={12}
+      size={11}
     />
   </div>
   <h1 class="text-4xl md:text-5xl font-bold text-page-inverse mb-4">{title}</h1>

src/components/List/layouts/ColoredMarkerList.astro

@@ -20,15 +20,17 @@ const { items, classes, size = 2 }: Props = Astro.props
 const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul]
 const liClass = ["flex items-start", classes?.li]
 const emClass = ["mr-2 not-italic font-bold", classes?.em]
-const iconClass = [`w-${size} h-${size}`, "rounded-full mt-3 mr-3 shrink-0", classes?.icon]
+const markerSizeInRem = `${size * 0.25}rem`
+const markerStyle = `width: ${markerSizeInRem}; height: ${markerSizeInRem};`
+const iconClass = ["rounded-full mt-2 mr-3 shrink-0", classes?.icon]
 const textClass = classes?.text ? [classes.text] : []
 ---
 
 <ul class:list={ulClass}>
   {
     items.map((item) => (
       <li class:list={liClass}>
-        <span class:list={[iconClass, item.color]} />
+        <span class:list={[iconClass, item.color]} style={markerStyle} />
         {item.lead && <em class:list={emClass}>{item.lead}</em>}
         <span class:list={textClass}>{item.text}</span>
       </li>

src/components/Pages/Contact/client/feedback.ts

@@ -43,8 +43,8 @@ export const clearFieldFeedback = (
   field.input.setAttribute('aria-invalid', 'false')
 }
 
-const setOpacity = (label: HTMLLabelElement, hasText: boolean): void => {
-  label.style.opacity = hasText ? '0' : '0.5'
+const setOpacity = (label: HTMLLabelElement, _hasText: boolean): void => {
+  label.style.removeProperty('opacity')
 }
 
 export interface LabelController {

src/components/Pages/Contact/index.astro

@@ -98,12 +98,12 @@ const { content } = Astro.props
 ---
 
 <contact-form>
-  <div class="min-h-screen">
+  <div class="min-h-screen md:mb-16">
     {/** Google Maps embed */}
     {/* <Map /> */}
 
     {/** Contact Form Section */}
-    <section class="py-5 bg-page-offset" aria-label="Contact form">
+    <section class="pt-5 pb-8 bg-page-offset" aria-label="Contact form">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
           <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start">
             {/** Contact Form */}
@@ -133,13 +133,13 @@ const { content } = Astro.props
                 </div>
 
                 {/** Personal Information */}
-                <div class="pb-6 border-b border-trim">
+                <div class="border-b border-trim">
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.contact.header}
                   </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="name"
@@ -151,7 +151,7 @@ const { content } = Astro.props
                         type="text"
                         id="name"
                         name="name"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         required
                         placeholder={content.form.contact.fullNamePlaceholder}
                         minlength="2"
@@ -179,7 +179,7 @@ const { content } = Astro.props
                         type="email"
                         id="email"
                         name="email"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         required
                         placeholder={content.form.contact.emailPlaceholder}
                         aria-invalid="false"
@@ -195,7 +195,7 @@ const { content } = Astro.props
                     </div>
                   </div>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="company"
@@ -207,13 +207,13 @@ const { content } = Astro.props
                         type="text"
                         id="company"
                         name="company"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         placeholder={content.form.contact.companyPlaceholder}
                         maxlength="100"
                       />
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="space-y-2 mt-2 md:mt-0">
                       <label
                         for="phone"
                         class="block text-content-active text-sm font-medium"
@@ -224,21 +224,21 @@ const { content } = Astro.props
                         type="tel"
                         id="phone"
                         name="phone"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         placeholder={content.form.contact.phonePlaceholder}
                       />
                     </div>
                   </div>
                 </div>
 
                 {/** Project Information */}
-                <div class="pb-6 border-b border-trim">
+                <div class="pb-2 border-b border-trim">
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.project.header}
                   </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="project_type"
@@ -249,15 +249,15 @@ const { content } = Astro.props
                       <select
                         id="project_type"
                         name="project_type"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                       >
                         {content.form.project.typeOptions.map((item) => (
                           <option value={item.value}>{item.text}</option>
                         ))}
                       </select>
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="space-y-2 mt-2 md:mt-0">
                       <label
                         for="budget"
                         class="block text-content-active text-sm font-medium"
@@ -267,8 +267,7 @@ const { content } = Astro.props
                       <select
                         id="budget"
                         name="budget"
-                        required
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                       >
                         {content.form.project.budgetOptions.map((item) => (
                           <option value={item.value}>{item.text}</option>
@@ -277,7 +276,7 @@ const { content } = Astro.props
                     </div>
                   </div>
 
-                  <div class="space-y-2">
+                  <div class="space-y-2 mb-6">
                     <label
                       for="timeline"
                       class="block text-content-active text-sm font-medium"
@@ -287,7 +286,7 @@ const { content } = Astro.props
                     <select
                       id="timeline"
                       name="timeline"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                     >
                       {content.form.project.timelineOptions.map((item) => (
                         <option value={item.value}>{item.text}</option>
@@ -305,7 +304,7 @@ const { content } = Astro.props
                     <textarea
                       id="message"
                       name="message"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 resize-vertical min-h-30"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 resize-vertical min-h-30"
                       rows="6"
                       required
                       placeholder={content.form.project.descriptionPlaceholder}
@@ -327,16 +326,14 @@ const { content } = Astro.props
                 </div>
 
                 {/** File Upload Section */}
-                <div class="pb-6">
+                <div>
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-4">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.files.header}
                   </h3>
                   <p class="text-content-active text-sm mb-6">{content.form.files.subheader}</p>
 
-                  <div
-                    class="border-2 border-dashed border-trim rounded-xl p-8 text-center bg-page-offset hover:border-primary-hover transition-colors duration-200"
-                  >
+                  <div>
                     <div id="uppyContainer" hidden>
                       <div id="uppyDashboard"></div>
                     </div>
@@ -375,7 +372,7 @@ const { content } = Astro.props
                   <div class="flex justify-end">
                     <button
                       type="submit"
-                      class="inline-flex items-center justify-center px-8 py-4 bg-spotlight hover:bg-spotlight-offset text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
+                      class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
                       id="submitBtn"
                     >
                       <span class="btn-text">{content.form.submitButtonText}</span>
@@ -467,7 +464,9 @@ const { content } = Astro.props
                 </div>
 
                 <div>
-                  <h3 class="text-page-inverse text-xl font-semibold mb-4">{content.contact.expertise.header}</h3>
+                  <h3 class="text-page-inverse text-xl font-semibold mb-4">
+                    {content.contact.expertise.header}
+                  </h3>
                   <List
                     items={content.contact.expertise.areas}
                     variant="colored-marker-list"
@@ -478,7 +477,9 @@ const { content } = Astro.props
                 </div>
 
                 <div>
-                  <h3 class="text-page-inverse text-xl font-semibold mb-4">{content.contact.chooseUs.header}</h3>
+                  <h3 class="text-page-inverse text-xl font-semibold mb-4">
+                    {content.contact.chooseUs.header}
+                  </h3>
                   <List
                     items={content.contact.chooseUs.areas}
                     variant="colored-marker-list"