feat: improve icons with pro icon pack

ayan4m1 · Jun 15, 2024 · 64e6a94 · 64e6a94
1 parent b005617
commit 64e6a94
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 91 deletions.
diff --git a/.github/workflows/gatsby.yml b/.github/workflows/gatsby.yml
@@ -75,7 +75,11 @@ jobs:
           key: ${{ runner.os }}-gatsby-build-${{ hashFiles('public') }}
           restore-keys: |
             ${{ runner.os }}-gatsby-build-
+      - name: Restore .npmrc
+        run: cp .npmrc.ci .npmrc
       - name: Install dependencies
+        env:
+          FONTAWESOME_PACKAGE_TOKEN: ${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Gatsby
         env:

diff --git a/.npmrc.ci b/.npmrc.ci
@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^2.3.0",
     "@react-spring/web": "^9.7.3",

diff --git a/src/components/header.js b/src/components/header.js
@@ -8,12 +8,12 @@ import {
   faMoon,
   faNewspaper,
   faSwatchbook,
-  faRectangleList,
   faMaximize,
   faSun,
   faTable,
   faWrench
 } from '@fortawesome/free-solid-svg-icons';
+import { faGameBoard, faGrid } from '@fortawesome/pro-solid-svg-icons';
 
 import NavLink from 'components/nav/link';
 import NavDropdown from 'components/nav/dropdown';
@@ -75,12 +75,8 @@ export default function Header() {
             />
             <NavLink icon={faHeart} label="Things I Love" topLevel to="/love" />
             <NavDropdown icon={faGamepad} title="Games">
-              <NavLink to="/games/sudoku" icon={faTable} label="Sudoku" />
-              <NavLink
-                to="/games/mahjong"
-                icon={faRectangleList}
-                label="Mahjong"
-              />
+              <NavLink to="/games/sudoku" icon={faGrid} label="Sudoku" />
+              <NavLink to="/games/mahjong" icon={faGameBoard} label="Mahjong" />
               <NavLink
                 to="/games/coloree"
                 icon={faSwatchbook}

diff --git a/src/components/sudoku/board.js b/src/components/sudoku/board.js
@@ -22,6 +22,7 @@ import {
   faFolderOpen,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
+import { faGrid } from '@fortawesome/pro-solid-svg-icons';
 
 import SudokuCell from 'components/sudoku/cell';
 import TimeViewer from 'components/timeViewer';
@@ -142,7 +143,9 @@ export default function SudokuBoard({ mode }) {
       <Container fluid>
         <Row>
           <Col xs={8}>
-            <h1>Sudoku</h1>
+            <h1>
+              <FontAwesomeIcon icon={faGrid} /> Sudoku
+            </h1>
           </Col>
           {mode === 'timed' && (
             <Col xs={4} className="d-flex align-items-center">

diff --git a/src/pages/games/mahjong.js b/src/pages/games/mahjong.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import { Container, Row, Col } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGameBoard } from '@fortawesome/pro-solid-svg-icons';
 
 import Layout from 'components/layout';
 import MahjongBoard from 'components/mahjong/board';
@@ -13,7 +15,9 @@ export default function MahjongPage({ data }) {
       <Container>
         <Row>
           <Col>
-            <h1>Mahjong</h1>
+            <h1>
+              <FontAwesomeIcon icon={faGameBoard} /> Mahjong
+            </h1>
           </Col>
         </Row>
         <Row>

diff --git a/src/pages/utilities/scale-converter.js b/src/pages/utilities/scale-converter.js
@@ -1,5 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
+import {
+  faArrowRightLong,
+  faMaximize
+} from '@fortawesome/free-solid-svg-icons';
 import {
   Button,
   Card,
@@ -41,87 +44,104 @@ export default function ScaleConverterPage() {
       description="Convert between units using a scaling factor/ratio."
     >
       <Container>
-        <h1 className="mt-2">Convert</h1>
-        <span>
-          Specify a scale, then enter one or more expressions. Each expression
-          will be scaled appropriately. If you enter an expression such as
-          &quot;100 mm in ft,&quot; the scaled value will be converted into the
-          target unit.
-        </span>
-        <Card body className="my-2">
-          <Form onSubmit={handleSubmit}>
-            <Form.Group as={Row} className="mb-2">
-              <Form.Label column sm={2} htmlFor="denominator">
-                Scale
-              </Form.Label>
-              <Col sm={10}>
-                <InputGroup style={{ width: 125 }}>
-                  <InputGroup.Text>1 :</InputGroup.Text>
-                  <Form.Control
-                    id="denominator"
-                    type="number"
-                    onChange={onChangeDenominator}
-                    defaultValue={denominator}
-                    style={{ textAlign: 'right' }}
-                  />
-                </InputGroup>
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row} className="mb-2">
-              <Form.Label column sm={2} htmlFor="conversion">
-                Expression
-              </Form.Label>
-              <Col sm={10}>
-                <Form.Control
-                  id="conversion"
-                  type="text"
-                  name="conversion"
-                  placeholder='"100 mm", "10 m in ft"'
-                  onChange={handleChange}
-                  value={values.conversion}
-                  isInvalid={Boolean(errors.conversion)}
-                />
-                <Form.Control.Feedback type="invalid">
-                  {errors.conversion}
-                </Form.Control.Feedback>
-              </Col>
-            </Form.Group>
-            <Form.Group className="d-flex justify-content-end">
-              <Button type="submit" variant="success">
-                Convert
-              </Button>
-            </Form.Group>
-          </Form>
-        </Card>
-        <Card body className="my-2">
-          <Card.Title>
-            <Row>
-              <Col xs={8}>History</Col>
-              <Col xs={4} className="d-flex justify-content-end">
-                <Button variant="danger" onClick={clearEntries}>
-                  Clear
-                </Button>
-              </Col>
-            </Row>
-          </Card.Title>
-          <Row>
-            {entries.length ? (
-              entries.map((entry) => (
-                <Col xs={12} key={entry.id}>
-                  <span>
-                    {entry.value} {entry.unit}
-                  </span>
-                  <FontAwesomeIcon icon={faArrowRightLong} className="mx-3" />
-                  <span>
-                    {entry.result.toFixed(2)} {entry.targetUnit}
-                  </span>
-                </Col>
-              ))
-            ) : (
-              <Col xs={12}>No entries.</Col>
-            )}
-          </Row>
-        </Card>
+        <Row>
+          <Col>
+            <h1>
+              <FontAwesomeIcon icon={faMaximize} /> Convert Scale
+            </h1>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <Card body variant="info" className="my-2">
+              Specify a scale, then enter one or more expressions. Each
+              expression will be scaled appropriately. If you enter an
+              expression such as &quot;100 mm in ft,&quot; the scaled value will
+              be converted into the target unit.
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <Card body className="my-2">
+              <Form onSubmit={handleSubmit}>
+                <Form.Group as={Row} className="mb-2">
+                  <Form.Label column sm={2} htmlFor="denominator">
+                    Scale
+                  </Form.Label>
+                  <Col sm={10}>
+                    <InputGroup style={{ width: 125 }}>
+                      <InputGroup.Text>1 :</InputGroup.Text>
+                      <Form.Control
+                        id="denominator"
+                        type="number"
+                        onChange={onChangeDenominator}
+                        defaultValue={denominator}
+                        style={{ textAlign: 'right' }}
+                      />
+                    </InputGroup>
+                  </Col>
+                </Form.Group>
+                <Form.Group as={Row} className="mb-2">
+                  <Form.Label column sm={2} htmlFor="conversion">
+                    Expression
+                  </Form.Label>
+                  <Col sm={10}>
+                    <Form.Control
+                      id="conversion"
+                      type="text"
+                      name="conversion"
+                      placeholder='"100 mm", "10 m in ft"'
+                      onChange={handleChange}
+                      value={values.conversion}
+                      isInvalid={Boolean(errors.conversion)}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {errors.conversion}
+                    </Form.Control.Feedback>
+                  </Col>
+                </Form.Group>
+                <Form.Group className="d-flex justify-content-end">
+                  <Button type="submit" variant="success">
+                    Convert
+                  </Button>
+                </Form.Group>
+              </Form>
+            </Card>
+            <Card body className="my-2">
+              <Card.Title>
+                <Row>
+                  <Col xs={8}>History</Col>
+                  <Col xs={4} className="d-flex justify-content-end">
+                    <Button variant="danger" onClick={clearEntries}>
+                      Clear
+                    </Button>
+                  </Col>
+                </Row>
+              </Card.Title>
+              <Row>
+                {entries.length ? (
+                  entries.map((entry) => (
+                    <Col xs={12} key={entry.id}>
+                      <span>
+                        {entry.value} {entry.unit}
+                      </span>
+                      <FontAwesomeIcon
+                        icon={faArrowRightLong}
+                        className="mx-3"
+                      />
+                      <span>
+                        {entry.result.toFixed(2)} {entry.targetUnit}
+                      </span>
+                    </Col>
+                  ))
+                ) : (
+                  <Col xs={12}>No entries.</Col>
+                )}
+              </Row>
+            </Card>
+          </Col>
+        </Row>
       </Container>
     </Layout>
   );