Skip to content

Update header and button #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 11, 2024
Merged

Update header and button #52

merged 3 commits into from
Nov 11, 2024

Conversation

wilwade
Copy link
Contributor

@wilwade wilwade commented Nov 11, 2024

Problem

  • The mobile nav menu icon colors were not working
  • The header needed an active button state option

Screenshots (optional):

image

image

@@ -1,7 +1,7 @@
<svg viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg" class={$$restProps.class}>
<path
d="M2 20H25.625M2 11H25.625M2 2H25.625"
stroke="black"
stroke="currentColor"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way the color can be set correctly for the icon

@@ -64,7 +64,7 @@
<aside>Click it!</aside>
<svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} />
{:else}
<svelte:component this={Icon} class="mb-1 h-8 w-auto" isDemo={true} />
<svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the story book view

@@ -50,7 +54,14 @@
<a {...$$restProps} {href} class={disabled ? 'pointer-events-none block' : 'pointer-events-auto block'}>
<button
{...$$restProps}
class={`rounded-full px-f24 py-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
class={cn(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Swap to cn here so that we can just dump in the classes and have them resolve correctly

@@ -14,7 +14,7 @@

<input type="checkbox" class="peer hidden" bind:checked={isOpen} id={toggleIdentifier} />
<OpenClose
classes="cursor-pointer stroke-navy peer-checked:stroke-white peer-checked:hover:stroke-teal hover:stroke-teal flex self-center lg:hidden"
classes="cursor-pointer text-navy peer-checked:text-white peer-checked:hover:text-teal hover:text-teal flex self-center lg:hidden"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Text color works better with currentColor for browsers

@@ -1,6 +1,7 @@
export default {
//Branding Colors
navy: '#14313F',
navyLight: '#18465E',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally used in a style.

@wilwade wilwade merged commit cb5fa0a into main Nov 11, 2024
4 checks passed
@wilwade wilwade deleted the update-header-and-button branch November 11, 2024 20:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant