feat: add button component

src/components/Buttons/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonProps, Button } from '@chakra-ui/button';
+import { AddIcon } from '@chakra-ui/icons';
+
+export const CreateButton: React.FC<ButtonProps> = props => (
+  <Button variant='outline' size='sm' leftIcon={<AddIcon />} {...props}>
+    Create new
+  </Button>
+);

src/pages/courses/courses.tsx

@@ -27,6 +27,7 @@ import { useRootStore } from '@educt/hooks/useRootStore';
 import { useHistory } from 'react-router';
 import CategoryItem from './components/CategoryList/CategoryItem';
 import CourseItem from './components/CourseList/CourseItem';
+import { CreateButton } from '@educt/components/Buttons';
 
 /**
  * Courses page
@@ -47,16 +48,7 @@ const CoursesPage: React.FC<IPageProps> = () => {
             <Heading as='h1'>Courses</Heading>
             <Text mt='2'>List of all courses.</Text>
           </Box>
-          {(me.isAdmin || me.isTeacher) && (
+          {(me.isAdmin || me.isTeacher) && <CreateButton onClick={() => history.push('/courses/create')} />}
-            <Button
-              onClick={() => history.push('/courses/create')}
-              variant='outline'
-              colorScheme='blue'
-              leftIcon={<AddIcon />}
-            >
-              Create new
-            </Button>
-          )}
         </Flex>
         <Box mt='7'>
           {(me.isAdmin || me.isTeacher) && <CourseStatusTabs />}

src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx

@@ -24,7 +24,7 @@ const BulkActionsMenu: React.FC<BulkActionsMenuPropsType> = ({ selected, rows, s
 
   return (
     <Menu isLazy>
-      <MenuButton as={Button} mr='3' ml='auto' rightIcon={<ChevronDownIcon />}>
+      <MenuButton as={Button} size='sm' variant='outline' mr='3' ml='auto' rightIcon={<ChevronDownIcon />}>
         Bulk Actions
       </MenuButton>
       <MenuList>

src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx

@@ -17,6 +17,7 @@ import type { ICourse } from '@educt/interfaces';
  */
 import { useCallback, useState } from 'react';
 import { useDisclosure } from '@chakra-ui/react';
+import { AddIcon } from '@chakra-ui/icons';
 
 type StudentTableListPropsType = {
   render: React.FC<StudentTableRowPropsType>;
@@ -90,7 +91,7 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
         <Flex mb='2'>
           <InputGroup mr='2'>
             <InputLeftElement pointerEvents='none' children={<MdSearch color='gray.300' />} />
-            <Input value={search} onChange={handleSearch} type='text' placeholder='Search for student...' />
+            <Input value={search} size='sm' onChange={handleSearch} type='text' placeholder='Search for student...' />
           </InputGroup>
         </Flex>
 
@@ -103,7 +104,7 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
               <BulkActionsMenu selected={selected} rows={rows} setRows={setRows} />
             </>
           )}
-          <Button onClick={onOpenAddStudentModal} variant='outline' colorScheme='blue'>
+          <Button onClick={onOpenAddStudentModal} leftIcon={<AddIcon />} size='sm' variant='outline'>
             Add new
           </Button>
         </Flex>
@@ -121,6 +122,9 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
           ))}
         </Tbody>
       </Table>
+      <Text mt='4' fontSize='sm' color='gray.500'>
+        {students.length} students
+      </Text>
     </Box>
   );
 };

src/pages/users/components/CreateUserForm/CreateUserForm.tsx

@@ -50,6 +50,7 @@ import { UsersPageContext } from '@educt/contexts';
  * Schema
  */
 import CreateUserSchema from './CreateUserForm.validator';
+import { CreateButton } from '@educt/components/Buttons';
 
 type CreateUserFormPropsType = {};
 
@@ -108,9 +109,7 @@ const CreateUserModal: React.FC<CreateUserFormPropsType> = () => {
 
   return (
     <>
-      <Button onClick={onOpen} variant='outline' colorScheme='blue' leftIcon={<AddIcon />}>
+      <CreateButton onClick={onOpen} />
-        Create new
-      </Button>
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent>

src/pages/users/components/UserList/UserList.tsx

@@ -77,7 +77,7 @@ const UserList: React.FC<UserListPropsType> = ({ render: Item, limit }) => {
       {users.length !== 0 ? (
         <>
           <Box>
-            <Flex mt='7' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
+            <Flex mt='5' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
               <Text>Total: ({pagination.total})</Text>
               <Text>Actions</Text>
             </Flex>
@@ -98,7 +98,9 @@ const UserList: React.FC<UserListPropsType> = ({ render: Item, limit }) => {
           </Box>
           <Flex margin='2rem 0' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
             <Box textAlign={{ base: 'center', sm: 'center', md: 'left' }} mb={{ base: '2', md: '0' }}>
-              Page <b>{pagination.current_page}</b> of {pagesCount}
+              <Text fontSize='sm'>
+                Page <b>{pagination.current_page}</b> of {pagesCount}
+              </Text>
             </Box>
             <Flex ml='auto' mr='auto' justifyContent='center' flexWrap='wrap' alignItems='center' sx={{ gap: '30px' }}>
               <Button

src/pages/users/components/UserSearch/UserSearch.tsx

@@ -43,13 +43,13 @@ const UserSearch: React.FC = () => {
 
   return (
     <Flex flexBasis='600px'>
-      <Select value={searchingRole} onChange={onSearchRole} w='full' mr='2'>
+      <Select value={searchingRole} onChange={onSearchRole} size='sm' w='full' mr='2'>
         <option value='any'>Any role</option>
         <option value={UserRoleEnum.ADMIN}>Administrator</option>
         <option value={UserRoleEnum.TEACHER}>Teacher</option>
         <option value={UserRoleEnum.STUDENT}>Student</option>
       </Select>
-      <InputGroup maxW='400px' w='full'>
+      <InputGroup maxW='400px' w='full' size='sm'>
         <InputLeftElement pointerEvents='none' children={<SearchIcon color='gray.300' />} />
         <Input placeholder='Search for a user...' value={search || ''} onChange={onSearch} />
       </InputGroup>