some theme colors and improve darkmode (electricitymaps#52)

VIKTORVAV99 · Nov 25, 2022 · c2831f9 · c2831f9
1 parent 22c59b9
commit c2831f9
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 8 deletions.
diff --git a/web/src/components/ToggleButton.tsx b/web/src/components/ToggleButton.tsx
@@ -2,7 +2,6 @@ import { ReactElement } from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { useTranslation } from '../translation/translation';
-import { HiOutlineInformationCircle } from 'react-icons/hi2';
 
 interface ToggleButtonProperties {
   options: Array<{ value: string; translationKey: string }>;
@@ -22,7 +21,7 @@ export default function ToggleButton({
     <div className="z-10 flex h-9 rounded-full bg-gray-100  px-[5px] py-1  drop-shadow   dark:bg-gray-900">
       <ToggleGroupPrimitive.Root
         className={
-          ' flex-start flex h-[26px] flex-grow flex-row items-center justify-between self-center rounded-full  border   bg-gray-100 shadow-inner   dark:bg-gray-700'
+          ' flex-start flex h-[26px] flex-grow flex-row items-center justify-between self-center rounded-full    bg-gray-100 shadow-inner   dark:bg-gray-700'
         }
         type="multiple"
         aria-label="Font settings"

diff --git a/web/src/features/panels/LeftPanel.tsx b/web/src/features/panels/LeftPanel.tsx
@@ -39,7 +39,7 @@ function OuterPanel({ children }: { children: React.ReactNode }) {
 
   return (
     <aside
-      className={`absolute left-0 top-0 z-20 h-full w-full bg-zinc-50 shadow-xl transition-all duration-500 dark:bg-gray-800 md:flex md:w-[calc(14vw_+_16rem)] ${
+      className={`absolute left-0 top-0 z-20 h-full w-full bg-zinc-50 shadow-xl transition-all duration-500 dark:bg-gray-800 dark:[color-scheme:dark] md:flex md:w-[calc(14vw_+_16rem)] ${
         !isOpen && '-translate-x-full'
       }`}
     >

diff --git a/web/src/features/panels/ranking-panel/RankingPanel.tsx b/web/src/features/panels/ranking-panel/RankingPanel.tsx
@@ -8,9 +8,7 @@ import { getRankedState } from './getRankingPanelData';
 import SearchBar from './SearchBar';
 import ZoneList from './ZoneList';
 
-interface RankingPanelProperties {}
-
-export default function RankingPanel(properties: RankingPanelProperties): ReactElement {
+export default function RankingPanel(): ReactElement {
   const { __ } = useTranslation();
   const getCo2colorScale = useCo2ColorScale();
   const [timeAverage] = useAtom(timeAverageAtom);
@@ -22,7 +20,7 @@ export default function RankingPanel(properties: RankingPanelProperties): ReactE
     setSearchTerm(lowerCase);
   };
 
-  const { isLoading, isSuccess, isError, error, data } = useGetState(timeAverage);
+  const { isLoading, data } = useGetState(timeAverage);
   const rankedList = getRankedState(data, getCo2colorScale, 'asc', selectedDatetime);
   const filteredList = rankedList.filter((zone) => {
     if (zone.countryName && zone.countryName.toLowerCase().includes(searchTerm)) {

diff --git a/web/src/features/panels/ranking-panel/ZoneList.tsx b/web/src/features/panels/ranking-panel/ZoneList.tsx
@@ -20,7 +20,7 @@ export interface ZoneRow {
 function ZoneRow({ zoneId, color, ranking, countryName, zoneName }: ZoneRow) {
   return (
     <InternalLink
-      className="group my-1 flex h-9 w-full items-center overflow-hidden rounded bg-gray-100  pl-3 text-left hover:bg-gray-200"
+      className="group my-1 flex h-9 w-full items-center overflow-hidden rounded bg-gray-100 pl-3  text-left hover:bg-gray-200 dark:bg-gray-700"
       key={ranking}
       to={`/zone/${zoneId}`}
     >

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -12,6 +12,8 @@ const config = {
       },
       colors: {
         'brand-green': '#135836',
+        'brand-yellow': '#E9B73B',
+        'brand-brown': '#702214',
       },
     },
     fontFamily: {