From c43e65bf50f722cdb203a406d9215175bfd4c657 Mon Sep 17 00:00:00 2001 From: Jonny Burger Date: Tue, 17 Dec 2024 16:47:51 +0100 Subject: [PATCH] remove accent colors --- remotion/Contributions/index.tsx | 6 +-- remotion/EndScene/PlanetBackground.tsx | 3 +- remotion/EndScene/index.tsx | 6 +-- remotion/IGStory/PullRequests.tsx | 4 +- remotion/Main.tsx | 7 +-- remotion/OgImage/PullRequests.tsx | 8 +-- remotion/Opening/Title.tsx | 54 ++++++++++++--------- remotion/Opening/TitleImage.tsx | 18 ++----- remotion/Opening/index.tsx | 12 +---- remotion/Productivity/TopDay.tsx | 8 ++- remotion/Productivity/Wheel.tsx | 6 ++- remotion/PromoVideo/Title.tsx | 2 +- remotion/PullRequests/MergeIcon.tsx | 3 +- remotion/PullRequests/MergeNumber.tsx | 3 +- remotion/PullRequests/MergeStat.tsx | 8 ++- remotion/PullRequests/PullRequests.tsx | 5 +- remotion/Root.tsx | 20 +------- remotion/Sponsorships/index.tsx | 7 +-- remotion/StarsAndProductivity/index.tsx | 2 - remotion/StarsGiven/AnimatedCockpit.tsx | 8 +-- remotion/StarsGiven/index.tsx | 6 +-- remotion/TopLanguages/AllPlanets.tsx | 10 +--- remotion/TopLanguages/FloatingOctocat.tsx | 7 +-- remotion/TopLanguages/NewOctocatLine.tsx | 20 ++------ remotion/TopLanguages/Pane.tsx | 5 +- remotion/TopLanguages/TitleCard.tsx | 8 ++- remotion/TopLanguages/TitleCardOctocat.tsx | 7 +-- remotion/TopLanguages/TopLanguagesTitle.tsx | 4 +- src/config.ts | 15 ------ vite/VideoPage/Actions/SharingActions.tsx | 9 ++-- vite/VideoPage/MobileActionsContainer.tsx | 4 +- vite/VideoPage/Sidebar/Sidebar.tsx | 2 +- vite/routing.tsx | 7 +-- 33 files changed, 103 insertions(+), 191 deletions(-) diff --git a/remotion/Contributions/index.tsx b/remotion/Contributions/index.tsx index a478783c..d769dffd 100644 --- a/remotion/Contributions/index.tsx +++ b/remotion/Contributions/index.tsx @@ -15,7 +15,6 @@ import { import React, { useMemo } from "react"; import type { Planet, Rocket } from "../../src/config"; -import { type AccentColor } from "../../src/config"; import { appearDelays } from "../Contributions/compute-positions"; import { Gradient } from "../Gradients/NativeGradient"; import { IssueNumber } from "../Issues/IssueNumber"; @@ -268,12 +267,11 @@ const Dot: React.FC<{ }; export const ContributionsScene: React.FC<{ - accentColor: AccentColor; contributionData: number[]; total: number; rocket: Rocket; planet: Planet; -}> = ({ accentColor, contributionData, total, rocket, planet }) => { +}> = ({ contributionData, total, rocket, planet }) => { const f = useCurrentFrame(); const { fps } = useVideoConfig(); @@ -309,7 +307,7 @@ export const ContributionsScene: React.FC<{ return ( - + diff --git a/remotion/EndScene/PlanetBackground.tsx b/remotion/EndScene/PlanetBackground.tsx index a155d9fa..ca2a7dbe 100644 --- a/remotion/EndScene/PlanetBackground.tsx +++ b/remotion/EndScene/PlanetBackground.tsx @@ -1,7 +1,7 @@ import React from "react"; import { AbsoluteFill, Img, interpolate, useCurrentFrame } from "remotion"; import { GOLD_PLANET_BG } from "."; -import type { AccentColor, Planet } from "../../src/config"; +import type { Planet } from "../../src/config"; import { Gradient } from "../Gradients/NativeGradient"; import { Noise } from "../Noise"; import { planetToGradient } from "../planets"; @@ -18,7 +18,6 @@ export const prefetchPlanetLandingBackground = (planet: Planet): string[] => { export const PlanetBackground: React.FC<{ planet: Planet; - accentColor: AccentColor; }> = ({ planet }) => { const frame = useCurrentFrame(); diff --git a/remotion/EndScene/index.tsx b/remotion/EndScene/index.tsx index a4384d2c..fd897e25 100644 --- a/remotion/EndScene/index.tsx +++ b/remotion/EndScene/index.tsx @@ -9,7 +9,7 @@ import { import { z } from "zod"; import type { Planet } from "../../src/config"; -import { PlanetEnum, accentColorSchema, rocketSchema } from "../../src/config"; +import { PlanetEnum, rocketSchema } from "../../src/config"; import { PlanetEntrance } from "../Contributions/PlanetEntrance"; import { FPS } from "../Issues/make-ufo-positions"; import { prefetchPlanetImage } from "../planets"; @@ -34,7 +34,6 @@ const container: React.CSSProperties = { export const endSceneSchema = z.object({ rocket: rocketSchema, planet: PlanetEnum, - accentColor: accentColorSchema, }); export const END_SCENE_DURATION = 7.5 * FPS; @@ -49,7 +48,6 @@ export const prefetchLandingAssets = (planet: Planet): string[] => { export const EndScene: React.FC> = ({ rocket, planet, - accentColor, }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); @@ -79,7 +77,7 @@ export const EndScene: React.FC> = ({ return ( - + diff --git a/remotion/IGStory/PullRequests.tsx b/remotion/IGStory/PullRequests.tsx index a3b2282b..5bdfbb14 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 }) => { @@ -42,7 +44,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", }} diff --git a/remotion/Main.tsx b/remotion/Main.tsx index 031f7228..24b31492 100644 --- a/remotion/Main.tsx +++ b/remotion/Main.tsx @@ -132,7 +132,6 @@ export const Main: React.FC = ({ topHour, graphData, openingSceneStartAngle, - accentColor, rocket, contributionData, sampleStarredRepos, @@ -154,7 +153,6 @@ export const Main: React.FC = ({ = ({ topLanguages={topLanguages} showHelperLine={showHelperLine} login={login} - accentColor={accentColor} rocket={rocket} octocatSeed={random(login)} /> @@ -203,7 +200,6 @@ export const Main: React.FC = ({ topWeekday={topWeekday} topHour={topHour} graphData={graphData} - accentColor={accentColor} totalPullRequests={totalPullRequests} login={login} sampleStarredRepos={sampleStarredRepos} @@ -218,7 +214,6 @@ export const Main: React.FC = ({ total={totalContributions} rocket={rocket} contributionData={contributionData} - accentColor={accentColor} planet={planet} /> @@ -226,7 +221,7 @@ export const Main: React.FC = ({ durationInFrames={END_SCENE_DURATION} offset={-CONTRIBUTIONS_SCENE_EXIT_TRANSITION} > - + {isMobileDevice() ? null : ( diff --git a/remotion/OgImage/PullRequests.tsx b/remotion/OgImage/PullRequests.tsx index 19a3cc71..80624930 100644 --- a/remotion/OgImage/PullRequests.tsx +++ b/remotion/OgImage/PullRequests.tsx @@ -1,3 +1,5 @@ +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; + export const PullRequests: React.FC<{ pullRequests: number; }> = ({ pullRequests }) => { @@ -34,7 +36,7 @@ export const PullRequests: React.FC<{ }} > @@ -42,7 +44,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 +56,7 @@ export const PullRequests: React.FC<{ style={{ fontFamily: "Mona Sans", fontSize: 20, - color: "white", + color: PANE_TEXT_COLOR, fontWeight: 500, }} > diff --git a/remotion/Opening/Title.tsx b/remotion/Opening/Title.tsx index a7e8a180..058f7a6f 100644 --- a/remotion/Opening/Title.tsx +++ b/remotion/Opening/Title.tsx @@ -7,14 +7,18 @@ import { useVideoConfig, } from "remotion"; import type { z } from "zod"; -import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane"; +import { + PANE_BACKGROUND, + PANE_BORDER, + PANE_TEXT_COLOR, +} from "../TopLanguages/Pane"; import { TitleImage, type openingTitleSchema } from "./TitleImage"; const title: React.CSSProperties = { fontSize: 80, fontWeight: "bold", backgroundClip: "text", - backgroundImage: "linear-gradient(270.02deg, #bbb 20.63%, #fff 99.87%)", + backgroundImage: `linear-gradient(270.02deg, ${PANE_TEXT_COLOR} 20.63%, #2E0EB6 99.87%)`, WebkitBackgroundClip: "text", backgroundColor: "text", WebkitTextFillColor: "transparent", @@ -28,7 +32,7 @@ export const OpeningTitle: React.FC< z.infer & { exitProgress: number; } -> = ({ login, exitProgress, startAngle, rocket, accentColor }) => { +> = ({ login, exitProgress, startAngle, rocket }) => { const { fps, height } = useVideoConfig(); const frame = useCurrentFrame(); @@ -68,7 +72,7 @@ export const OpeningTitle: React.FC< style={{ justifyContent: "center", alignItems: "center", - color: "white", + color: PANE_TEXT_COLOR, fontFamily: "Mona Sans", fontSize: 40, marginTop: -200 + y, @@ -78,32 +82,36 @@ export const OpeningTitle: React.FC< >
- -
+
+
- This is my #GitHubUnwrapped +
+ This is my #GitHubUnwrapped +
+
{login}
-
{login}
diff --git a/remotion/Opening/TitleImage.tsx b/remotion/Opening/TitleImage.tsx index 7a66f6dc..89af490c 100644 --- a/remotion/Opening/TitleImage.tsx +++ b/remotion/Opening/TitleImage.tsx @@ -7,12 +7,7 @@ import { useVideoConfig, } from "remotion"; import { z } from "zod"; -import type { AccentColor } from "../../src/config"; -import { - accentColorSchema, - openingSceneStartAngle, - rocketSchema, -} from "../../src/config"; +import { openingSceneStartAngle, rocketSchema } from "../../src/config"; import type { GradientType } from "../Gradients/available-gradients"; import { PANE_BORDER } from "../TopLanguages/Pane"; @@ -20,20 +15,13 @@ export const openingTitleSchema = z.object({ login: z.string(), startAngle: openingSceneStartAngle, rocket: rocketSchema, - accentColor: accentColorSchema, }); const TITLE_IMAGE_INNER_BORDER_RADIUS = 30; const TITLE_IMAGE_BORDER_PADDING = 20; -export const accentColorToGradient = ( - accentColor: AccentColor, -): GradientType => { - if (accentColor === "blue") { - return "blueRadial"; - } - - return "purpleRadial"; +export const accentColorToGradient = (): GradientType => { + return "blueRadial"; }; export const getAvatarImage = (login: string) => { diff --git a/remotion/Opening/index.tsx b/remotion/Opening/index.tsx index f4341c0f..c23ec78c 100644 --- a/remotion/Opening/index.tsx +++ b/remotion/Opening/index.tsx @@ -38,7 +38,6 @@ const OpeningSceneFull: React.FC> = ({ login, startAngle, rocket, - accentColor, }) => { const { fps, durationInFrames } = useVideoConfig(); const frame = useCurrentFrame(); @@ -85,7 +84,7 @@ const OpeningSceneFull: React.FC> = ({ opacity: interpolate(exitProgress, [0, 1], [1, 0]), }} > - + @@ -94,7 +93,6 @@ const OpeningSceneFull: React.FC> = ({ exitProgress={exitProgress} login={login} rocket={rocket} - accentColor={accentColor} /> > = ({ login, startAngle, rocket, - accentColor, }) => { const { width, fps, durationInFrames: actualDuration } = useVideoConfig(); const frame = useCurrentFrame(); @@ -158,12 +155,7 @@ export const OpeningScene: React.FC> = ({ transform: `scale(${scale}) translateX(${x}px) translateY(50px)`, }} > - + {isMobileDevice() ? null : ( { return ( @@ -10,7 +11,7 @@ export const MergeIcon: React.FC = () => { }} > diff --git a/remotion/PullRequests/MergeNumber.tsx b/remotion/PullRequests/MergeNumber.tsx index 03961ecc..78e80042 100644 --- a/remotion/PullRequests/MergeNumber.tsx +++ b/remotion/PullRequests/MergeNumber.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { PANE_TEXT_COLOR } from "../TopLanguages/Pane"; export const MergeNumber: React.FC<{ num: number; @@ -10,7 +11,7 @@ export const MergeNumber: React.FC<{ fontFamily: "Mona Sans", fontWeight: "800", marginLeft: 10, - color: "#fff", + color: PANE_TEXT_COLOR, fontVariantNumeric: "tabular-nums", }} > diff --git a/remotion/PullRequests/MergeStat.tsx b/remotion/PullRequests/MergeStat.tsx index 3d161132..cf7ed2ef 100644 --- a/remotion/PullRequests/MergeStat.tsx +++ b/remotion/PullRequests/MergeStat.tsx @@ -1,5 +1,9 @@ import React, { useMemo } from "react"; -import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane"; +import { + PANE_BACKGROUND, + PANE_BORDER, + PANE_TEXT_COLOR, +} from "../TopLanguages/Pane"; import { MergeIcon } from "./MergeIcon"; import { MergeNumber } from "./MergeNumber"; import { RemotionShineEffect } from "./RemotionShineEffect"; @@ -42,7 +46,7 @@ export const MergeStat: React.FC<{ fontSize: 24, fontFamily: "Mona Sans", fontWeight: "800", - color: "#fff", + color: PANE_TEXT_COLOR, }; }, []); diff --git a/remotion/PullRequests/PullRequests.tsx b/remotion/PullRequests/PullRequests.tsx index d5225a2b..4c6d2e38 100644 --- a/remotion/PullRequests/PullRequests.tsx +++ b/remotion/PullRequests/PullRequests.tsx @@ -10,7 +10,6 @@ import { useVideoConfig, } from "remotion"; import { z } from "zod"; -import { accentColorSchema } from "../../src/config"; import { Gradient } from "../Gradients/NativeGradient"; import { accentColorToGradient } from "../Opening/TitleImage"; import { isMobileDevice } from "../Opening/devices"; @@ -22,7 +21,6 @@ const endHeight = 1080; export const pullRequestsSchema = z.object({ totalPullRequests: z.number().min(0), - accentColor: accentColorSchema, }); const MAX_PATHS = 30; @@ -30,7 +28,6 @@ export const PULL_REQUESTS_DURATION = 260; export const PullRequests: React.FC> = ({ totalPullRequests, - accentColor, }) => { const initialOffset = PATHS_COMP_HEIGHT - endHeight; const frame = useCurrentFrame(); @@ -77,7 +74,7 @@ export const PullRequests: React.FC> = ({ )} - + { height={VIDEO_HEIGHT} schema={endSceneSchema} defaultProps={{ - accentColor: "blue", rocket: "blue", planet: "Ice", }} @@ -122,7 +121,6 @@ export const RemotionRoot: React.FC = () => { defaultProps={{ login: "JonnyBurger", startAngle: "left", - accentColor: "blue", rocket: "blue", }} /> @@ -137,7 +135,6 @@ export const RemotionRoot: React.FC = () => { login: "JonnyBurger", exitProgress: 0, startAngle: "left", - accentColor: "blue", rocket: "blue", }} /> @@ -148,9 +145,7 @@ export const RemotionRoot: React.FC = () => { fps={VIDEO_FPS} width={VIDEO_WIDTH} height={VIDEO_HEIGHT} - defaultProps={{ - accentColor: "blue", - }} + defaultProps={{}} /> { total: 300, rocket: "blue", planet: "Ice", - accentColor: "blue", contributionData: jonnysContributions, }} /> @@ -279,7 +273,6 @@ export const RemotionRoot: React.FC = () => { topWeekday: "3", topHour: "0", graphData: GRAPH_DATA, - accentColor: "blue", totalPullRequests: 614, login: "JonnyBurger", sampleStarredRepos: SAMPLE_STARRED_REPOS, @@ -391,7 +384,6 @@ export const RemotionRoot: React.FC = () => { schema={pullRequestsSchema} defaultProps={{ totalPullRequests: 614, - accentColor: "purple", }} /> @@ -407,7 +399,6 @@ export const RemotionRoot: React.FC = () => { defaultProps={{ randomizePlanetSeed: "randomizePlanetSeed", pluralizeLanguages: false, - accentColor: "blue", rocket: "blue", randomizeOctocatSeed: 0.4, }} @@ -512,9 +503,7 @@ export const RemotionRoot: React.FC = () => { fps={VIDEO_FPS} width={VIDEO_WIDTH} height={VIDEO_HEIGHT} - defaultProps={{ - accentColor: "blue", - }} + defaultProps={{}} /> { }, showHelperLine: false, login: "JonnyBurger", - accentColor: "blue", rocket: "blue", octocatSeed: 0.4, }} @@ -697,7 +685,6 @@ export const RemotionRoot: React.FC = () => { }, ], openingSceneStartAngle: "right", - accentColor: "blue", rocket: "yellow", contributionData: [ 3, 0, 0, 0, 6, 53, 48, 52, 36, 33, 5, 28, 17, 0, 53, 30, 37, 40, 37, @@ -838,7 +825,6 @@ export const RemotionRoot: React.FC = () => { { productivity: 2, time: 22 }, { productivity: 0, time: 23 }, ], - accentColor: "purple" as const, totalPullRequests: 614, login: "JonnyBurger", sampleStarredRepos: [ @@ -895,7 +881,6 @@ export const RemotionRoot: React.FC = () => { { productivity: 2, time: 22 }, { productivity: 0, time: 23 }, ], - accentColor: "purple" as const, totalPullRequests: 614, login: "JonnyBurger", sampleStarredRepos: [ @@ -929,7 +914,6 @@ export const RemotionRoot: React.FC = () => { topWeekday: "1" as const, topHour: "0" as const, graphData: GRAPH_DATA, - accentColor: "purple" as const, totalPullRequests: 614, login: "JonnyBurger", sampleStarredRepos: SAMPLE_STARRED_REPOS, diff --git a/remotion/Sponsorships/index.tsx b/remotion/Sponsorships/index.tsx index 38b88c93..fc06bbf3 100644 --- a/remotion/Sponsorships/index.tsx +++ b/remotion/Sponsorships/index.tsx @@ -1,14 +1,11 @@ import React from "react"; import { AbsoluteFill, useCurrentFrame } from "remotion"; -import type { AccentColor } from "../../src/config"; import { Gradient } from "../Gradients/NativeGradient"; import { accentColorToGradient } from "../Opening/TitleImage"; import { Background } from "./Background"; import { Box } from "./Box"; -export const SponsorshipsScene: React.FC<{ - accentColor: AccentColor; -}> = ({ accentColor }) => { +export const SponsorshipsScene: React.FC<{}> = () => { // const { fps, durationInFrames, width, height } = useVideoConfig(); const frame = useCurrentFrame(); @@ -21,7 +18,7 @@ export const SponsorshipsScene: React.FC<{ }} > - + diff --git a/remotion/StarsAndProductivity/index.tsx b/remotion/StarsAndProductivity/index.tsx index 8279fe55..4e02d59d 100644 --- a/remotion/StarsAndProductivity/index.tsx +++ b/remotion/StarsAndProductivity/index.tsx @@ -51,7 +51,6 @@ export const StarsAndProductivity: React.FC< topWeekday, topHour, graphData, - accentColor, totalPullRequests, login, sampleStarredRepos, @@ -113,7 +112,6 @@ export const StarsAndProductivity: React.FC< topWeekday={topWeekday} topHour={topHour} graphData={graphData} - accentColor={accentColor} totalPullRequests={totalPullRequests} login={login} sampleStarredRepos={sampleStarredRepos} diff --git a/remotion/StarsGiven/AnimatedCockpit.tsx b/remotion/StarsGiven/AnimatedCockpit.tsx index 3bb782ed..0b9ab5d5 100644 --- a/remotion/StarsGiven/AnimatedCockpit.tsx +++ b/remotion/StarsGiven/AnimatedCockpit.tsx @@ -7,7 +7,6 @@ import { useCurrentFrame, useVideoConfig, } from "remotion"; -import { type AccentColor } from "../../src/config"; import { TABLET_SCENE_HIDE_ANIMATION } from "../Productivity/Tablet"; import { PullRequests } from "../PullRequests/PullRequests"; import { Cockpit } from "./Cockpit"; @@ -18,7 +17,6 @@ export const AnimatedCockpit: React.FC<{ xShake: number; yShake: number; rotationShake: number; - accentColor: AccentColor; totalPullRequests: number; repoText: RepoText | null; starCount: number; @@ -29,7 +27,6 @@ export const AnimatedCockpit: React.FC<{ xShake, yShake, rotationShake, - accentColor, totalPullRequests, repoText, starCount, @@ -74,10 +71,7 @@ export const AnimatedCockpit: React.FC<{ return ( - + = ({ starsGiven, style, showCockpit, - accentColor, totalPullRequests, sampleStarredRepos, timeUntilTabletHides, @@ -194,7 +191,7 @@ export const StarsGiven: React.FC = ({ - + {isMobileDevice() ? null : ( @@ -211,7 +208,6 @@ export const StarsGiven: React.FC = ({ rotationShake={rotationShake} xShake={xShake} yShake={yShake} - accentColor={accentColor} totalPullRequests={totalPullRequests} repoText={text} starCount={starCount} diff --git a/remotion/TopLanguages/AllPlanets.tsx b/remotion/TopLanguages/AllPlanets.tsx index d44510f4..9ebe74c1 100644 --- a/remotion/TopLanguages/AllPlanets.tsx +++ b/remotion/TopLanguages/AllPlanets.tsx @@ -3,12 +3,7 @@ import { slide } from "@remotion/transitions/slide"; import { Internals } from "remotion"; import { z } from "zod"; import type { TopLanguage } from "../../src/config"; -import { - accentColorSchema, - cornerType, - rocketSchema, - topLanguagesSchema, -} from "../../src/config"; +import { cornerType, rocketSchema, topLanguagesSchema } from "../../src/config"; import { PlanetScaleWiggle } from "./PlaneScaleWiggle"; import { PlanetScaleOut } from "./PlanetScaleOut"; import { PlanetScaleSpiral } from "./PlanetScaleSpiral"; @@ -27,7 +22,6 @@ export const allPlanetsSchema = z.object({ corner: cornerType, showHelperLine: z.boolean(), login: z.string(), - accentColor: accentColorSchema, rocket: rocketSchema, octocatSeed: z.number(), }); @@ -100,7 +94,6 @@ export const AllPlanets: React.FC> = ({ showHelperLine, login, topLanguages, - accentColor, rocket, octocatSeed, }) => { @@ -114,7 +107,6 @@ export const AllPlanets: React.FC> = ({ diff --git a/remotion/TopLanguages/FloatingOctocat.tsx b/remotion/TopLanguages/FloatingOctocat.tsx index b028eb13..edbbbb9a 100644 --- a/remotion/TopLanguages/FloatingOctocat.tsx +++ b/remotion/TopLanguages/FloatingOctocat.tsx @@ -1,14 +1,11 @@ import { noise2D } from "@remotion/noise"; import { getLength, getTangentAtLength } from "@remotion/paths"; import { spring, useCurrentFrame, useVideoConfig } from "remotion"; -import type { AccentColor } from "../../src/config"; import { OctocatBody } from "../../vite/VideoPage/Background/Octocat-body"; import { NewOctocatLine } from "./NewOctocatLine"; import { getOctocatLine } from "./octocat-line"; -export const FloatingOctocat: React.FC<{ - accentColor: AccentColor; -}> = ({ accentColor }) => { +export const FloatingOctocat: React.FC<{}> = ({}) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); @@ -57,7 +54,7 @@ export const FloatingOctocat: React.FC<{ }} fill="none" > - + { - if (accentColor === "blue") { - return ["#3772A7", "#8EAFB2"] as const; - } - - if (accentColor === "purple") { - return ["#5e366e", "#7B6793"] as const; - } - - throw new Error("Invalid accent color"); +const getLeftColor = () => { + return ["#3772A7", "#8EAFB2"] as const; }; export const NewOctocatLine: React.FC<{ progress: number; d: string; - accentColor: AccentColor; -}> = ({ progress, d, accentColor }) => { +}> = ({ progress, d }) => { const { strokeDasharray, strokeDashoffset } = evolvePath(progress, d); return ( @@ -40,8 +30,8 @@ export const NewOctocatLine: React.FC<{ y2="720.3" gradientUnits="userSpaceOnUse" > - - + + diff --git a/remotion/TopLanguages/Pane.tsx b/remotion/TopLanguages/Pane.tsx index 036a10ed..3e04c0a2 100644 --- a/remotion/TopLanguages/Pane.tsx +++ b/remotion/TopLanguages/Pane.tsx @@ -1,2 +1,5 @@ -export const PANE_BACKGROUND = "#E6E1FC"; +import { transparentize } from "polished"; + +export const PANE_BACKGROUND = transparentize(0.2, "#E6E1FC"); +export const PANE_TEXT_COLOR = "#01064A"; export const PANE_BORDER = "2px solid rgba(255, 255, 255, 0.1)"; diff --git a/remotion/TopLanguages/TitleCard.tsx b/remotion/TopLanguages/TitleCard.tsx index b0c41f5f..34c2d25c 100644 --- a/remotion/TopLanguages/TitleCard.tsx +++ b/remotion/TopLanguages/TitleCard.tsx @@ -9,7 +9,7 @@ import { useCurrentFrame, } from "remotion"; import { z } from "zod"; -import { accentColorSchema, rocketSchema } from "../../src/config"; +import { rocketSchema } from "../../src/config"; import { Gradient } from "../Gradients/NativeGradient"; import { Noise } from "../Noise"; import { accentColorToGradient } from "../Opening/TitleImage"; @@ -20,7 +20,6 @@ import { TopLanguagesTitle } from "./TopLanguagesTitle"; export const topLanguagesTitleCardSchema = z.object({ pluralizeLanguages: z.boolean(), - accentColor: accentColorSchema, rocket: rocketSchema, randomizePlanetSeed: z.string(), randomizeOctocatSeed: z.number(), @@ -32,7 +31,6 @@ export const TopLanguagesTitleCard: React.FC< z.infer > = ({ pluralizeLanguages, - accentColor, rocket, randomizePlanetSeed, randomizeOctocatSeed, @@ -61,7 +59,7 @@ export const TopLanguagesTitleCard: React.FC< opacity, }} > - + @@ -77,7 +75,7 @@ export const TopLanguagesTitleCard: React.FC< random(randomizeOctocatSeed) > 0.5 ? `scaleX(-1)` : undefined, }} > - + = ({ accentColor }) => { +export const TitleCardOctocat: React.FC<{}> = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); @@ -35,7 +32,7 @@ export const TitleCardOctocat: React.FC<{ transform: `translate(${x}px, ${y}px)`, }} > - + ); }; diff --git a/remotion/TopLanguages/TopLanguagesTitle.tsx b/remotion/TopLanguages/TopLanguagesTitle.tsx index 92199f88..e66a6723 100644 --- a/remotion/TopLanguages/TopLanguagesTitle.tsx +++ b/remotion/TopLanguages/TopLanguagesTitle.tsx @@ -1,7 +1,7 @@ import React from "react"; import { spring, useCurrentFrame, useVideoConfig } from "remotion"; import { z } from "zod"; -import { PANE_BACKGROUND, PANE_BORDER } from "./Pane"; +import { PANE_BACKGROUND, PANE_BORDER, PANE_TEXT_COLOR } from "./Pane"; import { RotatingPlanet } from "./RotatingPlanet"; const INNER_BORDER_RADIUS = 30; @@ -56,7 +56,7 @@ export const TopLanguagesTitle: React.FC> = ({
; - export const compositionSchema = z.object({ topLanguages: topLanguagesSchema.or(z.null()), corner: cornerType, @@ -128,7 +123,6 @@ export const compositionSchema = z.object({ topHour: topHourSchema, graphData: z.array(productivityPerHourSchema), openingSceneStartAngle, - accentColor: accentColorSchema, rocket: rocketSchema, contributionData: z.array(z.number()), totalContributions: z.number(), @@ -249,14 +243,6 @@ export const computeCompositionParameters = ( userStats: ProfileStats, rocketPreference: Rocket | null, ): CompositionParameters => { - const accentColor = - accentColorValues[ - Math.floor( - random(userStats.lowercasedUsername + "accent") * - accentColorValues.length, - ) - ]; - const defaultRocket = rocketValues[ Math.floor( @@ -297,7 +283,6 @@ export const computeCompositionParameters = ( random(userStats.lowercasedUsername + "startAngle") > 0.5 ? "left" : "right", - accentColor, rocket: rocketPreference ? rocketPreference : defaultRocket, contributionData: userStats.contributionData, sampleStarredRepos: userStats.sampleStarredRepos, diff --git a/vite/VideoPage/Actions/SharingActions.tsx b/vite/VideoPage/Actions/SharingActions.tsx index 3bb9b790..60da7dde 100644 --- a/vite/VideoPage/Actions/SharingActions.tsx +++ b/vite/VideoPage/Actions/SharingActions.tsx @@ -2,7 +2,6 @@ import { Link } from "@tanstack/react-router"; import { InstagramIcon } from "../../../icons/InstagramIcon"; import { LinkedInIcon } from "../../../icons/LinkedInIcon"; import { XIcon } from "../../../icons/XIcon"; -import type { accentColorValues } from "../../../src/config"; import { userRoute, videoRoute } from "../../routing"; import { SharingAction } from "./SharingAction"; import styles from "./styles.module.css"; @@ -13,9 +12,7 @@ export const twitterSharingLink = `https://twitter.com/intent/tweet?text=${encod export const linkedInSharingLink = "https://www.linkedin.com/"; -export const SharingActions: React.FC<{ - accentColor: (typeof accentColorValues)[number]; -}> = ({ accentColor }) => { +export const SharingActions: React.FC<{}> = ({}) => { const { username } = userRoute.useParams(); return (
@@ -25,7 +22,7 @@ export const SharingActions: React.FC<{ params={() => { return { username }; }} - search={{ platform: "twitter", accentColor }} + search={{ platform: "twitter" }} > } @@ -37,7 +34,7 @@ export const SharingActions: React.FC<{ from={videoRoute.id} to={"share"} params={{ username }} - search={{ platform: "linkedin", accentColor }} + search={{ platform: "linkedin" }} > } diff --git a/vite/VideoPage/MobileActionsContainer.tsx b/vite/VideoPage/MobileActionsContainer.tsx index d2df2a70..1f716ca9 100644 --- a/vite/VideoPage/MobileActionsContainer.tsx +++ b/vite/VideoPage/MobileActionsContainer.tsx @@ -39,7 +39,6 @@ export const MobileActionsContainer: React.FC<{ const navigate = useNavigate({ from: videoRoute.id }); const { username } = videoRoute.useParams(); - const { compositionParams } = useUserVideo(); const { status } = useUserVideo(); // const status: { @@ -58,10 +57,9 @@ export const MobileActionsContainer: React.FC<{ params: { username }, search: { platform: undefined, - accentColor: compositionParams.accentColor, }, }); - }, [compositionParams.accentColor, navigate, username]); + }, [navigate, username]); const handleClick = useCallback(() => { if (loadingState.type !== "downloaded") { diff --git a/vite/VideoPage/Sidebar/Sidebar.tsx b/vite/VideoPage/Sidebar/Sidebar.tsx index 8e9381d7..e4d7bb34 100644 --- a/vite/VideoPage/Sidebar/Sidebar.tsx +++ b/vite/VideoPage/Sidebar/Sidebar.tsx @@ -54,7 +54,7 @@ export const Sidebar: React.FC<{
)} {/* Sharing Actions */} - + {/* Further Action */} diff --git a/vite/routing.tsx b/vite/routing.tsx index 1a1cd76d..60c86fd6 100644 --- a/vite/routing.tsx +++ b/vite/routing.tsx @@ -1,5 +1,4 @@ import { Outlet, RootRoute, Route, Router } from "@tanstack/react-router"; -import { accentColorValues } from "../src/config.js"; import About from "./About/About.jsx"; import { Dashboard } from "./Dashboard.jsx"; import Home from "./Home.jsx"; @@ -62,13 +61,9 @@ export const shareRoute = new Route({ getParentRoute: () => userRoute, path: "share", component: SharePage, - validateSearch: (search: { - accentColor?: (typeof accentColorValues)[number]; - platform?: "twitter" | "linkedin"; - }) => { + validateSearch: (search: { platform?: "twitter" | "linkedin" }) => { // validate and parse the search params into a typed state return { - accentColor: search?.accentColor ?? accentColorValues[0], platform: search?.platform, }; },