Skip to content

Commit

Permalink
馃拕 Add text shadow for Poor contrast
Browse files Browse the repository at this point in the history 
fix the background image ratio
fix some api logic
  • Loading branch information
@JaeSeoKim
JaeSeoKim committed Mar 24, 2022
1 parent 9a06b62 commit 7cd3225
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 31 deletions.
20 changes: 10 additions & 10 deletions components/Code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Code: React.FC<CodeProps> = ({ code }) => {
if (copy.copied) {
const timeout = setTimeout(() => {
setCopy((prev) => ({ ...prev, copied: false }));
}, 2500);
}, 1000);

return () => {
clearTimeout(timeout);
Expand All @@ -30,16 +30,16 @@ const Code: React.FC<CodeProps> = ({ code }) => {
<div className="items-center bg-neutral-100 p-3 rounded overflow-y-hidden hover:overflow-y-auto">
<code className="font-mono text-xs whitespace-nowrap">{code}</code>
</div>
<CopyToClipboard
text={copy.value}
onCopy={() => {
setCopy((prev) => ({ ...prev, copied: true }));
}}
>
<button className="hidden group-hover:block transition-colors absolute right-2 top-2 p-2 border shadow rounded bg-neutral-100 hover:bg-neutral-50">
<button className="hidden group-hover:block transition-colors absolute right-2 top-2 p-2 border shadow rounded bg-neutral-100 hover:bg-neutral-50">
<CopyToClipboard
text={copy.value}
onCopy={() => {
setCopy((prev) => ({ ...prev, copied: true }));
}}
>
{copy.copied ? <FiCheck className="text-green-500" /> : <FiCopy />}
</button>
</CopyToClipboard>
</CopyToClipboard>
</button>
</div>
);
};
Expand Down
8 changes: 4 additions & 4 deletions components/Nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { signIn, useSession } from "next-auth/react";
import Link from "next/link";
import { signOut } from "next-auth/react";
import React from "react";
import React, { useContext } from "react";
import Badge42Logo from "./Badge42Logo";
import { AuthContext } from "../lib/auth/AuthProvider";

export type NavProps = {};

