summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Buttons/Buttons.module.scss26
-rw-r--r--src/components/Comment/Comment.module.scss22
-rw-r--r--src/components/Comment/Comment.tsx8
-rw-r--r--src/components/CommentForm/CommentForm.module.scss12
-rw-r--r--src/components/CommentForm/CommentForm.tsx96
-rw-r--r--src/components/CommentsList/CommentsList.module.scss9
-rw-r--r--src/components/CommentsList/CommentsList.tsx3
-rw-r--r--src/components/Form/Form.module.scss23
-rw-r--r--src/components/Form/Input/Input.tsx2
-rw-r--r--src/components/Form/TextArea/TextArea.tsx2
10 files changed, 136 insertions, 67 deletions
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 1a0d73a..ea85c9b 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -7,14 +7,19 @@
}
.primary {
- padding: var(--spacing-xs) var(--spacing-md);
+ margin: auto;
+ padding: var(--spacing-2xs) var(--spacing-md);
background: var(--color-primary);
- border-radius: fun.convert-px(3);
- box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark);
+ border: fun.convert-px(2) solid var(--color-bg);
+ border-radius: fun.convert-px(5);
+ box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
+ 0 0 0 fun.convert-px(3) var(--color-primary-darker),
+ fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
+ var(--color-primary-dark);
color: var(--color-fg-inverted);
font-weight: 600;
text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
- transition: all 0.3s ease-in-out 0s;
+ transition: all 0.25s ease-in-out 0s;
&--left {
margin-right: auto;
@@ -32,16 +37,20 @@
&:hover,
&:focus {
background: var(--color-primary-light);
- box-shadow: fun.convert-px(7) fun.convert-px(7) 0 0
- var(--color-primary-dark);
+ box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light),
+ 0 0 0 fun.convert-px(3) var(--color-primary-darker),
+ fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2)
+ var(--color-primary-dark);
transform: translateX(#{fun.convert-px(-4)})
translateY(#{fun.convert-px(-4)});
}
&:active {
background: var(--color-primary-dark);
- box-shadow: 0 0 0 0 var(--color-primary-dark);
- transform: translateX(#{fun.convert-px(3)}) translateY(#{fun.convert-px(3)});
+ box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
+ 0 0 0 fun.convert-px(3) var(--color-primary-darker),
+ 0 0 0 0 var(--color-primary-dark);
+ transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)});
}
}
@@ -197,7 +206,6 @@
position: absolute;
top: 0;
right: 0;
- background: var(--color-bg);
transition: all 0.6s ease-in 0s;
backface-visibility: hidden;
}
diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss
index 46c0249..a952f66 100644
--- a/src/components/Comment/Comment.module.scss
+++ b/src/components/Comment/Comment.module.scss
@@ -6,8 +6,10 @@
}
.wrapper {
+ background: var(--color-bg);
border: fun.convert-px(1) solid var(--color-border-light);
- box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light),
+ box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
+ var(--color-shadow-lighter),
fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
var(--color-shadow-light);
padding: var(--spacing-md);
@@ -38,24 +40,32 @@
.avatar {
width: fun.convert-px(85);
height: fun.convert-px(85);
+ margin: 0 auto;
border-radius: fun.convert-px(3);
- box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light);
+ box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-lighter),
+ fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1)
+ var(--color-shadow-light);
position: relative;
+
+ img {
+ border-radius: fun.convert-px(3);
+ }
}
.author {
+ color: var(--color-primary-darker);
+ font-weight: 600;
text-align: center;
}
.date {
color: var(--color-fg-secondary);
font-size: var(--font-size-sm);
- display: grid;
- grid-template-columns: repeat(2, max-content);
+ display: flex;
+ flex-flow: row wrap;
column-gap: var(--spacing-2xs);
justify-content: center;
- margin: var(--spacing-sm) 0 var(--spacing-md);
+ margin: var(--spacing-md) 0;
@include mix.media("screen") {
@include mix.dimensions("sm") {
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 7214abe..6a4abce 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -44,7 +44,7 @@ const Comment = ({
const getApprovedComment = () => {
return (
<>
- <article className={styles.wrapper}>
+ <article className={styles.wrapper} id={`comment-${comment.commentId}`}>
<header className={styles.header}>
{comment.author.gravatarUrl && (
<div className={styles.avatar}>
@@ -59,7 +59,11 @@ const Comment = ({
</header>
<dl className={styles.date}>
<dt>{t`Published on:`}</dt>
- <dd>{getLocaleDate()}</dd>
+ <dd>
+ <Link href={`#comment-${comment.commentId}`}>
+ <a>{getLocaleDate()}</a>
+ </Link>
+ </dd>
</dl>
<div
className={styles.body}
diff --git a/src/components/CommentForm/CommentForm.module.scss b/src/components/CommentForm/CommentForm.module.scss
new file mode 100644
index 0000000..2330ca2
--- /dev/null
+++ b/src/components/CommentForm/CommentForm.module.scss
@@ -0,0 +1,12 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+ width: min(calc(100vw - (var(--spacing-md) * 2)), fun.convert-px(500));
+ margin: auto;
+}
+
+.title {
+ width: max-content;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index b2d538f..ea02306 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -4,6 +4,7 @@ import Notice from '@components/Notice/Notice';
import { t } from '@lingui/macro';
import { createComment } from '@services/graphql/mutations';
import { useState } from 'react';
+import styles from './CommentForm.module.scss';
const CommentForm = ({
articleId,
@@ -57,51 +58,56 @@ const CommentForm = ({
};
return (
- <Form submitHandler={submitHandler}>
- <FormItem>
- <Input
- id="commenter-name"
- name="commenter-name"
- label={t`Name`}
- required={true}
- value={name}
- setValue={setName}
- />
- </FormItem>
- <FormItem>
- <Input
- id="commenter-email"
- name="commenter-email"
- label={t`Email`}
- required={true}
- value={email}
- setValue={setEmail}
- />
- </FormItem>
- <FormItem>
- <Input
- id="commenter-website"
- name="commenter-website"
- label={t`Website`}
- value={website}
- setValue={setWebsite}
- />
- </FormItem>
- <FormItem>
- <TextArea
- id="commenter-message"
- name="commenter-message"
- label={t`Comment`}
- value={message}
- setValue={setMessage}
- required={true}
- />
- </FormItem>
- <ButtonSubmit>{t`Send`}</ButtonSubmit>
- {isSuccess && !isApproved && (
- <Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
- )}
- </Form>
+ <div className={styles.wrapper}>
+ <h2 className={styles.title}>{t`Leave a comment`}</h2>
+ <Form submitHandler={submitHandler}>
+ <FormItem>
+ <Input
+ id="commenter-name"
+ name="commenter-name"
+ label={t`Name`}
+ required={true}
+ value={name}
+ setValue={setName}
+ />
+ </FormItem>
+ <FormItem>
+ <Input
+ id="commenter-email"
+ name="commenter-email"
+ label={t`Email`}
+ required={true}
+ value={email}
+ setValue={setEmail}
+ />
+ </FormItem>
+ <FormItem>
+ <Input
+ id="commenter-website"
+ name="commenter-website"
+ label={t`Website`}
+ value={website}
+ setValue={setWebsite}
+ />
+ </FormItem>
+ <FormItem>
+ <TextArea
+ id="commenter-message"
+ name="commenter-message"
+ label={t`Comment`}
+ value={message}
+ setValue={setMessage}
+ required={true}
+ />
+ </FormItem>
+ <FormItem>
+ <ButtonSubmit>{t`Send`}</ButtonSubmit>
+ </FormItem>
+ {isSuccess && !isApproved && (
+ <Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
+ )}
+ </Form>
+ </div>
);
};
diff --git a/src/components/CommentsList/CommentsList.module.scss b/src/components/CommentsList/CommentsList.module.scss
index 2358948..4971b15 100644
--- a/src/components/CommentsList/CommentsList.module.scss
+++ b/src/components/CommentsList/CommentsList.module.scss
@@ -1,5 +1,14 @@
@use "@styles/abstracts/placeholders";
+.title,
+.no-comments {
+ width: max-content;
+ margin-left: auto;
+ margin-right: auto;
+}
+
.list {
@extend %reset-ordered-list;
+
+ margin-bottom: var(--spacing-lg);
}
diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
index 6599475..3a1c57e 100644
--- a/src/components/CommentsList/CommentsList.tsx
+++ b/src/components/CommentsList/CommentsList.tsx
@@ -12,10 +12,11 @@ const CommentsList = ({ comments }: { comments: CommentData[] }) => {
return (
<>
+ <h2 className={styles.title}>{t`Comments`}</h2>
{comments.length > 0 ? (
<ol className={styles.list}>{getCommentsList()}</ol>
) : (
- <p>{t`No comments yet.`}</p>
+ <p className={styles['no-comments']}>{t`No comments yet.`}</p>
)}
</>
);
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index bfb009e..fcf8d15 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -17,21 +17,40 @@
.label {
display: block;
+ color: var(--color-primary-darker);
font-size: var(--font-size-sm);
font-variant: small-caps;
font-weight: 600;
}
.field {
- border: fun.convert-px(1) solid var(--color-border);
width: 100%;
padding: var(--spacing-2xs) var(--spacing-xs);
+ background: var(--color-bg-tertiary);
+ border: fun.convert-px(2) solid var(--color-border-light);
+ box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light);
+ transition: all 0.25s linear 0s;
+
+ &:hover {
+ box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
+ var(--color-shadow-light);
+ transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
+ }
&:focus {
- border-color: var(--color-primary);
+ background: var(--color-bg);
+ border-color: var(--color-primary-darker);
+ box-shadow: 0 0 0 0 var(--color-shadow);
+ transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
+ outline: none;
+ transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
}
}
.textarea {
min-height: fun.convert-px(200);
}
+
+.required {
+ color: var(--color-secondary);
+}
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 2ee214b..16cb854 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -32,7 +32,7 @@ const Input = (
{label && (
<label htmlFor={id} className={styles.label}>
{label}
- {required && <span> *</span>}
+ {required && <span className={styles.required}> *</span>}
</label>
)}
<input
diff --git a/src/components/Form/TextArea/TextArea.tsx b/src/components/Form/TextArea/TextArea.tsx
index 729ef6d..e1e7e0f 100644
--- a/src/components/Form/TextArea/TextArea.tsx
+++ b/src/components/Form/TextArea/TextArea.tsx
@@ -25,7 +25,7 @@ const TextArea = ({
{label && (
<label htmlFor={id} className={styles.label}>
{label}
- {required && <span> *</span>}
+ {required && <span className={styles.required}> *</span>}
</label>
)}
<textarea
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 15:00:08 +0000