Merge pull request #30 from pishposh/mg-refactor-header

Refactor header
pishposh · Nov 7, 2024 · d27bf9c · d27bf9c
2 parents 03aea81 + 550d869
commit d27bf9c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { InfoDialog } from './components/InfoDialog';
 import { PicketSign } from './components/PicketSign';
 import { ResultsDialog } from './components/ResultsDialog';
 import { Scoreboard } from './components/Scoreboard';
+import { TextOrIcon } from './components/TextOrIcon';
 import { Game, NewGame } from './game';
 
 function App() {
@@ -54,20 +55,16 @@ function App() {
   return (
     <>
       <Header>
-        <a href="https://nytimesguild.org/tech/guild-builds/">More Games</a>
+        <a href="https://nytimesguild.org/tech/guild-builds/">
+          <TextOrIcon icon="👾" text="More Games" />
+        </a>
 
-        <span
-          className="link-alike"
-          onClick={() => setInfoDialogOpen(!infoDialogOpen)}
-        >
-          What’s this?
-        </span>
-        <span
-          className="link-alike"
-          onClick={() => setGameSettingsOpen(!gameSettingsOpen)}
-        >
-          Settings
-        </span>
+        <button onClick={() => setInfoDialogOpen(!infoDialogOpen)}>
+          <TextOrIcon icon="❓" text="What's this?" />
+        </button>
+        <button onClick={() => setGameSettingsOpen(!gameSettingsOpen)}>
+          <TextOrIcon icon="⚙️" text="Settings" />
+        </button>
         {gameSettingsOpen && (
           <GameSettings
             onClose={() => setGameSettingsOpen(false)}

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -6,28 +6,37 @@
 }
 
 #header a {
-  text-decoration: underline;
+  &:has(.toi-icon) {
+    text-decoration: unset;
+  }
+  .toi-text {
+    text-decoration: underline;
+  }
 }
 
 .header-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
+  justify-content: space-between;
 
   > div {
-    width: 100%;
+    width: 33%;
     display: flex;
     align-items: center;
   }
 
   > div.header-title {
     justify-content: center;
     font-size: x-large;
+    min-width: 145px;
   }
 
   > div.header-links {
     justify-content: end;
-    & > a, & > .link-alike {
-      margin-left: 1rem;
+
+    button {
+      margin-left: 0.5rem;
+      padding: 0.25rem;
+      background-color: inherit;
     }
   }
 }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -4,13 +4,11 @@ import './Header.css';
 export const Header = ({ children }: PropsWithChildren) => (
   <header id="header">
     <div className="header-container">
-      <div />
+      <div className="header-spacer" />
       <div className="header-title">
         <b>Match Strike</b>
       </div>
-      <div className="header-links">
-        {children}
-      </div>
+      <div className="header-links">{children}</div>
     </div>
   </header>
 );
diff --git a/src/components/TextOrIcon/TextOrIcon.css b/src/components/TextOrIcon/TextOrIcon.css
@@ -0,0 +1,14 @@
+@media (min-width: 910px) {
+  .toi-icon {
+    display: none;
+  }
+}
+
+@media (max-width: 910px) {
+  .toi-icon {
+    font-size: x-large;
+  }
+  .toi-text {
+    display: none;
+  }
+}
diff --git a/src/components/TextOrIcon/index.tsx b/src/components/TextOrIcon/index.tsx
@@ -0,0 +1,12 @@
+import './TextOrIcon.css';
+
+export const TextOrIcon = ({ text, icon }: { text: string; icon: string }) => (
+  <>
+    <span className="toi-text" aria-label={text}>
+      {text}
+    </span>
+    <span className="toi-icon" aria-label={text}>
+      {icon}
+    </span>
+  </>
+);