styling

EthanBonsignori · Jun 15, 2024 · a3316d5 · a3316d5
1 parent 9e8f190
commit a3316d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/client/src/index.css b/client/src/index.css
@@ -7,14 +7,21 @@ body {
   padding: 0;
 }
 
-.caution-tape {
+.wip-warning {
+  position: relative;
   color: #fff;
   background-color: crimson;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
-.caution-tape a {
+.wip-warning div {
+  padding: 10px;
+  font-size: 1.2rem;
+}
+
+.wip-warning a {
   text-decoration: underline;
 }
 
@@ -30,11 +37,18 @@ body {
   gap: 40px;
 }
 
-.hero-section img {
+.hero-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 500px;
 }
 
+.typed {
+  color: #f27d42;
+}
+
 .hero-text h2 {
   font-size: 2.5rem;
   font-weight: 700;

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -18,9 +18,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <div className="caution-tape">
-          ⚠️ This site is a work in progress and many features may not work yet!
-          &nbsp;
+        <div className="wip-warning">
+          <div>⚠️</div>&nbsp;This site is a work in progress. Many features may
+          not work yet! &nbsp;
           <a target="_blank" href="https://github.com/EthanBonsignori/uservote">
             View it on GitHub.
           </a>

diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
@@ -39,11 +39,13 @@ const Root: FC = () => {
   return (
     <Layout>
       <div className="hero-section">
-        <img src={feedbackImg} alt="UserVote" className="hero-image" />
+        <div className="hero-image-container">
+          <img src={feedbackImg} alt="UserVote" className="hero-image" />
+        </div>
         <div className="hero-text">
           <Typography variant="h2">Collect feedback.</Typography>
           <Typography variant="h2">
-            Engage your <span className="" ref={typedRef} />
+            Engage your <span className="typed" ref={typedRef} />
           </Typography>
           <Typography>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do