[refine] member, project, issue, github card

Author: Soecka

components/Git/Issue/Card.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Card, CardContent, CardProps, Chip } from '@mui/material';
+import { Avatar, Box, Card, CardContent, CardProps, Chip } from '@mui/material';
 import { marked } from 'marked';
 import { Issue } from 'mobx-github';
 import { FC } from 'react';
@@ -9,6 +9,7 @@ export type IssueCardProps = Issue & Omit<CardProps, 'id'>;
 
 export const IssueCard: FC<IssueCardProps> = ({
   id,
+  className = '',
   repository_url,
   number,
   title,
@@ -18,51 +19,60 @@ export const IssueCard: FC<IssueCardProps> = ({
   user,
   comments,
   created_at,
+  component = 'li',
   ...props
 }) => (
-  <Card {...props}>
-    <CardContent className="flex h-full flex-col justify-between gap-2">
-      <h2 className="text-2xl font-semibold">
-        <a
-          href={html_url}
-          target="_blank"
-          rel="noreferrer"
-          style={{ textDecoration: 'none', color: 'inherit' }}
-        >
-          {repository_url.split('/').slice(-2).join('/')}#{number}
-          <br />
-          {title}
-        </a>
+  <Box
+    {...props}
+    component={component}
+    className={`elevation-1 hover:elevation-4 relative mb-4 grid break-inside-avoid grid-cols-1 grid-rows-5 gap-2 rounded-2xl border border-gray-200 p-4 dark:border-0 ${className}`}
+  >
+    <a
+      className="row-span-1 text-2xl font-semibold"
+      href={html_url}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <h2 className="text-lg">
+        {title}#{number}
       </h2>
+    </a>
 
-      <div className="flex items-center gap-2">
-        {labels?.map(
-          label =>
-            typeof label === 'object' && (
-              <Chip
-                key={label.name}
-                label={label.name}
-                style={{ backgroundColor: `#${label.color || 'e0e0e0'}` }}
-              />
-            ),
-        )}
-      </div>
+    <ul className="scrollbar-none scroll-snap-x row-span-1 flex snap-mandatory flex-nowrap gap-2 overflow-x-scroll">
+      {labels?.map(
+        label =>
+          typeof label === 'object' && (
+            <Chip
+              key={label.name}
+              size="small"
+              component="li"
+              variant="outlined"
+              color="primary"
+              label={label.name}
+            />
+          ),
+      )}
+    </ul>
 
-      <article dangerouslySetInnerHTML={{ __html: marked(body || '', { async: false }) }} />
+    <article
+      dangerouslySetInnerHTML={{ __html: marked(body || '', { async: false }) }}
+      className="row-span-3"
+    />
 
-      <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>
-        )}
+    <footer className="row-span-1 flex items-center justify-between text-neutral-500">
+      {user && (
         <div className="flex items-center gap-2">
-          <SymbolIcon name="chat" />
-          {comments}
+          <Avatar src={user.avatar_url} alt={user.name || ''} />
+          {user.name || ''}
         </div>
-        <time dateTime={created_at}>{new Date(created_at).toLocaleString()}</time>
-      </footer>
-    </CardContent>
-  </Card>
+      )}
+      <div className="flex items-center gap-2">
+        <SymbolIcon name="chat" />
+        {comments}
+      </div>
+      <time className="text-sm" dateTime={created_at}>
+        {new Date(created_at).toLocaleString()}
+      </time>
+    </footer>
+  </Box>
 );

components/Layout/MainNavigator.tsx

@@ -121,7 +121,8 @@ export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
             <div className="flex flex-row items-center gap-3">
               {this.renderDrawer()}
 
-              <BrandLogo />
+              <BrandLogo className="dark:!hidden" variant="black" />
+              <BrandLogo className="!hidden dark:!block" variant="white" />
               <Link translate="no" className="font-bold uppercase" href="/" rel="home">
                 idea2app
               </Link>

components/Layout/Svg.tsx

