Skip to content

Highlights #30

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

Open
Jasspie wants to merge 9 commits into
base: alt-theming
Choose a base branch
from
Open

Highlights #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
db08552
fixed pre-hackathon date
gracewgao Jul 10, 2021
2ff33cb
fixed header gradient
gracewgao Jul 10, 2021
2681b4f
Added highlighting colors and updated text
Jasspie Jul 10, 2021
ad226ee
Updated render
Jasspie Jul 10, 2021
f47d7e0
Added invertHighlightColor
Jasspie Jul 10, 2021
4ea8823
Merge pull request #27 from SET-Hacks-Dev/alt-theming
gracewgao Jul 12, 2021
ee4d344
Merge branch 'develop' into highlights
gracewgao Jul 12, 2021
37d1d34
tweaked highlighted words
gracewgao Jul 12, 2021
ebaccc2
Merge branch 'highlights' of https://github.com/malav-mehta/set-hacks…
gracewgao Jul 12, 2021
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
8 changes: 8 additions & 0 deletions components/Themes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,11 @@ export const invertAccentColor = (T) => {
theme.colors.secondaryVariant = brand[400];
return theme;
};

export const invertHighlightColor = (T) => {
Copy link
Collaborator

@gracewgao gracewgao Jul 12, 2021

Choose a reason for hiding this comment

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

should we combine the invertHighlightColor and the invertAccentColor into the same theme? I feel like since they'd both be dark mode we can just have one theme for that - idk do y'all have any thoughts on that

Copy link
Collaborator

@malavhmehta malavhmehta Jul 12, 2021

Choose a reason for hiding this comment

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

maybe we could have an invertTheme or darkMode function that calls the two functions? i don't know if that'd be cleaner or messier, but it gives us the option to only apply certain inversions if we want to without having to rewrite stuff

Copy link
Collaborator

@gracewgao gracewgao Jul 12, 2021

Choose a reason for hiding this comment

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

yea I think this would be a good idea especially if there's any other dark theme stuff that comes up later on

let theme = getTheme(T);
let temp = theme.colors.brand[1000];
theme.colors.brand[1000] = theme.colors.brand[1100];
theme.colors[1100] = temp;
return theme;
};
46 changes: 37 additions & 9 deletions components/render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,49 @@ export const Accent = styled.span`
color: ${({ theme }) => theme.colors.brand[400]};
`;

export const Highlight = styled.span<{ active: number }>`
background: ${(props) =>
props.active
? `linear-gradient(to bottom, transparent 60%, ${props.theme.colors.brand[1000]} 60%)`
: "none"};
`;

export const renderIcon = (Icon: any, size = 22, className = "") => (
<Icon size={size} className={className} />
);

