Chore: Minor style updates

Author: jeremy-code

apps/api/package.json

@@ -22,7 +22,7 @@
     "graphql-fields": "^2.0.3",
     "graphql-scalars": "^1.18.0",
     "helmet": "^6.0.0",
-    "mongodb": "4.9",
+    "mongodb": "^4.10.0",
     "pino": "^8.5.0",
     "pino-pretty": "^9.1.0",
     "reflect-metadata": "^0.1.13",

apps/client/package.json

@@ -13,18 +13,18 @@
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@builder.io/partytown": "^0.7.0",
-    "@chakra-ui/icons": "^2.0.9",
+    "@chakra-ui/icons": "^2.0.10",
     "@chakra-ui/react": "^2.3.2",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@heroicons/react": "^2.0.10",
+    "@heroicons/react": "^2.0.11",
     "@tanstack/react-table": "^8.5.13",
     "chakra-react-select": "^4.2.2",
     "chart.js": "^3.9.1",
     "database": "*",
     "framer-motion": "^7.3.6",
     "graphql": "^15.3.0",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
     "next-sitemap": "^3.1.22",
     "pino": "^8.5.0",
     "pino-pretty": "^9.1.0",

apps/client/src/components/Card/IconCard.tsx

@@ -1,5 +1,12 @@
 import React from "react";
-import { Flex, Text, Skeleton, Link, Box } from "@chakra-ui/react";
+import {
+  Flex,
+  Text,
+  Skeleton,
+  Link,
+  Box,
+  useColorModeValue,
+} from "@chakra-ui/react";
 
 import { Card } from "@/components/Card";
 import { Icon } from "@/components/Icon";
@@ -15,12 +22,9 @@ type IconCardProps = {
   }[];
 } & React.ComponentProps<typeof Card>;
 
-const IconCard = ({
-  title,
-  isLoaded = true,
-  items,
-  ...props
-}: IconCardProps) => {
+const IconCard = ({ title, isLoaded, items, ...props }: IconCardProps) => {
+  const iconColor = useColorModeValue("gray.500", "gray.300");
+
   return (
     <Flex flexDir="column">
       <Text fontWeight="bold" mb={2}>
@@ -40,7 +44,7 @@ const IconCard = ({
 
             return (
               <Flex key={index} align="center">
-                <Icon {...icon} mr={4} />
+                <Icon {...icon} mr={4} color={iconColor} />
 
                 {url && text ? (
                   <Link href={url.href} isExternal>

apps/client/src/components/Layout/Sidebar.tsx

@@ -58,7 +58,12 @@ const Sidebar = ({ children }: SidebarProps) => {
       </Drawer>
       {/* mobilenav */}
       <MobileNav display={{ base: "flex", md: "none" }} onOpen={onOpen} />
-      <Box ml={{ base: 0, md: 60 }}>{children}</Box>
+      <Box
+        ml={{ base: 0, md: 60 }}
+        bg={useColorModeValue("gray.50", "gray.900")}
+      >
+        {children}
+      </Box>
     </Box>
   );
 };

apps/client/src/components/Official/Legislation.tsx

@@ -10,7 +10,7 @@ import {
 const Legislation = () => {
   return (
     <Grid templateColumns={["1fr", null, "repeat(3, 1fr)"]} gap={8}>
-      <Stack gap={8}>
+      <Stack gap={8} flexDir={["row", null, "column"]} align="center">
         <VotedWithPartyChart />
         <PolarizationChart />
       </Stack>

apps/client/src/components/Official/OfficialHeader.tsx

@@ -30,7 +30,7 @@ const OfficialHeader = ({ photoUrl }: OfficialHeaderProps) => {
   return (
     <Grid
       templateRows="repeat(2, 1fr)"
-      templateColumns="11rem 1fr"
+      templateColumns="9rem 1fr"
       pb={4}
       borderWidth="0 1px"
       borderStyle="solid"

apps/client/src/components/Official/Stats/FinancialInfo.tsx

@@ -36,7 +36,7 @@ export const FinancialInfo = () => {
   if (error) return <>&quot;Financial Info&quot; failed to load</>;
 
   return (
-    <Stack p={4}>
+    <Stack>
       <Heading size="md" mb={4}>
         Financial Info
       </Heading>

packages/eslint-config-custom-server/package.json

@@ -7,6 +7,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@typescript-eslint/parser": "^5.37.0"
+    "@typescript-eslint/parser": "^5.38.0"
   }
 }

packages/eslint-config-custom/package.json

@@ -11,7 +11,7 @@
     "eslint-plugin-react": "^7.31.8"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/parser": "^5.38.0",
     "typescript": "^4.8.3"
   },
   "publishConfig": {