Small legibility improvements

This commit is contained in:
James Ritchie
2022-04-15 16:26:02 +01:00
parent 6df1d3095e
commit fbf3b84253
4 changed files with 31 additions and 13 deletions
+7 -7
View File
@@ -1,6 +1,6 @@
import { ShareIcon, PlusIcon } from "@heroicons/react/outline"; import { ShareIcon, PlusIcon } from "@heroicons/react/outline";
import { DocumentTitle } from "./DocumentTitle"; import { DocumentTitle } from "./DocumentTitle";
import { DiscordIcon } from "./Icons/DiscordIcon"; import { DiscordIconTransparent } from "./Icons/DiscordIconTransparent";
import { GithubStar } from "./UI/GithubStar"; import { GithubStar } from "./UI/GithubStar";
import { Logo } from "./Icons/Logo"; import { Logo } from "./Icons/Logo";
import { Share } from "./Share"; import { Share } from "./Share";
@@ -20,8 +20,8 @@ export function Header() {
<ol className="flex items-center gap-2 px-4"> <ol className="flex items-center gap-2 px-4">
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<button className="flex items-center justify-center bg-lime-500 text-slate-700 bg-opacity-80 text-base font-bold px-2 py-1 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition"> <button className="flex items-center justify-center bg-lime-500 text-slate-800 bg-opacity-90 text-base font-bold px-2 py-1 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
<PlusIcon className="w-4 h-4 mr-1"></PlusIcon> <PlusIcon className="w-4 h-4 mr-0.5"></PlusIcon>
New New
</button> </button>
</PopoverTrigger> </PopoverTrigger>
@@ -36,7 +36,7 @@ export function Header() {
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<button className="flex items-center justify-center py-1 bg-slate-200 text-slate-700 bg-opacity-80 text-base font-bold px-2 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition"> <button className="flex items-center justify-center py-1 bg-slate-200 text-slate-800 bg-opacity-90 text-base font-bold px-2 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
<ShareIcon className="w-4 h-4 mr-1"></ShareIcon> <ShareIcon className="w-4 h-4 mr-1"></ShareIcon>
Share Share
</button> </button>
@@ -50,12 +50,12 @@ export function Header() {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<li className="opacity-80 transition hover:cursor-pointer hover:opacity-100"> <li className="opacity-90 transition hover:cursor-pointer hover:opacity-100">
<GithubStar /> <GithubStar />
</li> </li>
<li className="opacity-80 transition hover:cursor-pointer hover:opacity-100"> <li className="opacity-90 transition hover:cursor-pointer hover:opacity-100">
<a href="https://discord.gg/ZQq6Had5nP" target="_blank"> <a href="https://discord.gg/ZQq6Had5nP" target="_blank">
<DiscordIcon /> <DiscordIconTransparent />
</a> </a>
</li> </li>
</ol> </ol>
+4 -5
View File
@@ -1,5 +1,4 @@
import { DiscordIcon } from "../Icons/DiscordIcon"; import { DiscordIconTransparent } from "../Icons/DiscordIconTransparent";
import { GithubIcon } from "../Icons/GithubIcon";
import { Logo } from "../Icons/Logo"; import { Logo } from "../Icons/Logo";
import { NewDocument } from "../NewDocument"; import { NewDocument } from "../NewDocument";
import { GithubStar } from "../UI/GithubStar"; import { GithubStar } from "../UI/GithubStar";
@@ -19,7 +18,7 @@ export function HomeHeader() {
<ol className="flex items-center gap-2"> <ol className="flex items-center gap-2">
<Popover> <Popover>
<PopoverTrigger> <PopoverTrigger>
<button className="bg-lime-500 text-white text-lg font-bold px-2 py-0.5 rounded-sm uppercase cursor-pointer"> <button className="bg-lime-500 text-slate-900 text-lg font-bold px-2 py-0.5 rounded-sm uppercase cursor-pointer opacity-90 hover:opacity-100 transition">
Try now Try now
</button> </button>
</PopoverTrigger> </PopoverTrigger>
@@ -37,9 +36,9 @@ export function HomeHeader() {
<GithubStar /> <GithubStar />
</a> </a>
</li> </li>
<li className="hover:cursor-pointer"> <li className="hover:cursor-pointer opacity-90 hover:opacity-100 transition">
<a href="https://discord.gg/ZQq6Had5nP" target="_blank"> <a href="https://discord.gg/ZQq6Had5nP" target="_blank">
<DiscordIcon /> <DiscordIconTransparent />
</a> </a>
</li> </li>
</ol> </ol>
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -17,7 +17,7 @@ export function GithubStar({ className }: GithubStarProps) {
> >
<div className="flex items-center gap-1 pr-2 pl-1 py-1 bg-slate-300 rounded-l-sm"> <div className="flex items-center gap-1 pr-2 pl-1 py-1 bg-slate-300 rounded-l-sm">
<GithubIconSimple className="w-4 h-4 ml-1"></GithubIconSimple> <GithubIconSimple className="w-4 h-4 ml-1"></GithubIconSimple>
<Body className="font-semibold">Star</Body> <Body className="font-semibold text-slate-800">Star</Body>
</div> </div>
{starCount && ( {starCount && (
<div className="px-2 py-1 border-l border-slate-400 bg-slate-100 rounded-r-sm"> <div className="px-2 py-1 border-l border-slate-400 bg-slate-100 rounded-r-sm">