...

6 files changed, 30 insertions, 28 deletions

diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index 86ccf706..a8a44524 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -1,5 +1,3 @@
-/* TODO: Make item prettier. */

-

 .setting-section {

   padding: 1em 0;

   margin: 1em 0;

@@ -7,35 +5,36 @@
 

 .setting-section-title {

   padding: 0 1em;

-  color: white;

 }

 

 .setting-section-item-area {

   margin-top: 1em;

-  border-top: 1px solid var(--cru-secondary-color);

+  border-top: 1px solid var(--cru-primary-color);

 }

 

 .setting-item-container {

   padding: 0.5em 1em;

   transition: background-color 0.3s;

-  background-color: var(--cru-background-color);

-  border-bottom: 1px solid var(--cru-secondary-color);

+  background-color: var(--cru-clickable-grayscale-normal-color);

+  border-bottom: 1px solid var(--cru-clickable-grayscale-active-color);

   display: flex;

   align-items: center;

 }

 

 .setting-item-container:hover {

-  color: white;

-  background-color: var(--cru-secondary-color);

+  background-color: var(--cru-clickable-grayscale-hover-color);

 }

 

-.setting-item-container.danger {

-  color: var(--cru-danger-color);

+.setting-item-container:focus {

+  background-color: var(--cru-clickable-grayscale-focus-color);

 }

 

-.setting-item-container.danger:hover {

-  color: white;

-  background-color: var(--cru-danger-color);

+.setting-item-container:active {

+  background-color: var(--cru-clickable-grayscale-active-color);

+}

+

+.setting-item-container.danger {

+  color: var(--cru-danger-color);

 }

 

 .setting-item-label-sub {

diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 4e0bf27e..50967a3c 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -247,9 +247,9 @@ export default function SettingPage() {
   ]);
 
   return (
-    <Page className="cru-primary" noTopPadding>
+    <Page noTopPadding>
       {user ? (
-        <SettingSection title="settings.subheader.account" color="secondary">
+        <SettingSection title="settings.subheader.account">
           <RegisterCodeSettingItem />
           <ButtonSettingItem
             title="settings.changeAvatar"
@@ -271,10 +271,7 @@ export default function SettingPage() {
           />
         </SettingSection>
       ) : null}
-      <SettingSection
-        title="settings.subheader.customization"
-        color="secondary"
-      >
+      <SettingSection title="settings.subheader.customization">
         <LanguageChangeSettingItem />
       </SettingSection>
       <ChangePasswordDialog {...dialogPropsMap["change-password"]} />
diff --git a/FrontEnd/src/pages/timeline/CollapseButton.tsx b/FrontEnd/src/pages/timeline/CollapseButton.tsx
index 8270e160..14fc6bee 100644
--- a/FrontEnd/src/pages/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/pages/timeline/CollapseButton.tsx
@@ -1,21 +1,25 @@
-import * as React from "react";
+import { CSSProperties } from "react";
 
 import IconButton from "@/views/common/button/IconButton";
 
-const CollapseButton: React.FC<{
+export default function CollapseButton({
+  collapse,
+  onClick,
+  className,
+  style,
+}: {
   collapse: boolean;
   onClick: () => void;
   className?: string;
-  style?: React.CSSProperties;
-}> = ({ collapse, onClick, className, style }) => {
+  style?: CSSProperties;
+}) {
   return (
     <IconButton
+      color="primary"
       icon={collapse ? "arrows-angle-expand" : "arrows-angle-contract"}
       onClick={onClick}
       className={className}
       style={style}
     />
   );
-};
-
-export default CollapseButton;
+}
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index 8557e5dd..ed34b4ba 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -112,6 +112,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
             containerClassName="d-inline"
           >
             <IconButton
+              color="primary"
               className="timeline-card-button"
               icon="three-dots-vertical"
             />
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index 2a433860..5986e566 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -24,11 +24,11 @@
 }

 

 .timeline-post-create-edit-text:hover {

-  border-color: var(--cru-button-secondary-normal-color)

+  border-color: var(--cru-clickable-secondary-normal-color)

 }

 

 .timeline-post-create-edit-text:focus {

-  border-color: var(--cru-button-secondary-normal-color)

+  border-color: var(--cru-clickable-secondary-normal-color)

 }

 

 .timeline-post-create-image {

diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index 07f2e0f0..afae5033 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -47,6 +47,7 @@ export default function TimelinePostView(props: TimelinePostViewProps) {
       <TimelinePostCard className="cru-primary">
         {post.editable && (
           <IconButton
+            color="primary"
             icon="chevron-down"
             className="timeline-post-edit-button"
             onClick={(e) => {