fix: use a instead of button (#47)

* fix: use a instead of button * removes unused code * fixes all buttons and hides banner on pages --------- Co-authored-by: Scott Pierce-Wrobel <[email protected]>
marinecoders · Apr 25, 2024 · f3a7483 · f3a7483
1 parent 236075d
commit f3a7483
Show file tree

Hide file tree

Showing 26 changed files with 297 additions and 349 deletions.
diff --git a/src/components/accordion/AccordionSection.svelte b/src/components/accordion/AccordionSection.svelte
@@ -1,56 +1,93 @@
 <script>
-    import RedButton from '../buttons/WhiteButton.svelte';
-    import { mobile, active } from './stores.js';
-    export let title;
-    export let sequence;
-    export let text;
-    export let href;
+  import ButtonCustom from '../buttons/ButtonCustom.svelte'
+  import { mobile, active } from './stores.js'
+  export let title
+  export let sequence
+  export let text
+  export let href
 
-    let mobileValue;
-    mobile.subscribe((value) => {mobileValue = value;});
+  let mobileValue
+  mobile.subscribe((value) => {
+    mobileValue = value
+  })
 
-    let activeValue;
-    active.subscribe((value) => {activeValue = value;});
+  let activeValue
+  active.subscribe((value) => {
+    activeValue = value
+  })
 </script>
 
-{#if activeValue==sequence}
-
-<div class="h-fit lg:h-full grid grid-cols-1">
+{#if activeValue == sequence}
+  <div class="h-fit lg:h-full grid grid-cols-1">
     <div class="grid grid-cols-5 p-4 content-center items-end">
-        {#if !mobileValue}
-            <div class="col-span-5 grid grid-cols-2 items-center justify-self-end "><div class = "text-xl align-text-bottom font-menobanner text-mcswf-gold mr-2"> CLOSE </div> <img src="/icons/window-close.svg" alt='close'></div>
-        {/if}
-        <div class="col-span-4 flex items-end">
-            <div class="text-5xl lg:text-[32px] me-4 text-center font-menobanner text-mcswf-gold py pt-2"> 0{sequence}</div>
-            <div class="lg:text-left pt-2 tracking-widest font-bold block text-2xl lg:text-4xl"> {title} </div>
+      {#if !mobileValue}
+        <div class="col-span-5 grid grid-cols-2 items-center justify-self-end">
+          <div
+            class="text-xl align-text-bottom font-menobanner text-mcswf-gold mr-2">
+            CLOSE
+          </div>
+          <img src="/icons/window-close.svg" alt="close" />
+        </div>
+      {/if}
+      <div class="col-span-4 flex items-end">
+        <div
+          class="text-5xl lg:text-[32px] me-4 text-center font-menobanner text-mcswf-gold py pt-2">
+          0{sequence}
+        </div>
+        <div
+          class="lg:text-left pt-2 tracking-widest font-bold block text-2xl lg:text-4xl">
+          {title}
+        </div>
+      </div>
+      {#if mobileValue}
+        <div
+          class="col-span-1 text-3xl text-center font-menobanner text-mcswf-gold">
+          -
         </div>
-        {#if mobileValue}
-            <div class="col-span-1 text-3xl text-center font-menobanner text-mcswf-gold"> - </div>
-        {/if}
+      {/if}
     </div>
     <div class="text-base lg:text-[21px] px-4 pb-6 px-8">
-        {text}
+      {text}
     </div>
-    <div class="col-span-1 flex h-fit py-8 px-6 {mobileValue ? 'justify-center' : 'justify-left'} ">
-        <div>
-        <RedButton text="LEARN MORE" href={href} />
-        </div>
+    <div
+      class="col-span-1 flex h-fit py-8 px-6 {mobileValue
+        ? 'justify-center'
+        : 'justify-left'} ">
+      <div>
+        <ButtonCustom
+          color="white"
+          size="lg"
+          customClasses="w-64 lg:w-52"
+          {href}
+          >LEARN MORE
+        </ButtonCustom>
+      </div>
     </div>
     {#if !mobileValue}
-        <div class="grid grid-cols-1 self-end p-4">
-            <div class="col-span-1 text-3xl font-bold text-end whitespace-nowrap text-mcswf-gold right-10 bottom-10"> - </div>
+      <div class="grid grid-cols-1 self-end p-4">
+        <div
+          class="col-span-1 text-3xl font-bold text-end whitespace-nowrap text-mcswf-gold right-10 bottom-10">
+          -
         </div>
+      </div>
     {/if}
-</div>
+  </div>
 {:else}
-    <div class="grid grid-cols-5 items-center justify-start  p-4 lg:p-8 lg:grid-cols-2 text-white align-bottom bg-black border-y lg:h-full lg:items-end lg:border-y-0">
-        <p class="text-[64px] text-left font-menobanner me-6 text-mcswf-gold">0{sequence}</p>
-        {#if mobileValue}
-            <div class="tracking-widest text-left text-2xl font-bold col-span-3">{title}</div>
-            <div class="text-xl font-bold text-center">+</div>
-        {:else}
-        <p class="text-2xl font-bold mb-16 -rotate-90 text-start whitespace-nowrap">
-        + {title} </p>
-        {/if}
-    </div>
+  <div
+    class="grid grid-cols-5 items-center justify-start p-4 lg:p-8 lg:grid-cols-2 text-white align-bottom bg-black border-y lg:h-full lg:items-end lg:border-y-0">
+    <p class="text-[64px] text-left font-menobanner me-6 text-mcswf-gold">
+      0{sequence}
+    </p>
+    {#if mobileValue}
+      <div class="tracking-widest text-left text-2xl font-bold col-span-3">
+        {title}
+      </div>
+      <div class="text-xl font-bold text-center">+</div>
+    {:else}
+      <p
+        class="text-2xl font-bold mb-16 -rotate-90 text-start whitespace-nowrap">
+        + {title}
+      </p>
+    {/if}
+  </div>
 {/if}
diff --git a/src/components/buttons/ButtonCustom.svelte b/src/components/buttons/ButtonCustom.svelte
@@ -2,32 +2,39 @@
   import { Button } from 'flowbite-svelte'
 
   export let color = 'white' // white, yellow, red
-  export let size = 'md' // sm, md, lg
+  export let size = 'md' // xs, sm, md, lg, xl
   export let handleClick = () => {}
-  export let href = ''
+  export let link = ''
   export let customClasses = ''
   export let ariaLabel = ''
 
   const defaultClasses =
-    'uppercase font-bold tracking-wide transition-all border border-transparent shadow-lg focus:outline-none focus:ring-2 '
+    'inline-block uppercase text-center align-middle rounded font-bold tracking-wide transition-all border border-transparent shadow-lg focus:outline-none focus:ring-2 '
 
   const colorSpecificClasses = {
     white:
       'bg-mcswf-white-50 text-usmc-red hover:bg-zinc-200 hover:focus:ring-zinc-400/0 focus:ring-zinc-400/70 ',
     yellow:
-      'bg-mcswf-yellow text-usmc-red hover:bg-amber-400 hover:focus:ring-amber-600/0 focus:ring-amber-600/70 ',
+      'bg-mcswf-gold text-usmc-red hover:bg-amber-400 hover:focus:ring-amber-600/0 focus:ring-amber-600/70 ',
     red: 'bg-mcswf-red text-mcswf-white-50 hover:bg-red-900 hover:focus:ring-red-950/0 focus:ring-red-950/70 ',
   }
+
+  //   const sizeClasses = {
+  //     xs: 'px-3 py-2 text-xs',
+  //     sm: 'px-4 py-2 text-sm',
+  //     md: 'px-5 py-2.5 text-sm',
+  //     lg: 'px-5 py-3 text-base',
+  //     xl: 'px-6 py-3.5 text-base',
+  //   }
 </script>
 
 <Button
+  href={link}
   {size}
   {handleClick}
-  {href}
   class={defaultClasses + colorSpecificClasses[color] + customClasses}
   aria-label={ariaLabel}
   role="button"
-  tabindex="0"
->
+  tabindex="0">
   <slot />
 </Button>
diff --git a/src/components/buttons/DarkButton.svelte b/src/components/buttons/DarkButton.svelte
diff --git a/src/components/buttons/LightButton.svelte b/src/components/buttons/LightButton.svelte
diff --git a/src/components/buttons/RedButton.svelte b/src/components/buttons/RedButton.svelte
diff --git a/src/components/buttons/WhiteButton.astro b/src/components/buttons/WhiteButton.astro
diff --git a/src/components/buttons/WhiteButton.svelte b/src/components/buttons/WhiteButton.svelte
diff --git a/src/components/buttons/YellowButton.svelte b/src/components/buttons/YellowButton.svelte
diff --git a/src/components/cards/CohortCard.svelte b/src/components/cards/CohortCard.svelte
@@ -1,5 +1,5 @@
 <script>
-  import RedButton from '../buttons/RedButton.svelte'
+  import ButtonCustom from '../buttons/ButtonCustom.svelte'
   import Icon from '@iconify/svelte'
 
   export let title
@@ -23,8 +23,8 @@
   </div>
   <p class="text-gray-700 text-base pb-4 text-center">{content}</p>
   <div class="flex justify-center" href={link}>
-    <a href={link}>
-      <RedButton text="APPLY NOW" />
-    </a>
+    <ButtonCustom color="red" size="lg" customClasses="w-52" {link}>
+      LEARN MORE
+    </ButtonCustom>
   </div>
 </div>
diff --git a/src/components/elements/Countdown.svelte b/src/components/elements/Countdown.svelte
@@ -1,21 +1,27 @@
 <script>
-    import RedButton from '../buttons/WhiteButton.svelte';
-    import Timer from './Timer.svelte';
-    import Hero from './Hero.svelte';
-  
-    export let title;
-    export let content;
-    export let link;
-  </script>
-
-  <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 md:pt-24 pt-12 pb-10">
-    <Hero padding="pt-24" desktopFontSize='[21px]' title="COHORT 8 APPLICATION DEADLINE" content="Applications for Cohort 8 are due on March 15, 2024. Marines who are accepted to the program will PCS to Austin, TX during the summer of 2024 and begin the Technical Accelerator in August 2024." />
-
-    <Timer />
-
-    <!-- Buttons -->
-    <div class="grid w-full gap-3 mt-8 sm:inline-flex sm:justify-center">
-      <RedButton href={link} text="APPLY NOW" />
-    </div>
-    <!-- End Buttons -->
-  </div>
+  import ButtonCustom from '../buttons/ButtonCustom.svelte'
+  import Timer from './Timer.svelte'
+  import Hero from './Hero.svelte'
+
+  export let title
+  export let content
+  export let link
+</script>
+
+<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 md:pt-24 pt-12 pb-10">
+  <Hero
+    padding="pt-24"
+    desktopFontSize="[21px]"
+    title="COHORT 8 APPLICATION DEADLINE"
+    content="Applications for Cohort 8 are due on March 15, 2024. Marines who are accepted to the program will PCS to Austin, TX during the summer of 2024 and begin the Technical Accelerator in August 2024." />
+
+  <Timer />
+
+  <!-- Buttons -->
+  <div class="grid w-full gap-3 mt-8 sm:inline-flex sm:justify-center">
+    <ButtonCustom color="white" size="xl" customClasses="w-64" {link}>
+      APPLY NOW
+    </ButtonCustom>
+  </div>
+  <!-- End Buttons -->
+</div>
diff --git a/src/components/elements/Hero.svelte b/src/components/elements/Hero.svelte
@@ -1,5 +1,5 @@
 <script>
-  import WhiteButton from '../buttons/WhiteButton.svelte'
+  import ButtonCustom from '../buttons/ButtonCustom.svelte'
 
   export let title = ''
   export let content = ''
@@ -28,7 +28,9 @@
   <!-- Buttons -->
   {#if link}
     <div class="grid w-full gap-3 mt-8 sm:inline-flex sm:justify-center">
-      <WhiteButton href={link} text={linkText} />
+      <ButtonCustom color="white" size="xl" customClasses="w-64" {link}>
+        {linkText}
+      </ButtonCustom>
     </div>
   {/if}
   <!-- End Buttons -->

diff --git a/src/components/sections/CareerImpact.svelte b/src/components/sections/CareerImpact.svelte
@@ -1,5 +1,4 @@
 <script>
-    import Button from '../buttons/WhiteButton.svelte';
     import Hero from '../elements/Hero.svelte';
   </script>