Skip to content

chore: ui fixes #363

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.

Sign up for GitHub

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 2 commits into from
May 20, 2023
Merged

chore: ui fixes #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a1bc41
chore: ui fixes
smeijer May 20, 2023
4edcba5
chore: rework navbar
smeijer May 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 40 additions & 10 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,21 @@ const headerLinks = [
links.common_mistakes,
];

const TwitterBird = () => (
<svg
className="w-4 h-4 group-hover:scale-110 duration-150 transform"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 72 72"
>
<path fill="none" d="M0 0h72v72H0z" />
<path
className="icon"
fill="#fff"
d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"
/>
</svg>
);

function Header({
gistId,
gistVersion,
Expand All @@ -38,8 +53,11 @@ function Header({
}) {
return (
<nav className="text-white w-full h-16">
<div className="flex items-center justify-between bg-gray-900 px-8 h-16">
<div className="flex items-center flex-shrink-0 text-white h-full space-x-8">
<div
className="grid grid-cols-2 items-center bg-gray-900 px-8 h-16"
style={{ gridTemplateColumns: '1fr 1fr' }}
>
<div className="flex items-center justify-between flex-shrink-0 text-white h-full space-x-8 pr-4">
<a className="title" href="/">
<h1 className="font-light text-xl tracking-tight flex space-x-4 items-center justify-start">
<img
Expand All @@ -48,20 +66,33 @@ function Header({
src={icon}
alt="Testing Playground mascot Froggy"
/>
️ <span className="hidden sm:block">Testing Playground</span>
️ <span className="hidden md:block">Testing Playground</span>
</h1>
</a>

<div className="flex items-center gap-2">
<a
className="rounded-md text-white group text-sm px-2 py-1 flex items-center space-x-2 no-underline"
style={{ backgroundColor: '#1d9bf0' }}
target="_blank"
rel="noopener noreferrer"
href="https://meijer.ws/twitter"
>
<TwitterBird />
<span>@meijer_s</span>
</a>
</div>
</div>

<div className="flex items-center text-sm h-full relative">
<div className="flex items-center justify-end text-sm h-full relative">
<Menu>
<MenuButton>
{status === 'saving' ? (
<SyncIcon size={12} className="spinner" />
) : (
<FileCodeIcon size={12} />
)}
<span>playground</span>
️ <span className="hidden sm:block">Playground</span>
</MenuButton>

<MenuList>
Expand Down Expand Up @@ -141,14 +172,13 @@ function Header({
) : (
<PaperAirplaneIcon size={12} />
)}

<span>run</span>
️ <span className="hidden sm:block">Run</span>
</button>

<Menu>
<MenuButton>
<SettingsIcon size={12} />
<span>settings</span>
<SettingsIcon size={12} />️{' '}
<span className="hidden sm:block">Settings</span>
</MenuButton>
<MenuPopover>
<Settings dispatch={dispatch} settings={settings} />
Expand Down Expand Up @@ -176,7 +206,7 @@ function Header({
href="https://github.com/sponsors/smeijer"
target="_blank"
>
Support us
Support Us
</MenuLink>
<MenuLink href="https://twitter.com/meijer_s" target="_blank">
Twitter
Expand Down
3 changes: 2 additions & 1 deletion src/styles/app.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ body.embedded #app {
@apply h-full overflow-hidden p-1;
}

nav a:not(.title):hover {
nav a:not(.title):hover,
nav a:not('.no-underline'):hover {
text-decoration: underline;
}

Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,7 @@ module.exports = {
},
},
},
variants: {
scale: ['focus', 'hover', 'group-hover'],
},
};