Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

⚡️ Replace hope-ui based IconHamburgerMenu with a custom one

Browse Source
This commit is contained in:
Adrien
2023-04-22 17:06:02 +02:00
parent da2fb1f41c
commit 8fafdb3dde
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/extra/iconHamburgerMenu.tsx
View File

@@ -1,19 +1,16 @@
import { createIcon } from "@hope-ui/solid";
import { VoidComponent } from "solid-js";
// From https://github.com/hope-ui/hope-ui/blob/main/apps/docs/src/icons/IconHamburgerMenu.tsx
export const IconHamburgerMenu = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386
13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5
8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761
13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
// Inspired by https://github.com/hope-ui/hope-ui/blob/main/apps/docs/src/icons/IconHamburgerMenu.tsx
export const IconHamburgerMenu: VoidComponent<{}> = () => {
return (
<svg class="iconHamburgerMenu" viewBox="0 0 15 15">
<path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386
13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5
8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761
13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
</svg>);
}

16
frontend/src/passagesDisplay.scss
View File

@@ -21,18 +21,24 @@
}
.menu {
aspect-ratio: 0.75;
height: $header-element-height;
aspect-ratio: 1;
margin-right: calc(30/1920*100%);
margin-left: auto;
border: $component-border;
border-radius: $component-border-radius;
button {
height: 100%;
aspect-ratio: 1;
background-color: var(--idfm-black);
border: $component-border;
border-radius: $component-border-radius;
border: 0;
color: var(--idfm-white);
background-color: transparent;
.iconHamburgerMenu {
width: 75%;
}
}
}