const render = (text: string) => {
let textMap = text.split("*");
let textMap = text.split("~");
let textMap1 = text.split("*");
let jsxMap = [];
for (let i = 0; i < textMap.length; i++) {
if (i % 2 === 0) jsxMap.push(textMap[i]);
else
jsxMap.push(
<Accent key={hashString(textMap[i])}>
<span style={{ fontWeight: 600 }}>{textMap[i]}</span>
</Accent>
);
let highlight = false;
let accent = false;

if (textMap1.length === 1 && textMap.length === 1) return <>{textMap[0]}</>;
for (let i = 0; i < text.length; i++) {
if (text[i] === "~") highlight = !highlight;
else if (text[i] === "*") accent = !accent;
else {
if (accent) {
jsxMap.push(
<Accent key={hashString(text[i])}>
<Highlight style={{ fontWeight: 600 }} active={highlight ? 1 : 0}>
{text[i]}
</Highlight>
</Accent>
);
} else {
jsxMap.push(
<Highlight
key={hashString(text[i])}
style={{ fontWeight: 600 }}
active={highlight ? 1 : 0}
>
{text[i]}
</Highlight>
);
}
}
}
return <>{jsxMap}</>;
};
Expand Down
16 changes: 8 additions & 8 deletions constants/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const NAVIGATION = {
export const HOME = {
lead: {
actions: ["🎨 Design", 1000, "🌎 Change", 1000, "💻 Code", 1000],
content: "the future.",
content: "~the future.~",
},
chips: [
{ icon: MapPin, label: "Virtual" },
Expand All @@ -61,7 +61,7 @@ export const HOME = {
};

export const ABOUT_1 = {
heading: "👉 You don’t need to be a coding whiz to be a hacker.",
heading: "👉 You don’t need to be a coding whiz to be ~a hacker.~",
text: "SET.Hacks() is a beginner-focused, high school hackathon that empowers every student to start coding the future. With six guided learning tracks, 40+ mentors and university panels, we want to help kickstart students' journeys into tech.",
post: (
<TextChildren>
Expand Down Expand Up @@ -90,7 +90,7 @@ export const STATS = {
};

export const ABOUT_2 = {
heading: "🚀 You can build solutions for the biggest problems of tomorrow.",
heading: "🚀 You can build solutions for the ~biggest problems of tomorrow.~",
text: "The future is in your hands, and the possibilities are endless. From quirky apps to complex algorithms, we want you to build something impactful for years to come. Challenge prompts come out the day of the hackathon, where you’ll get the chance to work on a problem faced by someone from the future. ",
post: (
<TextChildren>
Expand All @@ -104,7 +104,7 @@ export const ABOUT_2 = {
};

export const STORIES = {
heading: "📚 Join our community",
heading: "📚 Join ~our community~",
stories: [
{
name: "Sharon Peng",
Expand Down Expand Up @@ -147,7 +147,7 @@ export const STORIES = {
};

export const EXPLORE_TERMINAL = {
heading: "💫 Explore hacking weekend",
heading: "💫 Explore ~hacking weekend~",
commands: [
{
name: "ls",
Expand Down Expand Up @@ -185,7 +185,7 @@ export const EXPLORE_TERMINAL = {
};

export const TRACK = {
heading: "🚊 Get on track to make your ideas a reality.",
heading: "🚊 Get ~on track~ to make your ideas a reality.",
subheading: "Pre-hackathon | August 9-11",
text: [
"Our six learning tracks are customized to help you understand important topics in tech and learn how to apply them in solving complex, interdisciplinary problems. Prior to hacking weekend, you’ll have the chance to take a deep dive into one track of your choosing.",
Expand Down Expand Up @@ -233,7 +233,7 @@ export const TRACK = {
};

export const FAQ = {
heading: "💡 Frequently asked questions",
heading: "💡 Frequently asked ~questions~",
left_bar: {
heading: "",
questions: [
Expand Down Expand Up @@ -285,7 +285,7 @@ export const FAQ = {
};

export const SPONSORS = {
heading: "🙌 Support our mission",
heading: "🙌 Support ~our mission~",
text: "A big thank you to all the organizations who make this event possible! It’s people like you that inspire us to keep going. Stay tuned as we announce our 2021 sponsors!",
post: (
<TextChildren>
Expand Down
33 changes: 18 additions & 15 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
Terminal,
Tilted,
invertAccentColor,
invertHighlightColor,
} from "../components";

import { ThemeProvider } from "styled-components";
Expand All @@ -43,21 +44,23 @@ const Index = () => {
<Navbar {...NAVIGATION} />
<Hero />
<Tilted>
<Stars {...STARS}>
<Anchor i="about" />
<ThemeProvider theme={invertAccentColor}>
<About1 {...ABOUT_1} />
</ThemeProvider>
<Stats {...STATS} />
<About2 {...ABOUT_2} />
<Anchor i="track" />
<Spacer sz={14} />
<Track {...TRACK} />
<Spacer sz={14} />
</Stars>
<Anchor i="t-hist" />
<Spacer sz={8} />
<Terminal {...EXPLORE_TERMINAL} />
<ThemeProvider theme={invertHighlightColor}>
<Stars {...STARS}>
<Anchor i="about" />
<ThemeProvider theme={invertAccentColor}>
<About1 {...ABOUT_1} />
</ThemeProvider>
<Stats {...STATS} />
<About2 {...ABOUT_2} />
<Anchor i="track" />
<Spacer sz={14} />
<Track {...TRACK} />
<Spacer sz={14} />
</Stars>
<Anchor i="t-hist" />
<Spacer sz={8} />
<Terminal {...EXPLORE_TERMINAL} />
</ThemeProvider>
<Anchor i="stories" />
<Spacer sz={14} />
<Stories {...STORIES} />
Expand Down
16 changes: 14 additions & 2 deletions sections/About1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { Col, Container, Row, Image } from "react-bootstrap";
import { ButtonProps, Heading, Text, Link, Button } from "../components";
import {
ButtonProps,
Heading,
Text,
Link,
Button,
render,
} from "../components";
import styled from "styled-components";

type About1Props = {
Expand Down Expand Up @@ -60,7 +67,12 @@ const About1 = ({
</Col>
{image && (
<Col xs={12} lg={6} className={"d-flex justify-content-center"}>
<Image className="w-75 p-4 my-4 my-lg-0" src={image} alt={heading + " Graphic"} fluid />
<Image
className="w-75 p-4 my-4 my-lg-0"
src={image}
alt={heading + " Graphic"}
fluid
/>
</Col>
)}
</Row>
Expand Down
6 changes: 3 additions & 3 deletions sections/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Accent, Chip, Heading, SocialMedia } from "../components";
import { Accent, Chip, Heading, SocialMedia, render } from "../components";
import { Col, Container, Image, Row } from "react-bootstrap";
import styled from "styled-components";
import { media, theme } from "../theme";
Expand Down Expand Up @@ -32,7 +32,7 @@ const Hero = () => {
lg={6}
className="d-flex align-items-center justify-content-end"
>
<Rocket className = "p-3 me-5" src={HOME.image} alt="Hero" fluid />
<Rocket className="p-3 me-5" src={HOME.image} alt="Hero" fluid />
</Col>
<Col xs={12} lg={6} className="d-flex align-items-center">
<div className="w-100 d-flex justify-content-center flex-column">
Expand All @@ -45,7 +45,7 @@ const Hero = () => {
/>
</Accent>
<br />
{HOME.lead.content}
{render(HOME.lead.content)}
</Heading>
<div className="mt-3 w-100 d-flex justify-content-begin">
{HOME.chips.map((chip) => (
Expand Down
2 changes: 1 addition & 1 deletion theme/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const GlobalStyle = createGlobalStyle`
body {
background-image: linear-gradient(${theme.colors.brand[200]}, ${
theme.colors.brand[200]
}, transparent);
}, rgba(255,255,255,0));
background-repeat:no-repeat;
background-size: 100% 70vh;
background-color: ${theme.colors.white};
Expand Down
2 changes: 2 additions & 0 deletions theme/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const colors = {
700: "#282a87",
800: "#221c48",
900: "#24185d",
1000: "#ffd498",
Copy link
Collaborator

@gracewgao gracewgao Jul 12, 2021

Choose a reason for hiding this comment

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

not really a big deal but perhaps we should move the 1000 and 1100 out of the brand colours and name it highlightYellow or smt (I think we should try to keep brand colours as just shade of purples)

1100: "#c14038",
},
secondary: "#ddf9ff",
secondaryVariant: "#17c6ea",
Expand Down