💅 Fix-styles

OpenZeppelin · Feb 20, 2024 · 8f1b998 · 8f1b998
1 parent 43023d0
commit 8f1b998
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 66 deletions.
diff --git a/client/src/containers/Header.js b/client/src/containers/Header.js
@@ -1,5 +1,5 @@
 import React from "react";
-import onClickOutside from 'react-onclickoutside'
+import onClickOutside from "react-onclickoutside";
 import { connect } from "react-redux";
 import { withRouter } from "../hoc/withRouter";
 import { Link } from "react-router-dom";
@@ -224,7 +224,7 @@ class Header extends React.Component {
 
   handleClickOutside = () => {
     this.closeDropdown();
-  }
+  };
 
   render() {
     let strings = loadTranslations(this.state.lang);
@@ -241,32 +241,27 @@ class Header extends React.Component {
       ar: strings.arabic,
       tr: strings.turkish,
     };
-    
+
     const ddOpen = Boolean(this.state.multiDDOpen);
     return (
-      <div onClick={() => this.closeDropdown()}>
-        <div>
-          <section className="descriptors" style={{paddingTop: '1rem', paddingLeft: '0.5rem', paddingRight: '0.5rem'}}>
-            <div className="boxes author-section-border" style={{marginTop: '0', marginBottom: '0', width: '100%', padding: '0'}}>
-              <div className="author-section text-center" style={{marginLeft: '0', marginBottom: '0', width: 'auto'}}>
-                <div style={{overflowWrap: 'anywhere'}}>
-                  <span style={{fontSize: 'larger'}}>
-                    {parse(strings.ctfInfo)}
-
-                    <a
-                      className="buttons"
-                      href="https://ctf.openzeppelin.com"
-                      style={{marginLeft: '0.5rem'}}
-                    >
-                      <button>{strings.ctfRegister}</button>
-                    </a>
-
-                  </span>
-                </div>
-              </div>
-            </div>
-          </section>
+      <div className="header-container" onClick={() => this.closeDropdown()}>
+        {/* <div className="lines">
+          <center>
+            <hr className="top" />
+          </center>
+          <center>
+            <hr className="top" />
+          </center>
+        </div> */}
+        <div className="top-banner">
+           <div className="top-banner-text">{parse(strings.ctfInfo)}</div>
+            <a
+              href="https://ctf.openzeppelin.com"
+            >
+              <button>{strings.ctfRegister}</button>
+            </a>
         </div>
+
         <center>
           <header>
             <ul className="header-ul">
@@ -331,14 +326,14 @@ class Header extends React.Component {
                     </div>
                     {window.location.pathname === constants.PATH_ROOT &&
                       !!this.props.web3 && (
-                        <Link   onClick={() => this.toggleDropdownState()}
-                        to={constants.PATH_LEADERBOARD}>
-                          <div
-                          className="element-in-row filled-icon">                                
-                                <LeaderIcon />
+                        <Link
+                          onClick={() => this.toggleDropdownState()}
+                          to={constants.PATH_LEADERBOARD}
+                        >
+                          <div className="element-in-row filled-icon">
+                            <LeaderIcon />
                           </div>
                         </Link>
-
                       )}
                     <input
                       onClick={() => {
@@ -360,26 +355,29 @@ class Header extends React.Component {
                     <span>{strings.Networks}</span>
                   </p>
                   <div className={this.getDDClassName(2)}>
-                    {Object.values(constants.NETWORKS_INGAME).map((network, index) => {
-                      if (network && network.name !== "local") {
-                        if (Number(network.id) === this.state.chainId)
-                          return false; // filter out current network
-                        return (
-                          <div key={index}
-                            onClick={(e) => {
-                              e.preventDefault();
-                              this.changeNetwork(network);
-                            }}
-                            className="dropdown-pill"
-                          >
-                            <a id={network.name} key={network.name} href="/">
-                              {network.name}
-                            </a>
-                          </div>
-                        );
+                    {Object.values(constants.NETWORKS_INGAME).map(
+                      (network, index) => {
+                        if (network && network.name !== "local") {
+                          if (Number(network.id) === this.state.chainId)
+                            return false; // filter out current network
+                          return (
+                            <div
+                              key={index}
+                              onClick={(e) => {
+                                e.preventDefault();
+                                this.changeNetwork(network);
+                              }}
+                              className="dropdown-pill"
+                            >
+                              <a id={network.name} key={network.name} href="/">
+                                {network.name}
+                              </a>
+                            </div>
+                          );
+                        }
+                        return null;
                       }
-                      return null;
-                    })}
+                    )}
                   </div>
                 </div>
 
@@ -390,7 +388,8 @@ class Header extends React.Component {
                   </p>
                   <div className={this.getDDClassName(1)}>
                     {Object.keys(LANGUAGES_MAP).map((languageString, index) => (
-                      <div key={index}
+                      <div
+                        key={index}
                         onClick={(e) => {
                           this.changeLanguage(e, languageString);
                         }}
@@ -470,4 +469,6 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(onClickOutside(Header)));
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(onClickOutside(Header))
+);
diff --git a/client/src/containers/Level.js b/client/src/containers/Level.js
@@ -150,9 +150,8 @@ class Level extends React.Component {
     const nextLevelId = findNextLevelId(this.props.level, this.props.levels);
 
     return (
-      <main>
-        <div className="lines"></div>
-        <main>
+      <main className="main-wrapper">
+        <main className="main-wrapper">
           {(isDescriptionMissingTranslation ||
             isCompleteDescriptionMissingTranslation) && (
               <div style={{ textAlign: "center" }}>

diff --git a/client/src/styles/app.css b/client/src/styles/app.css
@@ -114,13 +114,6 @@ hr {
   margin-top: 10px;
 }
 
-.top {
-  border: none;
-  border-top: 1px solid var(--secondary-color);
-  height: 1px;
-  align-items: center;
-}
-
 h2 {
   font-size: 14px;
   padding: 1% 10% 0% 10%;
@@ -149,6 +142,38 @@ button :hover {
   background-color: var(--primary-color);
 }
 
+.header-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.top {
+  border: none;
+  border-top: 1px solid var(--secondary-color);
+  height: 1px;
+  align-items: center;
+}
+
+
+.top-banner {
+  display: flex;
+  gap: 10%;
+  align-items: center;
+  justify-content: space-between;
+   width: 100%;
+  height: 80px;
+  border-radius: 6px;
+  border: 2px solid var(--secondary-color);
+  margin-bottom: 4%;
+  margin-top: 2%;
+  padding: 2%
+}
+
+.top-banner-text {
+  display: block;
+  overflow-wrap: break-word;
+}
+
 header {
   display: flex;
   justify-content: space-between;
@@ -157,7 +182,7 @@ header {
 }
 
 .header-ul {
-  padding: 4px 0px;
+  padding: 0px 0px;
   margin-bottom: 0;
 }
 
@@ -171,13 +196,12 @@ nav li {
 
 .nav-links {
   display: inline-block;
-  padding: 4px;
+  padding: 0px;
 }
 
 .nav-links a {
   color: var(--secondary-color);
   text-decoration: none;
-  padding-right: 5px;
   font-family: helvetica, sans-serif;
 }
 
@@ -312,6 +336,13 @@ nav li {
   margin-top: 1%;
 }
 
+.main-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
 .game {
   display: flex;
   flex-wrap: wrap;
@@ -522,7 +553,7 @@ footer {
 
 /* --------- styles for multi dropdowns --------------*/
 .multi-dropdown{
-  padding: 4px 9px;
+  padding: 0% 0px;
 }
 
 .multi-dropdown__icon{