@@ -19,10 +19,10 @@ export const OcticonIcon: FC<SvgIconProps> = props => (
 
 export const GitpodIcon: FC<SvgIconProps> = props => (
   <SvgIcon {...props}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 189 208">
+    <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M112.287 10.358c5.613 9.855 2.2 22.409-7.623 28.04L43.586 73.41a5.2 5.2 0 0 0-2.614 4.51V132.9c0 1.864.997 3.584 2.614 4.511l48.326 27.703a5.202 5.202 0 0 0 5.176 0l48.326-27.703a5.199 5.199 0 0 0 2.614-4.511v-34.19l-43.461 24.6c-9.854 5.577-22.35 2.085-27.909-7.8-5.56-9.885-2.079-22.42 7.775-27.997l62.187-35.2C165.563 41.592 189 55.322 189 77.14v59.926c0 14.036-7.497 26.996-19.645 33.96l-55.511 31.821a38.883 38.883 0 0 1-38.688 0l-55.51-31.821C7.496 164.062 0 151.102 0 137.066V73.754c0-14.036 7.497-26.996 19.645-33.96L84.336 2.712c9.823-5.63 22.337-2.207 27.951 7.647Z"
-        clip-rule="evenodd"
+        d="M91.8707 28.1143C93.7734 30.0343 94.9965 32.64 94.9965 35.6571V60.48C94.9965 63.4971 93.7734 66.1029 91.8707 68.0229L67.2722 92.8457C65.3695 94.9029 62.6515 96 59.7975 96H35.199C32.2091 96 29.6269 94.9029 27.5884 92.8457L2.98982 68.0229C1.08717 66.1029 -6.10352e-05 63.4971 -6.10352e-05 60.48V35.6571C-6.10352e-05 32.64 1.08717 30.0343 2.98982 27.9771L27.5884 3.15429C29.6269 1.23429 32.2091 0 35.199 0H59.7975C62.6515 0 65.3695 1.23429 67.2722 3.29143L91.8707 28.1143ZM72.4647 62.5656V33.5716C72.4647 27.6744 67.7081 22.7373 61.8642 22.7373H33.1322C27.1525 22.7373 22.3958 27.6744 22.3958 33.5716V62.5656C22.3958 68.4627 27.1525 73.2627 33.1322 73.2627H61.8642C67.7081 73.2627 72.4647 68.4627 72.4647 62.5656Z"
+        fill="currentColor"
       />
     </svg>
   </SvgIcon>

components/Member/Card.tsx

@@ -48,7 +48,6 @@ export const MemberCard: FC<MemberCardProps> = observer(
         {(skill as string[]).map(value => (
           <Chip
             key={value}
-            className=""
             size="small"
             component="li"
             variant="outlined"

components/Project/Card.tsx

@@ -21,25 +21,32 @@ export const ProjectCard: FC<ProjectCardProps> = ({
 }) => (
   <Box
     component={component}
-    className={`${className} flex flex-col justify-between gap-4 rounded-2xl border p-4 elevation-1 hover:elevation-8 dark:border-0`}
+    className={`elevation-1 hover:elevation-4 relative rounded-2xl border border-gray-200 p-4 dark:border-0 ${className} mb-4 grid break-inside-avoid grid-cols-1 grid-rows-4 gap-2`}
   >
-    <h2 className="flex items-center justify-between">
-      <a className="text-lg" title={String(name)} href={`/project/${id}`}>
-        {String(name)}
-      </a>
+    <a className="row-span-2 flex items-center justify-between" href={`/project/${id}`}>
+      <h2 className="text-lg">{String(name)}</h2>
       <Chip label={String(workForm)} />
-    </h2>
-    <ul className="flex flex-row flex-wrap gap-3">
+    </a>
+    <ul className="scrollbar-none scroll-snap-x row-span-1 flex snap-mandatory flex-nowrap gap-2 overflow-x-scroll">
       {(type as string[])?.map(value => (
-        <Chip key={value} component="li" size="small" label={value} />
+        <Chip
+          key={value}
+          size="small"
+          component="li"
+          variant="outlined"
+          color="primary"
+          label={value}
+        />
       ))}
     </ul>
-    <div className="flex items-center justify-between">
+    <div className="row-span-1 flex items-center justify-between">
       <strong className="flex-fill">
         ￥{String(price).replace(/\d/g, (matched, offset) => (offset ? '0' : matched))}+
       </strong>
 
-      <time>🏁 {formatDate(+settlementDate!, 'YYYY-MM-DD')}</time>
+      <time className="text-sm text-neutral-500">
+        🏁 {formatDate(+settlementDate!, 'YYYY-MM-DD')}
+      </time>
     </div>
   </Box>
 );

components/Project/index.tsx

@@ -9,7 +9,7 @@ export interface ProjectListLayoutProps {
 }
 
 export const ProjectListLayout: FC<ProjectListLayoutProps> = ({ className = '', defaultData }) => (
-  <ul className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3`}>
+  <ul className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3`}>
     {defaultData.map(item => (
       <ProjectCard key={String(item.id)} className="h-full" {...item} />
     ))}

pages/member/[nickname].tsx

@@ -63,13 +63,14 @@ export default class MemberDetailPage extends ObservedComponent<
         <PageHead title={member.nickname as string} />
 
         <div className="flex flex-col gap-4 md:flex-row">
-          <ul className="w-full md:w-1/3">
+          <ul className="w-full md:w-1/4">
             <MemberCard {...member} />
           </ul>
 
-          <div className="flex w-full flex-col items-center rounded-2xl border-2 md:w-2/3">
+          <div className="flex w-full flex-col rounded-2xl md:w-3/4">
             <TabContext value={this.eventKey}>
               <TabList
+                className="mx-auto"
                 component="ul"
                 aria-label="project tab"
                 variant="fullWidth"
@@ -94,7 +95,7 @@ export default class MemberDetailPage extends ObservedComponent<
                 ))}
               </TabList>
               {entries.map(([label, list], index) => (
-                <TabPanel key={label} value={index + ''}>
+                <TabPanel key={label} className="px-0!" value={index + ''}>
                   <ProjectListLayout defaultData={list} />
                 </TabPanel>
               ))}

pages/project/[id].tsx

@@ -45,7 +45,12 @@ const ProjectDetailPage: FC<ProjectDetailPageProps> = observer(({ project, repos
       <PageHead title={String(project.name)} />
 
       <div className="flex flex-col gap-4 md:flex-row">
-        <a className="w-full md:w-2/3" href={String(project.link) || '#'}>
+        <a
+          className="w-full md:w-2/3"
+          href={String(project.link) || '#'}
+          target="_blank"
+          rel="noreferrer"
+        >
           {/**
            * @todo replace with LarkImage after R2 is ready
            */}
@@ -57,9 +62,9 @@ const ProjectDetailPage: FC<ProjectDetailPageProps> = observer(({ project, repos
           <hr />
           <h2 className="text-xl">{t('open_source_project')}</h2>
 
-          <ul>
+          <ul className="flex max-h-[45rem] snap-y flex-col gap-4 overflow-y-auto">
             {repositories.map(repository => (
-              <GitCard key={repository.id} {...repository} />
+              <GitCard key={repository.id} className="snap-center" {...repository} />
             ))}
           </ul>
         </div>

pages/project/reward/issue.tsx

@@ -25,29 +25,28 @@ export const getServerSideProps = compose(githubOAuth, errorLogger, async () =>
 
 const IssuesPage: FC<{ list: Issue[] }> = observer(({ list }) => {
   const i18n = useContext(I18nContext);
+  const { t } = i18n;
 
   return (
-    <Grid container className="px-4 py-20">
-      <PageHead title="GitHub-reward issues" />
+    <div className="container mx-auto max-w-screen-xl px-4 pt-16 pb-6">
+      <PageHead title={t('github_reward_issues')} />
 
-      <h1>GitHub-reward issues</h1>
+      <h1 className="my-8 text-4xl font-semibold">{t('github_reward_issues')}</h1>
 
       <ScrollList
         translator={i18n}
         store={issueStore}
         filter={issueFilter}
         defaultData={list}
         renderList={allItems => (
-          <Grid container spacing={2}>
+          <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {allItems.map(issue => (
-              <Grid key={issue.id} size={{ xs: 12, sm: 6, md: 4 }}>
-                <IssueCard className="h-full" {...issue} />
-              </Grid>
+              <IssueCard key={issue.id} className="h-full" {...issue} />
             ))}
-          </Grid>
+          </ul>
         )}
       />
-    </Grid>
+    </div>
   );
 });
 

pages/wiki/[node_token].tsx

@@ -46,7 +46,7 @@ interface WikiDocumentPageProps {
 }
 
 const WikiDocumentPage: FC<WikiDocumentPageProps> = ({ node, blocks }) => (
-  <div className="prose container mx-auto max-w-screen-xl px-4 pt-16 pb-6">
+  <div className="prose container mx-auto max-w-screen-xl px-4 pt-24 pb-6">
     <PageHead title={node.title} />
 
     {renderBlocks(blocks)}