improve styling

frontend/pages/account/tokens.js

@@ -87,6 +87,11 @@ const Tokens = () => {
                 <Input
                   type="search"
                   maxW="300px"
+                  flexBasis="50px"
+                  flexGrow={1}
+                  display="flex"
+                  minW="150px"
+                  w="unset"
                   borderRadius="md"
                   placeholder="Type here to filter by label name"
                   value={filter}
@@ -98,6 +103,7 @@ const Tokens = () => {
                 onClick={onOpen}
                 colorScheme="orange"
                 variant="solid"
+                px="2rem"
                 size="sm"
               >
                 Add new token

frontend/src/components/TokensList.js

@@ -11,6 +11,7 @@ import {
   EditableInput,
   Button,
   EditablePreview,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { DeleteIcon, TriangleDownIcon } from "@chakra-ui/icons";
 import moment from "moment";
@@ -32,6 +33,15 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
     direction: SORT_DIRECTION_TYPES.ASC,
   });
 
+  const buttonSize = useBreakpointValue({
+    base: "xs",
+    sm: "sm",
+    md: "sm",
+    lg: "sm",
+    xl: "sm",
+    "2xl": "sm",
+  });
+
   const sortedTokens = useMemo(() => {
     return data?.token?.sort(function (a, b) {
       var aName = a?.note?.toUpperCase();
@@ -85,7 +95,8 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
               <Button
                 variant="link"
                 my={0}
-                size="sm"
+                mx={0}
+                size={buttonSize}
                 colorScheme={
                   sortBy.column !== SORT_BY_TYPES.LABEL ? "blue" : "orange"
                 }
@@ -100,6 +111,9 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
                 }
                 rightIcon={
                   <TriangleDownIcon
+                    color={
+                      sortBy.column !== SORT_BY_TYPES.LABEL && "transparent"
+                    }
                     boxSize="12px"
                     transform={
                       sortBy.direction === SORT_DIRECTION_TYPES.ASC
@@ -112,12 +126,15 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
                 Label
               </Button>
             </Th>
-            <Th {...cellProps}>Token</Th>
-            <Th {...cellProps}>
+            <Th {...cellProps} fontSize={["xx-small", "xs", null]}>
+              Token
+            </Th>
+            <Th {...cellProps} fontSize={["xx-small", "xs", null]}>
               <Button
+                mx={0}
                 variant="link"
                 my={0}
-                size="sm"
+                size={buttonSize}
                 colorScheme={
                   sortBy.column !== SORT_BY_TYPES.DATE ? "blue" : "orange"
                 }
@@ -132,6 +149,9 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
                 }
                 rightIcon={
                   <TriangleDownIcon
+                    color={
+                      sortBy.column !== SORT_BY_TYPES.DATE && "transparent"
+                    }
                     boxSize="12px"
                     transform={
                       sortBy.direction === SORT_DIRECTION_TYPES.ASC
@@ -143,22 +163,10 @@ const List = ({ data, revoke, isLoading, update, filter }) => {
               >
                 {`Date Created`}
               </Button>
-
-              {/* <IconButton
-                hidden={sortBy.column !== SORT_BY_TYPES.DATE}
-                size="xs"
-                variant="ghost"
-                icon={}
-                onClick={() =>
-                  setSortBy({
-                    column: SORT_BY_TYPES.DATE,
-                    direction: !sortBy.direction,
-                  })
-                }
-
-              /> */}
             </Th>
-            <Th {...cellProps}>Actions</Th>
+            <Th {...cellProps} fontSize={["xx-small", "xs", null]}>
+              Actions
+            </Th>
           </Tr>
         </Thead>
         <Tbody>