Fix bootstrap migration changes

PalisadoesFoundation · Jun 29, 2023 · ce5cbda · ce5cbda
1 parent e6c14df
commit ce5cbda
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/UserPortal/Login/Login.module.css b/src/components/UserPortal/Login/Login.module.css
@@ -18,3 +18,12 @@
 .colorWhite {
   color: white;
 }
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.colorPrimaryHover:hover {
+  background: #31bb6b;
+  border: none;
+}
diff --git a/src/components/UserPortal/Login/Login.tsx b/src/components/UserPortal/Login/Login.tsx
@@ -96,7 +96,9 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
             value={loginVariables.email}
             onChange={handleEmailChange}
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <EmailOutlinedIcon className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -109,7 +111,9 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
             value={loginVariables.password}
             onChange={handlePasswordChange}
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <LockOutlined className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -121,11 +125,17 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
         </Link>
       </div>
 
-      <Button variant="success" onClick={handleLogin} data-testid="loginBtn">
+      <Button
+        className={`${styles.colorPrimary} ${styles.borderNone}`}
+        variant="success"
+        onClick={handleLogin}
+        data-testid="loginBtn"
+      >
         {t('login')}
       </Button>
       <hr />
       <Button
+        className={`${styles.colorPrimaryHover}`}
         variant="outline-success"
         onClick={handleModeChangeToRegister}
         data-testid="setRegisterBtn"

diff --git a/src/components/UserPortal/Register/Register.module.css b/src/components/UserPortal/Register/Register.module.css
@@ -9,3 +9,7 @@
 .colorWhite {
   color: white;
 }
+
+.colorPrimary {
+  background: #31bb6b;
+}
diff --git a/src/components/UserPortal/Register/Register.tsx b/src/components/UserPortal/Register/Register.tsx
@@ -127,7 +127,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
             onChange={handleFirstName}
             data-testid="firstNameInput"
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <BadgeOutlinedIcon className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -140,7 +142,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
             onChange={handleLastName}
             data-testid="lastNameInput"
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <BadgeOutlinedIcon className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -154,7 +158,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
             onChange={handleEmailChange}
             data-testid="emailInput"
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <EmailOutlinedIcon className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -168,7 +174,9 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
             onChange={handlePasswordChange}
             data-testid="passwordInput"
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <LockOutlined className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
@@ -182,12 +190,15 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
             onChange={handleConfirmPasswordChange}
             data-testid="confirmPasswordInput"
           />
-          <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
             <LockOutlined className={`${styles.colorWhite}`} />
           </InputGroup.Text>
         </InputGroup>
       </div>
       <Button
+        className={`${styles.colorPrimary} ${styles.borderNone}`}
         variant="success"
         onClick={handleRegister}
         data-testid="registerBtn"

diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.module.css b/src/components/UserPortal/UserNavbar/UserNavbar.module.css
@@ -15,3 +15,7 @@
 .colorWhite {
   color: white;
 }
+
+.colorPrimary {
+  background: #31bb6b;
+}
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -29,10 +29,8 @@ function userNavbar(): JSX.Element {
 
   return (
     <Navbar
-      expand="lg"
       variant="dark"
-      bg="success"
-      className={styles.boxShadow}
+      className={`${styles.boxShadow} ${styles.colorPrimary}`}
     >
       <Container fluid>
         <Navbar.Brand href="#">
@@ -46,7 +44,7 @@ function userNavbar(): JSX.Element {
 
         <Navbar.Toggle />
         <Navbar.Collapse className="justify-content-end">
-          <Dropdown data-testid="languageDropdown" drop="left">
+          <Dropdown data-testid="languageDropdown" drop="start">
             <Dropdown.Toggle
               variant="white"
               id="dropdown-basic"
@@ -71,14 +69,14 @@ function userNavbar(): JSX.Element {
                 >
                   <span
                     className={`fi fi-${language.country_code} mr-2`}
-                  ></span>
+                  ></span>{' '}
                   {language.name}
                 </Dropdown.Item>
               ))}
             </Dropdown.Menu>
           </Dropdown>
 
-          <Dropdown drop="left">
+          <Dropdown drop="start">
             <Dropdown.Toggle
               variant="white"
               id="dropdown-basic"

diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
@@ -38,3 +38,7 @@
 .containerHeight {
   height: calc(100vh - 61px);
 }
+
+.colorPrimary {
+  background: #31bb6b;
+}
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -125,12 +125,15 @@ export default function organizations(): JSX.Element {
                 onChange={handleSearch}
                 data-testid="searchInput"
               />
-              <InputGroup.Text className={`bg-success ${styles.borderNone}`}>
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderNone}`}
+              >
                 <SearchOutlined className={`${styles.colorWhite}`} />
               </InputGroup.Text>
             </InputGroup>
-            <Dropdown>
+            <Dropdown drop="down-centered">
               <Dropdown.Toggle
+                className={`${styles.colorPrimary} ${styles.borderNone}`}
                 variant="success"
                 id="dropdown-basic"
                 data-testid={`modeChangeBtn`}

diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -53,7 +53,7 @@ export default function userLoginPage(): JSX.Element {
               disabled={currentLanguageCode === language.code}
               data-testid={`changeLanguageBtn${index}`}
             >
-              <span className={`fi fi-${language.country_code} mr-2`}></span>
+              <span className={`fi fi-${language.country_code} mr-2`}></span>{' '}
               {language.name}
             </Dropdown.Item>
           ))}