const Nav: React.FC<NavProps> = () => {
const { data } = useSession();
const { data } = useContext(AuthContext);

return (
<header className="fixed z-10 top-0 border-b bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-70 w-full shadow-sm">
Expand All @@ -20,7 +20,7 @@ const Nav: React.FC<NavProps> = () => {
<div className="flex gap-2 font-bold text-neutral-700">
{data && (
<Link href={"/me"}>
<a>{data.user.name}</a>
<a>{data.name}</a>
</Link>
)}
{data ? (
Expand Down
82 changes: 82 additions & 0 deletions components/badge/Stats/BlackHole.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,26 @@ const BlackHole = ({ data }: BlackHoleProps) => {
fill="black"
fillOpacity="0.4"
/>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
className="fadeIn"
style={{
animationDelay: `1.25s`,
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="8"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="367.344" y="86">
Period learned in 42!
</tspan>
</text>
</g>
<text
fill="#ffc221"
xmlSpace="preserve"
Expand All @@ -68,6 +88,28 @@ const BlackHole = ({ data }: BlackHoleProps) => {
Period learned in 42!
</tspan>
</text>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
className="fadeIn"
style={{
animationDelay: `1.5s`,
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="10"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="351.916" y="106">
{new Date(data.begin_at).toISOString().substring(0, 10)} ~{" "}
{data.end_at &&
new Date(data.end_at).toISOString().substring(0, 10)}{" "}
</tspan>
</text>
</g>
<text
fill={`rgb(83, 210, 122)`}
xmlSpace="preserve"
Expand Down Expand Up @@ -106,6 +148,26 @@ const BlackHole = ({ data }: BlackHoleProps) => {
fill="black"
fillOpacity="0.4"
/>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
className="fadeIn"
style={{
animationDelay: `1.25s`,
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="8"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="367.344" y="86">
BlackHole absorption
</tspan>
</text>
</g>
<text
fill="#ffc221"
xmlSpace="preserve"
Expand All @@ -123,6 +185,26 @@ const BlackHole = ({ data }: BlackHoleProps) => {
BlackHole absorption
</tspan>
</text>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
className="fadeIn"
style={{
animationDelay: `1.5s`,
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="18"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="351.916" y="110">
{reaminDay <= 1 ? `few hour left!` : `${reaminDay} days left!`}
</tspan>
</text>
</g>
<text
fill={getDayColor(reaminDay)}
xmlSpace="preserve"
Expand Down
41 changes: 28 additions & 13 deletions components/badge/Stats/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,17 @@ const Container: React.FC<ContainerProps> = ({
width="490"
height={height}
rx="5"
fill="url(#cover)"
fill="black"
fillOpacity="0.2"
/>
<image
x="5"
y="5"
width="490"
height={height}
rx="5"
xlinkHref={cover_url}
preserveAspectRatio="xMinYMin slice"
/>
<rect
x="4.5"
Expand All @@ -57,6 +67,23 @@ const Container: React.FC<ContainerProps> = ({
</g>
{children}
<defs>
<filter
id="shadow"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="2"
result="effect1_foregroundBlur_101_3"
/>
</filter>
<filter
id="container_filter"
x="4"
Expand Down Expand Up @@ -92,18 +119,6 @@ const Container: React.FC<ContainerProps> = ({
result="shape"
/>
</filter>
<pattern
id="cover"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use
href="#cover_image"
transform="translate(0 -0.225329) scale(0.00078125 0.0020148)"
/>
</pattern>
<image id="cover_image" xlinkHref={cover_url} />
</defs>
</svg>
);
Expand Down
65 changes: 65 additions & 0 deletions components/badge/Stats/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ const Header = ({ color, login, campus, cursus, logo_url }: HeaderProps) => {
return (
<>
<g id="logo" className="fadeIn">
<g filter="url(#shadow)">
<path
d="M16 51.5455V7H52V51.5455L34 63L16 51.5455Z"
fill="black"
fillOpacity="0.6"
/>
</g>
<path d="M14 49.5455V5H50V49.5455L32 61L14 49.5455Z" fill={color} />
<image
x="16"
Expand All @@ -29,6 +36,24 @@ const Header = ({ color, login, campus, cursus, logo_url }: HeaderProps) => {
animationDelay: "0.25s",
}}
>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
style={{
whiteSpace: "pre",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="18"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="68" y="33.7095">
{login}&apos;s {campus} Stats
</tspan>
</text>
</g>
<text
fill="white"
xmlSpace="preserve"
Expand All @@ -52,6 +77,24 @@ const Header = ({ color, login, campus, cursus, logo_url }: HeaderProps) => {
animationDelay: "0.5s",
}}
>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
style={{
whiteSpace: "pre",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="14"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="67.8008" y="50.8296">
{cursus}
</tspan>
</text>
</g>
<text
fill="white"
xmlSpace="preserve"
Expand All @@ -74,6 +117,28 @@ const Header = ({ color, login, campus, cursus, logo_url }: HeaderProps) => {
animationDelay: "0.75s",
}}
>
<g filter="url(#shadow)">
<path
d="M444 41.7685H460.209V49.89H468.296V35.2135H452.117L468.296 19H460.209L444 35.2135V41.7685Z"
fill="black"
fillOpacity="0.6"
/>
<path
d="M471.787 27.1165L479.879 19H471.787V27.1165Z"
fill="black"
fillOpacity="0.6"
/>
<path
d="M479.879 27.1165L471.787 35.2134V43.3054H479.879V35.2134L487.995 27.1165V19H479.879V27.1165Z"
fill="black"
fillOpacity="0.6"
/>
<path
d="M487.995 35.2135L479.879 43.3054H487.995V35.2135Z"
fill="black"
fillOpacity="0.6"
/>
</g>
<path
d="M442 38.7359H457.473V46.4891H465.194V32.4781H449.748L465.194 17H457.473L442 32.4781V38.7359Z"
fill="white"
Expand Down
51 changes: 51 additions & 0 deletions components/badge/Stats/Infomation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,57 @@ const Infomation = ({ data }: InfomationProps) => {
animationDelay: `${startDelay + i * 0.25}s`,
}}
>
<g filter="url(#shadow)">
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
style={{
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="14"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="19" y={startY + i * distance + 2}>
{key}
</tspan>
</text>
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
style={{
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="14"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="65" y={startY + i * distance + 2}>
-
</tspan>
</text>
<text
fill="black"
fillOpacity="0.6"
xmlSpace="preserve"
style={{
whiteSpace: "nowrap",
}}
fontFamily="'Noto Sans', Arial, Helvetica, 'Sans serif', Ubuntu"
fontSize="14"
fontWeight="bold"
letterSpacing="0em"
>
<tspan x="75" y={startY + i * distance + 2}>
{value}
</tspan>
</text>
</g>

<text
fill="white"
xmlSpace="preserve"
Expand Down

1 comment on commit 7cd3225

@vercel
Copy link

@vercel vercel bot commented on 7cd3225 Mar 24, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.