Added moon icon for when the light mode is active, removed oddly big …

…gap between sign-in and color-mode button (#1989)

Hey, I improved the color-mode button so that when the light mode is
active a moon-icon is shown:

![image](https://user-images.githubusercontent.com/25230234/223041608-45fde435-a74f-4788-8370-1da88784a108.png)

A small, second change:
When the user is not signed in the gap between the sign-in button and
the color-mode toggler is oddly big:

![image](https://user-images.githubusercontent.com/25230234/223039079-695e535c-802e-4d04-ac50-e46764da98c0.png)
The reason is that even when the user score is ``null`` the div around
the ``<UserScore />`` component is still rendered:
```html
<div className="hidden md:block">
    <UserScore />
</div>
```
It seems that this can be solved by moving the outter div inside the
``<UserScore />`` component:
```html
<div className="hidden md:block">
    <HStack gap="1" title={t("score")}>
        <>{score}</>
        <Icon as={Star} fill="gold" w="5" h="5" color="gold" />
    </HStack>
</div>
```

---------

Co-authored-by: Oliver Stanley <olivergestanley@gmail.com>

website/src/components/Header/ColorModeToggler.jsx

@@ -1,12 +1,12 @@
 import { Button, useColorMode } from "@chakra-ui/react";
-import { Sun } from "lucide-react";
+import { Sun, Moon } from "lucide-react";
 
 const ColorModeToggler = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
     <Button size="md" p="0px" justifyContent="center" onClick={toggleColorMode} gap="4" variant="ghost">
-      <Sun size={"1.5em"} />
+      {colorMode == "dark" ? <Sun size={"1.5em"} /> : <Moon size={"1.5em"} />}
     </Button>
   );
 };

website/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { LanguageSelector } from "src/components/LanguageSelector";
+import { Show } from "@chakra-ui/react";
 
 import { ColorModeToggler } from "./ColorModeToggler";
 import { UserMenu } from "./UserMenu";
@@ -47,9 +48,9 @@ export function Header() {
           <LanguageSelector />
           <AccountButton />
           <UserMenu />
-          <div className="hidden md:block">
+          <Show above="md">
             <UserScore />
-          </div>
+          </Show>
           <ColorModeToggler />
         </Flex>
       </Box>