feat(cip-1694): restyle intro page

ui/cip-1694/package.json

@@ -14,6 +14,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@textea/json-viewer": "^3.0.0",
     "@types/uuid": "^9.0.2",
+    "classnames": "^2.3.2",
     "history": "^5.3.0",
     "json-canonicalize": "^1.0.6",
     "moment": "^2.29.4",

ui/cip-1694/src/App.tsx

@@ -1,34 +1,33 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import { Layout } from 'components/common/Layout/Layout';
 import Content from './components/common/Content/Content';
-import Footer from './components/common/Footer/Footer';
-import Header from './components/common/Header/Header';
-import './App.scss';
+import { Footer } from './components/common/Footer/Footer';
+import { Header } from './components/common/Header/Header';
+import theme from './common/styles/theme';
 
-function App() {
-  return (
-    <>
-      <div className="App">
-        <Router>
-          <Header />
-          <Content />
-          <Footer />
-          <Toaster
-            toastOptions={{
-              // TODO: let's deside on the approach we use: either the inline styles or className?
-              className: '',
-              style: {
-                borderRadius: '10px',
-                background: '#030321',
-                color: '#fff',
-              },
-            }}
-          />
-        </Router>
-      </div>
-    </>
-  );
-}
-
-export default App;
+export const App = () => (
+  <ThemeProvider theme={theme}>
+    <Router>
+      <Layout>
+        <Header />
+        <Content />
+        <Footer />
+        <Toaster
+          toastOptions={{
+            className: '',
+            style: {
+              borderRadius: '10px',
+              background: '#030321',
+              color: '#fff',
+            },
+          }}
+        />
+        <CssBaseline />
+      </Layout>
+    </Router>
+  </ThemeProvider>
+);

ui/cip-1694/src/common/constants/localConstants.ts

@@ -1,4 +1,3 @@
 export const USER_SESSION_KEY = 'userInSession';
-// TODO: do we nned to think about localizations?
 export const TECHNICAL_ERROR = 'Sorry, Voting App has encountered a technical issue, please try again later.';
 export const USER_LOCAL_STORAGE_KEY = 'USER_LOCAL_STORAGE_KEY';

ui/cip-1694/src/common/handlers/httpHandler.ts

@@ -174,7 +174,7 @@ async function execute<T>(
   body?: string,
   useAuth?: boolean
 ) {
-  // TODO: useAuth is not used in executeRequest?
+  // FIXME: useAuth is not used in executeRequest?
   console.log(useAuth);
   return await executeRequest<T>(url, method, headers, body).catch((err) => {
     throw err;

ui/cip-1694/src/common/routes/index.tsx

@@ -1,25 +1,27 @@
 import React from 'react';
-import {
-  Route,
-  Routes
-} from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import IntroductionPage from '../../pages/Introduction/Introduction';
 import VotePage from '../../pages/Vote/Vote';
 
 export const PAGE_PATH = '/';
 
 export const ROUTES = {
   INTRO: `${PAGE_PATH}`,
-  // TODO: won't you get '//vote' here?
-  VOTE: `${PAGE_PATH}/vote`
+  VOTE: '/vote',
 };
 
 const PageRouter = () => {
   return (
     <>
       <Routes>
-        <Route path={ROUTES.INTRO} element={<IntroductionPage />} />
-        <Route path={ROUTES.VOTE} element={<VotePage />} />
+        <Route
+          path={ROUTES.INTRO}
+          element={<IntroductionPage />}
+        />
+        <Route
+          path={ROUTES.VOTE}
+          element={<VotePage />}
+        />
       </Routes>
     </>
   );

ui/cip-1694/src/components/CountDownTimer/CountDownTimer.module.scss

@@ -0,0 +1,9 @@
+.container {
+  color: #1d439b;
+  text-align: right;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+}

ui/cip-1694/src/components/CountDownTimer/CountDownTimer.tsx

@@ -1,17 +1,9 @@
 import React from 'react';
 import moment from 'moment';
-import { useTimer } from 'react-timer-hook';
+import styles from './CountDownTimer.module.scss'
 
 export default function CountDownTimer() {
-  const time = new Date();
-  const endTime = moment('09-01-2023', 'MM-DD-YYYY'); // summit date
-  time.setSeconds(time.getSeconds() + endTime.diff(time, 'seconds')); // time left for summit date
+  const endTime = moment('09-01-2023', 'MM-DD-YYYY').format('D MMMM YYYY, h:mm a'); // summit date
 
-  const { seconds, minutes, hours, days } = useTimer({ expiryTimestamp: time });
-
-  return (
-    <div data-testid="count-down-timer">
-      <span>{days} days</span>, <span>{hours} hours</span>, <span>{minutes} minutes</span>, <span>{seconds} secs</span>
-    </div>
-  );
+  return <div className={styles.container} data-testid="count-down-timer">Voting closes: <b>{endTime}</b></div>;
 }

ui/cip-1694/src/components/IntroSlides/IntroSlides.scss

@@ -2,30 +2,11 @@
 @import "swiper/css/autoplay";
 
 .slides {
-  padding-inline: 10px;
-
   .swiper-slide {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
-    h2 {
-      margin-bottom: 1vh;
-      margin-top: 1vh;
-      text-align: center;
-    }
-
-    p {
-      text-align: center;
-      color: var(--color-secondary);
-    }
-
-    img {
-      height: auto;
-      margin-bottom: 2vh;
-      border-radius: 16px;
-    }
   }
 
   // Style the pagination
@@ -98,4 +79,4 @@
       transform: translateY(0);
     }
   }
-}
+}