Merge pull request #190 from h3poteto/feat/color-design

Adjust background colors
h3poteto · Dec 17, 2022 · a09a47a · a09a47a
2 parents b9b5269 + 2f388aa
commit a09a47a
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 42 deletions.
diff --git a/src/App.css b/src/App.css
@@ -184,3 +184,7 @@
  transform: rotate(0deg);
  }
 }
+
+.attachment {
+ cursor: "pointer";
+}
diff --git a/src/components/compose/Compose.tsx b/src/components/compose/Compose.tsx
@@ -68,8 +68,8 @@ const Compose: React.FC<Props> = props => {
  }
 
  return (
- <Container>
- <Header style={{ borderBottom: '1px solid var(--rs-divider-border)', backgroundColor: 'var(--rs-sidenav-default-bg)' }}>
+ <Container style={{ backgroundColor: 'var(--rs-gray-700)', height: '100%' }}>
+ <Header style={{ borderBottom: '1px solid var(--rs-divider-border)', backgroundColor: 'var(--rs-gray-600)' }}>
  <FlexboxGrid justify="space-between" align="middle">
  <FlexboxGrid.Item style={{ lineHeight: '53px', paddingLeft: '12px', fontSize: '18px' }}>New Status</FlexboxGrid.Item>
  <FlexboxGrid.Item>
@@ -79,7 +79,7 @@ const Compose: React.FC<Props> = props => {
  </FlexboxGrid.Item>
  </FlexboxGrid>
  </Header>
- <Content style={{ height: '100%', margin: '12px' }}>
+ <Content style={{ height: '100%', margin: '12px', backgroundColor: 'var(--rs-gray-700)' }}>
  <div style={{ fontSize: '1.2em', padding: '12px 0' }}>From</div>
  <FlexboxGrid>
  <FlexboxGrid.Item>

diff --git a/src/components/compose/Status.tsx b/src/components/compose/Status.tsx
@@ -149,7 +149,7 @@ const Status: React.FC<Props> = props => {
  </Whisper>
  </Form.Group>
  <Form.Group>
- <ButtonToolbar style={{ textAlign: 'right' }}>
+ <ButtonToolbar style={{ justifyContent: 'flex-end' }}>
  <Button appearance="primary" type="submit" onClick={handleSubmit} loading={loading}>
  Post
  </Button>

diff --git a/src/components/detail/Status.tsx b/src/components/detail/Status.tsx
@@ -73,14 +73,14 @@ const StatusDetail: React.FC<Props> = props => {
  )
 
  return (
- <Container>
- <Header style={{ borderBottom: '1px solid var(--rs-divider-border)', backgroundColor: 'var(--rs-sidenav-default-bg)' }}>
+ <Container style={{ height: '100%', borderLeft: '1px solid var(--rs-gray-600)' }}>
+ <Header style={{ borderBottom: '4px solid var(--rs-gray-800)', backgroundColor: 'var(--rs-gray-700)' }}>
  <Button appearance="link" onClick={props.onClose}>
  <Icon as={BsX} style={{ fontSize: '1.4em' }} />
  </Button>
  </Header>
- <Content style={{ height: '100%' }}>
- <List hover style={{ width: '340px', height: '100%' }}>
+ <Content style={{ height: '100%', backgroundColor: 'var(--rs-gray-800)' }}>
+ <List hover style={{ width: '340px' }}>
  {[...ancestors, status, ...descendants].map(status => (
  <div key={status.id}>
  <Status
@@ -91,6 +91,7 @@ const StatusDetail: React.FC<Props> = props => {
  openMedia={props.openMedia}
  setReplyOpened={() => null}
  setStatusDetail={props.setStatusDetail}
+ style={{ backgroundColor: 'var(--rs-gray-700)' }}
  />
  </div>
  ))}

diff --git a/src/components/timelines/New.tsx b/src/components/timelines/New.tsx
@@ -47,7 +47,7 @@ const AuthorizedTimelines: React.FC<AuthorizedProps> = props => {
 
  return (
  <div>
- <List.Item index={3} onClick={() => select('home', null)}>
+ <List.Item index={3} onClick={() => select('home', null)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsHouseDoor} />
@@ -57,7 +57,7 @@ const AuthorizedTimelines: React.FC<AuthorizedProps> = props => {
  </FlexboxGrid.Item>
  </FlexboxGrid>
  </List.Item>
- <List.Item index={4} onClick={() => select('notifications', null)}>
+ <List.Item index={4} onClick={() => select('notifications', null)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsBell} />
@@ -67,7 +67,7 @@ const AuthorizedTimelines: React.FC<AuthorizedProps> = props => {
  </FlexboxGrid.Item>
  </FlexboxGrid>
  </List.Item>
- <List.Item index={5} onClick={() => select('favourite', null)}>
+ <List.Item index={5} onClick={() => select('favourite', null)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsStar} />
@@ -83,7 +83,7 @@ const AuthorizedTimelines: React.FC<AuthorizedProps> = props => {
  </List.Item>
  )}
  {lists.map((list, index) => (
- <List.Item key={index} index={6 + index} onClick={() => select(list.title, list.id)}>
+ <List.Item key={index} index={6 + index} onClick={() => select(list.title, list.id)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsListUl} />
@@ -132,8 +132,7 @@ const New: React.FC<Props> = props => {
  minWidth: '240px',
  display: 'flex',
  justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: 'var(--rs-bg-overlay)'
+ alignItems: 'center'
  }}
  >
  <ButtonToolbar>
@@ -154,13 +153,10 @@ const New: React.FC<Props> = props => {
  }
 
  const selectTimeline = () => (
- <div
- className="add-timeline"
- style={{ width: '240px', minWidth: '240px', display: 'flex', flexDirection: 'column', backgroundColor: 'var(--rs-bg-overlay)' }}
- >
+ <div className="add-timeline" style={{ width: '240px', minWidth: '240px', display: 'flex', flexDirection: 'column' }}>
  <Container>
- <Header>
- <FlexboxGrid align="middle" justify="space-between" style={{ backgroundColor: 'var(--rs-bg-card)' }}>
+ <Header style={{ backgroundColor: 'var(--rs-gray-700)' }}>
+ <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item style={{ paddingLeft: '8px', lineHeight: '52px' }}>@{server.domain}</FlexboxGrid.Item>
  <FlexboxGrid.Item>
  <Button appearance="link" onClick={back}>
@@ -172,7 +168,7 @@ const New: React.FC<Props> = props => {
  </Header>
  <Content>
  <List hover>
- <List.Item index={1} onClick={() => select('local', null)}>
+ <List.Item index={1} onClick={() => select('local', null)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsPeople} />
@@ -182,7 +178,7 @@ const New: React.FC<Props> = props => {
  </FlexboxGrid.Item>
  </FlexboxGrid>
  </List.Item>
- <List.Item index={2} onClick={() => select('public', null)}>
+ <List.Item index={2} onClick={() => select('public', null)} style={{ cursor: 'pointer' }}>
  <FlexboxGrid align="middle">
  <FlexboxGrid.Item colspan={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <Icon as={BsGlobe2} />

diff --git a/src/components/timelines/Notifications.tsx b/src/components/timelines/Notifications.tsx
@@ -146,9 +146,9 @@ const Notifications: React.FC<Props> = props => {
  }, [firstItemIndex, notifications, setNotifications, unreadNotifications])
 
  return (
- <div style={{ width: '340px', minWidth: '340px' }}>
+ <div style={{ width: '340px', minWidth: '340px', margin: '0 4px' }}>
  <Container style={{ height: 'calc(100% - 8px)', overflowY: 'scroll' }}>
- <Header>
+ <Header style={{ backgroundColor: 'var(--rs-gray-800)' }}>
  <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item>
  <FlexboxGrid align="middle">

diff --git a/src/components/timelines/Timeline.tsx b/src/components/timelines/Timeline.tsx
@@ -203,9 +203,9 @@ const Timeline: React.FC<Props> = props => {
  }, [firstItemIndex, statuses, setStatuses, unreadStatuses])
 
  return (
- <div style={{ width: '340px', minWidth: '340px' }}>
+ <div style={{ width: '340px', minWidth: '340px', margin: '0 4px' }}>
  <Container style={{ height: 'calc(100% - 8px)', overflowY: 'scroll' }}>
- <Header>
+ <Header style={{ backgroundColor: 'var(--rs-gray-800)' }}>
  <FlexboxGrid align="middle" justify="space-between">
  <FlexboxGrid.Item>
  <FlexboxGrid align="middle">
@@ -250,7 +250,6 @@ const Timeline: React.FC<Props> = props => {
  ) : (
  <Content style={{ height: 'calc(100% - 54px)' }}>
  <List
- hover
  style={{
  width: '340px',
  height: '100%'

diff --git a/src/components/timelines/notification/Notification.tsx b/src/components/timelines/notification/Notification.tsx
@@ -46,7 +46,9 @@ const notification = (props: Props) => {
 }
 
 const Notification: React.FC<Props> = props => {
- return <List.Item style={{ paddingTop: '2px', paddingBottom: '2px' }}>{notification(props)}</List.Item>
+ return (
+ <List.Item style={{ paddingTop: '2px', paddingBottom: '2px', backgroundColor: 'var(--rs-gray-800)' }}>{notification(props)}</List.Item>
+ )
 }
 
 export default Notification
diff --git a/src/components/timelines/status/Attachments.tsx b/src/components/timelines/status/Attachments.tsx
@@ -48,21 +48,21 @@ const Attachment: React.FC<AttachmentProps> = props => {
  switch (media.type) {
  case 'gifv':
  return (
- <Tag>
+ <Tag className="attachment">
  <Icon as={BsCameraVideo} style={{ fontSize: '1.2em', paddingRight: '4px' }} />
  GIF
  </Tag>
  )
  case 'video':
  return (
- <Tag>
+ <Tag className="attachment">
  <Icon as={BsCameraVideo} style={{ fontSize: '1.2em', paddingRight: '4px' }} />
  VIDEO
  </Tag>
  )
  case 'audio':
  return (
- <Tag>
+ <Tag className="attachment">
  <Icon as={BsVolumeUp} style={{ fontSize: '1.2em', paddingRight: '4px' }} />
  AUDIO
  </Tag>
@@ -83,7 +83,7 @@ const Attachment: React.FC<AttachmentProps> = props => {
  src={media.preview_url}
  alt={media.description ? media.description : media.id}
  onClick={() => props.openMedia(media)}
- style={{ objectFit: 'cover' }}
+ style={{ objectFit: 'cover', cursor: 'pointer', borderRadius: '4px' }}
  />
  </div>
  )

diff --git a/src/components/timelines/status/Body.tsx b/src/components/timelines/status/Body.tsx
@@ -1,12 +1,12 @@
 import { Entity } from 'megalodon'
-import { useState } from 'react'
+import { HTMLAttributes, useState } from 'react'
 import { Button } from 'rsuite'
 import emojify from 'src/utils/emojify'
 
 type Props = {
  status: Entity.Status
  onClick: (e: any) => void
-}
+} & HTMLAttributes<HTMLElement>
 
 const Body: React.FC<Props> = props => {
  const [spoilered, setSpoilered] = useState<boolean>(props.status.spoiler_text.length > 0)
@@ -32,7 +32,7 @@ const Body: React.FC<Props> = props => {
  }
 
  return (
- <div>
+ <div style={{ cursor: 'pointer' }}>
  {spoiler()}
  {!spoilered && (
  <div

diff --git a/src/components/timelines/status/Status.tsx b/src/components/timelines/status/Status.tsx
@@ -1,4 +1,4 @@
-import { MouseEventHandler, useEffect, useState } from 'react'
+import { HTMLAttributes, MouseEventHandler, useEffect, useState } from 'react'
 import { Entity, MegalodonInterface } from 'megalodon'
 import { FlexboxGrid, List, Avatar } from 'rsuite'
 import { Icon } from '@rsuite/icons'
@@ -21,7 +21,7 @@ type Props = {
  openMedia: (media: Entity.Attachment) => void
  setReplyOpened: (opened: boolean) => void
  setStatusDetail: (status: Entity.Status, server: Server, client: MegalodonInterface) => void
-}
+} & HTMLAttributes<HTMLElement>
 
 const Status: React.FC<Props> = props => {
  const { client } = props
@@ -44,7 +44,7 @@ const Status: React.FC<Props> = props => {
  }
 
  return (
- <List.Item style={{ paddingTop: '2px', paddingBottom: '2px' }}>
+ <List.Item style={{ paddingTop: '2px', paddingBottom: '2px', backgroundColor: 'var(--rs-gray-800)' }} {...props}>
  {rebloggedHeader(props.status)}
  <FlexboxGrid>
  {/** icon **/}
@@ -64,7 +64,11 @@ const Status: React.FC<Props> = props => {
  </FlexboxGrid.Item>
  {/** timestamp **/}
  <FlexboxGrid.Item colspan={6} style={{ textAlign: 'right', color: 'var(--rs-text-tertiary)' }}>
- <Time time={status.created_at} />
+ <Time
+ time={status.created_at}
+ style={{ cursor: 'pointer' }}
+ onClick={() => props.setStatusDetail(props.status, props.server, props.client)}
+ />
  </FlexboxGrid.Item>
  </FlexboxGrid>
  </div>

diff --git a/src/components/utils/Time.tsx b/src/components/utils/Time.tsx
@@ -1,16 +1,23 @@
 import moment from 'moment'
+import { HTMLAttributes } from 'react'
 
 type Props = {
  time: string
-}
+ onClick?: (e: any) => void
+} & HTMLAttributes<HTMLElement>
 
 const parseDatetime = (timestamp: string) => {
  return moment(timestamp).fromNow(true)
 }
 
 const Time: React.FC<Props> = props => {
  return (
- <time dateTime={moment(props.time).format('YYYY-MM-DD HH:mm:ss')} title={moment(props.time).format('LLLL')}>
+ <time
+ dateTime={moment(props.time).format('YYYY-MM-DD HH:mm:ss')}
+ title={moment(props.time).format('LLLL')}
+ style={props.style}
+ onClick={props.onClick}
+ >
  {parseDatetime(props.time)}
  </time>
  )

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -96,7 +96,7 @@ function App() {
  }
 
  return (
- <div className="container index">
+ <div className="container index" style={{ backgroundColor: 'var(--rs-gray-900)' }}>
  <NewServer
  open={modalState.newServer.opened}
  onClose={() => dispatch({ target: 'newServer', value: false, object: null })}