diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js deleted file mode 100644 index 80d2582a0..000000000 --- a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js +++ /dev/null @@ -1,26 +0,0 @@ -function initializeSpecialNavigationFunctionality() { - var connectLink = document.getElementById('connect-link'); - var notificationsLink = document.getElementById('notifications-link'); - var moderationLink = document.getElementById('moderation-link'); - - if (connectLink) { - if (document.getElementById('notifications-container')) { - notificationsLink.blur(); - notificationsLink.classList.add('crayons-header__link--current'); - } else { - notificationsLink.classList.remove('crayons-header__link--current'); - } - if (document.getElementById('chat')) { - connectLink.blur(); - connectLink.classList.add('crayons-header__link--current'); - } else { - connectLink.classList.remove('crayons-header__link--current'); - } - if (document.getElementById('moderation-page')) { - moderationLink.blur(); - moderationLink.classList.add('crayons-header__link--current'); - } else { - moderationLink.classList.remove('crayons-header__link--current'); - } - } -} diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index 9cda36929..1898074e8 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -427,7 +427,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to font: inherit; text-align: center; cursor: pointer; - transition: all var(--transition-props); border: none; overflow-wrap: normal; outline: 0; @@ -451,6 +450,7 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to color: var(--color-hover); z-index: var(--z-elevate); box-shadow: var(--focus-ring); + outline: 0; } .js-focus-visible &.focus-visible:focus { @@ -458,6 +458,14 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to color: var(--color-hover); z-index: var(--z-elevate); box-shadow: var(--focus-ring); + outline: 0; + } + + &[aria-expanded='true'], + &[aria-pressed='true'] { + --bg: var(--btn-current-bg); + --color: var(--btn-current-color); + font-weight: var(--fw-bold); } &[disabled] { diff --git a/app/assets/stylesheets/components/ctas.scss b/app/assets/stylesheets/components/ctas.scss index 0b11d4d97..5bcef7bd7 100644 --- a/app/assets/stylesheets/components/ctas.scss +++ b/app/assets/stylesheets/components/ctas.scss @@ -4,37 +4,79 @@ // .c-cta ////////////////////////////////////////////////// //////////////////////////////////////////////////////////// -.c-link { - &.c-cta { - --border-width: 1px; - padding: calc(var(--su-2) - var(--border-width)) - calc(var(--su-4) - var(--border-width)); - border: var(--border-width) solid var(--border); - text-decoration: none; - background-color: var(--bg); - color: var(--color); - text-align: center; - display: inline-block; +.c-cta { + --border-width: 1px; + padding: calc(var(--su-2) - var(--border-width)) + calc(var(--su-4) - var(--border-width)); + border: var(--border-width) solid; + border-color: var(--border); + text-decoration: none; + border-radius: var(--radius); + font: inherit; + background-color: var(--bg); + color: var(--color); + outline: 0; + text-align: center; + display: inline-flex; + position: relative; + overflow-wrap: normal; + + &:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); + color: var(--color-hover); + z-index: var(--z-elevate); + text-decoration: underline; } - &.c-cta { - --bg: transparent; - --bg-hover: var(--base-20); - --color: var(--base-80); - --color-hover: var(--base-100); - --border: var(--base-60); - --border-hover: var(--base-80); + // Both focus declarations below are the same but we unfortunately can't + // combine them because Safari doesn't recognize it properly. + // • First declaration is for all browsers that support :focus-visible + // which is basically almost all of them + // • Second declaration is for browsers that do not support :focus-visible + // which basically is only Safari right now. + &:focus-visible { + background-color: var(--bg-hover); + border-color: var(--border-hover); + color: var(--color-hover); + z-index: var(--z-elevate); + box-shadow: var(--focus-ring); + text-decoration: underline; } - &.c-cta--branded { - --bg: transparent; - --bg-hover: var(--accent-brand-a10); - --color: var(--accent-brand); - --color-hover: var(--accent-brand-darker); - --border: var(--accent-brand); - --border-hover: var(--accent-brand-darker); + .js-focus-visible &.focus-visible:focus { + background-color: var(--bg-hover); + border-color: var(--border-hover); + color: var(--color-hover); + z-index: var(--z-elevate); + box-shadow: var(--focus-ring); + text-decoration: underline; + } +} + +.c-cta { + --bg: var(--cta-bg); + --bg-hover: var(--cta-bg-hover); + --color: var(--cta-color); + --color-hover: var(--cta-color-hover); + --border: var(--cta-border); + --border-hover: var(--cta-border-hover); + + &--branded { + --bg: var(--cta-branded-bg); + --bg-hover: var(--cta-branded-bg-hover); + --color: var(--cta-branded-color); + --color-hover: var(--cta-branded-color-hover); + --border: var(--cta-branded-border); + --border-hover: var(--cta-branded-border-hover); font-weight: var(--fw-medium); } - +} + +.c-cta--icon-left { + .c-cta__icon { + margin-right: var(--su-2); + margin-left: calc(var(--su-1) * -1); + } } diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss index 505dd7ee3..6a9a34379 100644 --- a/app/assets/stylesheets/components/forms.scss +++ b/app/assets/stylesheets/components/forms.scss @@ -16,8 +16,8 @@ &-focus { background-color: var(--form-bg-focus); - border-color: var(--form-border-focus); - box-shadow: 0 0 0 1px var(--form-border-focus); + border-color: var(--focus); + box-shadow: 0 0 0 1px var(--focus); } &-disabled { diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index ef6abad6f..7936b47d2 100644 --- a/app/assets/stylesheets/components/header.scss +++ b/app/assets/stylesheets/components/header.scss @@ -2,8 +2,6 @@ @import './skip-link'; .crayons-header { - --indicator-outline: var(--header-bg); - height: var(--header-height); background: var(--header-bg); box-shadow: 0 1px 1px var(--header-shadow); @@ -30,7 +28,7 @@ position: absolute; top: calc(var(--su-1) * -1); right: 0; - box-shadow: 0 0 0 2px var(--indicator-outline); + box-shadow: 0 0 0 2px var(--header-bg); } } @@ -45,64 +43,18 @@ margin: 0 var(--su-4); display: block; } - - .crayons-btn:focus { - outline: revert; - } -} - -.crayons-header__link { - margin: 0 var(--su-1); - - &:hover, - &:focus { - --indicator-outline: var(--header-bg-hover); - - color: var(--header-icons-color-hover); - background: var(--header-bg-hover); - } - - &--current { - --indicator-outline: var(--header-bg-current); - - color: var(--header-icons-color-hover); - background: var(--header-bg-current) !important; - - .crayons-indicator { - display: none; - } - } } // Dropdown under profile picture / hamburger icon .crayons-header__menu { - --trigger-color: var(--header-icons-color); - --trigger-border-color: transparent; - height: 100%; - display: flex; - align-items: center; - @media (min-width: $breakpoint-s) { perspective: 1000px; } - &__trigger { - all: unset; - padding: calc(var(--su-1) / 2); - margin: 0 var(--su-2); - border-radius: 50%; - color: var(--trigger-color); - cursor: pointer; - // hold space for interaction style - border: 2px solid var(--trigger-border-color); - } - &__dropdown { transform-style: preserve-3d; - top: var(--header-height); transform-origin: top right; transition: all var(--transition-props); - transition-delay: var(--dropdown-delay, 0.25s); transform: var( --dropdown-transform, translateY(calc(1 * var(--su-1))) rotateX(-10deg) @@ -111,20 +63,11 @@ visibility: var(--dropdown-visibility, hidden); } - &.showing, - &.desktop:hover { - --trigger-border-color: var(--header-bg-hover); - --trigger-color: var(--header-icons-color-hover); + &.showing { --dropdown-transform: translateY(0) rotateX(0); - --dropdown-delay: 0; --dropdown-opacity: 1; --dropdown-visibility: visible; } - - .focus-visible:focus { - --trigger-border-color: var(--header-button-focus-color); - --trigger-color: var(--header-button-focus-color); - } } .pwa-nav-buttons { @@ -147,52 +90,6 @@ } } -.authentication-header { - &__container { - padding: var(--su-6); - } - - &__image-container { - width: var(--su-8); - height: var(--su-8); - margin-bottom: var(--su-2); - } - - &__image { - border-radius: var(--radius); - transform: rotate(-10deg); - height: auto; - width: 100%; - } - - &__title { - color: var(--card-color); - font-size: var(--fs-2xl); - line-height: var(--lh-tight); - - @media (min-width: $breakpoint-s) { - font-size: var(--fs-3xl); - } - } - - &__description { - color: var(--card-color-secondary); - margin-bottom: var(--su-4); - } - - &__actions { - display: grid; - grid-gap: var(--su-1); - - @media (min-width: $breakpoint-s) { - display: flex; - flex-direction: column; - width: max-content; - justify-self: center; - } - } -} - .navigation-progress { --duration: 3600ms; --delay: 250ms; diff --git a/app/assets/stylesheets/components/links.scss b/app/assets/stylesheets/components/links.scss index d54984cf9..2c36111dc 100644 --- a/app/assets/stylesheets/components/links.scss +++ b/app/assets/stylesheets/components/links.scss @@ -10,7 +10,6 @@ border-radius: var(--radius); font: inherit; cursor: pointer; - transition: all var(--transition-props); outline: 0; text-decoration: none; color: var(--color); @@ -31,7 +30,7 @@ z-index: var(--z-elevate); text-decoration: underline; } - + // Both focus declarations below are the same but we unfortunately can't // combine them because Safari doesn't recognize it properly. // • First declaration is for all browsers that support :focus-visible @@ -61,20 +60,26 @@ background-color: var(--bg-hover); } } + + &[aria-current='page'] { + --bg: var(--link-current-bg); + --color: var(--link-current-color); + font-weight: var(--fw-bold); + } } .c-link { - --bg: transparent; - --bg-hover: var(--base-20); - --color: var(--base-80); - --color-hover: var(--accent-brand-darker); + --bg: var(--link-bg); + --bg-hover: var(--link-bg-hover); + --color: var(--link-color); + --color-hover: var(--link-branded-color-hover); } .c-link--branded { - --bg: transparent; - --bg-hover: var(--accent-brand-a10); - --color: var(--accent-brand); - --color-hover: var(--accent-brand-darker); + --bg: var(--link-branded-bg); + --bg-hover: var(--link-branded-bg-hover); + --color: var(--link-branded-color); + --color-hover: var(--link-branded-color-hover); } .c-link--icon-alone { diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index e3ea934a7..068b27276 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -116,9 +116,6 @@ --footer-link-color-hover: var(--base-100); // Links - --link-color: var(--base-90); - --link-color-hover: var(--accent-brand-darker); - --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-inverted); --link-brand-color: var(--accent-brand); --link-color-current: var(--base-100); @@ -253,9 +250,12 @@ // Buttons: Default --btn-bg: transparent; - --btn-bg-hover: var(--base-20); + --btn-bg-hover: var(--accent-brand-a10); --btn-color: var(--base-80); - --btn-color-hover: var(--base-100); + --btn-color-hover: var(--accent-brand-darker); + + --btn-current-bg: var(--base-20); + --btn-current-color: var(--base-100); // Buttons: Default Destructive --btn-destructive-bg: transparent; @@ -274,4 +274,49 @@ --btn-primary-destructive-bg-hover: var(--accent-danger-darker); --btn-primary-destructive-color: var(--base-inverted); --btn-primary-destructive-color-hover: var(--base-inverted); + + //////////////////////////////////////////////// + // Links /////////////////////////////////////// + //////////////////////////////////////////////// + + // Links: Default + --link-bg: transparent; + --link-bg-hover: var(--accent-brand-a10); + --link-color: var(--base-80); + --link-color-hover: var(--accent-brand-darker); + + --link-current-bg: var(--base-20); + --link-current-color: var(--base-100); + + // Links: Branded + --link-branded-bg: transparent; + --link-branded-bg-hover: var(--accent-brand-a10); + --link-branded-color: var(--accent-brand); + --link-branded-color-hover: var(--accent-brand-darker); + + //////////////////////////////////////////////// + // CTAs //////////////////////////////////////// + //////////////////////////////////////////////// + + // CTAs: Default + --cta-bg: transparent; + --cta-bg-hover: var(--accent-brand-a10); + --cta-color: var(--base-80); + --cta-color-hover: var(--accent-brand-darker); + --cta-border: var(--base-60); + --cta-border-hover: var(--accent-brand-darker); + + // CTAs: Branded + --cta-branded-bg: transparent; + --cta-branded-bg-hover: var(--accent-brand); + --cta-branded-color: var(--accent-brand); + --cta-branded-color-hover: var(--base-inverted); + --cta-branded-border: var(--accent-brand); + --cta-branded-border-hover: var(--accent-brand-darker); + + //////////////////////////////////////////////// + // Utilities /////////////////////////////////// + //////////////////////////////////////////////// + + --focus: var(--accent-brand); } diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss index 7f62c1441..ed347179f 100644 --- a/app/assets/stylesheets/config/_generator.scss +++ b/app/assets/stylesheets/config/_generator.scss @@ -184,6 +184,13 @@ (), false ), + ( + 'inset', + ('top', 'left', 'right', 'bottom'), + ('px': 1px, 'unset': unset, '0': 0), + (), + false + ), ( 'top', 'top', diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss index 18b9ed5f0..9016a2844 100644 --- a/app/assets/stylesheets/config/_variables.scss +++ b/app/assets/stylesheets/config/_variables.scss @@ -56,8 +56,7 @@ // Focus ring ////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////// - --focus-ring: 0 0 0 2px var(--base-inverted), - 0 0 0 4px var(--button-primary-bg-hover); // TODO: replace with appropriate variable from _colors.scss + --focus-ring: 0 0 0 2px var(--base-inverted), 0 0 0 4px var(--focus); //////////////////////////////////////////////////////////////////////////////////// // Typography. ///////////////////////////////////////////////////////////////////// diff --git a/app/assets/stylesheets/themes/dark.scss b/app/assets/stylesheets/themes/dark.scss index 02879a063..8dc2f5bcb 100644 --- a/app/assets/stylesheets/themes/dark.scss +++ b/app/assets/stylesheets/themes/dark.scss @@ -109,9 +109,6 @@ --footer-link-color-hover: var(--base-100); // Links - --link-color: var(--base-90); - --link-color-hover: var(--accent-brand-lighter); - --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-inverted); --link-brand-color: #17a1f6; --link-color-current: var(--base-100); @@ -240,9 +237,40 @@ // Buttons ///////////////////////////////////// //////////////////////////////////////////////// + // Buttons: Default + --btn-color-hover: var(--accent-brand-lighter); + // Buttons: Primary --btn-primary-bg-hover: var(--accent-brand-lighter); // Buttons: Primary Destructive --btn-primary-destructive-bg-hover: var(--accent-danger-lighter); + + //////////////////////////////////////////////// + // Links /////////////////////////////////////// + //////////////////////////////////////////////// + + // Links: Default + --link-color-hover: var(--accent-brand-lighter); + + // Links: Branded + --link-branded-color-hover: var(--accent-brand-lighter); + + //////////////////////////////////////////////// + // CTAs //////////////////////////////////////// + //////////////////////////////////////////////// + + // CTAs: Default + --cta-color-hover: var(--accent-brand-lighter); + --cta-border-hover: var(--accent-brand-lighter); + + // CTAs: Branded + --cta-branded-bg-hover: var(--accent-brand); + --cta-branded-border: var(--accent-brand); + --cta-branded-border-hover: var(--accent-brand-lighter); + + //////////////////////////////////////////////// + // Utilities /////////////////////////////////// + //////////////////////////////////////////////// + --focus: var(--accent-brand-lighter); } diff --git a/app/javascript/Search/SearchForm.jsx b/app/javascript/Search/SearchForm.jsx index 8c4955e84..9649dba1d 100644 --- a/app/javascript/Search/SearchForm.jsx +++ b/app/javascript/Search/SearchForm.jsx @@ -2,20 +2,8 @@ import PropTypes from 'prop-types'; import { h } from 'preact'; import { forwardRef } from 'preact/compat'; import { locale } from '../utilities/locale'; -import { Button } from '@crayons'; - - -const SearchIcon = () => ( - - - -); +import { ButtonNew as Button } from '@crayons'; +import SearchIcon from '@images/search.svg'; export const SearchForm = forwardRef(({ searchTerm, onSubmitSearch }, ref) => (
( /> `; @@ -57,7 +50,7 @@ describe('top navigation utilities', () => { it('should close the hamburger menu', () => { document.body.innerHTML = ` - `; @@ -72,176 +65,23 @@ describe('top navigation utilities', () => { navButton.click(); expect(document.body.dataset.leftNavState).toEqual('closed'); }); - - it('should open the more menu', () => { - document.body.innerHTML = ` - More... - - `; - - const navMoreLink = getByText(document.body, 'More...'); - - initializeMobileMenu([], [navMoreLink]); - - navMoreLink.click(); - - expect(navMoreLink).toHaveClass('hidden'); - }); }); describe('setCurrentPageIconLink', () => { it('should set the current page icon', () => { document.body.innerHTML = ` - - + `; - const connectLink = getByLabelText(document.body, 'Connect'); const notificationsLink = getByLabelText(document.body, 'Notifications'); const pageEntries = Object.entries({ - 'page-1': connectLink, - 'page-2': notificationsLink, + 'page-1': notificationsLink, }); - const page = 'page-1'; + setCurrentPageIconLink('page-1', pageEntries); - setCurrentPageIconLink(page, pageEntries); - - expect(connectLink).toHaveClass('crayons-header__link--current'); - expect(notificationsLink).not.toHaveClass( - 'crayons-header__link--current', - ); - }); - - it('should set the current page icon and remove the previous current page icon styling', () => { - document.body.innerHTML = ` - - - `; - - const connectLink = getByLabelText(document.body, 'Connect'); - const notificationsLink = getByLabelText(document.body, 'Notifications'); - - const pageEntries = Object.entries({ - 'page-1': connectLink, - 'page-2': notificationsLink, - }); - - const page = 'page-1'; - - setCurrentPageIconLink(page, pageEntries); - - expect(connectLink).toHaveClass('crayons-header__link--current'); - expect(notificationsLink).not.toHaveClass( - 'crayons-header__link--current', - ); - }); - }); - - describe('initializeMemberMenu', () => { - const initialMenuHTML = ` -
- -
- -
-
- `; - - it('toggles dropdown menu expanded state', async () => { - document.body.innerHTML = initialMenuHTML; - - const menuNavButton = getByLabelText(document.body, 'Navigation menu'); - const memberMenu = getByTestId(document.body, 'menu-dropdown'); - - initializeMemberMenu(memberMenu, menuNavButton); - - await waitFor(() => - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'), - ); - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'); - expect(memberMenu).not.toHaveClass('showing'); - - fireEvent.click(menuNavButton); - - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('true'); - expect(memberMenu).toHaveClass('showing'); - - fireEvent.click(menuNavButton); - - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'); - expect(memberMenu).not.toHaveClass('showing'); - }); - - it('closes menu on Escape key', async () => { - document.body.innerHTML = initialMenuHTML; - - const menuNavButton = getByLabelText(document.body, 'Navigation menu'); - const memberMenu = getByTestId(document.body, 'menu-dropdown'); - - initializeMemberMenu(memberMenu, menuNavButton); - - await waitFor(() => - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'), - ); - - fireEvent.click(menuNavButton); - - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('true'); - expect(memberMenu).toHaveClass('showing'); - - fireEvent.keyUp(memberMenu, { key: 'Escape' }); - - await waitFor(() => - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'), - ); - - expect(memberMenu).not.toHaveClass('showing'); - }); - - it('closes the menu on click outside', async () => { - document.body.innerHTML = ` -
- ${initialMenuHTML} -
- `; - - const menuNavButton = getByLabelText(document.body, 'Navigation menu'); - const memberMenu = getByTestId(document.body, 'menu-dropdown'); - - initializeMemberMenu(memberMenu, menuNavButton); - - await waitFor(() => - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'), - ); - - fireEvent.click(menuNavButton); - - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('true'); - expect(memberMenu).toHaveClass('showing'); - - // Click on a link in the menu to close load a page and close the menu. - memberMenu.querySelector('a').click(); - - await waitFor(() => - expect(menuNavButton.getAttribute('aria-expanded')).toEqual('false'), - ); - - expect(memberMenu).not.toHaveClass('showing'); + expect(notificationsLink).toHaveAttribute('aria-current', 'page'); }); }); }); diff --git a/app/javascript/topNavigation/utilities.js b/app/javascript/topNavigation/utilities.js index c8d778e5f..f21dc48f8 100644 --- a/app/javascript/topNavigation/utilities.js +++ b/app/javascript/topNavigation/utilities.js @@ -69,16 +69,6 @@ export function initializeMemberMenu(memberTopMenu, menuNavButton) { menuNavButton.setAttribute('aria-expanded', 'true'); }); } else { - memberTopMenu.addEventListener('mouseover', (_event) => { - classList.add('desktop'); - openHeaderMenu(memberTopMenu, menuNavButton); - }); - memberTopMenu.addEventListener('mouseout', (_event) => { - if (!memberTopMenu.dataset.clicked) { - closeHeaderMenu(memberTopMenu, menuNavButton); - } - }); - memberTopMenu.addEventListener('keyup', (e) => { if (e.key === 'Escape' && classList.contains('showing')) { closeHeaderMenu(memberTopMenu, menuNavButton); @@ -192,9 +182,9 @@ export function setCurrentPageIconLink(currentPage, pageEntries) { .forEach(([page, iconLink]) => { if (currentPage === page) { iconLink.blur(); - iconLink.classList.add('crayons-header__link--current'); + iconLink.setAttribute('aria-current', 'page'); } else { - iconLink.classList.remove('crayons-header__link--current'); + iconLink.removeAttribute('aria-current'); } }); } diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb index db142db38..92faad937 100644 --- a/app/views/layouts/_nav_menu.html.erb +++ b/app/views/layouts/_nav_menu.html.erb @@ -1,27 +1,35 @@ -
+
diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb index d1649c391..da6b9e47d 100644 --- a/app/views/layouts/_top_bar.html.erb +++ b/app/views/layouts/_top_bar.html.erb @@ -3,9 +3,11 @@ <%= t("views.main.header.skip") %>
- + + + <%= render "layouts/logo" %>
@@ -25,7 +27,7 @@
" autocomplete="off" /> -
@@ -34,35 +36,39 @@
- " href="<%= search_path %>"> + " href="<%= search_path %>"> <%= inline_svg_tag("search.svg", aria: true, class: "crayons-icon", title: t("views.search.icon.title")) %> <% if user_signed_in? %> - +