Minor UI fixes (#87)

CaptainIRS · ElzaCS · web-flow · commit d47ff8e8e8d6 · 2021-04-01T17:44:00.000+05:30
* Minor UI fixes

* Fix contacts table alignment

* Hack to fix leaderboard column width

* Update src/app/components/ReactTour.tsx (Review)

Co-authored-by: Anu John &lt;anuejohn@gmail.com&gt;

* Update src/app/components/ReactTour.tsx (Review)

Co-authored-by: Anu John &lt;anuejohn@gmail.com&gt;

* Fix story modal title

Co-authored-by: Anu John &lt;anuejohn@gmail.com&gt;
diff --git a/__tests__/app/containers/__snapshots__/SideBar.test.tsx.snap b/__tests__/app/containers/__snapshots__/SideBar.test.tsx.snap
@@ -1002,13 +1002,13 @@ exports[`SideBar Container Should render 1`] = `
                       icon={
                         Object {
                           "icon": Array [
-                            512,
+                            576,
                             512,
                             Array [],
-                            "f05a",
-                            "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
+                            "f015",
+                            "M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z",
                           ],
-                          "iconName": "info-circle",
+                          "iconName": "home",
                           "prefix": "fas",
                         }
                       }
@@ -1026,16 +1026,16 @@ exports[`SideBar Container Should render 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        className="svg-inline--fa fa-info-circle fa-w-16 "
-                        data-icon="info-circle"
+                        className="svg-inline--fa fa-home fa-w-18 "
+                        data-icon="home"
                         data-prefix="fas"
                         role="img"
                         style={Object {}}
-                        viewBox="0 0 512 512"
+                        viewBox="0 0 576 512"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+                          d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"
                           fill="currentColor"
                           style={Object {}}
                         />
@@ -1053,15 +1053,15 @@ exports[`SideBar Container Should render 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="svg-inline--fa fa-info-circle fa-w-16 "
-                      data-icon="info-circle"
+                      class="svg-inline--fa fa-home fa-w-18 "
+                      data-icon="home"
                       data-prefix="fas"
                       role="img"
-                      viewBox="0 0 512 512"
+                      viewBox="0 0 576 512"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+                        d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"
                         fill="currentColor"
                       />
                     </svg>
diff --git a/src/app/components/Leaderboard/LeaderboardElement.tsx b/src/app/components/Leaderboard/LeaderboardElement.tsx
@@ -274,8 +274,8 @@ export class LeaderboardElement extends React.Component<
                     }}
                     title={player.username}
                   >
-                    <span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 15)}${
-                      player.username.length > 15 ? '...' : ''
+                    <span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 20)}${
+                      player.username.length > 20 ? '...' : ''
                     }`}</span>
                   </div>
                   <div
diff --git a/src/app/components/Leaderboard/index.tsx b/src/app/components/Leaderboard/index.tsx
@@ -195,8 +195,12 @@ export class Leaderboard extends React.Component<
 
             <Table responsive>
               <thead className={classnames('py-2 pl-3', styles.leaderboardTitle)}>
-                <th className="text-light font-weight-bold my-auto">RANK</th>
-                <th className="text-light font-weight-bold my-auto">NAME</th>
+                <th className="text-light font-weight-bold my-auto" style={{ width: 1 }}>
+                  RANK
+                </th>
+                <th className="text-light font-weight-bold my-auto" style={{ width: 1 }}>
+                  NAME
+                </th>
                 <th className="text-light font-weight-bold my-auto">RATING</th>
                 <th className="text-light font-weight-bold my-auto">WON</th>
                 <th className="text-light font-weight-bold my-auto">TIED</th>
diff --git a/src/app/components/PopUpMenu.tsx b/src/app/components/PopUpMenu.tsx
@@ -37,7 +37,7 @@ export default class PopUpMenu extends React.Component<{}, ElementOwnProps> {
           <div onClick={this.togglePopUp}>
             <FontAwesomeIcon icon={faTimes} className={classnames(styles['close-icon'])} />
           </div>
-          <a href="https://code.pragyan.org/docs" target="_blank">
+          <a href="https://code.pragyan.org/docs/" target="_blank">
             <div className={classnames(styles['menu-item'], styles['menu-item-pragyan'])}>
               <div className={classnames(styles['menu-icon-documentation'])}>
                 <FontAwesomeIcon icon={faBook} />
@@ -49,7 +49,7 @@ export default class PopUpMenu extends React.Component<{}, ElementOwnProps> {
             <div className={classnames(styles['menu-item'], styles['menu-item-documentation'])}>
               <div>
                 <img
-                  src="https://www.pragyan.org/21/cms/templates/common/site/images/favicon.ico"
+                  src="https://www.pragyan.org/21/cms/templates/common/favicon.ico"
                   alt="pragyan"
                   width="25px"
                   height="22px"
diff --git a/src/app/components/ReactTour.tsx b/src/app/components/ReactTour.tsx
@@ -159,6 +159,22 @@ const tourConfig: ReactourStep[] = [
     position: 'bottom',
     selector: '[id="submit_button"]',
   },
+  {
+    content: () => (
+      <div>
+        <h6>Quest</h6>
+        <p className={classnames(styles['step-description'])}>
+          With the help of Quest mode, you can learn the game from absolute
+          scratch.
+          <br />
+          There are various levels of increasing difficulty. Each level has a 3 star rating,
+          which lets you know how competitive your code was against that particular bot.
+        </p>
+      </div>
+    ),
+    position: 'bottom',
+    selector: '[id="quest_button"]',
+  },
   {
     content: () => (
       <div>
diff --git a/src/app/components/SideBar.tsx b/src/app/components/SideBar.tsx
@@ -4,7 +4,7 @@ import {
   faCode,
   faCodeBranch,
   faCog,
-  faInfoCircle,
+  faHome,
   faQuestionCircle,
   faSignInAlt,
   faSignOutAlt,
@@ -185,7 +185,7 @@ export class Sidebar extends React.Component<SideBarInterfaces.Props, {}> {
               to="/home"
               onClick={() => clearAllLogs()}
             >
-              <FontAwesomeIcon icon={faInfoCircle} />
+              <FontAwesomeIcon icon={faHome} />
             </Link>
           </Tooltip>
           <Tooltip title="Take a tour" placement="right">
diff --git a/src/app/components/StoryModeModal.tsx b/src/app/components/StoryModeModal.tsx
@@ -18,7 +18,7 @@ export class StoryModeModal extends React.Component<StoryModalPropType.Props, {}
         <Modal.Header>
           <Modal.Title>
             <div style={{ margin: 0 }}>
-              <b>Level {level} !! </b>
+              <b>Level {level}</b>
               {[...Array(stars >= 0 ? stars : 0)].map(() => (
                 <FontAwesomeIcon icon={faStar} style={{ color: 'gold' }} />
               ))}
diff --git a/src/app/components/SubmitBar/DropDownItem.tsx b/src/app/components/SubmitBar/DropDownItem.tsx
@@ -19,6 +19,7 @@ export class DropDownItem extends React.Component<DropDownItemInterfaces.Props,
               setCurrentLevel(Number(level), rating);
               toggleStoryModeModal(Number(level));
             }}
+            style={{ cursor: 'pointer' }}
           >
             <span>LVL {level}</span>
             <DeltaStarCount rating={rating} />
diff --git a/src/app/components/home/Footer.tsx b/src/app/components/home/Footer.tsx
@@ -21,31 +21,37 @@ export const Footer: React.FunctionComponent = () => {
       <div className={classnames('container-fluid', style.footer_head)}>
         <footer className="container py-5">
           <div className="row justify-content-md-around">
-            <div className="col col-md-3">
+            <div className="col col-md-6">
               <h5>Contact</h5>
-              <ul className="list-unstyled text-small">
-                <Table>
-                  <tbody>
-                    <tr onClick={() => copyToClipboard('9994479069')}>
-                      <td>Mandeep</td>
-                      <td>9994479069</td>
-                    </tr>
-                    <tr onClick={() => copyToClipboard('9566541342')}>
-                      <td>Kumaran</td>
-                      <td>9566541342</td>
-                    </tr>
-                  </tbody>
-                </Table>
-              </ul>
+              <Table className="contact-table">
+                <tbody>
+                  <tr onClick={() => copyToClipboard('9790432692')}>
+                    <td>Lakshmanan R</td>
+                    <td>9790432692</td>
+                  </tr>
+                  <tr onClick={() => copyToClipboard('8879672720')}>
+                    <td>Rigved</td>
+                    <td>8879672720</td>
+                  </tr>
+                  <tr onClick={() => copyToClipboard('8130964865')}>
+                    <td>Yash</td>
+                    <td>8130964865</td>
+                  </tr>
+                  <tr onClick={() => copyToClipboard('9884052296')}>
+                    <td>Ram T N</td>
+                    <td>9884052296</td>
+                  </tr>
+                </tbody>
+              </Table>
             </div>
             <div className="col col-md-3">
               <h5>Quick Links</h5>
               <ul className="list-unstyled text-small">
                 <li>
-                  <Link to="/">Home</Link>
+                  <Link to="/">Dashboard</Link>
                 </li>
                 <li>
-                  <a href="https://code.pragyan.org/docs">Documentation</a>
+                  <a href="https://code.pragyan.org/docs/">Documentation</a>
                 </li>
                 <li>
                   <a href="https://www.pragyan.org/21/home/events/bytehoc/code_character/">
diff --git a/src/app/components/home/LandingPage.tsx b/src/app/components/home/LandingPage.tsx
@@ -19,7 +19,7 @@ export class LandingPage extends React.Component<LandingPageInterfaces.Props, {}
     },
     {
       answer:
-        'Yes! Code Character is played completely on the web. However, we provide functionality for you to write code offline on your own text editor and compile the code. For more details, check out the player docs <a href="https://code.pragyan.org/docs">code.pragyan.org/docs</a>',
+        'Yes! Code Character is played completely on the web. However, we provide functionality for you to write code offline on your own text editor and compile the code. For more details, check out the player docs <a href="https://code.pragyan.org/docs/">code.pragyan.org/docs/</a>',
       question: 'Is the event completely online?',
     },
     {
@@ -74,7 +74,7 @@ export class LandingPage extends React.Component<LandingPageInterfaces.Props, {}
               </ul>
               <p>
                 Go through the{' '}
-                <a href="https://code.pragyan.org/docs" target="_blank">
+                <a href="https://code.pragyan.org/docs/" target="_blank">
                   docs
                 </a>{' '}
                 and start playing!
diff --git a/src/app/data/questData.ts b/src/app/data/questData.ts
@@ -1,4 +1,4 @@
-const urlToDocs = 'https://delta.nitt.edu/codecharacter-docs/';
+const urlToDocs = 'https://code.pragyan.org/docs/';
 
 export const levels = [
   {
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -29,6 +29,7 @@ export const App = hot(module)(() => (
         <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
         <Route path={Routes.USER_ACTIVATION} component={ActivateUser} />
         <Route exact path={Routes.HOME} component={LandingPage} />
+        <Route component={Dashboard} />
       </Switch>
     </BrowserRouter>
   </React.Fragment>
diff --git a/src/app/styles/Footer.module.css b/src/app/styles/Footer.module.css
@@ -70,3 +70,7 @@ textarea {
   color: yellowgreen;
   text-decoration: none;
 }
+
+:global(.contact-table *) {
+  text-align: left !important;
+}

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export class DropDownItem extends React.Component<DropDownItemInterfaces.Props,`
`19`	`19`	`setCurrentLevel(Number(level), rating);`
`20`	`20`	`toggleStoryModeModal(Number(level));`
`21`	`21`	`}}`
	`22`	`+ style={{ cursor: 'pointer' }}`
`22`	`23`	`>`
`23`	`24`	`<span>LVL {level}</span>`
`24`	`25`	`<DeltaStarCount rating={rating} />`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const urlToDocs = 'https://delta.nitt.edu/codecharacter-docs/';`
	`1`	`+const urlToDocs = 'https://code.pragyan.org/docs/';`
`2`	`2`
`3`	`3`	`export const levels = [`
`4`	`4`	`{`
Original file line number	Diff line number	Diff line change
`@@ -70,3 +70,7 @@ textarea {`
`70`	`70`	`color: yellowgreen;`
`71`	`71`	`text-decoration: none;`
`72`	`72`	`}`
	`73`	`+`
	`74`	`+:global(.contact-table *) {`
	`75`	`+ text-align: left !important;`
	`76`	`+}`