Added article title alignment option and updated screenshots in READM…

…E files.

README.es-ES.md

@@ -26,9 +26,8 @@ Las funcionalidades clave incluyen:
 
 ## Capturas de pantalla
 
-![Inicio de sesión](images/login.png)
-![Interfaz](images/layout.png)
-![Ajustes](images/settings.png)
+![Interfaz](images/light.png)
+![Ajustes](images/dark.png)
 
 ## Demo
 

README.md

@@ -26,9 +26,8 @@ Key features include:
 
 ## Screenshots
 
-![Login](images/login.png)
-![Layout](images/layout.png)
-![Settings](images/settings.png)
+![Light Mode](images/light.png)
+![Dark Mode](images/dark.png)
 
 ## Demo
 

README.zh-CN.md

@@ -26,9 +26,8 @@ Reactflux 是 [Miniflux](https://github.com/miniflux/miniflux) 的第三方 Web
 
 ## 截图
 
-![登录](images/login.png)
-![布局](images/layout.png)
-![设置](images/settings.png)
+![Light Mode](images/light.png)
+![Dark Mode](images/dark.png)
 
 ## 演示
 

src/components/Article/ArticleDetail.css

@@ -65,7 +65,6 @@ p {
 .article-header {
   margin: 0 auto;
   padding-top: 20px;
-  text-align: center;
 }
 
 .article-meta .arco-typography {
@@ -78,7 +77,6 @@ p {
 .article-meta,
 .article-date {
   margin: 0 auto;
-  padding: 0 20px;
 }
 
 .article-title.arco-typography {

src/components/Article/ArticleDetail.jsx

@@ -69,7 +69,8 @@ const getHtmlParserOptions = (imageSources, togglePhotoSlider) => ({
 const ArticleDetail = forwardRef((_, ref) => {
   const navigate = useNavigate();
   const { activeContent } = useStore(contentState);
-  const { articleWidth, fontFamily, fontSize } = useStore(settingsState);
+  const { articleWidth, fontFamily, fontSize, titleAlignment } =
+    useStore(settingsState);
 
   const {
     isPhotoSliderVisible,
@@ -103,8 +104,15 @@ const ArticleDetail = forwardRef((_, ref) => {
     <article className="article-content" ref={ref} tabIndex={-1}>
       <SimpleBar className="scroll-container">
         <FadeInMotion>
-          <div className="article-header" style={{ width: `${articleWidth}%` }}>
-            <Typography.Title className="article-title" heading={3}>
+          <div
+            className="article-header"
+            style={{ width: `${articleWidth}%`, textAlign: titleAlignment }}
+          >
+            <Typography.Title
+              className="article-title"
+              heading={3}
+              style={{ fontFamily: fontFamily }}
+            >
               <a
                 href={activeContent.url}
                 target="_blank"

src/components/Settings/Appearance.jsx

@@ -1,11 +1,13 @@
 import {
   Divider,
+  Radio,
   Select,
   Slider,
   Space,
   Switch,
   Typography,
 } from "@arco-design/web-react";
+import { IconAlignCenter, IconAlignLeft } from "@arco-design/web-react/icon";
 
 import { polyglotState } from "../../hooks/useLanguage";
 import { applyColor, colors, getDisplayColorValue } from "../../utils/colors";
@@ -25,6 +27,7 @@ const Appearance = () => {
     showEstimatedReadingTime,
     showFeedIcon,
     themeColor,
+    titleAlignment,
   } = useStore(settingsState);
   const { polyglot } = useStore(polyglotState);
 
@@ -156,6 +159,27 @@ const Appearance = () => {
 
       <Divider />
 
+      <SettingItem
+        title={polyglot.t("appearance.title_alignment_label")}
+        description={polyglot.t("appearance.title_alignment_description")}
+      >
+        <Radio.Group
+          type="button"
+          name="title-alignment"
+          value={titleAlignment}
+          onChange={(value) => handleConfigChange({ titleAlignment: value })}
+        >
+          <Radio value="left">
+            <IconAlignLeft />
+          </Radio>
+          <Radio value="center">
+            <IconAlignCenter />
+          </Radio>
+        </Radio.Group>
+      </SettingItem>
+
+      <Divider />
+
       <SettingItem
         title={polyglot.t("appearance.font_family_label")}
         description={polyglot.t("appearance.font_family_description")}

src/locales/en-US.json

@@ -225,7 +225,9 @@
     "font_family_system": "Default",
     "font_family_noto_sans": "Noto Sans SC",
     "font_family_noto_serif": "Noto Serif SC",
-    "font_family_lxgw_wenkai": "LXGW WenKai Screen"
+    "font_family_lxgw_wenkai": "LXGW WenKai Screen",
+    "title_alignment_label": "Article title alignment",
+    "title_alignment_description": "Choose the alignment of the article title"
   },
   "hotkeys": {
     "key": "Key",

src/locales/es-ES.json

@@ -224,7 +224,9 @@
     "font_family_system": "Predeterminado",
     "font_family_noto_sans": "Noto Sans SC",
     "font_family_noto_serif": "Noto Serif SC",
-    "font_family_lxgw_wenkai": "LXGW WenKai Screen"
+    "font_family_lxgw_wenkai": "LXGW WenKai Screen",
+    "title_alignment_label": "Alineación del título del artículo",
+    "title_alignment_description": "Escoger la alineación del título del artículo"
   },
   "hotkeys": {
     "key": "Clave",

src/locales/zh-CN.json

@@ -225,7 +225,9 @@
     "font_family_system": "默认",
     "font_family_noto_sans": "思源黑体",
     "font_family_noto_serif": "思源宋体",
-    "font_family_lxgw_wenkai": "霞鹜文楷"
+    "font_family_lxgw_wenkai": "霞鹜文楷",
+    "title_alignment_label": "文章标题对齐方式",
+    "title_alignment_description": "选择文章标题的对齐方式"
   },
   "hotkeys": {
     "key": "键",

src/store/settingsState.js

@@ -21,6 +21,7 @@ const defaultValue = {
   showStatus: "unread",
   themeColor: "Blue",
   themeMode: "light",
+  titleAlignment: "center",
 };
 
 export const settingsState = persistentAtom("settings", defaultValue, {