Fix the Flag bug

src/app/components/Authentication/Register.tsx

@@ -335,7 +335,7 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
                   </div>
                   <div
                     className={classnames('form-row', authStyles['avatar-select-form-row'])}
-                    style={{ padding: '10px 0px', fontFamily: 'Poppins' }}
+                    style={{ padding: '10px 0px', fontFamily: 'Karla' }}
                   >
                     <div className={classnames(authStyles['login-label'])}>
                       Choose your spirit animal

src/app/components/ErrorBoundary.tsx

@@ -24,7 +24,7 @@ export class ErrorBoundary extends React.Component<
         <div style={{ width: '100%', minWidth: '280px' }}>
           <Row>
             <Col sm={12} className="text-center">
-              <h2 style={{ fontFamily: 'Courier New', color: '#f9ee80', margin: 50 }}>
+              <h2 style={{ fontFamily: 'Karla', color: '#f9ee80', margin: 50 }}>
                 {'Uh Oh... Something went wrong!'}
               </h2>
             </Col>

src/app/components/Renderer.tsx

@@ -62,7 +62,7 @@ export default class Renderer extends React.Component<RendererInterfaces.Props,
             </Row>
             <Row>
               <Col sm={12} className="text-center">
-                <h2 style={{ fontFamily: 'Courier New', color: '#f9ee80', margin: 30 }}>
+                <h2 style={{ fontFamily: 'Karla', color: '#f9ee80', margin: 30 }}>
                   Waiting to run your code...
                 </h2>
               </Col>

src/app/components/SubmitBar/index.tsx

@@ -1,11 +1,11 @@
 import {
   faChevronLeft,
   faChevronRight,
-  faCloud,
   faCodeBranch,
   faCog,
   faLock,
   faPlay,
+  faSave,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -154,7 +154,7 @@ export class SubmitBar extends React.Component<
         ) : null}
         <button className={classnames(styles.customBtn)} onClick={saveCode} id="save_button">
           <span className={classnames(styles.icon)}>
-            <FontAwesomeIcon icon={faCloud} />
+            <FontAwesomeIcon icon={faSave} />
           </span>
           <span>SAVE</span>
         </button>

src/app/styles/Authentication.module.css

@@ -159,6 +159,7 @@
   background-color: #fee5d4;
   padding: 9px;
   margin-top: 0;
+  text-align: left;
 }
 .register-error {
   background-color: #fee5d4;
@@ -184,7 +185,7 @@
   text-align: left;
   margin-bottom: 3px;
   font-weight: bold;
-  font-family: 'Poppins';
+  font-family: 'Karla', sans-serif;
 }
 
 .root {
@@ -195,10 +196,10 @@
 .welcomeBack {
   margin-top: 57px;
   margin-bottom: 10px;
-  font-family: 'Poppins', sans-serif;
+  font-family: 'Karla', sans-serif;
 }
 .pragyan-login {
-  font-family: 'Poppins';
+  font-family: 'Karla', sans-serif;
   font-size: 12px;
   margin-top: 0;
 }
@@ -281,7 +282,7 @@
 
 .loginButton {
   background-color: #4630eb !important ;
-  margin-top: 10px;
+  margin-top: 30px;
   width: 100%;
 }
 
@@ -303,7 +304,7 @@
   box-shadow: none;
 }
 .registerMessage {
-  font-family: 'Poppins';
+  font-family: 'Karla', sans-serif;
 }
 
 .stage-div {
@@ -318,8 +319,7 @@
 .button-tab {
   position: relative;
   height: 50px;
-
-  font-family: 'Poppins';
+  font-family: 'Karla', sans-serif;
 }
 
 .button-tab-next {
@@ -393,7 +393,7 @@
   width: 34%;
   margin: auto;
   cursor: pointer;
-  font-family: 'Poppins';
+  font-family: 'Karla', sans-serif;
   padding: 0;
 }
 .multi-steps > li {

src/app/styles/Flags.css

@@ -1,13 +1,12 @@
 .flag-select {
-  display: flex !important;
   align-items: center !important;
   width: 100% !important;
   border: 1px solid black !important;
   text-align: left !important;
 }
 
-.flag-options {
-  margin-top: 100px !important;
+.selected--flag--option {
+  margin-top: 2px;
 }
 
 .flag-select img {

src/app/styles/Pagination.css

@@ -36,7 +36,7 @@
   padding: 0px 8px;
   color: white;
   font-size: 13px;
-  font-family: sans-serif;
+  font-family: 'Karla', sans-serif;
   text-decoration: none;
   font-weight: 400;
   user-select: none;

src/app/styles/Register.module.css

@@ -70,6 +70,6 @@ input:checked + .flaglabel:after {
 .labeltext {
   color: rgba(0, 0, 32, 0.8);
   font-size: 14px;
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Karla', sans-serif;
   font-weight: 600;
 }

src/app/styles/SubmitBar.module.css

@@ -1,4 +1,5 @@
 .SubmitBar {
+  user-select: none;
   width: 100%;
   padding: 8px;
   background: #292929;

src/app/styles/UserProfileModal.module.css

@@ -131,7 +131,7 @@
 .formHeading {
   padding: 0px 10px;
   font-size: 30px;
-  font-family: 'Poppins', sans-serif;
+  font-family: 'Karla', sans-serif;
   text-align: center;
   margin-bottom: 5%;
   margin-left: -1px;

src/assets/index.css

@@ -0,0 +1,3 @@
+#root {
+  font-family: 'Karla', sans-serif;
+}

src/assets/index.html

@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8">
     <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
     <title>Code Character</title>
   </head>
   <body>

src/main.tsx

@@ -6,6 +6,7 @@ import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router';
 import { App } from './app';
+import './assets/index.css';
 // prepare store
 const history = createBrowserHistory();
 const { store, persistor } = configureStore();