Fixed broken blinking cursor in homepage and manual views.

gbmhunter · Jun 23, 2024 · 3b2534b · 3b2534b
1 parent 89810f2
commit 3b2534b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added support for the ESC[1J, ESC[2J and ESC[3J "Erase in Display" ASCII escape codes (ESC[0J was already supported).
 - Added a "Manual" page to the app, which contains the start of a user manual for NinjaTerm.
 
+### Fixed
+
+- Cosmetic cursor at the end of the blurb now blinks again on homepage.
+
 ### Changed
 
 - Switched from a CJS to ESM build in vite. CJS build is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more info.

diff --git a/src/Homepage/HomepageView.css b/src/Homepage/HomepageView.css
@@ -7,6 +7,18 @@
   /* height: 15px; */
 }
 
+@keyframes blink {
+  0% {
+    background-color: #222;
+  }
+  50% {
+    background-color: white;
+  }
+  100% {
+    background-color: #222;
+  }
+}
+
 h2 {
   margin-bottom: 10px;
 }
diff --git a/src/Homepage/HomepageView.tsx b/src/Homepage/HomepageView.tsx
@@ -77,7 +77,6 @@ export default observer((props: Props) => {
       <Box
         sx={{
           boxSizing: 'border-box',
-          // backgroundColor: '#000000',
           height: '100%',
           width: '100%',
           display: 'flex',

diff --git a/src/Manual/ManualView.css b/src/Manual/ManualView.css
@@ -7,6 +7,18 @@
   /* height: 15px; */
 }
 
+@keyframes blink {
+  0% {
+    background-color: #222;
+  }
+  50% {
+    background-color: white;
+  }
+  100% {
+    background-color: #222;
+  }
+}
+
 h2 {
   margin-bottom: 10px;
 }
diff --git a/src/Manual/ManualView.tsx b/src/Manual/ManualView.tsx
@@ -10,7 +10,6 @@ import {
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import TwitterIcon from '@mui/icons-material/Twitter';
 import HomeIcon from '@mui/icons-material/Home';
 import Grid from '@mui/material/Unstable_Grid2';
 
@@ -41,10 +40,18 @@ const darkTheme = createTheme({
   typography: {
     // Default of 14 was a little small for the landing page, 16 works well
     fontSize: 14,
+    h1: {
+      color: logoColor,
+      fontSize: 48,
+      marginBottom: '10px',
+    },
     h2: {
       color: logoColor,
       fontSize: 32,
-      marginBottom: '10px',
+    },
+    h3: {
+      color: logoColor,
+      fontSize: 24,
     },
   },
   components: {
@@ -112,13 +119,13 @@ export default observer((props: Props) => {
           </Grid>
           <Grid xs={12} sx={{ height: '20px' }} />
 
-          <h1>NinjaTerm Manual</h1>
+          <Typography variant="h1">NinjaTerm Manual</Typography>
 
-          <h2>ANSI Escape Codes</h2>
+          <Typography variant="h2">ANSI Escape Codes</Typography>
 
           <p>NinjaTerm supports a number of the most popular ASCII escape codes for manipulating the terminal. They are commonly used for colouring/styling text (e.g. making errors red), moving the cursor around and deleting data (e.g. clearing the screen, or re-writing an existing row). These features are very useful when making interactive prompts.</p>
 
-          <h3>Erase in Display (ESC[nJ)</h3>
+          <Typography variant="h3">Erase in Display (ESC[nJ)</Typography>
 
           <p>
             The current rows in view are ignored when performing Erase in Display commands, as the user could be viewing old data in the scrollback buffer while the cursor is still