adjusted search and manual insertion layout

MadrHacks · Jul 12, 2023 · a725f53 · a725f53
1 parent 935bf32
commit a725f53
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/src/next/components/manualSubmission.tsx b/src/next/components/manualSubmission.tsx
@@ -49,19 +49,15 @@ class ManualSubmission extends Component<Props, State> {
 
   render() {
     return (
-      <div className="col-lg-4 mt-3">
+      <div className="col-lg-4">
         <div className="card border-light">
           <div className="card-body">
-            <h4 className="card-title">Add Flags Manually</h4>
-            <label>
-              Text with flags
-              <small className="text-muted ml-2">
-                flag format: {this.props.gameInfo.flagFormat}
-              </small>
-            </label>
+            <h4 className="card-title">Manual flag submit</h4>
+            <label></label>
             <textarea
-              className="form-control form-control-sm mb-3 text-with-flags"
+              className="form-control form-control-sm mb-3 mt-2 text-with-flags"
               onChange={this.onTextChange}
+              placeholder={"flag format: " + this.props.gameInfo.flagFormat}
               value={this.state.text}
             ></textarea>
             <button className="btn btn-primary btn-sm" onClick={this.onSendClick}>

diff --git a/src/next/components/navBar.tsx b/src/next/components/navBar.tsx
@@ -5,7 +5,7 @@ class NavBar extends Component {
     return (
       <nav className="navbar navbar-expand-lg navbar-dark bg-dark py-0">
         <img className="logo" src="/public/img/madr-logo.svg" />
-        <div className="navbar-brand">MadrHacks Farmer</div>
+        <div className="navbar-brand">MadrFarm</div>
       </nav>
     );
   }

diff --git a/src/next/components/search.tsx b/src/next/components/search.tsx
@@ -138,17 +138,17 @@ class Search extends Component<Props, State> {
       <div className="col-lg-8">
         <div className="card border-light">
           <div className="card-body">
-            <h4 className="card-title">Show Flags</h4>
+            <h4 className="card-title">Search</h4>
             <div className="row mb-2">
               <div className="col-md-4">
-                <label>Service</label>
+                <label>Exploit</label>
                 <select
                   className="form-control form-control-sm"
-                  onChange={this.onSelectService}
-                  value={this.state.service}
+                  onChange={this.onSelectExploit}
+                  value={this.state.exploit}
                 >
-                  <option value="">All</option>
-                  {this.props.searchValues.services.map((value, i) => {
+                  <option value="">name</option>
+                  {this.props.searchValues.exploits.map((value, i) => {
                     return (
                       <option key={i} value={value}>
                         {value}
@@ -157,15 +157,15 @@ class Search extends Component<Props, State> {
                   })}
                 </select>
               </div>
-              <div className="col-md-4">
-                <label>Exploit</label>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <select
                   className="form-control form-control-sm"
-                  onChange={this.onSelectExploit}
-                  value={this.state.exploit}
+                  onChange={this.onSelectService}
+                  value={this.state.service}
                 >
-                  <option value="">All</option>
-                  {this.props.searchValues.exploits.map((value, i) => {
+                  <option value="">service</option>
+                  {this.props.searchValues.services.map((value, i) => {
                     return (
                       <option key={i} value={value}>
                         {value}
@@ -174,14 +174,14 @@ class Search extends Component<Props, State> {
                   })}
                 </select>
               </div>
-              <div className="col-md-4">
-                <label>Team</label>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <select
                   className="form-control form-control-sm"
                   onChange={this.onSelectTeam}
                   value={this.state.team}
                 >
-                  <option value="">All</option>
+                  <option value="">team</option>
                   {this.props.searchValues.teams.map((value, i) => {
                     return (
                       <option key={i} value={value}>
@@ -191,64 +191,70 @@ class Search extends Component<Props, State> {
                   })}
                 </select>
               </div>
-              <div className="col-md-4">
-                <label>Flag</label>
-                <input
-                  type="text"
-                  className="form-control form-control-sm"
-                  value={this.state.flag}
-                  id="flag"
-                  onChange={this.onTextInputChanged}
-                />
-              </div>
             </div>
             <div className="row mb-3">
-              <div className="col-md-3">
-                <label>Since</label>
+              <div className="col-md-4">
+                <label>Time</label>
                 <div>
                   <DatePicker
                     className="form-control form-control-sm"
                     selected={this.state.since}
                     onChange={date => this.onDateChanged('since', date)}
+                    placeholderText="since"
                     timeInputLabel="Time:"
                     dateFormat="HH:mm"
                     showTimeInput={true}
                     shouldCloseOnSelect={false}
                   />
                 </div>
               </div>
-              <div className="col-md-3">
-                <label>Until</label>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <div>
                   <DatePicker
                     className="form-control form-control-sm"
                     selected={this.state.until}
                     onChange={date => this.onDateChanged('until', date)}
+                    placeholderText="until"
                     timeInputLabel="Time:"
                     dateFormat="HH:mm"
                     showTimeInput={true}
                     shouldCloseOnSelect={false}
                   />
                 </div>
               </div>
-              <div className="col-md-3">
-                <label>Tick</label>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <input
                   type="text"
                   className="form-control form-control-sm"
+                  placeholder="tick"
                   value={this.state.tick}
                   id="tick"
                   onChange={this.onTextInputChanged}
                 />
               </div>
-              <div className="col-md-2">
-                <label>Status</label>
+            </div>
+            <div className="row mb-4">
+              <div className="col-md-4">
+                <label>Misc</label>
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="flag"
+                  value={this.state.flag}
+                  id="flag"
+                  onChange={this.onTextInputChanged}
+                />
+              </div>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <select
                   className="form-control form-control-sm"
                   onChange={this.onSelectStatus}
                   value={this.state.status}
                 >
-                  <option value="">All</option>
+                  <option value="">status</option>
                   {this.props.searchValues.statuses.map((value, i) => {
                     return (
                       <option key={i} value={value}>
@@ -258,11 +264,12 @@ class Search extends Component<Props, State> {
                   })}
                 </select>
               </div>
-              <div className="col-md-4">
-                <label>Checksystem response</label>
+              <div className="col-md-4 mt-2">
+                <label></label>
                 <input
                   type="text"
                   className="form-control form-control-sm"
+                  placeholder="checksystem response"
                   value={this.state.checksystemResponse}
                   id="checksystemResponse"
                   onChange={this.onTextInputChanged}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -92,7 +92,7 @@ export default class extends Component<Props> {
     return (
       <>
         <Head>
-          <title>MadrHacks Farmer</title>
+          <title>MadrFarm</title>
           <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         </Head>
         <NavBar />