13 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/gifButton.css:
--------------------------------------------------------------------------------
1 | .btd-gif-button {
2 | transition-property: transform, opacity;
3 | transition-duration: 300ms;
4 | transition-timing-function: ease;
5 | float: left;
6 |
7 | &.-visible {
8 | opacity: 1;
9 | transform: translateX(0);
10 | }
11 | }
12 |
13 | .btd-gif-button {
14 | font-weight: bold;
15 | font-size: 10px;
16 | border-radius: 3px;
17 | padding: 2px 6px;
18 | border: 1px solid currentColor;
19 | cursor: pointer;
20 | overflow: hidden;
21 | position: absolute;
22 | left: 10px;
23 | bottom: 10px;
24 | z-index: 0;
25 | opacity: 0;
26 | transition-property: color, opacity;
27 | user-select: none;
28 | pointer-events: none;
29 |
30 | &:hover {
31 | color: #616161 !important;
32 | }
33 | }
34 |
35 | .btd-gif-button.-visible {
36 | opacity: 1;
37 | pointer-events: auto;
38 | }
39 |
40 | .btd-gif-button.btd-gif-button:hover {
41 | color: #616161;
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/gifPicker/gifButton.tsx:
--------------------------------------------------------------------------------
1 | import '../gifButton.css';
2 |
3 | import React, {FC} from 'react';
4 |
5 | import {Handler} from '../../helpers/typeHelpers';
6 |
7 | export const BTDGifButton: FC<{
8 | onClick: Handler;
9 | }> = (props) => {
10 | const d = new Date();
11 | const fool = d.getDate() === 1 && d.getMonth() === 3;
12 | const GIFText = fool ? 'JIF' : 'GIF';
13 |
14 | return (
15 |
16 | {GIFText}
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/gifPicker/singleGif.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from 'react';
2 |
3 | import {Handler} from '../../helpers/typeHelpers';
4 |
5 | export interface GifItemProps {
6 | previewUrl: string;
7 | onClick: Handler;
8 | }
9 | export const BTDGifItem: FC
14 |
47 |
15 |
20 |
21 |
22 |
46 |
28 |
43 |
44 |
45 |
29 |
42 |
30 |
41 |
38 | {props.children}
39 |
40 |
15 | 
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/openBtdSettingsButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const BTDSettingsButton = () => {
4 | return (
5 |
9 |
10 |
11 |
12 |
13 | BTD Settings
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/settings/components/badgesOnTopOfAvatars.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {BaseSettingsProps} from '../settingsTypes';
4 | import {BooleanSettingsRow} from './booleanSettingRow';
5 |
6 | interface BadgesOnTopOfAvatarsProps extends BaseSettingsProps<'badgesOnTopOfAvatars'> {}
7 |
8 | export function BadgesOnTopOfAvatars(props: BadgesOnTopOfAvatarsProps) {
9 | return (
10 | {props.children}
;
8 | }
9 | export function SettingsHeader(props: defaultProps) {
10 | return {props.children}
;
11 | }
12 | export function SettingsSidebar(props: defaultProps) {
13 | return {props.children}
;
14 | }
15 | export function SettingsContent(props: defaultProps) {
16 | return {props.children}
;
17 | }
18 | export function SettingsFooter(
19 | props: defaultProps & {
20 | className?: string;
21 | }
22 | ) {
23 | return {props.children}
;
24 | }
25 | export function SettingsFooterLabel(props: defaultProps) {
26 | return {props.children}
;
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/settings/components/settingsRadioInput.tsx:
--------------------------------------------------------------------------------
1 | import {css} from '@emotion/css';
2 | import React, {PropsWithChildren} from 'react';
3 |
4 | import {Handler} from '../../../helpers/typeHelpers';
5 |
6 | const mainInputStyles = css`
7 | appearance: none;
8 | width: 15px;
9 | height: 15px;
10 | border: 1px solid var(--twitter-blue);
11 | background: transparent;
12 | outline: 0;
13 | border-radius: 100%;
14 |
15 | &:checked,
16 | &[checked] {
17 | box-shadow: inset 0 0 0 3px var(--settings-modal-background),
18 | inset 0 0 0 8px var(--twitter-blue);
19 | }
20 | `;
21 |
22 | interface SettingsRadioSelectFieldProps {
23 | name: string;
24 | id: string;
25 | defaultChecked: boolean;
26 | onChange: Handler;
27 | className?: string;
28 | isDisabled?: boolean;
29 | }
30 | export function SettingsRadioInput(props: PropsWithChildren
40 | {props.fields.map((field) => {
41 | return (
42 | props.onChange(field.value)}
48 | isDisabled={props.isDisabled}>
49 | {field.label}
50 |
51 | );
52 | })}
53 |
54 | );
55 | }
56 |
57 | export function BTDSettingsRadioSettingSelect
28 | {props.children}
29 |
30 | );
31 | }
32 | export function SettingsRowTitle(props: SettingsRowProps) {
33 | return {props.children}
; 34 | } 35 | export function SettingsRowContent(props: SettingsRowProps) { 36 | return{props.children}
;
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/settings/components/settingsSeparator.tsx:
--------------------------------------------------------------------------------
1 | import {css} from '@emotion/css';
2 | import React from 'react';
3 |
4 | import {settingsRow} from '../settingsStyles';
5 |
6 | export function SettingsSeparator() {
7 | return (
8 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/settings/components/settingsTextInput.tsx: -------------------------------------------------------------------------------- 1 | import {css, cx} from '@emotion/css'; 2 | import React from 'react'; 3 | 4 | import {HandlerOf} from '../../../helpers/typeHelpers'; 5 | 6 | export interface SettingsTextInputProps { 7 | placeholder?: string; 8 | className?: string; 9 | value: string; 10 | onChange: HandlerOf