From 850471394ef05b09b025f006612e21ed8b95540c Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Thu, 27 Aug 2020 13:28:59 -0400 Subject: [PATCH 1/4] ui: rework sidebar heading --- src/components/ResourcesSidebar/styles.tsx | 4 +-- src/components/Sidebar/index.tsx | 18 ++++++---- src/components/Sidebar/styles.tsx | 41 +++++++++++++++++----- src/design/themes.ts | 4 +-- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index fbf752d..edf6c22 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` @@ -130,13 +130,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..5a7c0e9 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.svg" 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/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", }, From 59a965911aca9f9b62321fe6224abe5586da94ad Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Wed, 2 Sep 2020 06:36:07 -0400 Subject: [PATCH 2/4] refact: convert all svg images to React components --- src/components/DiscordButton/styles.tsx | 2 +- src/components/HeaderBarebone/styles.tsx | 2 +- src/components/Home/styles.tsx | 2 +- src/components/HomePartner/styles.tsx | 2 +- src/components/MobileHeader/styles.tsx | 2 +- src/components/Sidebar/styles.tsx | 2 +- src/components/Waves/styles.tsx | 4 +- src/images/circles.svg | 3 - src/images/circles.tsx | 15 ++++ src/images/discord-logo.svg | 4 - src/images/discord-logo.tsx | 22 ++++++ src/images/jetbrains-logo.svg | 31 -------- src/images/jetbrains-logo.tsx | 85 +++++++++++++++++++++ src/images/tph-logo.svg | 12 --- src/images/tph-logo.tsx | 36 +++++++++ src/images/waves-bot.svg | 31 -------- src/images/waves-bot.tsx | 91 ++++++++++++++++++++++ src/images/waves-top.svg | 33 -------- src/images/waves-top.tsx | 97 ++++++++++++++++++++++++ 19 files changed, 354 insertions(+), 122 deletions(-) delete mode 100644 src/images/circles.svg create mode 100644 src/images/circles.tsx delete mode 100644 src/images/discord-logo.svg create mode 100644 src/images/discord-logo.tsx delete mode 100644 src/images/jetbrains-logo.svg create mode 100644 src/images/jetbrains-logo.tsx delete mode 100644 src/images/tph-logo.svg create mode 100644 src/images/tph-logo.tsx delete mode 100644 src/images/waves-bot.svg create mode 100644 src/images/waves-bot.tsx delete mode 100644 src/images/waves-top.svg create mode 100644 src/images/waves-top.tsx 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/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx index 5a7c0e9..76a60a6 100644 --- a/src/components/Sidebar/styles.tsx +++ b/src/components/Sidebar/styles.tsx @@ -2,7 +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.svg" +import TPHLogo from "../../images/tph-logo" export const SidebarWrapper = styled.div` box-sizing: border-box; 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/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..2a8b620 --- /dev/null +++ b/src/images/jetbrains-logo.tsx @@ -0,0 +1,85 @@ +import React from "react" + +const JetbrainsLogo: React.FC = (props) => { + 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..5ac4ba6 --- /dev/null +++ b/src/images/tph-logo.tsx @@ -0,0 +1,36 @@ +import React from "react" + +const TPHLogo: React.FC = (props) => { + 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..ca01f4e --- /dev/null +++ b/src/images/waves-bot.tsx @@ -0,0 +1,91 @@ +import React from "react" + +const WavesBot: React.FC = (props) => { + 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..d2fc4db --- /dev/null +++ b/src/images/waves-top.tsx @@ -0,0 +1,97 @@ +import React from "react" + +const WavesTop: React.FC = (props) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default WavesTop From ae7ebddb1be3d0de1bf1c855cbc96c5f63dd8391 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Wed, 2 Sep 2020 07:16:43 -0400 Subject: [PATCH 3/4] fix: give svgs unique ids to avoid clash --- package-lock.json | 58 +++++++++++++++++++++++++++++++++-- package.json | 4 ++- src/hooks/useId.tsx | 14 +++++++++ src/images/jetbrains-logo.tsx | 19 +++++++----- src/images/tph-logo.tsx | 7 +++-- src/images/waves-bot.tsx | 23 ++++++++------ src/images/waves-top.tsx | 23 ++++++++------ 7 files changed, 114 insertions(+), 34 deletions(-) create mode 100644 src/hooks/useId.tsx 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/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/jetbrains-logo.tsx b/src/images/jetbrains-logo.tsx index 2a8b620..192944e 100644 --- a/src/images/jetbrains-logo.tsx +++ b/src/images/jetbrains-logo.tsx @@ -1,22 +1,25 @@ import React from "react" +import useId from "../hooks/useId" const JetbrainsLogo: React.FC = (props) => { + const id = useId() + return ( @@ -30,7 +33,7 @@ const JetbrainsLogo: React.FC = (props) => { /> { { { { + const id = useId() + return ( { /> { + const id = useId() + return ( { viewBox="0 0 1825 862" {...props} > - + { { { { + const id = useId() + return ( { {...props} > { > - + { { { Date: Wed, 2 Sep 2020 07:33:29 -0400 Subject: [PATCH 4/4] ui: tweak spacing on expand resources --- src/components/ResourcesSidebar/styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index edf6c22..ea36e88 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/src/components/ResourcesSidebar/styles.tsx @@ -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;