Merge pull request #53 from increments/qiita/fix-sicebar-style

Fix sidebar link style and article tag style

Author: getty104

src/client/components/Article.tsx

@@ -7,7 +7,6 @@ import {
   Weight,
   getSpace,
 } from "../lib/variables";
-import { MaterialSymbol } from "./MaterialSymbol";
 import { QiitaMarkdownHtmlBody } from "./QiitaMarkdownHtmlBody";
 import { Slide } from "./Slide";
 
@@ -25,12 +24,9 @@ export const Article = ({ renderedBody, tags, title, slide }: Props) => {
     <article css={containerStyle}>
       <h1 css={titleStyle}>{title}</h1>
       <div css={tagListWrapStyle}>
-        <MaterialSymbol fill={true} css={{ color: Colors.mediumEmphasis }}>
-          sell
-        </MaterialSymbol>
         <ul css={tagListStyle}>
           {tags.map((tag, index) => (
-            <li key={tag}>
+            <li css={tagListItemStyle} key={tag}>
               <span>{tag}</span>
               {index !== tags.length - 1 && <span>,</span>}
             </li>
@@ -67,6 +63,14 @@ const tagListStyle = css({
   gap: getSpace(1),
 });
 
+const tagListItemStyle = css({
+  backgroundColor: Colors.surfaceVariant,
+  borderRadius: 4,
+  color: Colors.mediumEmphasis,
+  fontSize: Typography.body2,
+  padding: `0 ${getSpace(3 / 4)}px`,
+});
+
 const bodyStyle = css({
   marginTop: getSpace(6),
 });

src/client/components/SidebarArticles.tsx

@@ -99,6 +99,7 @@ const articleSummaryStyle = css({
   alignItems: "center",
   backgroundColor: "transparent",
   color: Colors.mediumEmphasis,
+  cursor: "pointer",
   display: "flex",
   fontWeight: Weight.bold,
   fontSize: Typography.body2,
@@ -110,6 +111,7 @@ const articleSummaryStyle = css({
   ...pointerFine({
     "&:hover": {
       backgroundColor: Colors.gray5,
+      cursor: "pointer",
       textDecoration: "none",
     },
   }),

src/client/components/SidebarContents.tsx

@@ -219,6 +219,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               コミュニティガイドライン
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
           <li>
@@ -229,6 +232,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               利用規約
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
           <li>
@@ -239,6 +245,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               プライバシーポリシー
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
         </ul>
@@ -395,6 +404,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               コミュニティガイドライン
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
           <li>
@@ -405,6 +417,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               利用規約
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
           <li>
@@ -415,6 +430,9 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
               rel="noopener noreferrer"
             >
               プライバシーポリシー
+              <MaterialSymbol css={{ color: Colors.disabled }}>
+                open_in_new
+              </MaterialSymbol>
             </a>
           </li>
         </ul>
@@ -534,7 +552,7 @@ export const SidebarContents = ({ isStateOpen, handleMobileClose }: Props) => {
 
 const sidebarStyle = css({
   height: "100vh",
-  maxWidth: 360,
+  width: 360,
   padding: `${getSpace(2)}px 0`,
   position: "sticky",
   top: 0,
@@ -632,6 +650,7 @@ const articlesListItemStyle = css({
   )}px ${getSpace(3 / 2)}px`,
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  width: "100%",
 
   ...pointerFine({
     "&:hover": {
@@ -675,6 +694,9 @@ const articleFooterListStyle = css({
 });
 
 const articleFooterListItemStyle = css({
+  alignItems: "center",
+  display: "flex",
+  gap: getSpace(1),
   color: Colors.mediumEmphasis,
   fontSize: Typography.body3,
 });