From b966fc92b79e0fc0cc1fc6050fb53208750b8c82 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Tue, 5 Jan 2021 23:31:27 -0500 Subject: [PATCH] more ui --- src/App.css | 15 ++++++++++++++ src/components/ArticleList.tsx | 3 ++- src/components/ArticleRow.tsx | 28 ++++++++++++++------------ src/components/ClickableLink.tsx | 25 +++++++++++++++++++++++ src/components/FlexColumn.tsx | 9 +++++++++ src/components/Footer.tsx | 12 +++++------ src/components/GetInvolvedRow.tsx | 12 ----------- src/components/Hero.tsx | 10 ++++----- src/components/LocalLinkClickable.tsx | 15 -------------- src/components/MemberRow.tsx | 15 +++++++------- src/components/ParagraphWithHeader.tsx | 20 ++++++++++++++++++ src/components/RecentNews.tsx | 20 +++++++++--------- src/components/RowItemHeader.tsx | 7 +++++++ src/components/Segment.tsx | 27 ++++++++++++++++++------- src/components/StrongParagraph.tsx | 7 +++++++ src/css/get-involved.css | 17 ---------------- src/css/mission.css | 14 ------------- src/pages/initiatives.tsx | 5 +++-- src/pages/involved.tsx | 19 ++++++++++++----- src/pages/mission.tsx | 18 +++-------------- src/pages/newsArticle.tsx | 6 +++--- src/pages/officers.tsx | 1 - 22 files changed, 169 insertions(+), 136 deletions(-) create mode 100644 src/components/ClickableLink.tsx create mode 100644 src/components/FlexColumn.tsx delete mode 100644 src/components/GetInvolvedRow.tsx delete mode 100644 src/components/LocalLinkClickable.tsx create mode 100644 src/components/ParagraphWithHeader.tsx create mode 100644 src/components/RowItemHeader.tsx create mode 100644 src/components/StrongParagraph.tsx delete mode 100644 src/css/get-involved.css diff --git a/src/App.css b/src/App.css index f581b07..0f7d6ce 100644 --- a/src/App.css +++ b/src/App.css @@ -50,4 +50,19 @@ a.blue-button { .clickable-link { text-decoration: underline; color: #38A3BD; +} + +.strong-paragraph { + color: #444; + font-size: 22px; + line-height: 33px; + font-weight: 300; +} + +.paragraph-with-header-header { + font-size: 1.5rem; + font-weight: bold; + text-align: right; + display: block; + padding-right: 2em; } \ No newline at end of file diff --git a/src/components/ArticleList.tsx b/src/components/ArticleList.tsx index b451fbd..4f9386e 100644 --- a/src/components/ArticleList.tsx +++ b/src/components/ArticleList.tsx @@ -3,6 +3,7 @@ import ArticleRow from './ArticleRow'; import sanity from '../sanity'; import '../css/article.css'; import BlueButton from './BlueButton'; +import Centered from './Centered'; export default function ArticleList() { let [articles, setArticles] = React.useState([]); @@ -64,7 +65,7 @@ export default function ArticleList() { return (
{articleList} -
{bottomComponent}
+ {bottomComponent}
); } diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx index bf0ff4e..8c167cc 100644 --- a/src/components/ArticleRow.tsx +++ b/src/components/ArticleRow.tsx @@ -1,16 +1,18 @@ -import React from 'react'; +import React, { DetailedHTMLProps } from 'react'; import imageUrl from '../lib/imageUrl'; -import { Link } from 'react-router-dom'; import '../css/article.css'; +import ClickableLink from './ClickableLink'; export default function ArticleRow({ article, }: { article: SGA.ArticleDocument; }) { - let thumbUrl: string | null = null; + let thumbnail: React.ReactElement | null = null; if (article.thumbnail) { - thumbUrl = imageUrl(article.thumbnail).url(); + thumbnail = ( + {article.title} + ); } const slug = (s: string) => { @@ -19,22 +21,22 @@ export default function ArticleRow({ return (
-
- {thumbUrl ? {article.title} : null} -
+
{thumbnail}
-

{article.title}

- + + {article.publish_date}
- {article.author || 'No author'} + + {article.author ?? 'No author'}
-

{article.summary}

+ +

{article.summary}

); diff --git a/src/components/ClickableLink.tsx b/src/components/ClickableLink.tsx new file mode 100644 index 0000000..fb946b0 --- /dev/null +++ b/src/components/ClickableLink.tsx @@ -0,0 +1,25 @@ +import { Link } from 'react-router-dom'; + +export default function ClickableLink({ + href, + children, + target, +}: { + href: string; + children: React.ReactNode; + target?: string; +}) { + if (href.startsWith('http')) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } +} diff --git a/src/components/FlexColumn.tsx b/src/components/FlexColumn.tsx new file mode 100644 index 0000000..98de601 --- /dev/null +++ b/src/components/FlexColumn.tsx @@ -0,0 +1,9 @@ +export default function FlexColumn({ + children, +}: { + children: React.ReactNode; +}) { + return ( +
{children}
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 3aac7ae..88c13cf 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -17,13 +17,11 @@ export default function Footer() { alt='Footer Banner' />
- {footer.columns.map((col, index) => { - return ( -
- -
- ); - })} + {footer.columns.map((col, index) => ( +
+ +
+ ))}
); diff --git a/src/components/GetInvolvedRow.tsx b/src/components/GetInvolvedRow.tsx deleted file mode 100644 index e9cd1b4..0000000 --- a/src/components/GetInvolvedRow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export default function GetInvolvedRow({ way }: { way: SGA.GetInvolvedWay }) { - return ( -
-
-

{way.title}

-
-
-

{way.text}

-
-
- ); -} diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 511f030..c947ac0 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,14 +1,12 @@ import '../css/hero.css'; -type HeroProps = { - imageURL?: string; - heading?: string; -}; - export default function Hero({ imageURL = '/images/hero.jpg', heading = 'TJHSST SGA', -}: HeroProps) { +}: { + imageURL?: string; + heading?: string; +}) { return (
{heading} diff --git a/src/components/LocalLinkClickable.tsx b/src/components/LocalLinkClickable.tsx deleted file mode 100644 index 2e0ea9b..0000000 --- a/src/components/LocalLinkClickable.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Link } from 'react-router-dom'; - -export default function LocalLinkClickable({ - to, - children, -}: { - to: string; - children: React.ReactNode; -}) { - return ( - - {children} - - ); -} diff --git a/src/components/MemberRow.tsx b/src/components/MemberRow.tsx index e4faac6..047df2d 100644 --- a/src/components/MemberRow.tsx +++ b/src/components/MemberRow.tsx @@ -1,21 +1,20 @@ import imageUrl from '../lib/imageUrl'; import '../css/article.css'; +import RowItemHeader from './RowItemHeader'; export default function MemberRow({ member }: { member: SGA.MemberDocument }) { - let thumbUrl: string | null = null; + let thumbnail: React.ReactElement | null = null; if (member.profile_photo) { - thumbUrl = imageUrl(member.profile_photo).url(); + thumbnail = ( + {member.name} + ); } return (
-
- {thumbUrl ? ( - {member.name} - ) : null} -
+
{thumbnail}
-

{member.name}

+ {member.name} {member.role}, {member.year} diff --git a/src/components/ParagraphWithHeader.tsx b/src/components/ParagraphWithHeader.tsx new file mode 100644 index 0000000..271b4e5 --- /dev/null +++ b/src/components/ParagraphWithHeader.tsx @@ -0,0 +1,20 @@ +import StrongParagraph from './StrongParagraph'; + +export default function ParagraphWithHeader({ + title, + body, +}: { + title: string; + body: string; +}) { + return ( +
+
+ {title} +
+
+ {body} +
+
+ ); +} diff --git a/src/components/RecentNews.tsx b/src/components/RecentNews.tsx index e95d1a4..136b325 100644 --- a/src/components/RecentNews.tsx +++ b/src/components/RecentNews.tsx @@ -2,22 +2,22 @@ import React from 'react'; import { Link } from 'react-router-dom'; import useQuery from '../hooks/useQuery'; import ArticleRow from './ArticleRow'; +import PrimaryHeader from './PrimaryHeader'; export default function RecentNews() { - let news = useQuery( - `*[_type == 'article'] | order (publish_date desc, title) [0...3]` - ); + const articles = + useQuery( + `*[_type == 'article'] | order (publish_date desc, title) [0...3]` + ) ?? []; - if (!news) { - return null; - } + const articleList = articles.map((article) => ( + + )); return (
-

Recent News

- {news.map((article) => { - return ; - })} + Recent News + {articleList} All News
); diff --git a/src/components/RowItemHeader.tsx b/src/components/RowItemHeader.tsx new file mode 100644 index 0000000..ab3c4f6 --- /dev/null +++ b/src/components/RowItemHeader.tsx @@ -0,0 +1,7 @@ +export default function RowItemHeader({ + children, +}: { + children: React.ReactNode; +}) { + return

{children}

; +} diff --git a/src/components/Segment.tsx b/src/components/Segment.tsx index d971e8b..7b0d1f9 100644 --- a/src/components/Segment.tsx +++ b/src/components/Segment.tsx @@ -1,15 +1,28 @@ -import { Link } from 'react-router-dom'; import '../css/segment.css'; +import BlueButtonLink from './BlueButtonLink'; -export default function InfoColumn({ title, content, imageURL, infoURL }) { +function SegmentHeader({ children }: { children: React.ReactNode }) { + return ( +

+ {children} +

+ ); +} + +export default function Segment({ title, content, imageURL, infoURL }) { return (
-

{title}

+ {title} {title} -

{content}

- - MORE INFO - +

{content}

+ + MORE INFO
); } diff --git a/src/components/StrongParagraph.tsx b/src/components/StrongParagraph.tsx new file mode 100644 index 0000000..2c87b1d --- /dev/null +++ b/src/components/StrongParagraph.tsx @@ -0,0 +1,7 @@ +export default function StrongParagraph({ + children, +}: { + children: React.ReactNode; +}) { + return

{children}

; +} diff --git a/src/css/get-involved.css b/src/css/get-involved.css deleted file mode 100644 index a46a6c8..0000000 --- a/src/css/get-involved.css +++ /dev/null @@ -1,17 +0,0 @@ -.get-involved-body { - color: #444; - font-size: 22px; - line-height: 33px; - font-weight: 300; - text-align: left; -} - -.get-involved-title { - flex: 1; - text-align: right; - padding-right: 2em; -} - -.get-involved-description { - flex: 3; -} \ No newline at end of file diff --git a/src/css/mission.css b/src/css/mission.css index a6984af..e263960 100644 --- a/src/css/mission.css +++ b/src/css/mission.css @@ -10,20 +10,6 @@ line-height: 44px; } -.mission-header { - font-size: 2rem; - font-weight: bold; - text-align: right; - display: block; - padding-right: 2em; -} - -.mission-para { - font-size: 22px; - line-height: 33px; - font-weight: 300; -} - .mission-quote { display: flex; flex-direction: column; diff --git a/src/pages/initiatives.tsx b/src/pages/initiatives.tsx index f5138d1..1e0c3c0 100644 --- a/src/pages/initiatives.tsx +++ b/src/pages/initiatives.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import FlexColumn from '../components/FlexColumn'; import Hero from '../components/Hero'; import InitiativeRow from '../components/InitiativeRow'; import useQuery from '../hooks/useQuery'; @@ -11,11 +12,11 @@ export default function Initiatives() { <>
-
+ {initiatives.map((initiative) => ( ))} -
+
); diff --git a/src/pages/involved.tsx b/src/pages/involved.tsx index 9074fbb..0d08f1a 100644 --- a/src/pages/involved.tsx +++ b/src/pages/involved.tsx @@ -1,10 +1,10 @@ import { SanityDocument } from '@sanity/client'; import React from 'react'; import BlueButtonLink from '../components/BlueButtonLink'; -import GetInvolvedRow from '../components/GetInvolvedRow'; import Hero from '../components/Hero'; import ParagraphHeader from '../components/ParagraphHeader'; -import '../css/get-involved.css'; +import ParagraphWithHeader from '../components/ParagraphWithHeader'; +import StrongParagraph from '../components/StrongParagraph'; import sanity from '../sanity'; export default function GetInvolved() { @@ -23,25 +23,34 @@ export default function GetInvolved() {
SGA Calendar +