Browse Source

Add new custom theme, add button focus styles, fix post listing border layout

pull/1/head
GreatBearShark 1 year ago
parent
commit
ebb5b5ded4
  1. 5
      index.html
  2. 10
      public/css/main.css
  3. 4
      src/components/elements/Button.tsx
  4. 47
      src/components/post-listing.tsx
  5. 2
      src/components/post-listings.tsx
  6. 5
      src/custom.css
  7. 117
      src/customThemes.tsx
  8. 2
      src/theme.tsx

5
index.html

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -50,8 +51,10 @@
<script src="https://hcaptcha.com/1/api.js"></script>
<script async src="/libs/sortable/sortable.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
</html>

10
public/css/main.css

@ -16,13 +16,13 @@
}
@media only screen and (min-width: 768px) {
.upvote:hover {
/* .upvote:hover {
color: var(--info);
}
} */
.downvote:hover {
/* .downvote:hover {
color: var(--danger);
}
} */
}
.downvote {
@ -77,7 +77,7 @@
}
.vote-bar {
margin-top: -6.5px;
/* margin-top: -6.5px; */
}
.post-title {

4
src/components/elements/Button.tsx

@ -26,6 +26,10 @@ export default function Button({
cursor: 'pointer',
textDecoration: 'none',
},
':focus': {
outline: 0,
boxShadow: 'rgba(118, 169, 250, 0.45) 0px 0px 0px 2px',
},
fontWeight: 'bold',
...css,
}}

47
src/components/post-listing.tsx

@ -150,6 +150,8 @@ const PostTitle = props => (
/>
);
// ${my_vote === 1 ? 'text-info' : 'text-muted'}
const VoteButtons = ({
my_vote,
handlePostLike,
@ -159,15 +161,22 @@ const VoteButtons = ({
pointsTippy,
}: any) => (
<>
<button
className={`btn-animate btn btn-link p-0 ${
my_vote === 1 ? 'text-info' : 'text-muted'
}`}
<Button
as="button"
p={1}
backgroundColor="transparent"
onClick={handlePostLike}
data-tippy-content={i18n.t('upvote')}
color={my_vote === 1 ? 'primary' : 'muted'}
css={{
':hover': {
backgroundColor: 'transparent',
color: my_vote === 1 ? 'primary' : 'muted',
},
}}
>
<Icon name="upvote" className="icon upvote" />
</button>
</Button>
<div
className="unselectable pointer font-weight-bold text-muted px-0 py-0"
data-tippy-content={pointsTippy}
@ -175,15 +184,25 @@ const VoteButtons = ({
{score}
</div>
{enableDownvotes && (
<button
className={`btn-animate btn btn-link p-0 ${
my_vote === -1 ? 'text-danger' : 'text-muted'
}`}
<Button
p={1}
backgroundColor="transparent"
onClick={handlePostDisLike}
data-tippy-content={i18n.t('downvote')}
color={my_vote === -1 ? 'accent' : 'muted'}
css={{
':hover': {
backgroundColor: 'transparent',
color: my_vote === -1 ? 'accent' : 'muted',
},
// ':focus': {
// outline: 0,
// boxShadow: 'rgba(118, 169, 250, 0.45) 0px 0px 0px 2px',
// },
}}
>
<Icon name="downvote" className="icon downvote" />
</button>
</Button>
)}
</>
);
@ -563,7 +582,7 @@ export class BasePostListing extends Component<
render() {
return (
<div>
<>
{!this.state.showEdit ? (
<>
{this.listing()}
@ -580,7 +599,7 @@ export class BasePostListing extends Component<
/>
</div>
)}
</div>
</>
);
}
@ -1054,7 +1073,7 @@ export class BasePostListing extends Component<
}
return (
<div>
<>
<div className="row post-listing-row">
<div
className={`vote-bar small text-center ${
@ -1225,7 +1244,7 @@ export class BasePostListing extends Component<
{post.body && this.state.imageExpanded && !this.props.showBody && (
<PostBody body={post.body} />
)}
</div>
</>
);
};

2
src/components/post-listings.tsx

@ -54,7 +54,7 @@ export class PostListings extends Component<
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
<hr className="my-2 only-desktop" />
{/* <hr className="my-2 only-desktop" /> */}
</div>
))}
</div>

5
src/custom.css

@ -751,6 +751,11 @@ button:hover [type="button"]:hover {
}
}
.post-listing-row {
padding: 0.5rem 0;
border-bottom: 1px solid #333;
}
/* post listing mobile styles */
@media (max-width: 768px) {
.vote-bar {

117
src/customThemes.tsx

@ -0,0 +1,117 @@
import defaultTheme from './theme';
const customThemes = {
sovietLight: {
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fonts: {
body:
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: 'inherit',
monospace: 'Menlo, monospace',
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
fontWeights: {
body: 400,
heading: 700,
bold: 700,
},
lineHeights: {
body: 1.5,
heading: 1.125,
},
colors: {
text: '#851A10',
background: '#F0E4CC',
primary: '#F8712F',
secondary: 'EFC789',
muted: '#FF4B36',
},
styles: {
root: {
fontFamily: 'body',
lineHeight: 'body',
fontWeight: 'body',
},
h1: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 5,
},
h2: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 4,
},
h3: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 3,
},
h4: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 2,
},
h5: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 1,
},
h6: {
color: 'text',
fontFamily: 'heading',
lineHeight: 'heading',
fontWeight: 'heading',
fontSize: 0,
},
p: {
color: 'text',
fontFamily: 'body',
fontWeight: 'body',
lineHeight: 'body',
},
a: {
color: 'primary',
},
pre: {
fontFamily: 'monospace',
overflowX: 'auto',
code: {
color: 'inherit',
},
},
code: {
fontFamily: 'monospace',
fontSize: 'inherit',
},
table: {
width: '100%',
borderCollapse: 'separate',
borderSpacing: 0,
},
th: {
textAlign: 'left',
borderBottomStyle: 'solid',
},
td: {
textAlign: 'left',
borderBottomStyle: 'solid',
},
img: {
maxWidth: '100%',
},
},
},
};
export default customThemes;

2
src/theme.tsx

@ -8,6 +8,7 @@ import {
ThemeSystemProvider,
useThemeSystem,
} from './components/ThemeSystemProvider';
import customThemes from './customThemes';
const { dark, bulma, tailwind, ...remainingThemes } = allThemes;
@ -264,6 +265,7 @@ export const themes = {
chapo: { ...defaultTheme },
dark,
...remainingThemes,
...customThemes,
};
// console.log({ themes })

Loading…
Cancel
Save