M src/App.tsx => src/App.tsx +4 -2
@@ 62,8 62,10 @@ export const App = (): ReactElement | null => {
const displayApp = useAppSelector(({ displayApp }) => displayApp.display)
if (!displayApp) return null
+ const darkModeClass = darkMode ? 'dark' : 'light'
+
return (
- <>
+ <div className={`app-wrapper ${darkModeClass}`}>
<Switch>
<Route exact path='/:authorId'>
<ProfilePage darkMode={darkMode} />
@@ 76,6 78,6 @@ export const App = (): ReactElement | null => {
</Route>
</Switch>
<ModalSwitcher modal={modal} closeModal={() => dispatch(closeModal())} darkMode={darkMode} />
- </>
+ </div>
)
}
M src/components/MainPoint.tsx => src/components/MainPoint.tsx +0 -3
@@ 195,14 195,12 @@ const MainPoint = (props: AllProps): ReactElement => {
{!props.isDraft && (
<RespondButton
handleClick={handleRespondButtonClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
)}
{(referenceData !== undefined) && (
<ViewOriginalMessageButton
handleClick={handleViewOriginalMessageButtonClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
)}
@@ 211,7 209,6 @@ const MainPoint = (props: AllProps): ReactElement => {
handleClick={handleXButtonClick}
title='Delete point'
red
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
)}
M src/components/MessageListItem.tsx => src/components/MessageListItem.tsx +0 -1
@@ 140,7 140,6 @@ const MessageListItem = (props: AllProps): ReactElement => {
<ButtonGroup darkMode={props.darkMode}>
<PointsMoveButton
handleClick={handlePointsMoveButtonClick}
- darkMode={props.darkMode}
/>
</ButtonGroup>
</ButtonGroupWrapper>
M src/components/ModalContainer.tsx => src/components/ModalContainer.tsx +0 -1
@@ 73,7 73,6 @@ export const ModalContainer = ({
<XButton
handleClick={handleCloseButtonClick}
red={false}
- darkMode={darkMode}
/>
</XButtonContainer>
</ModalHeader>
M src/components/NewMessageButton.tsx => src/components/NewMessageButton.tsx +0 -1
@@ 107,7 107,6 @@ const NewMessageButton = (props: AllProps): ReactElement => {
<ButtonGroup darkMode={props.darkMode}>
<PointsMoveButton
handleClick={handlePointsMoveButtonClick}
- darkMode={props.darkMode}
/>
</ButtonGroup>
</ButtonGroupWrapper>
M src/components/ProfilePageTopBar.tsx => src/components/ProfilePageTopBar.tsx +0 -3
@@ 67,7 67,6 @@ const ProfilePageTopBar = ({ authorURL, darkMode }: Props): ReactElement => {
<PersonXButton
handleClick={openTrustModal}
title='View trust list (peer is distrusted)'
- darkMode={darkMode}
/>
)
} else if (isTrusted) {
@@ 75,7 74,6 @@ const ProfilePageTopBar = ({ authorURL, darkMode }: Props): ReactElement => {
<PersonCheckButton
handleClick={openTrustModal}
title='View trust list (peer is trusted)'
- darkMode={darkMode}
/>
)
} else {
@@ 83,7 81,6 @@ const ProfilePageTopBar = ({ authorURL, darkMode }: Props): ReactElement => {
<PersonAddButton
handleClick={handlePersonAddButtonClick}
title='Add to trust list'
- darkMode={darkMode}
/>
)
}
M src/components/RegionPoint.tsx => src/components/RegionPoint.tsx +0 -4
@@ 337,14 337,12 @@ const RegionPoint = (props: AllProps): ReactElement => {
{!props.isDraft && (
<RespondButton
handleClick={handleRespondButtonClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
)}
{(referenceData !== undefined) && (
<ViewOriginalMessageButton
handleClick={handleViewOriginalMessageButtonClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
)}
@@ 352,14 350,12 @@ const RegionPoint = (props: AllProps): ReactElement => {
<>
<SetMainPointButton
handleClick={handleSetMainPointButtonClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
<XButton
handleClick={handleXButtonClick}
title='Delete point'
red
- darkMode={props.darkMode}
isSelected={props.isSelected}
/>
</>
M src/components/SemanticScreenTopBar.tsx => src/components/SemanticScreenTopBar.tsx +0 -4
@@ 83,22 83,18 @@ const SemanticScreenTopBar = (props: AllProps): ReactElement => {
<>
<PublishButton
handleClick={handlePublishButtonClick}
- darkMode={props.darkMode}
/>
<XButton
handleClick={handleXButtonClick}
title='Delete message'
red
- darkMode={props.darkMode}
/>
<UndoButton
handleClick={handleUndoButtonClick}
- darkMode={props.darkMode}
disabled={!props.isUndoPossible}
/>
<RedoButton
handleClick={handleRedoButtonClick}
- darkMode={props.darkMode}
disabled={!props.isRedoPossible}
/>
</>
M src/components/TopBarContainer.tsx => src/components/TopBarContainer.tsx +1 -1
@@ 51,7 51,7 @@ const TopBarContainer = ({
<ButtonGroupWrapper>
<ButtonGroup darkMode={darkMode}>
{buttons}
- <SettingsButton handleClick={handleSettingsButtonClick} darkMode={darkMode} />
+ <SettingsButton handleClick={handleSettingsButtonClick} />
</ButtonGroup>
</ButtonGroupWrapper>
<Banner
M src/components/buttons/Button.tsx => src/components/buttons/Button.tsx +15 -57
@@ 17,75 17,33 @@
along with U4U. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { ReactElement } from 'react'
-import styled from 'styled-components'
-import { blackOrWhite } from '../../dataModels/pointUtils'
+import './button.scss'
-interface StyledProps {
+export const Button = (props: {
onClick: (e: React.MouseEvent) => void
- darkMode: boolean
isSelected?: boolean
disabled?: boolean
red?: boolean
children?: React.ReactNode
-}
-
-export const Button = (props: StyledProps): ReactElement => {
+}): ReactElement => {
+ let buttonClassName = 'button'
+ if (props.red !== undefined && props.red) {
+ buttonClassName += ' red'
+ }
if (props.disabled !== undefined && props.disabled) {
- return (
- <DisabledSVG
- onClick={props.onClick}
- viewBox='0 0 16 16'
- darkMode={props.darkMode}
- isSelected={props.isSelected}
- >
- {props.children}
- </DisabledSVG>
- )
+ buttonClassName += ' disabled'
+ }
+ if (props.isSelected !== undefined && props.isSelected) {
+ buttonClassName += ' isSelected'
}
+
return (
- <EnabledSVG
+ <svg
+ className={buttonClassName}
onClick={props.onClick}
viewBox='0 0 16 16'
- darkMode={props.darkMode}
- red={props.red}
- isSelected={props.isSelected}
>
{props.children}
- </EnabledSVG>
+ </svg>
)
}
-
-const EnabledSVG = styled.svg<StyledProps>`
- height: 100%;
- padding: 0 3px;
- z-index: 100;
-
- --colorFG: ${(props) => blackOrWhite(props.darkMode, props.isSelected).colorFG};
- --colorBG: ${(props) => blackOrWhite(props.darkMode, props.isSelected).colorBG};
-
- fill: var(--colorFG);
- background-color: var(--colorBG);
-
- :hover {
- ${(props) =>
- props.red !== undefined && props.red
- ? `
- background-color: red;`
- : `
- fill: var(--colorBG);
- background-color: var(--colorFG);
- `}
- }
-`
-
-const DisabledSVG = styled.svg<StyledProps>`
- height: 100%;
- padding: 0 3px;
- z-index: 100;
-
- --colorFG: ${(props) => blackOrWhite(props.darkMode, props.isSelected).colorFG};
- --colorBG: ${(props) => blackOrWhite(props.darkMode, props.isSelected).colorBG};
-
- fill: var(--colorFG);
- background-color: gray;
-`
M src/components/buttons/EyeButton.tsx => src/components/buttons/EyeButton.tsx +0 -2
@@ 22,7 22,6 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
- darkMode: boolean
isSelected?: boolean
}
@@ 32,7 31,6 @@ export const EyeButton = (props: Props): ReactElement => (
props.handleClick(e)
e.stopPropagation()
}}
- darkMode={props.darkMode}
>
<title>{props.title}</title>
<path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z' />
M src/components/buttons/EyeSlashButton.tsx => src/components/buttons/EyeSlashButton.tsx +0 -2
@@ 22,7 22,6 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
- darkMode: boolean
isSelected?: boolean
}
@@ 32,7 31,6 @@ export const EyeSlashButton = (props: Props): ReactElement => (
props.handleClick(e)
e.stopPropagation()
}}
- darkMode={props.darkMode}
>
<title>{props.title}</title>
<path d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z' />
M src/components/buttons/PersonAddButton.tsx => src/components/buttons/PersonAddButton.tsx +0 -2
@@ 21,13 21,11 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
- darkMode: boolean
}
export const PersonAddButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
>
<title>{props.title}</title>
<path d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z' />
M src/components/buttons/PersonCheckButton.tsx => src/components/buttons/PersonCheckButton.tsx +0 -2
@@ 22,7 22,6 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
- darkMode: boolean
isSelected?: boolean
}
@@ 32,7 31,6 @@ export const PersonCheckButton = (props: Props): ReactElement => (
props.handleClick(e)
e.stopPropagation()
}}
- darkMode={props.darkMode}
>
<title>{props.title}</title>
<path d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z' />
M src/components/buttons/PersonXButton.tsx => src/components/buttons/PersonXButton.tsx +0 -2
@@ 22,7 22,6 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
- darkMode: boolean
isSelected?: boolean
}
@@ 32,7 31,6 @@ export const PersonXButton = (props: Props): ReactElement => (
props.handleClick(e)
e.stopPropagation()
}}
- darkMode={props.darkMode}
>
<title>{props.title}</title>
<path d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z' />
M src/components/buttons/PointsMoveButton.tsx => src/components/buttons/PointsMoveButton.tsx +0 -2
@@ 21,13 21,11 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
}
export const PointsMoveButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
>
<title>Paste selected points</title>
<path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z' />
M src/components/buttons/PublishButton.tsx => src/components/buttons/PublishButton.tsx +0 -2
@@ 21,13 21,11 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
}
export const PublishButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
>
<title>Publish message</title>
<path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' />
M src/components/buttons/RedoButton.tsx => src/components/buttons/RedoButton.tsx +0 -2
@@ 21,14 21,12 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
disabled: boolean
- darkMode: boolean
}
export const RedoButton = (props: Props): ReactElement => (
<Button
onClick={(e: React.MouseEvent) => props.disabled || props.handleClick(e)}
disabled={props.disabled}
- darkMode={props.darkMode}
>
<title>Redo</title>
<path fillRule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z' />
M src/components/buttons/RespondButton.tsx => src/components/buttons/RespondButton.tsx +0 -2
@@ 20,14 20,12 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
isSelected?: boolean
}
export const RespondButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
>
<title>Respond to this point</title>
M src/components/buttons/SetMainPointButton.tsx => src/components/buttons/SetMainPointButton.tsx +0 -2
@@ 21,14 21,12 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
isSelected?: boolean
}
export const SetMainPointButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
>
<title>Set main point</title>
M src/components/buttons/SettingsButton.tsx => src/components/buttons/SettingsButton.tsx +0 -2
@@ 21,13 21,11 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
}
export const SettingsButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
>
<title>Settings</title>
<path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' />
M src/components/buttons/UndoButton.tsx => src/components/buttons/UndoButton.tsx +0 -2
@@ 21,14 21,12 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
disabled: boolean
- darkMode: boolean
}
export const UndoButton = (props: Props): ReactElement => (
<Button
onClick={(e: React.MouseEvent) => props.disabled || props.handleClick(e)}
disabled={props.disabled}
- darkMode={props.darkMode}
>
<title>Undo</title>
<path fillRule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z' />
M src/components/buttons/ViewOriginalMessageButton.tsx => src/components/buttons/ViewOriginalMessageButton.tsx +0 -2
@@ 21,14 21,12 @@ import { Button } from './Button'
interface Props {
handleClick: (e: React.MouseEvent) => void
- darkMode: boolean
isSelected?: boolean
}
export const ViewOriginalMessageButton = (props: Props): ReactElement => (
<Button
onClick={props.handleClick}
- darkMode={props.darkMode}
isSelected={props.isSelected}
>
<title>View original message</title>
M src/components/buttons/XButton.tsx => src/components/buttons/XButton.tsx +0 -2
@@ 23,7 23,6 @@ interface Props {
handleClick: (e: React.MouseEvent) => void
title?: string
red: boolean
- darkMode: boolean
isSelected?: boolean
}
@@ 33,7 32,6 @@ export const XButton = (props: Props): ReactElement => (
props.handleClick(e)
e.stopPropagation()
}}
- darkMode={props.darkMode}
isSelected={props.isSelected}
red={props.red}
>
A src/components/buttons/button.scss => src/components/buttons/button.scss +45 -0
@@ 0,0 1,45 @@
+.button {
+ height: 100%;
+ padding: 0 3px;
+ z-index: 100;
+}
+
+.dark {
+ .button {
+ background-color: black;
+ fill: white;
+
+ &.disabled {
+ background-color: gray;
+ }
+
+ &:hover:not(.disabled) {
+ fill: black;
+ background-color: white;
+
+ &.red {
+ background-color: red;
+ }
+ }
+ }
+}
+
+.light {
+ .button {
+ background-color: white;
+ fill: black;
+
+ &.disabled {
+ background-color: gray;
+ }
+
+ &:hover:not(.disabled) {
+ fill: white;
+ background-color: black;
+
+ &.red {
+ background-color: red;
+ }
+ }
+ }
+}
M src/index.css => src/index.css +1 -1
@@ 8,6 8,6 @@ body > * {
font-family: Arial;
}
-#root {
+#root, .app-wrapper {
height: 100%;
}