[fix] brand logo, gitpod dark mode layout

Author: Soecka

components/Git/Card.tsx

@@ -1,4 +1,4 @@
-import { Button, Chip, Divider, IconButton } from '@mui/material';
+import { Button, Chip, Divider, IconButton, Tooltip } from '@mui/material';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import Link from 'next/link';
@@ -47,25 +47,31 @@ export const GitCard: FC<GitCardProps> = observer(
         <p className="row-span-3 text-sm text-neutral-500">{description}</p>
         <div className="row-span-1 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <IconButton
-              component="a"
-              target="_blank"
-              href={`https://codespaces.new/${full_name}`}
-              rel="noreferrer"
-            >
-              <OcticonIcon />
-            </IconButton>
-            <IconButton
-              component="a"
-              target="_blank"
-              href={`https://gitpod.io/?autostart=true#${html_url}`}
-              rel="noreferrer"
-            >
-              <GitpodIcon className="h-6 w-6 font-extralight" />
-            </IconButton>
-            <IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
-              <SymbolIcon name="code" />
-            </IconButton>
+            <Tooltip title="Codespaces">
+              <IconButton
+                component="a"
+                target="_blank"
+                href={`https://codespaces.new/${full_name}`}
+                rel="noreferrer"
+              >
+                <OcticonIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Gitpod">
+              <IconButton
+                component="a"
+                target="_blank"
+                href={`https://gitpod.io/?autostart=true#${html_url}`}
+                rel="noreferrer"
+              >
+                <GitpodIcon className="h-6 w-6 font-extralight dark:fill-white" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Code">
+              <IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
+                <SymbolIcon name="code" />
+              </IconButton>
+            </Tooltip>
           </div>
 
           <Button

components/Layout/Svg.tsx

@@ -1,6 +1,10 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 import { FC } from 'react';
 
+export interface LogoProps extends SvgIconProps {
+  variant?: 'white' | 'black';
+}
+
 export const GithubIcon: FC<SvgIconProps> = props => (
   <SvgIcon {...props}>
     <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z" />
@@ -24,7 +28,7 @@ export const GitpodIcon: FC<SvgIconProps> = props => (
   </SvgIcon>
 );
 
-export const BrandLogo: FC<SvgIconProps> = props => (
+export const BrandLogo: FC<LogoProps> = ({ variant = 'white', ...props }) => (
   <SvgIcon {...props}>
     <svg
       width="234"
@@ -50,7 +54,7 @@ export const BrandLogo: FC<SvgIconProps> = props => (
       />
       <path
         d="M30.204 102C29.748 102 29.412 101.904 29.196 101.712C29.004 101.496 28.908 101.16 28.908 100.704V96.42C28.908 95.964 29.004 95.64 29.196 95.448C29.412 95.232 29.748 95.124 30.204 95.124H33.768V83.028H30.204C29.748 83.028 29.412 82.932 29.196 82.74C29.004 82.524 28.908 82.188 28.908 81.732V77.376C28.908 76.92 29.004 76.596 29.196 76.404C29.412 76.188 29.748 76.08 30.204 76.08H45.54C45.996 76.08 46.32 76.188 46.512 76.404C46.728 76.596 46.836 76.92 46.836 77.376V81.732C46.836 82.188 46.728 82.524 46.512 82.74C46.32 82.932 45.996 83.028 45.54 83.028H42.048V95.124H45.54C45.996 95.124 46.32 95.232 46.512 95.448C46.728 95.64 46.836 95.964 46.836 96.42V100.704C46.836 101.16 46.728 101.496 46.512 101.712C46.32 101.904 45.996 102 45.54 102H30.204ZM64.7089 102H52.5769C52.1209 102 51.7849 101.904 51.5689 101.712C51.3769 101.496 51.2809 101.16 51.2809 100.704V77.376C51.2809 76.92 51.3769 76.596 51.5689 76.404C51.7849 76.188 52.1209 76.08 52.5769 76.08H64.7089C67.7089 76.08 69.9289 76.68 71.3689 77.88C72.8329 79.08 73.5649 80.928 73.5649 83.424V94.656C73.5649 97.152 72.8329 99 71.3689 100.2C69.9289 101.4 67.7089 102 64.7089 102ZM59.4529 82.956V95.196H63.7369C64.3129 95.196 64.7329 95.052 64.9969 94.764C65.2849 94.476 65.4289 94.032 65.4289 93.432V84.684C65.4289 84.084 65.2849 83.652 64.9969 83.388C64.7329 83.1 64.3129 82.956 63.7369 82.956H59.4529ZM96.1403 102H79.4363C78.9803 102 78.6443 101.904 78.4283 101.712C78.2363 101.496 78.1403 101.16 78.1403 100.704V77.376C78.1403 76.92 78.2363 76.596 78.4283 76.404C78.6443 76.188 78.9803 76.08 79.4363 76.08H96.1403C96.5963 76.08 96.9203 76.188 97.1123 76.404C97.3283 76.596 97.4363 76.92 97.4363 77.376V81.588C97.4363 82.044 97.3283 82.38 97.1123 82.596C96.9203 82.788 96.5963 82.884 96.1403 82.884H86.2043V85.656H93.2243C93.6803 85.656 94.0043 85.764 94.1963 85.98C94.4123 86.172 94.5203 86.496 94.5203 86.952V90.804C94.5203 91.26 94.4123 91.596 94.1963 91.812C94.0043 92.004 93.6803 92.1 93.2243 92.1H86.2043V95.196H96.1403C96.5963 95.196 96.9203 95.304 97.1123 95.52C97.3283 95.712 97.4363 96.036 97.4363 96.492V100.704C97.4363 101.16 97.3283 101.496 97.1123 101.712C96.9203 101.904 96.5963 102 96.1403 102ZM111.091 83.64L109.399 89.112H115.051L113.359 83.64C113.263 83.424 113.155 83.268 113.035 83.172C112.939 83.076 112.819 83.028 112.675 83.028H111.775C111.631 83.028 111.499 83.076 111.379 83.172C111.283 83.268 111.187 83.424 111.091 83.64ZM109.039 100.704C109.039 101.16 108.931 101.496 108.715 101.712C108.523 101.904 108.199 102 107.743 102H102.451C101.995 102 101.659 101.904 101.443 101.712C101.251 101.496 101.155 101.16 101.155 100.704V91.2C101.155 90.48 101.263 89.652 101.479 88.716C101.719 87.78 102.079 86.688 102.559 85.44L105.691 77.268C105.835 76.86 106.051 76.56 106.339 76.368C106.651 76.176 107.047 76.08 107.527 76.08H117.211C117.667 76.08 118.039 76.176 118.327 76.368C118.639 76.56 118.867 76.86 119.011 77.268L122.143 85.44C122.623 86.688 122.971 87.78 123.187 88.716C123.427 89.652 123.547 90.48 123.547 91.2V100.704C123.547 101.16 123.439 101.496 123.223 101.712C123.031 101.904 122.707 102 122.251 102H116.815C116.335 102 115.975 101.904 115.735 101.712C115.519 101.496 115.411 101.16 115.411 100.704V95.664H109.039V100.704ZM145.38 102H128.244C127.788 102 127.452 101.904 127.236 101.712C127.044 101.496 126.948 101.16 126.948 100.704V94.512C126.948 93.12 127.08 91.98 127.344 91.092C127.632 90.18 128.028 89.436 128.532 88.86C129.036 88.284 129.636 87.828 130.332 87.492C131.028 87.156 131.784 86.868 132.6 86.628L137.424 85.116C137.808 85.02 138.06 84.876 138.18 84.684C138.324 84.492 138.396 84.204 138.396 83.82C138.396 83.46 138.324 83.22 138.18 83.1C138.036 82.956 137.784 82.884 137.424 82.884H129.612C129.156 82.884 128.82 82.788 128.604 82.596C128.412 82.38 128.316 82.044 128.316 81.588V77.376C128.316 76.92 128.412 76.596 128.604 76.404C128.82 76.188 129.156 76.08 129.612 76.08H140.232C142.272 76.08 143.832 76.596 144.912 77.628C146.016 78.636 146.568 80.112 146.568 82.056V85.44C146.568 87.24 146.064 88.62 145.056 89.58C144.048 90.54 142.68 91.284 140.952 91.812L136.056 93.36C135.696 93.456 135.444 93.564 135.3 93.684C135.18 93.804 135.12 94.056 135.12 94.44V95.196H145.38C145.836 95.196 146.16 95.304 146.352 95.52C146.568 95.712 146.676 96.036 146.676 96.492V100.704C146.676 101.16 146.568 101.496 146.352 101.712C146.16 101.904 145.836 102 145.38 102ZM160.38 83.64L158.688 89.112H164.34L162.648 83.64C162.552 83.424 162.444 83.268 162.324 83.172C162.228 83.076 162.108 83.028 161.964 83.028H161.064C160.92 83.028 160.788 83.076 160.668 83.172C160.572 83.268 160.476 83.424 160.38 83.64ZM158.328 100.704C158.328 101.16 158.22 101.496 158.004 101.712C157.812 101.904 157.488 102 157.032 102H151.74C151.284 102 150.948 101.904 150.732 101.712C150.54 101.496 150.444 101.16 150.444 100.704V91.2C150.444 90.48 150.552 89.652 150.768 88.716C151.008 87.78 151.368 86.688 151.848 85.44L154.98 77.268C155.124 76.86 155.34 76.56 155.628 76.368C155.94 76.176 156.336 76.08 156.816 76.08H166.5C166.956 76.08 167.328 76.176 167.616 76.368C167.928 76.56 168.156 76.86 168.3 77.268L171.432 85.44C171.912 86.688 172.26 87.78 172.476 88.716C172.716 89.652 172.836 90.48 172.836 91.2V100.704C172.836 101.16 172.728 101.496 172.512 101.712C172.32 101.904 171.996 102 171.54 102H166.104C165.624 102 165.264 101.904 165.024 101.712C164.808 101.496 164.7 101.16 164.7 100.704V95.664H158.328V100.704ZM184.157 102H178.577C178.121 102 177.785 101.904 177.569 101.712C177.377 101.496 177.281 101.16 177.281 100.704V77.376C177.281 76.92 177.377 76.596 177.569 76.404C177.785 76.188 178.121 76.08 178.577 76.08H189.593C192.857 76.08 195.089 76.728 196.289 78.024C197.489 79.32 198.089 81.012 198.089 83.1V87.708C198.089 89.796 197.489 91.488 196.289 92.784C195.089 94.08 192.857 94.728 189.593 94.728H185.453V100.704C185.453 101.16 185.345 101.496 185.129 101.712C184.937 101.904 184.613 102 184.157 102ZM185.381 82.812V88.248H188.621C189.317 88.248 189.773 88.068 189.989 87.708C190.205 87.348 190.313 86.94 190.313 86.484V84.576C190.313 84.12 190.205 83.712 189.989 83.352C189.773 82.992 189.317 82.812 188.621 82.812H185.381ZM208.696 102H203.116C202.66 102 202.324 101.904 202.108 101.712C201.916 101.496 201.82 101.16 201.82 100.704V77.376C201.82 76.92 201.916 76.596 202.108 76.404C202.324 76.188 202.66 76.08 203.116 76.08H214.132C217.396 76.08 219.628 76.728 220.828 78.024C222.028 79.32 222.628 81.012 222.628 83.1V87.708C222.628 89.796 222.028 91.488 220.828 92.784C219.628 94.08 217.396 94.728 214.132 94.728H209.992V100.704C209.992 101.16 209.884 101.496 209.668 101.712C209.476 101.904 209.152 102 208.696 102ZM209.92 82.812V88.248H213.16C213.856 88.248 214.312 88.068 214.528 87.708C214.744 87.348 214.852 86.94 214.852 86.484V84.576C214.852 84.12 214.744 83.712 214.528 83.352C214.312 82.992 213.856 82.812 213.16 82.812H209.92Z"
-        fill="black"
+        fill={variant}
       />
     </svg>
   </SvgIcon>

pages/index.tsx

@@ -50,7 +50,8 @@ const HomePage: FC<HomePageProps> = observer(({ repositories, members }) => {
       <div className="px-4 py-6 pt-16">
         <section className="container mx-auto flex max-w-screen-lg flex-col gap-4">
           <div className="flex flex-row items-center justify-around py-12">
-            <BrandLogo style={{ width: '12rem', height: '12rem' }} />
+            <BrandLogo className="!h-48 !w-48 dark:!hidden" variant="black" />
+            <BrandLogo className="!hidden !h-48 !w-48 dark:!block" variant="white" />
 
             <header className="border-s-2 border-s-black p-4 dark:border-s-white">
               <p>{t('idea2app_summary')}</p>

public/idea2app.svg

@@ -30,5 +30,4 @@ div:has(.next-error-h1) {
 
 @utility scrollbar-none {
   scrollbar-width: none;
-}
-
+}