[fix] some UI detail bugs

Author: TechQuery

components/Git/Issue/Card.tsx

@@ -1,12 +1,15 @@
-import { Avatar, Card, CardContent, CardProps, Chip, Icon, Stack, Typography } from '@mui/material';
+import { Avatar, Card, CardContent, CardProps, Chip } from '@mui/material';
 import { marked } from 'marked';
 import { Issue } from 'mobx-github';
 import { FC } from 'react';
 
+import { SymbolIcon } from '../../Icon';
+
 export type IssueCardProps = Issue & Omit<CardProps, 'id'>;
 
 export const IssueCard: FC<IssueCardProps> = ({
   id,
+  repository_url,
   number,
   title,
   labels,
@@ -18,19 +21,21 @@ export const IssueCard: FC<IssueCardProps> = ({
   ...props
 }) => (
   <Card {...props}>
-    <CardContent>
-      <Typography
-        variant="h4"
-        component="a"
-        href={html_url}
-        target="_blank"
-        rel="noreferrer"
-        style={{ textDecoration: 'none', color: 'inherit' }}
-      >
-        #{number} {title}
-      </Typography>
+    <CardContent className="flex h-full flex-col justify-between gap-2">
+      <h2 className="text-2xl">
+        <a
+          href={html_url}
+          target="_blank"
+          rel="noreferrer"
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          {repository_url.split('/').slice(-2).join('/')}#{number}
+          <br />
+          {title}
+        </a>
+      </h2>
 
-      <Stack direction="row" spacing={1}>
+      <div className="flex items-center gap-2">
         {labels?.map(
           label =>
             typeof label === 'object' && (
@@ -41,22 +46,23 @@ export const IssueCard: FC<IssueCardProps> = ({
               />
             ),
         )}
-      </Stack>
-
-      <Typography component="article" dangerouslySetInnerHTML={{ __html: marked(body || '') }} />
+      </div>
 
-      {user && (
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Avatar src={user.avatar_url} alt={user.name || ''} />
-          <Typography>{user.name || ''}</Typography>
-        </Stack>
-      )}
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Icon>chat_bubble_outline</Icon>
-        {comments}
-      </Stack>
+      <article dangerouslySetInnerHTML={{ __html: marked(body || '') }} />
 
-      <time dateTime={created_at}>{new Date(created_at).toLocaleString()}</time>
+      <footer className="flex items-center justify-between">
+        {user && (
+          <div className="flex items-center gap-2">
+            <Avatar src={user.avatar_url} alt={user.name || ''} />
+            {user.name || ''}
+          </div>
+        )}
+        <div className="flex items-center gap-2">
+          <SymbolIcon name="chat" />
+          {comments}
+        </div>
+        <time dateTime={created_at}>{new Date(created_at).toLocaleString()}</time>
+      </footer>
     </CardContent>
   </Card>
 );

components/Icon.tsx

@@ -5,7 +5,12 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: 'outlined' | 'rounded' | 'sharp';
 }
 
-export const SymbolIcon: FC<IconProps> = ({ className, name, variant = 'outlined', ...props }) => (
+export const SymbolIcon: FC<IconProps> = ({
+  className = '',
+  name,
+  variant = 'outlined',
+  ...props
+}) => (
   <span
     aria-hidden="false"
     aria-label={`${name} icon`}

components/Layout/MainNavigator.tsx

@@ -1,16 +1,6 @@
-import {
-  AppBar,
-  Button,
-  Drawer,
-  IconButton,
-  Menu,
-  MenuItem,
-  PopoverProps,
-  Toolbar,
-} from '@mui/material';
+import { AppBar, Drawer, IconButton, Menu, MenuItem, PopoverProps, Toolbar } from '@mui/material';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import Image from 'next/image';
 import Link from 'next/link';
 import { Component } from 'react';
 
@@ -21,6 +11,7 @@ import { BrandLogo, GithubIcon } from './Svg';
 
 export const mainNavLinks = () => [
   { title: t('latest_projects'), href: '/project' },
+  { title: 'GitHub-reward', href: '/project/reward/issue' },
   { title: t('member'), href: '/member' },
   { title: t('open_source_project'), href: '/open-source' },
 ];

models/Issue.ts

@@ -24,7 +24,7 @@ export class IssueModel extends ListModel<Issue, IssueFilter> {
   ) {
     const [org, repo] = repository_url?.replace('https://github.com/', '').split('/') || [];
 
-    const condition = Object.entries({ org, repo, state })
+    const condition = Object.entries({ org, repo, type: 'issue', state })
       .filter(([, value]) => !isEmpty(value))
       .map(([key, value]) => `${key}:${value}`)
       .join(' ');

pages/_document.tsx

@@ -40,7 +40,7 @@ export default function Document() {
          * */}
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=code,dark_mode,diversity_3,keyboard_arrow_down,language,light_mode,menu,translate,trending_up&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap"
         />
         <script type="application/ld+json">{JSON.stringify(siteNameJsonLd)}</script>
       </Head>