feat: UI Enhancement

i18n.json

@@ -1,7 +1,13 @@
 {
-  "locales": ["en", "ja"],
+  "locales": [
+    "en",
+    "ja"
+  ],
   "defaultLocale": "ja",
   "pages": {
-    "*": ["common"]
+    "*": [
+      "common",
+      "admin"
+    ]
   }
 }

locales/en/admin.json

@@ -1 +1,12 @@
-{}
+{
+  "quest": {
+    "SELECT_SHEET": "Select Sheet",
+    "SELECT_SHEET_LABEL": "Select Sheet"
+  },
+  "tab": {
+    "SET_QUESTIONS": "Set Quests",
+    "MANAGE_STUDENTS": "Manage Students",
+    "STATISTICS": "Statistics",
+    "SETTINGS": "Settings"
+  }
+}

locales/en/common.json

@@ -7,6 +7,10 @@
   "QUESTION": "Question",
   "SINGLE_SELECT": "Select single answer",
   "SUBMIT": "Submit",
+  "faucet": {
+    "ADDRESS_LABEL": "Enter your wallet address",
+    "ADDRESS_HELP_TEXT": "Your wallet address must be whitelisted to get funds."
+  },
   "nav": {
     "ADMIN": "Admin",
     "FAUCET": "Faucet",

locales/ja/admin.json

@@ -1 +1,12 @@
-{}
+{
+  "quests": {
+    "SELECT_SHEET": "Select Sheet",
+    "SELECT_SHEET_LABEL": "Select Sheet"
+  },
+  "tab": {
+    "SET_QUESTIONS": "Set Quests",
+    "MANAGE_STUDENTS": "Manage Students",
+    "STATISTICS": "Statistics",
+    "SETTINGS": "Settings"
+  }
+}

src/components/Answersheet.tsx

@@ -1,5 +1,5 @@
 import {
-  Alert, AlertIcon, Box,
+  Alert, AlertIcon, Badge, Box,
   Button, Heading, Progress, Spacer, Stack, Tab, TabList, TabPanel, TabPanels, Tabs,
 } from '@chakra-ui/react';
 import { ArrowLeftIcon, ArrowRightIcon, CheckCircleIcon, QuestionIcon } from '@chakra-ui/icons';
@@ -12,6 +12,7 @@ export const AnswerSheet = (props: { quests: Quest[] }) => {
   const [tabIndex, setTabIndex] = useState(0);
   const { t } = useTranslation('common');
   const [ans, setAns] = useState<Quest[]>(props.quests.map((q) => ({ ...q, answer: 0 })));
+  const answered = ans.filter(a => a.answer !== 0).length;
 
   const handleTabsChange = (index: number) => {
     setTabIndex(index);
@@ -21,36 +22,43 @@ export const AnswerSheet = (props: { quests: Quest[] }) => {
     setAns([...ans.slice(0, tabIndex), { ...ans[tabIndex], answer: answer }, ...ans.slice(tabIndex + 1)]);
   };
   return (
-    <Box>
+    <Box py={5}>
       <Stack direction={'row'} mb={5}>
         <Spacer />
         {/*<Button>Answers: {ans.map(a => a.answer?.toString(2).padStart(4, '0'))}</Button>*/}
         <Button
           leftIcon={<ArrowLeftIcon />}
+          borderLeftRadius={'full'}
           width={'10em'}
-          colorScheme={'cyan'}
+          colorScheme={'blue'}
           isDisabled={tabIndex == 0}
           onClick={() => {
             setTabIndex(tabIndex - 1);
-          }}>{t('PREVIOUS')}</Button>
+          }}>{t('PREVIOUS')}
+        </Button>
+        <Button width={'8em'} borderRadius={0}>{answered} / {ans.length}</Button>
         <Button
           rightIcon={<ArrowRightIcon />}
+          borderRightRadius={'full'}
           width={'10em'}
-          colorScheme={'cyan'}
+          colorScheme={'blue'}
           isDisabled={tabIndex === props.quests.length - 1}
           onClick={() => {
             setTabIndex(tabIndex + 1);
-          }}>{t('NEXT')}</Button>
-        <Button colorScheme={'red'}>{t('SUBMIT')}</Button>
+          }}>{t('NEXT')}
+        </Button>
+        <Spacer />
+
+        <Button colorScheme={'red'} width={'10em'}>{t('SUBMIT')}</Button>
       </Stack>
