Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Some basic styling for the sign in box

Browse source
This commit is contained in:
James Morris 2022-07-07 12:02:53 +02:00
parent 68012c9264
commit 88d2fc4bd2
4 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/comments-ui/src/components/Comment.js
View file

@ -34,7 +34,7 @@ const Comment = (props) => {
);
} else {
return (
<div className={`flex flex-col ${!hasReplies ? 'mb-14' : ''}`}>
<div className={`flex flex-col ${!hasReplies && 'mb-14'} last:mb-6`}>
<div>
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar comment={comment} />

2
apps/comments-ui/src/components/More.js
View file

@ -1,7 +1,7 @@
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React, {useContext, useState} from 'react';
import CommentContextMenu from './modals/CommentContextMenu';
import AppContext from '../AppContext';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
const More = (props) => {
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);

6
apps/comments-ui/src/components/NotSignedInBox.js
View file

@ -1,8 +1,8 @@
function NotSignedInBox() {
return (
<section>
<h1>You are not signed in</h1>
<p>Log in to place a comment.</p>
<section className="text-center mb-1 bg-neutral-50 rounded-lg pt-12 pb-10 px-8">
<h1 className="text-center text-3xl font-sans font-bold mb-6 tracking-tight">Want to join the discussion?</h1>
<a className="bg-black text-white font-sans py-3 px-4 mb-6 rounded inline-block" href="#/portal">Sign in to comment</a>
</section>
);
}

12
apps/comments-ui/src/components/Reply.js
View file

@ -1,12 +1,14 @@
import React from 'react';
import React, {useContext} from 'react';
import AppContext from '../AppContext';
import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
function Reply(props) {
return (
<button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
const {member} = useContext(AppContext);
return member ?
(<button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
<ReplyIcon className={`mr-[6px] stroke-dark dark:stroke-white ${props.isReplying ? 'fill-black dark:fill-white' : ''}`} />Reply
</button>
);
</button>) : null;
}
export default Reply;