diff --git a/icons/PrivateContributionsIcon.tsx b/icons/PrivateContributionsIcon.tsx index 3a07402..52e2450 100644 --- a/icons/PrivateContributionsIcon.tsx +++ b/icons/PrivateContributionsIcon.tsx @@ -1,9 +1,9 @@ import type { SVGProps } from "react"; export const PrivateContributionsIcon = (props: SVGProps) => ( - + ); diff --git a/icons/UserIcon.tsx b/icons/UserIcon.tsx index 6f121e1..16b30f0 100644 --- a/icons/UserIcon.tsx +++ b/icons/UserIcon.tsx @@ -1,13 +1,8 @@ export const UserIcon: React.FC> = (props) => ( - + ); diff --git a/public/shining.png b/public/shining.png new file mode 100644 index 0000000..854ecd8 Binary files /dev/null and b/public/shining.png differ diff --git a/remotion/IGStory/BarChart.tsx b/remotion/IGStory/BarChart.tsx index 1353179..cb5da26 100644 --- a/remotion/IGStory/BarChart.tsx +++ b/remotion/IGStory/BarChart.tsx @@ -1,6 +1,10 @@ import React from "react"; import { z } from "zod"; -import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane"; +import { + PANE_BACKGROUND, + PANE_BORDER, + PANE_TEXT_COLOR, +} from "../TopLanguages/Pane"; const Bar: React.FC<{ readonly progress: number; @@ -21,7 +25,7 @@ const Bar: React.FC<{ style={{ height: 150 * progress, width: 30, - background: most ? "white" : PANE_BACKGROUND, + background: most ? PANE_TEXT_COLOR : PANE_BACKGROUND, border: PANE_BORDER, borderRadius: 10, marginBottom: 10, @@ -32,7 +36,7 @@ const Bar: React.FC<{ fontFamily: "Mona Sans", fontWeight: "bold", marginLeft: 3, - color: "white", + color: PANE_TEXT_COLOR, }} > {letter} @@ -51,17 +55,12 @@ export const BarChart: React.FC<{ return (
{graphData.map((_, i) => { diff --git a/remotion/IGStory/GraphData.tsx b/remotion/IGStory/GraphData.tsx index ed25b2b..99b2ed5 100644 --- a/remotion/IGStory/GraphData.tsx +++ b/remotion/IGStory/GraphData.tsx @@ -1,5 +1,6 @@ import React from "react"; import { interpolateColors } from "remotion"; +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; const Dot: React.FC<{ readonly index: number; @@ -9,40 +10,86 @@ const Dot: React.FC<{ const row = index % 7; const column = Math.floor(index / 7); + const opacity = Math.max( + 0.1, + value >= max ? 1 : value > 0 ? Math.max(value / max, 0.25) : 0, + ); + const activityColor = interpolateColors( value, [0, Math.max(1, max)], - ["#202138", "#2486ff"], + ["#202138", "#070842"], ); return (
); }; +const Stat: React.FC<{ + readonly data: number; + readonly label: string; + readonly align: "left" | "right"; +}> = ({ data, label, align }) => { + return ( +
+
{data}
+
{label}
+
+ ); +}; + export const ContributionGraphic: React.FC<{ readonly graphData: number[]; -}> = ({ graphData }) => { + readonly totalContributions: number; + readonly longestStreak: number; +}> = ({ graphData, totalContributions, longestStreak }) => { return (
- {graphData.map((g, i) => { - // eslint-disable-next-line react/no-array-index-key - return ; - })} +
+ +
+ +
+ +
+
+ {graphData.map((g, i) => { + return ( + // eslint-disable-next-line react/no-array-index-key + + ); + })} +
); }; diff --git a/remotion/IGStory/Issues.tsx b/remotion/IGStory/Issues.tsx index 40ff9c2..6030d08 100644 --- a/remotion/IGStory/Issues.tsx +++ b/remotion/IGStory/Issues.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; export const Issues: React.FC<{ readonly issues: number; @@ -6,22 +7,20 @@ export const Issues: React.FC<{ return (
-
{issues}
-
Issues closed
+
{issues}
+
Issues closed
); }; diff --git a/remotion/IGStory/Overlay.tsx b/remotion/IGStory/Overlay.tsx index 9a0b798..65a5f21 100644 --- a/remotion/IGStory/Overlay.tsx +++ b/remotion/IGStory/Overlay.tsx @@ -1,11 +1,15 @@ import React from "react"; import { AbsoluteFill } from "remotion"; import type { TopLanguage } from "../../src/config"; +import { + BoxHighlight, + PinkHighlightBox, +} from "../../vite/HomeBox/BoxHighlight"; +import { PANE_BACKGROUND } from "../TopLanguages/Pane"; import { BarChart } from "./BarChart"; import { ContributionGraphic } from "./GraphData"; import { Issues } from "./Issues"; import { Planets } from "./Planets"; -import { PullRequests } from "./PullRequests"; import { Stars } from "./Stars"; import { Title } from "./Title"; @@ -17,6 +21,8 @@ export const Overlay: React.FC<{ readonly stars: number; readonly login: string; readonly topLanguage: TopLanguage | null; + readonly longestStreak: number; + readonly totalContributions: number; }> = ({ issues, contributionData, @@ -25,16 +31,61 @@ export const Overlay: React.FC<{ stars, login, topLanguage, + longestStreak, + totalContributions, }) => { return ( - - - <Stars stars={stars} /> - <PullRequests pullRequests={pullRequests} /> - {topLanguage ? <Planets topLanguage={topLanguage} /> : null} - <BarChart graphData={weekdays} /> - <ContributionGraphic graphData={contributionData} /> - <Issues issues={issues} /> + <AbsoluteFill + style={{ + padding: 20, + backgroundColor: "rgba(255, 255, 255, 0.1)", + borderRadius: 30, + border: "1px solid rgba(255, 255, 255, 0.1)", + }} + > + <BoxHighlight /> + <PinkHighlightBox /> + <div + style={{ + background: PANE_BACKGROUND, + borderRadius: 10, + height: "100%", + width: "100%", + }} + > + <Title login={login} /> + <div + style={{ + display: "flex", + flexDirection: "row", + borderBottom: `1px solid rgb(183, 171, 239)`, + }} + > + <Stars stars={stars} label="Repos starred" icon="stars" /> + <div + style={{ + width: 1, + height: 160, + backgroundColor: "rgb(183, 171, 239)", + }} + /> + <Stars stars={pullRequests} label="PRs merged" icon="pulls" /> + </div> + <Issues issues={issues} /> + {topLanguage ? <Planets topLanguage={topLanguage} /> : null} + <div + style={{ + borderBottom: `1px solid rgb(183, 171, 239)`, + }} + > + <BarChart graphData={weekdays} /> + </div> + <ContributionGraphic + longestStreak={longestStreak} + totalContributions={totalContributions} + graphData={contributionData} + /> + </div> </AbsoluteFill> ); }; diff --git a/remotion/IGStory/Planets.tsx b/remotion/IGStory/Planets.tsx index 982337d..d251d44 100644 --- a/remotion/IGStory/Planets.tsx +++ b/remotion/IGStory/Planets.tsx @@ -1,5 +1,6 @@ import type { TopLanguage } from "../../src/config"; import { LanguagePlanet } from "../TopLanguages/Language"; +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; import { computePlanetInfo } from "../TopLanguages/constants"; export const Planets: React.FC<{ @@ -10,18 +11,14 @@ export const Planets: React.FC<{ return ( <div style={{ - position: "absolute", - top: 428, - left: 173, - width: 360, - height: 215, display: "flex", alignItems: "center", justifyContent: "center", - paddingRight: 20, - flexDirection: "column", - transform: "scale(0.6)", + paddingRight: 30, + flexDirection: "row", overflow: "hidden", + paddingLeft: 30, + borderBottom: `1px solid rgb(183, 171, 239)`, }} > <LanguagePlanet @@ -29,34 +26,38 @@ export const Planets: React.FC<{ style={{ height: 100, marginBottom: 10, + flexShrink: 0, }} /> - <div - style={{ - color: "white", - fontFamily: "Mona Sans", - fontSize: 18, - marginBottom: 6, - fontWeight: 500, - }} - > - Top Language - </div> - <div - style={{ - fontFamily: "Mona Sans", - color: "white", - fontSize: 30, - fontWeight: "bold", - whiteSpace: "nowrap", - wordBreak: "break-word", - textOverflow: "ellipsis", - width: "100%", - overflow: "hidden", - textAlign: "center", - }} - > - {planetInfo.name} + <div style={{ width: 30 }} /> + <div> + <div + style={{ + color: PANE_TEXT_COLOR, + fontFamily: "Mona Sans", + fontSize: 18, + marginBottom: 6, + fontWeight: 500, + }} + > + Top Language + </div> + <div + style={{ + fontFamily: "Mona Sans", + color: PANE_TEXT_COLOR, + fontSize: 30, + fontWeight: "bold", + whiteSpace: "nowrap", + wordBreak: "break-word", + textOverflow: "ellipsis", + width: "100%", + overflow: "hidden", + textAlign: "center", + }} + > + {planetInfo.name} + </div> </div> </div> ); diff --git a/remotion/IGStory/PullRequests.tsx b/remotion/IGStory/PullRequests.tsx index a3b2282..5eab498 100644 --- a/remotion/IGStory/PullRequests.tsx +++ b/remotion/IGStory/PullRequests.tsx @@ -1,3 +1,5 @@ +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; + export const PullRequests: React.FC<{ pullRequests: number; }> = ({ pullRequests }) => { @@ -6,11 +8,6 @@ export const PullRequests: React.FC<{ return ( <div style={{ - position: "absolute", - top: 152, - left: 240, - width: 210, - height: 135, display: "flex", alignItems: "flex-end", justifyContent: "center", @@ -34,7 +31,7 @@ export const PullRequests: React.FC<{ }} > <path - fill="white" + fill={PANE_TEXT_COLOR} d="M80 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32.4 97.2c28-12.4 47.6-40.5 47.6-73.2c0-44.2-35.8-80-80-80S0 35.8 0 80c0 32.8 19.7 61 48 73.3V358.7C19.7 371 0 399.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V272c26.7 20.1 60 32 96 32h86.7c12.3 28.3 40.5 48 73.3 48c44.2 0 80-35.8 80-80s-35.8-80-80-80c-32.8 0-61 19.7-73.3 48H208c-49.9 0-91-38.1-95.6-86.8zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM344 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z" /> </svg> @@ -42,7 +39,7 @@ export const PullRequests: React.FC<{ style={{ fontFamily: "Mona Sans", fontWeight: "500", - color: "white", + color: PANE_TEXT_COLOR, fontSize: digits > 2 ? 55 : 65, lineHeight: "65px", }} @@ -54,7 +51,7 @@ export const PullRequests: React.FC<{ style={{ fontFamily: "Mona Sans", fontSize: 20, - color: "white", + color: PANE_TEXT_COLOR, fontWeight: 500, }} > diff --git a/remotion/IGStory/Stars.tsx b/remotion/IGStory/Stars.tsx index 9c3b669..4669ca0 100644 --- a/remotion/IGStory/Stars.tsx +++ b/remotion/IGStory/Stars.tsx @@ -1,21 +1,21 @@ +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; + export const Stars: React.FC<{ stars: number; -}> = ({ stars }) => { + label: string; + icon: "stars" | "pulls"; +}> = ({ stars, label, icon }) => { const digits = String(stars).length; return ( <div style={{ - position: "absolute", - top: 152, - left: 15, - width: 215, - height: 135, display: "flex", - alignItems: "flex-end", justifyContent: "center", + alignItems: "center", paddingRight: 20, flexDirection: "column", + flex: 1, }} > <div @@ -25,23 +25,55 @@ export const Stars: React.FC<{ alignItems: "center", }} > - <svg + <div style={{ - height: 50, + backgroundColor: "white", marginRight: 10, + aspectRatio: "1 / 1", + height: 80, + width: 80, + display: "flex", + justifyContent: "center", + alignItems: "center", + borderRadius: "50%", + border: `1px solid ${PANE_TEXT_COLOR}`, + boxShadow: "0 4px 16px 8px rgba(0,0,0,0.05)", }} - viewBox="0 0 576 512" > - <path - fill="white" - d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z" - /> - </svg> + {icon === "stars" ? ( + <svg + style={{ + width: 40, + }} + viewBox="0 0 576 512" + > + <path + fill={PANE_TEXT_COLOR} + d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z" + /> + </svg> + ) : ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 448 512" + style={{ + width: 35, + marginRight: -7, + }} + > + <path + fill={PANE_TEXT_COLOR} + d="M80 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32.4 97.2c28-12.4 47.6-40.5 47.6-73.2c0-44.2-35.8-80-80-80S0 35.8 0 80c0 32.8 19.7 61 48 73.3V358.7C19.7 371 0 399.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V272c26.7 20.1 60 32 96 32h86.7c12.3 28.3 40.5 48 73.3 48c44.2 0 80-35.8 80-80s-35.8-80-80-80c-32.8 0-61 19.7-73.3 48H208c-49.9 0-91-38.1-95.6-86.8zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM344 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z" + /> + </svg> + )} + </div> + <div style={{ fontFamily: "Mona Sans", - fontWeight: "500", - color: "white", + fontWeight: "700", + color: PANE_TEXT_COLOR, fontSize: digits > 2 ? 55 : 65, lineHeight: "65px", }} @@ -53,11 +85,12 @@ export const Stars: React.FC<{ style={{ fontFamily: "Mona Sans", fontSize: 20, - color: "white", + color: PANE_TEXT_COLOR, fontWeight: 500, + marginTop: 12, }} > - Repos starred + {label} </div> </div> ); diff --git a/remotion/IGStory/Title.tsx b/remotion/IGStory/Title.tsx index d97d0d7..89c3e25 100644 --- a/remotion/IGStory/Title.tsx +++ b/remotion/IGStory/Title.tsx @@ -1,20 +1,38 @@ +import { Img } from "remotion"; +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; + export const Title: React.FC<{ login: string; }> = ({ login }) => { return ( <div style={{ - position: "absolute", fontSize: 40, fontFamily: "Mona Sans", fontWeight: "bold", - color: "white", + color: PANE_TEXT_COLOR, textAlign: "center", width: "100%", - top: 50, + borderBottom: `1px solid rgb(183, 171, 239)`, + paddingBottom: 30, + paddingTop: 30, + flexDirection: "row", + display: "flex", + gap: 20, + justifyContent: "center", + alignItems: "center", }} > - @{login} + <Img + src={`https://github.com/${login}.png`} + style={{ + width: 60, + height: 60, + borderRadius: "50%", + boxShadow: "0 4px 16px 8px rgba(0,0,0,0.1)", + }} + /> + <div>{login}</div> </div> ); }; diff --git a/remotion/IGStory/index.tsx b/remotion/IGStory/index.tsx index 71e9cde..edb8b3b 100644 --- a/remotion/IGStory/index.tsx +++ b/remotion/IGStory/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import { AbsoluteFill, Img, staticFile } from "remotion"; import type { z } from "zod"; import type { ogImageSchema } from "../../src/config"; +import { Gradient } from "../Gradients/NativeGradient"; import { Overlay } from "./Overlay"; export const IgStoryContent: React.FC<z.infer<typeof ogImageSchema>> = ({ @@ -12,25 +13,22 @@ export const IgStoryContent: React.FC<z.infer<typeof ogImageSchema>> = ({ weekdays, login, topLanguage, + longestStreak, + totalContributions, }) => { return ( <AbsoluteFill> - <AbsoluteFill> - <Img src={staticFile("ig-story.png")} /> - </AbsoluteFill> - <AbsoluteFill> - <div> - <Overlay - contributionData={graphData} - issues={issues} - login={login} - weekdays={weekdays} - pullRequests={pullRequests} - stars={stars} - topLanguage={topLanguage} - /> - </div> - </AbsoluteFill> + <Overlay + contributionData={graphData} + issues={issues} + login={login} + weekdays={weekdays} + pullRequests={pullRequests} + stars={stars} + topLanguage={topLanguage} + longestStreak={longestStreak} + totalContributions={totalContributions} + /> </AbsoluteFill> ); }; @@ -39,21 +37,54 @@ export const IgStory: React.FC<z.infer<typeof ogImageSchema>> = (props) => { return ( <AbsoluteFill> <AbsoluteFill> - <Img src={staticFile("ig-story-background.png")} /> + <Gradient gradient="blueRadial" /> </AbsoluteFill> + <AbsoluteFill> + <Img + style={{ + height: 1500, + position: "absolute", + top: 1350, + marginLeft: -150, + transform: `rotate(5deg)`, + }} + src={staticFile("shining.png")} + /> + </AbsoluteFill> + <AbsoluteFill style={{ transform: `matrix3d(1.907027, 0.231449, 0, 0.000273, -0.004041, 1.552152, 0, -0.000021, 0, 0, 1, 0, 127, 192, 0, 1)`, - width: 466, - height: 735, + width: 600, + height: 900, + marginLeft: -100, + marginTop: -0, transformOrigin: "0 0 0", }} > <IgStoryContent {...props} /> </AbsoluteFill> + <AbsoluteFill> + <div + style={{ + backgroundImage: + "linear-gradient(270.02deg, #d9d9ff 3.63%, #fff 99.87%)", + backgroundClip: "text", + WebkitBackgroundClip: "text", + WebkitTextFillColor: "transparent", + fontFamily: "Mona Sans", + fontSize: 50, + textAlign: "center", + paddingTop: 60, + fontWeight: "bolder", + }} + > + #GitHubUnwrapped + </div> + </AbsoluteFill> </AbsoluteFill> ); }; diff --git a/remotion/Root.tsx b/remotion/Root.tsx index 9ffdeb5..a404b5a 100644 --- a/remotion/Root.tsx +++ b/remotion/Root.tsx @@ -1040,11 +1040,13 @@ export const RemotionRoot: React.FC = () => { 83, 0, 0, 127, 127, 0, 0, 54, 93, 91, 0, 38, 54, 72, 0, 39, 58, 82, 98, 127, ], + longestStreak: 48, + totalContributions: 9489, }} /> <Still - width={466} - height={735} + width={600} + height={900} component={IgStoryContent} id="ig-story-content" schema={ogImageSchema} @@ -1085,6 +1087,8 @@ export const RemotionRoot: React.FC = () => { 83, 0, 0, 127, 127, 0, 0, 54, 93, 91, 0, 38, 54, 72, 0, 39, 58, 82, 98, 127, ], + longestStreak: 48, + totalContributions: 9489, }} /> <Still @@ -1130,6 +1134,8 @@ export const RemotionRoot: React.FC = () => { 83, 0, 0, 127, 127, 0, 0, 54, 93, 91, 0, 38, 54, 72, 0, 39, 58, 82, 98, 127, ], + longestStreak: 48, + totalContributions: 9489, }} /> </Folder> diff --git a/src/config.ts b/src/config.ts index 55a3896..6e4f010 100644 --- a/src/config.ts +++ b/src/config.ts @@ -307,4 +307,6 @@ export const ogImageSchema = z.object({ weekdays: z.array(z.number()), login: z.string(), topLanguage: languageSchema.or(z.null()), + longestStreak: z.number(), + totalContributions: z.number(), }); diff --git a/src/server/make-og-image.ts b/src/server/make-og-image.ts index acd83bc..b2a2bf0 100644 --- a/src/server/make-og-image.ts +++ b/src/server/make-og-image.ts @@ -30,6 +30,8 @@ export const makeOrGetOgImage = async (profileStats: ProfileStats) => { ? parseTopLanguage(profileStats.topLanguages[0]) : null, weekdays: profileStats.allWeekdays, + longestStreak: profileStats.longestStreak, + totalContributions: profileStats.totalContributions, }; const region = getRandomRegion(); @@ -71,6 +73,8 @@ export const makeOrGetIgStory = async (profileStats: ProfileStats) => { ? parseTopLanguage(profileStats.topLanguages[0]) : null, weekdays: profileStats.allWeekdays, + longestStreak: profileStats.longestStreak, + totalContributions: profileStats.totalContributions, }; const region = getRandomRegion(); diff --git a/vite/VideoPage/Actions/FurtherActions.tsx b/vite/VideoPage/Actions/FurtherActions.tsx index 77098f8..bf4f752 100644 --- a/vite/VideoPage/Actions/FurtherActions.tsx +++ b/vite/VideoPage/Actions/FurtherActions.tsx @@ -15,7 +15,7 @@ export const FurtherActions: React.FC = () => { <div className={styles.furtherActionsButtonContainer}> <Link to="/"> <FurtherAction - icon={(params) => <UserIcon {...params} />} + icon={(params) => <UserIcon {...params} width={15} />} label="Unwrap another user" /> </Link> @@ -23,7 +23,7 @@ export const FurtherActions: React.FC = () => { <a href={signInWithGitHubLink()}> <FurtherAction icon={(params) => ( - <PrivateContributionsIcon {...params} width={12} /> + <PrivateContributionsIcon {...params} width={18} /> )} label="Unlock private metrics" /> diff --git a/vite/VideoPage/Actions/styles.module.css b/vite/VideoPage/Actions/styles.module.css index 55ab540..107c6fd 100644 --- a/vite/VideoPage/Actions/styles.module.css +++ b/vite/VideoPage/Actions/styles.module.css @@ -62,7 +62,7 @@ gap: 12px; align-items: center; color: var(--pane-text); - font-weight: 600; + font-weight: 500; } .furtherActionIconContainer { @@ -70,7 +70,7 @@ aspect-ratio: 1; border-radius: 50%; background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04); display: flex; justify-content: center; align-items: center;