Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Pushed some changes to the profile modal for comments

Browse source 
- Includes a fix to the close button when on mobile
- Has some tweaks suggested by Zimo to bring in line with Portal

refs https://github.com/TryGhost/Team/issues/1779
This commit is contained in:
James Morris 2022-08-11 15:30:34 +01:00
parent 24f384b0a2
commit 91134ecb62
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,7 +74,7 @@ const AddNameDialog = (props) => {
leaveTo="opacity-0 translate-y-2"
key={profile.name}
>
<div className="flex flex-row justify-start items-center gap-3 my-4 pr-4">
<div className="flex flex-row justify-start items-center gap-3 pr-4">
<div className="w-10 h-10 rounded-full border-2 border-white bg-no-repeat bg-cover" style={{backgroundImage: `url(${profile.avatar})`}} />
<div className="flex flex-col justify-center items-start">
<div className="text-base font-sans font-semibold tracking-tight text-white">
@ -111,7 +111,7 @@ const AddNameDialog = (props) => {
<div className="flex">
{!isMobile() &&
<div className={`flex flex-col justify-center items-center w-[40%] bg-[#1C1C1C]`}>
<div className="flex flex-col">
<div className="flex flex-col gap-9 -mt-[1px]">
{renderExampleProfiles()}
</div>
</div>
@ -121,7 +121,7 @@ const AddNameDialog = (props) => {
<p className="font-sans text-base text-neutral-500 pr-0 sm:pr-10 leading-9 text-center sm:text-left">Add context to your comment, share your name and expertise to foster a healthy discussion.</p>
<section className="mt-8 text-left">
<div className="flex flex-row mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
<label htmlFor="comments-name" className="font-sans font-semibold text-[1.3rem]">Name</label>
<Transition
show={!!error.name}
enter="transition duration-300 ease-out"
@ -154,8 +154,8 @@ const AddNameDialog = (props) => {
maxLength="64"
/>
<div className="flex flex-row mt-6 mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Expertise</label>
<div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
<label htmlFor="comments-name" className="font-sans font-semibold text-[1.3rem]">Expertise</label>
<div className={`font-sans text-[1.3rem] text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
</div>
<input
id="comments-bio"
@ -179,7 +179,7 @@ const AddNameDialog = (props) => {
maxLength={maxBioChars}
/>
<button
className={`transition-opacity duration-200 ease-linear w-full h-[44px] mt-8 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] opacity-100 hover:opacity-90`}
className={`transition-opacity duration-200 ease-linear w-full h-[42px] mt-10 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] opacity-100 hover:opacity-90`}
style={{backgroundColor: accentColor ?? '#000000'}}
onClick={submit}
>

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

@ -3,7 +3,7 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
const CloseButton = (props) => {
return (
<button className="transition-opacity duration-100 ease-out absolute top-[36px] sm:top-10 right-8 sm:right-8 opacity-20 hover:opacity-40" onClick={props.close}>
<button className="transition-opacity duration-100 ease-out absolute top-6 sm:top-10 right-6 sm:right-8 opacity-20 hover:opacity-40" onClick={props.close}>
<CloseIcon className="w-[20px] h-[20px]" />
</button>
);