diff --git a/package-lock.json b/package-lock.json index b7afa5e..c7fef47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3789,6 +3789,12 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==" }, + "@types/uuid": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz", + "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==", + "dev": true + }, "@types/vfile": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz", @@ -5079,6 +5085,13 @@ "better-queue-memory": "^1.0.1", "node-eta": "^0.9.0", "uuid": "^3.0.0" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "better-queue-memory": { @@ -10329,6 +10342,11 @@ "rimraf": "^3.0.0" } }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -11624,6 +11642,11 @@ "proper-lockfile": "^4.1.1", "xdg-basedir": "^4.0.0" } + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -12047,6 +12070,11 @@ "version": "0.7.3", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -19556,6 +19584,11 @@ "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -20509,6 +20542,11 @@ "websocket-driver": ">=0.5.1" } }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + }, "websocket-driver": { "version": "0.6.5", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz", @@ -21490,6 +21528,13 @@ "requires": { "temp-dir": "^1.0.0", "uuid": "^3.0.1" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "term-size": { @@ -22661,9 +22706,9 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz", + "integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==" }, "v8-compile-cache": { "version": "1.1.2", @@ -23108,6 +23153,13 @@ "requires": { "ansi-colors": "^3.0.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "webpack-merge": { diff --git a/package.json b/package.json index bf90d7c..c1c717c 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,8 @@ "react-perfect-scrollbar": "^1.5.8", "react-scrollspy": "^3.4.2", "styled-components": "^5.1.1", - "typescript": "^3.9.3" + "typescript": "^3.9.3", + "uuid": "^8.3.0" }, "devDependencies": { "@graphql-codegen/cli": "^1.15.0", @@ -77,6 +78,7 @@ "@types/react-helmet": "^6.0.0", "@types/react-scrollspy": "^3.3.2", "@types/styled-components": "^5.1.0", + "@types/uuid": "^8.3.0", "@typescript-eslint/eslint-plugin-tslint": "^3.8.0", "babel-plugin-polished": "^1.1.0", "babel-plugin-styled-components": "^1.10.7", diff --git a/src/components/DiscordButton/styles.tsx b/src/components/DiscordButton/styles.tsx index cc90516..9b8e16e 100644 --- a/src/components/DiscordButton/styles.tsx +++ b/src/components/DiscordButton/styles.tsx @@ -1,5 +1,5 @@ import styled from "styled-components" -import DiscordLogo from "../../images/discord-logo.svg" +import DiscordLogo from "../../images/discord-logo" export const DiscordButtonWrapper = styled.a` display: inline-flex; diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx index d7ed677..216b01f 100644 --- a/src/components/HeaderBarebone/styles.tsx +++ b/src/components/HeaderBarebone/styles.tsx @@ -2,7 +2,7 @@ import { transparentize, darken } from "polished" import styled from "styled-components" import { fontFamily } from "../../design/typography" import { WavesTop, WavesBottom } from "../Waves" -import Circles from "../../images/circles.svg" +import Circles from "../../images/circles" const height = 250 diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index 75342e5..e3ef734 100644 --- a/src/components/Home/styles.tsx +++ b/src/components/Home/styles.tsx @@ -2,7 +2,7 @@ import { Link } from "gatsby" import Particles from "react-particles-js" import styled, { css } from "styled-components" import { fontFamily } from "../../design/typography" -import TPHLogo from "../../images/tph-logo.svg" +import TPHLogo from "../../images/tph-logo" export const HomeWrapper = styled.header` display: flex; diff --git a/src/components/HomePartner/styles.tsx b/src/components/HomePartner/styles.tsx index 40ae506..af9314b 100644 --- a/src/components/HomePartner/styles.tsx +++ b/src/components/HomePartner/styles.tsx @@ -1,5 +1,5 @@ import styled from "styled-components" -import JetBrainsLogo from "../../images/jetbrains-logo.svg" +import JetBrainsLogo from "../../images/jetbrains-logo" export const HomePartnerWrapper = styled.div` margin-top: 32px; diff --git a/src/components/MobileHeader/styles.tsx b/src/components/MobileHeader/styles.tsx index 099e11e..3c3bc06 100644 --- a/src/components/MobileHeader/styles.tsx +++ b/src/components/MobileHeader/styles.tsx @@ -1,7 +1,7 @@ import { transparentize } from "polished" import styled from "styled-components" import { fontFamily } from "../../design/typography" -import Logo from "../../images/tph-logo.svg" +import Logo from "../../images/tph-logo" export const MobileHeaderWrapper = styled.div` z-index: 50; diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index fbf752d..ea36e88 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/src/components/ResourcesSidebar/styles.tsx @@ -113,7 +113,7 @@ export const ExpandIcon = styled(Expand)` export const ExpandResources = styled.div` padding-right: 15px; - margin: 20px 0; + margin-bottom: 20px; ` export const ExpandResourcesHeader = styled.div` @@ -123,6 +123,7 @@ export const ExpandResourcesHeader = styled.div` cursor: pointer; color: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)}; font-weight: 700; + margin-bottom: 8px; &:hover { opacity: 0.85; @@ -130,13 +131,13 @@ export const ExpandResourcesHeader = styled.div` ` export const StyledResourceList = styled.div` - padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; & + & { + padding-top: 16px; margin-top: 16px; border-top: 1px solid ${(props) => transparentize(0.8, props.theme.sidebar.foreground)}; diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 6e41340..9eee85c 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -25,13 +25,17 @@ export const Sidebar: FC>> = ( return ( - - The -
- Programmer's -
- Hangout - + + + + + + The Programmer's +
+ Hangout + + + {children} diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx index a3dc57f..76a60a6 100644 --- a/src/components/Sidebar/styles.tsx +++ b/src/components/Sidebar/styles.tsx @@ -2,6 +2,7 @@ import { Link } from "gatsby" import styled, { css } from "styled-components" import { transparentize } from "polished" import { fontFamily } from "../../design/typography" +import TPHLogo from "../../images/tph-logo" export const SidebarWrapper = styled.div` box-sizing: border-box; @@ -29,21 +30,43 @@ export const SidebarWrapper = styled.div` } ` -export const Title = styled(Link)` - display: block; - color: ${(props) => props.theme.sidebar.foreground}; - font-size: 30px; - line-height: 34px; - font-weight: 700; - padding: 20px 0 0 20px; +export const Header = styled(Link)` + display: flex; + align-items: stretch; text-decoration: none; - font-family: ${fontFamily.header}; - &:hover { + &:hover > * { opacity: 0.85; } ` +export const Logo = styled.div` + display: flex; + justify-content: center; + align-items: center; + background: #0b0f13; + width: 74px; + height: 74px; + flex: 0 0 74px; +` + +export const StyledLogo = styled(TPHLogo)` + height: 50px; +` + +export const Title = styled.div` + background: #263440; + display: flex; + flex: 1 0 auto; + align-items: center; + color: ${(props) => transparentize(0.1, props.theme.sidebar.foreground)}; + font-size: 20px; + line-height: 24px; + font-weight: 700; + padding-left: 20px; + font-family: ${fontFamily.header}; +` + export const Inner = styled.div` padding: 20px 0 30px 20px; ` diff --git a/src/components/Waves/styles.tsx b/src/components/Waves/styles.tsx index 7fdc515..e48260b 100644 --- a/src/components/Waves/styles.tsx +++ b/src/components/Waves/styles.tsx @@ -1,6 +1,6 @@ import styled, { css } from "styled-components" -import WavesBottom from "../../images/waves-bot.svg" -import WavesTop from "../../images/waves-top.svg" +import WavesBottom from "../../images/waves-bot" +import WavesTop from "../../images/waves-top" const waves = css` display: block; diff --git a/src/design/themes.ts b/src/design/themes.ts index 6609925..10ee8f8 100644 --- a/src/design/themes.ts +++ b/src/design/themes.ts @@ -30,12 +30,12 @@ export const darkTheme: ITheme = { ...baseColors, name: "dark", sidebar: { - background: "#22323f", + background: "#19222A", foreground: "#FFFFFF", active: "#00FCFF", }, main: { - background: "#16212b", + background: "#202C36", foreground: "#FFFFFF", link: "#04B0A6", }, diff --git a/src/hooks/useId.tsx b/src/hooks/useId.tsx new file mode 100644 index 0000000..4363056 --- /dev/null +++ b/src/hooks/useId.tsx @@ -0,0 +1,14 @@ +import { v4 as uuidV4 } from "uuid" +import { useState } from "react" + +export const useId = () => { + // Utilize useState instead of useMemo because React + // makes no guarantees that the memo store is durable + const [id] = useState(() => { + return uuidV4() + }) + + return id +} + +export default useId diff --git a/src/images/circles.svg b/src/images/circles.svg deleted file mode 100644 index 05b1199..0000000 --- a/src/images/circles.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/circles.tsx b/src/images/circles.tsx new file mode 100644 index 0000000..024ad16 --- /dev/null +++ b/src/images/circles.tsx @@ -0,0 +1,15 @@ +import React from "react" + +const Circles: React.FC = (props) => { + return ( + + + + ) +} + +export default Circles diff --git a/src/images/discord-logo.svg b/src/images/discord-logo.svg deleted file mode 100644 index 4913c64..0000000 --- a/src/images/discord-logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/images/discord-logo.tsx b/src/images/discord-logo.tsx new file mode 100644 index 0000000..819ece6 --- /dev/null +++ b/src/images/discord-logo.tsx @@ -0,0 +1,22 @@ +import React from "react" + +const DiscordLogo: React.FC = (props) => { + return ( + + + + + ) +} + +export default DiscordLogo diff --git a/src/images/jetbrains-logo.svg b/src/images/jetbrains-logo.svg deleted file mode 100644 index 5d2bffb..0000000 --- a/src/images/jetbrains-logo.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/jetbrains-logo.tsx b/src/images/jetbrains-logo.tsx new file mode 100644 index 0000000..192944e --- /dev/null +++ b/src/images/jetbrains-logo.tsx @@ -0,0 +1,88 @@ +import React from "react" +import useId from "../hooks/useId" + +const JetbrainsLogo: React.FC = (props) => { + const id = useId() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default JetbrainsLogo diff --git a/src/images/tph-logo.svg b/src/images/tph-logo.svg deleted file mode 100644 index fa57c74..0000000 --- a/src/images/tph-logo.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/tph-logo.tsx b/src/images/tph-logo.tsx new file mode 100644 index 0000000..b2d8332 --- /dev/null +++ b/src/images/tph-logo.tsx @@ -0,0 +1,39 @@ +import React from "react" +import useId from "../hooks/useId" + +const TPHLogo: React.FC = (props) => { + const id = useId() + + return ( + + + + + + + + + + + + + ) +} + +export default TPHLogo diff --git a/src/images/waves-bot.svg b/src/images/waves-bot.svg deleted file mode 100644 index 15c054c..0000000 --- a/src/images/waves-bot.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/waves-bot.tsx b/src/images/waves-bot.tsx new file mode 100644 index 0000000..f571db3 --- /dev/null +++ b/src/images/waves-bot.tsx @@ -0,0 +1,94 @@ +import React from "react" +import useId from "../hooks/useId" + +const WavesBot: React.FC = (props) => { + const id = useId() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default WavesBot diff --git a/src/images/waves-top.svg b/src/images/waves-top.svg deleted file mode 100644 index d91ab5f..0000000 --- a/src/images/waves-top.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/waves-top.tsx b/src/images/waves-top.tsx new file mode 100644 index 0000000..a0898f4 --- /dev/null +++ b/src/images/waves-top.tsx @@ -0,0 +1,100 @@ +import React from "react" +import useId from "../hooks/useId" + +const WavesTop: React.FC = (props) => { + const id = useId() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default WavesTop