-      <Progress hasStripe={true} colorScheme='cyan' min={0} max={props.quests.length - 1} size='sm' value={tabIndex}
+      <Progress hasStripe={true} colorScheme='pink' min={0} max={props.quests.length} size='xs' value={answered}
                 mb={5} />
       <Tabs orientation={'vertical'} index={tabIndex} onChange={handleTabsChange}>
-        <TabList width={300}>
+        <TabList width={200} minWidth={200}>
           {props.quests.map((_, idx) => (
             <Tab key={`q_tab_${idx}`} justifyContent={'flex-start'}>
               {(ans[idx].answer ?? 0) > 0 ?
-                <CheckCircleIcon mx={4} color={(ans[idx].answer ?? 0) > 0 ? 'green.500' : 'transparent'} /> :
+                <CheckCircleIcon mx={4} color={(ans[idx].answer ?? 0) > 0 ? 'blue.500' : 'transparent'} /> :
                 <QuestionIcon mx={4} color={'yellow.500'} />}
               {t('QUESTION')} {idx + 1}
             </Tab>
@@ -59,11 +67,11 @@ export const AnswerSheet = (props: { quests: Quest[] }) => {
         <TabPanels>
           {props.quests.map(({ question, selection, options, answer }, questionIndex) => (
             <TabPanel key={`t_panel_${questionIndex}`}>
-              <Alert variant={'left-accent'} status={selection == 'single' ? 'info' : 'warning'} mb={5}>
+              <Alert variant={'subtle'} status={selection == 'single' ? 'info' : 'warning'} mb={5}>
                 <AlertIcon />
                 {selection === 'single' ? t('SINGLE_SELECT') : t('MULTI_SELECT')}
               </Alert>
-              <Heading size={'lg'} mb={3}>{questionIndex + 1}. {question}</Heading>
+              <Heading size={'md'} mb={3}>{questionIndex + 1}. {question}</Heading>
               <Box p={5}>
                 {selection === 'single' &&
                   <MultipleChoiceSingleSelect options={options} answer={answer} onAnswer={onAnswer} />}

src/components/RadioCard.tsx

@@ -34,7 +34,7 @@ export const RadioCard = (props: RadioCardProps) => {
         <Box
           bg={state.isChecked ? 'blue.500' : '#8887'}
           borderColor={state.isChecked ? 'blue.500' : '#aaa3'}
-          borderRadius={props.square ? '6px' : '12px'} mr={3}
+          borderRadius={props.square ? 'md' : 'full'} mr={3}
           w={'20px'} h={'20px'} minW={'20px'}
           display={'flex'} alignItems={'center'} justifyContent={'center'}>
           <CheckIcon boxSize={3} color={'white'} />

src/components/admin/QuestionManager.tsx

@@ -10,7 +10,7 @@ export const QuestionManager = () => {
   const [sheets, setSheets] = useState<string[]>([]);
   const [activeSheet, setActiveSheet] = useState('');
   const [questions, setQuestions] = useState<Quest[]>([]);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('admin');
   const [sheetsLoading, setSheetsLoading] = useState(false);
   const [sheetsError, setSheetsError] = useState(false);
 
@@ -47,8 +47,10 @@ export const QuestionManager = () => {
     <>
       <Stack mb={5} direction={'row'}>
         {sheets.length > 0 && <Select
-          borderRadius={'1rem'} borderWidth={2} variant={'filled'} display={'block'} width={'300px'}
-          placeholder={'Select Sheet'}
+          // border={'2px solid'} borderColor={'whiteAlpha.500'}
+          // variant={'filled'}
+          width={'300px'} borderWidth={2}
+          placeholder={t('quest.SELECT_SHEET')}
           isDisabled={sheetsLoading}
           onChange={(event) => {
             setActiveSheet(event.target.value);

src/layouts/Layout.tsx

@@ -1,7 +1,6 @@
 import {
   Heading,
   Box,
-  Link,
   Flex,
   Spacer,
   useColorMode,
@@ -23,7 +22,6 @@ import useTranslation from 'next-translate/useTranslation';
 import { default as NextLink } from 'next/link';
 import { MoonIcon, SunIcon, HamburgerIcon, LockIcon, UnlockIcon, WarningIcon } from '@chakra-ui/icons';
 import setLanguage from 'next-translate/setLanguage';
-import Footer from '@/components/Footer';
 import Head from 'next/head';
 import { useAccount, useNetwork } from 'wagmi';
 import { NavLink } from '@/components';
@@ -117,7 +115,6 @@ const Layout = ({ children }: LayoutProps) => {
         </Alert>}
         {children}
       </Box>
-      <Footer />
     </>
   );
 };

src/pages/admin.tsx

@@ -1,12 +1,5 @@
 import {
-  Alert, AlertDescription, AlertIcon, AlertTitle, Box,
-  Button,
-  Container,
-  Grid,
-  GridItem, Heading,
-  Progress,
-  Spacer, Spinner,
-  Stack,
+  Heading, Icon,
   Tab,
   TabList, TabPanel,
   TabPanels,
@@ -16,42 +9,53 @@ import useTranslation from 'next-translate/useTranslation';
 import { useAccount, useNetwork } from 'wagmi';
 import { QuestionManager } from '@/components/admin';
 import { defaultChain } from '@/utils/contract';
+import { FaFile, FaUsers, FaChartBar } from 'react-icons/fa';
+import { SettingsIcon } from '@chakra-ui/icons';
 
 const Admin = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('admin');
   const { address, connector, isConnected } = useAccount();
   const { chain } = useNetwork();
 
   const adminComponents = [
     {
-      title: t('SETQUESTIONS'),
+      title: t('tab.SET_QUESTIONS'),
+      icon: FaFile,
       component: <QuestionManager />,
     },
     {
-      title: t('Manage Students'),
+      title: t('tab.MANAGE_STUDENTS'),
+      icon: FaUsers,
       component: <Heading>Manage Students</Heading>,
     },
     {
-      title: t('Statistics'),
+      title: t('tab.STATISTICS'),
+      icon: FaChartBar,
       component: <Heading>Statistics</Heading>,
     },
     {
-      title: t('Settings'),
+      title: t('tab.SETTINGS'),
+      icon: SettingsIcon,
       component: <Heading>Settings</Heading>,
     },
   ];
 
 
   return (
     <>
-      {isConnected && chain?.id===defaultChain.id && <Tabs orientation={'vertical'} variant={'soft-rounded'} colorScheme={'blue'}>
-        <TabList width={300} minWidth={300}>
-          {adminComponents.map(({ title }, idx) => <Tab key={idx}>{title}</Tab>)}
-        </TabList>
-        <TabPanels>
-          {adminComponents.map(({ component }, idx) => <TabPanel key={idx}>{component}</TabPanel>)}
-        </TabPanels>
-      </Tabs>}
+      {isConnected && chain?.id === defaultChain.id &&
+        <Tabs orientation={'vertical'} variant={'unstyled'} colorScheme={'blue'}>
+          <TabList width={300} minWidth={300}>
+            {adminComponents.map(({ title, icon }, idx) => (
+              <Tab fontSize={'md'} key={idx} justifyContent={'flex-start'} _selected={{color: 'blue.500', fontWeight: 'bold'}}>
+                <Icon as={icon} mr={3} boxSize={5}/>
+                {title}
+              </Tab>))}
+          </TabList>
+          <TabPanels>
+            {adminComponents.map(({ component }, idx) => <TabPanel key={idx}>{component}</TabPanel>)}
+          </TabPanels>
+        </Tabs>}
     </>
 
   );

src/pages/faucet.tsx

@@ -1,10 +1,20 @@
-import { Heading } from '@chakra-ui/react';
+import { Container, FormControl, FormHelperText, FormLabel, Heading, Input } from '@chakra-ui/react';
+import useTranslation from 'next-translate/useTranslation';
 
-const FaucetPage = () =>{
-  return(
+const FaucetPage = () => {
+  const { t } = useTranslation('common');
+  return (
     <>
       <Heading>Faucet</Heading>
+      <Container size={'xl'} py={10}>
+        <FormControl>
+          <FormLabel>{t('faucet.ADDRESS_LABEL')}</FormLabel>
+          <Input placeholder={'0x00000000000000000000'} size={'lg'} borderRadius={'full'}/>
+          <FormHelperText>{t('faucet.ADDRESS_HELP_TEXT')}</FormHelperText>
+          <FormHelperText>{t('faucet.ADDRESS_HELP_TEXT')}</FormHelperText>
+        </FormControl>
+      </Container>
     </>
-  )
-}
+  );
+};
 export default FaucetPage;

src/pages/index.tsx

@@ -3,14 +3,18 @@ import {
   Stack,
 } from '@chakra-ui/react';
 import { ContractDetail } from '@/components/wallet';
+import Footer from '@/components/Footer';
 
 const Home = () => {
   return (
-    <Box p={10}>
-      <Stack alignItems={"center"}>
-        <ContractDetail />
-      </Stack>
-    </Box>
+    <>
+      <Box p={10} minH={'70vh'}>
+        <Stack alignItems={'center'}>
+          <ContractDetail />
+        </Stack>
+      </Box>
+      <Footer />
+    </>
   );
 };